/* ========== NAV.CSS ========== */


/* Header & Nav Container */
#site-header {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* wrap is the safety net if content is ever wider than expected (font
     metrics, zoom level) even after the width/spacing budget below — better
     a rare second row than nav items silently spilling past the viewport. */
  flex-wrap: wrap;
  /* Widened from 1440px: the 11-item nav (What We Do / Advisory dropdowns,
     Construction & Infrastructure, Projects, etc.) needs more horizontal
     budget than the original ~9-item nav this width was tuned for. */
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  background: #ffffff;
}

/* ===== LOGO ===== */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.nav-logo:hover {
  opacity: 0.85;
}

.logo-img {
  max-height: 98px;      /* desktop: 98px as requested */
  width: auto;
  display: block;
  object-fit: contain;
}

.logo-fallback {
  display: flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: 1px;
}

.logo-text-main {
  font-size: 1.9rem;
  color: #0a2540;
  font-weight: 800;
}

.logo-text-sub {
  font-size: 1.3rem;
  font-weight: 500;
  color: #2b6e9e;
  margin-left: 4px;
}

/* ===== DESKTOP NAV LINKS (horizontal) ===== */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 0.7rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e2f3e;
  text-decoration: none;
  border-radius: 40px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  background: #f0f4f8;
  color: #0f5b8c;
}

.nav-cta {
  background: #0f5b8c;
  color: white;
  border-radius: 40px;
  padding: 0.6rem 1.3rem;
  margin-left: 0.25rem;
}

.nav-cta:hover {
  background: #0a466b;
  color: white;
}

/* Dropdown container (desktop) */
.nav-dropdown {
  position: relative;
}

/* chevron icons */
.chevron-icon, .submenu-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* Desktop: dropdown menu (level 1) */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  min-width: 240px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  list-style: none;
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 1050;
}

/* Wide variant: lays long menus (e.g. Advisory) out in two columns so the
   dropdown doesn't extend far enough down the page to cover the hero.
   Gated to the same breakpoint as the rest of desktop nav so it doesn't
   fight the mobile accordion's display:none between 769-1700px. */
@media (min-width: 1701px) {
  .dropdown-menu.dropdown-menu--wide {
    min-width: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
    padding: 0.6rem 0.5rem;
    /* Anchor from the right, not the left: this trigger sits near the right
       end of the nav row, so a left-anchored 480px-wide menu would hang off
       the viewport edge (inflating page scrollWidth even while closed, since
       visibility:hidden elements still occupy layout space). */
    left: auto;
    right: 0;
  }
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* dropdown items */
.dropdown-item {
  position: relative;
}

.dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  color: #1f3b4c;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.dropdown-link:hover {
  background: #f5f9ff;
  color: #0f5b8c;
}

/* Submenu (level 2) desktop */
.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background: white;
  min-width: 220px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  list-style: none;
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: all 0.2s ease;
  z-index: 1060;
}

.dropdown-item.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-link {
  display: block;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: #2c4b63;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.submenu-link:hover {
  background: #f0f6fd;
  color: #0f5b8c;
}

/* Mobile toggle button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s;
  z-index: 1100;
}

.nav-toggle:hover {
  background: #f0f2f5;
}

/* mobile backdrop */
.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  z-index: 980;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

/* ========== MOBILE/SLIDE-OUT NAV STYLES (max-width: 1700px) ==========
   Raised from 768px because the expanded 11-item nav (What We Do / Advisory
   dropdowns, Construction & Infrastructure, Projects, etc.) overflows and
   clips the Contact button on common laptop widths (1366px, 1440px) if kept
   as a single horizontal row down to 768px. */
@media (max-width: 1700px) {
  .nav-container {
    padding: 0.75rem 1.25rem;
    flex-wrap: nowrap;
  }

  /* Logo adjustment mobile */
  .logo-img {
    max-height: 48px;    /* clean mobile size */
  }
  .logo-text-main {
    font-size: 1.4rem;
  }
  .logo-text-sub {
    font-size: 1rem;
  }

  /* toggle button visible */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* Navigation menu: hidden by default, slide-in */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 360px;
    background: white;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem 1.2rem 2rem 1.2rem;
    margin: 0;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    z-index: 1000;
    overflow-y: auto;
    display: flex !important;
    visibility: visible;
  }

  .nav-links.active {
    transform: translateX(0);
  }

  /* all main nav links same height & block style */
  .nav-links li {
    width: 100%;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid #edf2f7;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.75rem;
    white-space: normal;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0;
    background: transparent;
    min-height: 54px;      /* ensures equal height for all main links */
    display: flex;
    align-items: center;
  }

  .nav-link:hover {
    background: transparent;
  }

  /* cta on mobile */
  .nav-cta {
    background: #0f5b8c;
    margin-top: 0.5rem;
    border-radius: 60px;
    justify-content: center;
    text-align: center;
  }

  /* Dropdown menu (mobile) : collapsed by default */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: #f9fbfd;
    border-radius: 16px;
    margin: 0 0 0.5rem 0;
    padding: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    transition: none;
  }

  /* show dropdown when parent .nav-dropdown has 'expanded' class */
  .nav-dropdown.expanded > .dropdown-menu {
    display: block;
  }

  /* submenu (level2) mobile */
  .submenu {
    position: static;
    box-shadow: none;
    background: #ffffff;
    border-radius: 14px;
    margin: 0 0 0.5rem 0.75rem;
    padding: 0;
    width: calc(100% - 0.75rem);
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .has-submenu.expanded > .submenu {
    display: block;
  }

  .dropdown-link, .submenu-link {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .dropdown-link {
    justify-content: space-between;
  }

  /* chevron rotation on mobile when expanded */
  .nav-dropdown.expanded > .dropdown-trigger .chevron-icon {
    transform: rotate(180deg);
  }

  .has-submenu.expanded > .submenu-trigger .submenu-arrow {
    transform: rotate(90deg);
  }

  /* backdrop active */
  .nav-backdrop.active {
    opacity: 1;
    visibility: visible;
  }
}

/* small tablet fine tuning */
@media (min-width: 1701px) {
  /* ensure any leftover expanded classes don't affect desktop */
  .nav-dropdown.expanded .dropdown-menu,
  .has-submenu.expanded .submenu {
    display: none;
  }
  .nav-dropdown.expanded > .dropdown-menu {
    display: none;
  }
  .nav-links.active {
    transform: none;
  }
  .nav-backdrop {
    display: none;
  }
}

/* accessibility & focus ring */
.nav-link:focus-visible, .dropdown-link:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid #0f5b8c;
  outline-offset: 2px;
}

/* icon animations */
.nav-toggle svg {
  width: 26px;
  height: 26px;
  stroke: #1e2f3e;
  stroke-width: 1.8;
  transition: all 0.2s;
}