/*
  Common styles for all iframes
*/
.responsive-iframe {
  width: 100%;      /* Fill whole window */
  border: none;     /* Removes the default border */
  margin: 0 0 0 0;  /* Removes the default margin */
}

/* Custom styles for specific forms */
.contact-form {
  height: 1284px; /* Custom height for Contact Form */
}

.architectureCopilotFeedback-form {
  height: 2920px; /* Custom height for Architecture Copilot Feedback Form */
}

.architectureCopilotPreview-form {
  height: 2942px; /* Custom height for Architecture Copilot Preview Form */
}

/*
  Clean Layout
*/

/* Remove borders from the header and footer */
header, footer {
  border: none;
}

/* Remove box-shadows if they are used */
body, .wrapper {
  box-shadow: none;
}

/* If lines are applied as top or bottom borders in the main content */
main {
  border-top: none;
  border-bottom: none;
}

/* Hide the mobile nav trigger checkbox */
.nav-trigger {
  display: none;
}

/* Hide the label for the nav trigger, which contains the hamburger icon */
.site-nav label {
  display: none;
}

/* This will hide empty list items */
li:empty {
  display: none;
}

/* Specifically targeting any '.p-name' class that might be empty */
.p-name {
  display: none;
}

body { /* Website Style */
  font-family: 'Helvetica', 'Arial', sans-serif;
}

/* Table styles */

table#noborder td {
  border: none;
  vertical-align: top;
}

.fixed-table {
  table-layout: fixed;
  width: 100%;
}

/*
  Responsive image styles
*/
.img-full-width {
  width: 100%;
  height: auto;
}

.img-half-width {
  width: 50%;
  height: auto;
}

/*
  iframe container for YouTube
*/
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
  Navigation Menu
*/

/* Make sure there are no borders, shadows, or backgrounds */
.nav, .nav-container, 
.nav-item .nav-item.active, .nav-item.active.nav-link,
.nav-link, .nav-link:hover, .nav-link:active, .nav-link:focus {
  border: none;     /* Removes all borders */
  box-shadow: none; /* Removes any shadows if present */
  background: none; /* Ensures no backgrounds are applied */
}

.nav {              /* Top-level nav */
  display: flex;
  flex-wrap: wrap;  /* This allows the menu items to wrap onto the next line on small screens */
  align-items: left;/* Ensures vertical alignment is left */
  padding: 2px;     /* Add vertical padding for better optics */
  font-family: Helvetica, Arial, sans-serif;
  list-style-type: none;
}

/*
  Nav box colours
*/
.nav > .nav-item > .nav-link {
  background-color: #6294bd; /* Cognivirtus Matt Blue */
  color: white; /* Adjust text color as needed */
}

/* Sub-menu navigation links */
.nav .nav-item .nav > .nav-item > .nav-link {
  background-color: #b99dc7; /* Cognivirtus Matt Purple */
  color: white; /* Adjust text color as needed */
}

.nav-item {
  margin:  2px;
  padding: 2px;     /* Add padding to increase the clickable area and aesthetics */
}

.nav-link {
  display: block;
  padding: 8px 15px;     /* Adjust padding to ensure text is centered and has some spacing */
  text-decoration: none; /* Removes underline from links */
  border-radius: 10px;   /* Rounded corners, adjust the px value to increase/decrease roundness */
}

.nav-link:hover {
  font-weight: bold;     /* Bold text on hover */
}

.nav > li.nav-item { /* This selector targets only top-level nav-items */
  display:  flex; /* Flex to allow vertical centering */
  flex-direction: column;
  /* border-radius: 2px; */
  margin:   2px;
  padding:  2px; /* Adjust padding to increase the clickable area and aesthetics */
}

/* Ensure that the sub-menu items do not inherit the min-height */
.nav .nav-item .nav {     /* This targets the nested nav within nav-items */
  display: flex;
  flex-direction: row;    /* Change this line */
  min-height: auto;       /* Overrides any inherited min-height */
}

.nav .nav-item .nav li {  /* Targeting sub-menu nav-items specifically */
  min-height: auto;       /* Resets any specific height, allowing content size */
  padding: 2px;           /* Smaller padding for sub-menu items */
}


@media (max-width: 768px) {
  .nav-item {
    margin: 1px;      /* Smaller margin for mobile */
    padding: 1px; /* Smaller padding for mobile */
  }
  .nav-link {
    font-size: 12px;  /* Adjust as needed */
  }

  .nav > li.nav-item {
    margin: 1px;      /* Smaller margin for compact spacing */
    padding: 1px;     /* Reduced padding for smaller screens */
  }

  .nav .nav-item .nav li {
    margin: 1px;      /* Smaller margin for compact spacing */
    padding: 1px;     /* Adjusted for sub-items */
  }
}