/* ============================================
   NAVIGATION — shared across all pages.
   Default state: white nav bar. Homepage overrides
   for a transparent-over-hero state (see home.css).
   ============================================ */

/* Skip-link: still in the DOM and still focusable for screen-reader /
   keyboard users, but every paint surface (text, background, outline,
   shadow, border) is transparent — sighted users never see it, even
   when it receives focus. */
.skip-link,
.skip-link:focus,
.skip-link:hover {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 10000;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

/* ----- Nav shell -----
   The <nav> itself is an invisible positioning host that spans the full
   viewport width but has no visual chrome of its own and ignores pointer
   events outside the inner pill (so clicks in the side-gaps fall through
   to the page content below).

   The .container inside is the visible "floating pill" — frosted glass,
   capped at 1180px, with a hard fallback to solid white if backdrop-filter
   isn't supported. */
.nav {
  position: fixed;
  top: 16px;
  left: 0;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
  transition: top var(--t-base) var(--ease-soft);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  max-width: 1360px;
  width: calc(100% - 32px);
  height: 52px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  /* The glass (tint + blur) is painted on .container::before, NOT the container
     itself — so the container carries no backdrop-filter and the position:fixed
     mobile slide-out menu (a descendant) isn't trapped in a blurred ancestor's
     layer on iOS Safari. Material values still match the coming-soon form card. */
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  transition: background var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              height var(--t-base) var(--ease-soft),
              /* Radius snaps rather than tweens. On CLOSE it waits for the panel
                 to finish collapsing (delay) before un-squaring, so the bar
                 never shows a rounded bottom while the panel is still visible. */
              border-radius 0s linear var(--t-base);
}

/* Glass surface: tint + blur on a pseudo-element behind the bar's content.
   z-index:-1 keeps it under the logo/links but inside the nav's stacking context
   (above the page). Because the container has no backdrop-filter, it isn't a
   containing block / stacking context, so the fixed slide-out menu (z-index:1000)
   still stacks above the dark overlay (z-index:998). */
.nav .container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(18,30,54,0.78);
  transition: background var(--t-base) var(--ease-soft);
}

@media (max-width: 900px) {
  .nav .container { height: 48px; }
}
@media (max-width: 480px) {
  .nav .container { height: 44px; }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav .container::before {
    background: rgba(18,30,54,0.34);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
  }
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 76px;
  display: block;
}

/* Scroll-state mark: the compact dove icon. Sized smaller than the 76px
   horizontal wordmark so it sits comfortably within the bar. */
.nav-logo img.nav-logo-icon {
  height: 54px;
}

/* Keep the logo comfortably inside the pill across the whole hamburger range.
   Both logo files (wordmark + scroll-state dove icon) are square with the mark
   filling most of the canvas, so an oversized height spills above/below the bar.
   Each height stays a few px under the container height (52 / 48 / 44) at that
   breakpoint. The more-specific .nav-logo-icon selector is repeated so the dove
   icon is capped too — otherwise its base 54px wins over a plain `.nav-logo img`
   mobile rule and it keeps overflowing. */
@media (max-width: 1100px) {
  .nav-logo img,
  .nav-logo img.nav-logo-icon { height: 44px; }
}

@media (max-width: 900px) {
  .nav-logo img,
  .nav-logo img.nav-logo-icon { height: 40px; }
}

@media (max-width: 480px) {
  .nav-logo img,
  .nav-logo img.nav-logo-icon { height: 36px; }
}

/* ----- Main link cluster ----- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links > a {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  /* Explicit per-axis so the .nav-cta override on horizontal padding can win
     without losing the specificity battle to a `padding: 12px 0` shorthand. */
  padding-top: 9px;
  padding-bottom: 9px;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-soft), font-weight var(--t-base) var(--ease-soft);
  position: relative;
}

.nav-links > a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--t-base) var(--ease-soft);
}

.nav-links > a:hover::after { width: 50%; }
.nav-links > a.active::after { width: 100%; }
.nav-links > a.active { font-weight: 700; }

/* ----- Auxiliary cluster (phone + portal) ----- */
.nav-aux {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 4px;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.18);
}

.nav-aux a {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease-soft);
  padding: 12px 0;
}

.nav-aux a:hover { color: var(--white); }
.nav-aux a::after { display: none !important; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-phone svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Contact CTA (pill button in nav)
   Sits inline with the link cluster, so it must match their visual height.
   Slim padding + 1px border + filled state keeps it crisp at 0.8rem. ----- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 11px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  color: var(--white) !important;
  margin-left: 8px;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), color var(--t-base) var(--ease-soft);
}

.nav-cta:hover {
  background: var(--accent-hover, #213c5a);
  border-color: var(--accent-hover, #213c5a);
  color: var(--white) !important;
}

.nav-cta::after { display: none !important; }

/* ----- Hamburger toggle (44x44 touch target) ----- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 12px;
  margin: -12px -12px -12px 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-soft), opacity var(--t-base) var(--ease-soft), background var(--t-base) var(--ease-soft);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 998;
  /* parent .nav uses pointer-events: none for the side-gap click-through;
     the overlay must opt back in so tap-to-close works */
  pointer-events: auto;
}

/* ----- Mobile menu (raised to 1100px so the 7-link + aux + CTA cluster
   never has to fight for horizontal space on tablets / smaller laptops) ----- */
@media (max-width: 1100px) {
  /* The glass blur lives on .container::before (not the container), so the fixed
     slide-out menu is no longer trapped in a blurred ancestor on iOS Safari — the
     bar keeps the same frosted glass as desktop on mobile, and the menu still
     stacks above the dark overlay. */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    /* Above the dark page overlay (z-index 998) so the panel stays solid white
       instead of being dimmed grey by it; still below the toggle (1001). */
    z-index: 1000;
    background: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
    padding: 64px 32px 32px;
    transition: right var(--t-base) var(--ease-soft);
    box-shadow: -4px 0 28px rgba(0,0,0,0.12);
    overflow-y: auto;
  }
  .nav-links.open { right: 0; }
  /* The mobile slide-out is a solid white panel, so its links revert to dark
     ink (the desktop light-on-glass color would be invisible here). */
  .nav-links > a { font-size: 1rem; padding: 12px 0; color: var(--charcoal); }

  .nav-aux {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-left: 0;
    margin-top: 12px;
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    width: 100%;
  }
  .nav-aux a {
    font-size: 0.95rem;
    color: var(--charcoal);
    padding: 8px 0;
  }
  .nav-phone svg { width: 16px; height: 16px; }

  /* `.nav-links > a` (above) forces `padding: 12px 0` on direct-child links,
     which would zero the CTA's horizontal padding. Use a higher-specificity
     selector (0,2,0 beats that rule's 0,1,1) to restore generous side padding
     so the pill isn't cramped in the slide-out. */
  .nav-links > .nav-cta {
    margin-left: 0;
    margin-top: 8px;
    width: auto;
    align-self: flex-start;
    padding-left: 30px;
    padding-right: 30px;
  }

  .nav-toggle { display: flex; z-index: 1001; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  /* When the menu is open, the X sits over the white slide-out panel, so it
     flips to dark ink (the closed hamburger stays white over the hero). */
  .nav-toggle.open span { background: var(--charcoal); }

  .nav-overlay.open { display: block; }
}

/* ============================================
   MEGA MENU — one shared full-width panel that drops on nav hover/focus.
   Lives inside <nav> so moving from the bar into the panel doesn't close it.
   Hidden ≤1100px, where the hamburger overlay takes over.
   ============================================ */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1360px;
  margin-top: -3px;                 /* tuck under the pill so they read as one shape */
  /* Identical dark-navy glass to the pill (.nav .container) so the bar and panel
     are one seamless glass surface — same tint, same blur. */
  background: rgba(18,30,54,0.78);
  border: 1px solid rgba(255,255,255,0.22);
  border-top: none;
  /* Panel bottom corners use --r-xl (28px) to match the pill's rendered corner
     (--r-pill caps to ~26px on the 52px bar), so the card keeps the pill's
     radius. --r-pill itself can't be reused here — on a tall panel it balloons
     into a giant curve. */
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-lg, 0 26px 50px rgba(26,26,26,0.14));
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;             /* .nav is pointer-events:none — re-enable when open */
  transition: max-height var(--t-base) var(--ease-soft),
              opacity var(--t-fast) var(--ease-soft),
              visibility var(--t-base) var(--ease-soft);
  z-index: 5;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-mega {
    background: rgba(18,30,54,0.34);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
  }
}

.nav-mega.open {
  max-height: 380px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* When open, the pill's top corners are pinned to --r-xl (28px) to match the
   panel's bottom corners, so the assembled card is a uniform 28px all around.
   (Left as --r-pill they'd render ~42px on the taller open bar.) The bottom
   corners square off so the pill flows into the panel below — together they
   read as one card. Background/blur stay the frosted glassmorphism.

   It also grows tall enough to contain the 76px logo: at the resting 52px the
   logo overflows onto the panel below, where the more-opaque panel glass washes
   out the white (non-scrolled) wordmark. Growing the bar keeps the whole logo
   on the translucent pill glass, so it stays legible. */
.nav.mega-open .container {
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Square the bottom the instant the panel opens (no radius delay here), so the
     bar and panel read as one shape from the first frame — no momentary
     rounded-bottom pill while materializing over the hero. */
  transition: background var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              height var(--t-base) var(--ease-soft),
              border-radius 0s linear 0s;
}

/* Only the over-hero state shows the tall 76px wordmark, so only it needs the
   taller bar to contain the logo. Once scrolled, the compact dove icon fits the
   normal height. */
.nav.mega-open:not(.scrolled) .container {
  height: 84px;
}

.nav-mega-inner {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding: 30px 28px 34px;
}

.nav-mega-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  margin: 0 0 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.nav-mega-col ul { list-style: none; margin: 0; padding: 0; }
.nav-mega-col li { margin-bottom: 11px; }
.nav-mega-col li:last-child { margin-bottom: 0; }

.nav-mega-col a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  transition: color var(--t-base) var(--ease-soft), padding-left var(--t-base) var(--ease-soft);
}

.nav-mega-col a:hover {
  color: var(--white);
  padding-left: 4px;
}

@media (max-width: 1100px) {
  .nav-mega { display: none !important; }
}