/* ═══════════════════════════════════════════════════
   HEADER — NAV-D, home-style dark mega menu
   Source: css/nav-footer.css lines 490-640 and 653-657.

   The translucent rgba(255,255,255,…) values are kept verbatim rather
   than mapped onto text tokens: they are overlays tuned for the dark
   chrome band, and the neutral whites read differently from the slightly
   blue text tokens.
═══════════════════════════════════════════════════ */

#nav-d {
  /* The source sets sticky positioning inline on the element; it belongs here. */
  position: sticky;
  top: 0;
  /* Above #btt, which sits at 500 — otherwise the floating button renders
     on top of the open mobile panel. */
  z-index: 600;
  background: var(--c-bg);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nv-d-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* The mega panel is positioned against this, not against its own trigger.
     Centred on the trigger it followed wherever "Services" happens to sit in
     the nav, and at 1100px wide that put 64px of it off the left of a 1280
     screen. Centred on the container it is centred on the page. */
  position: relative;
  justify-content: space-between;
  gap: var(--sp-8);
}

.nv-d-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--c-accent);
}
.nv-d-logo svg { width: 60px; height: auto; display: block }

/* ── Primary links ── */
.nv-d-links { display: flex; align-items: center; gap: 2px }
.nv-d-link {
  padding: 7px 14px;
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nv-d-link:hover { color: #fff; background: rgba(255, 255, 255, .06) }

/* ── Services trigger ── */
.nv-d-trigger { position: static }
.nv-d-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--f-body);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, .55);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nv-d-trigger-btn:hover,
.nv-d-trigger.open .nv-d-trigger-btn { color: #fff; background: rgba(255, 255, 255, .06) }
.nv-d-trigger-btn svg {
  width: 11px; height: 11px; flex-shrink: 0;
  transition: transform var(--dur-base);
}
.nv-d-trigger.open .nv-d-trigger-btn svg { transform: rotate(180deg) }

/* ── Mega panel ── */
.nv-d-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  /* The desktop nav disappears below 1024px, so the narrowest screen that ever
     sees this panel is about 1025 — where a flat 1100px would hang off both
     edges. The second term keeps it inside the container's padding. */
  width: min(1100px, calc(100% - var(--container-pad) * 2));
  background: rgba(13, 14, 26, .97);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px var(--c-shadow-deep);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s, transform .18s;
}
.nv-d-trigger.open .nv-d-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nv-d-mega-inner { display: grid; grid-template-columns: 200px 1fr; gap: 0 }

/* ── Mega: intro column ── */
.nv-d-mega-intro {
  padding: 28px var(--sp-6);
  border-right: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Same six declarations as .lbl in components.css. Kept as its own rule rather
   than swapping the class in the markup, because the mega menu's eyebrow sits
   on a different surface and may yet want to differ; if it never does, the
   class is the better answer. */
.nv-d-mega-intro-label {
  font-family: var(--f-body);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.nv-d-mega-intro-h {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
  margin-bottom: 10px;
}
.nv-d-mega-intro-p {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  line-height: 1.7;
  flex: 1;
}
/* Same shape as .sc-cat-cta and .sp-related-cta: the uppercase accent label
   that means "there is more of this through here". */
.nv-d-mega-intro-all {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-5);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: none;
  transition: gap var(--dur-fast);
}
.nv-d-mega-intro-all:hover { gap: var(--sp-2) }

/* ── Mega: services grid ── */
.nv-d-mega-right { padding: var(--sp-5) var(--sp-5) 0 }
.nv-d-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1) }

.nv-d-card {
  display: block;
  padding: var(--sp-4);
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.nv-d-card:hover { background: rgba(255, 255, 255, .05) }
.nv-d-card-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  font-size: var(--fs-400);
}
.nv-d-card-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.nv-d-card-name {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  color: var(--c-text-1);
  line-height: 1.5;
}
.nv-d-card-arr {
  font-size: var(--fs-300);
  color: rgba(255, 255, 255, .2);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.nv-d-card:hover .nv-d-card-arr { color: var(--c-accent); transform: translate(2px, -1px) }
.nv-d-card-desc {
  font-size: var(--fs-200);
  color: var(--c-text-3);
  line-height: 1.7;
  margin-bottom: 7px;
}

/* ── Mega: footer strip ── */
.nv-d-mega-foot {
  grid-column: 1 / -1;
  margin: 0 var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.nv-d-mega-foot-text {
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  color: var(--c-text-4);
  line-height: 1.7;
}
.nv-d-mega-foot-text strong { color: var(--c-text-3) }
.nv-d-mega-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) 18px;
  border-radius: var(--r-sm);
  background: rgba(var(--c-accent-rgb), .15);
  border: 1px solid rgba(var(--c-accent-rgb), .3);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.nv-d-mega-foot-cta:hover {
  background: rgba(var(--c-accent-rgb), .25);
  border-color: rgba(var(--c-accent-rgb), .5);
}

/* ── Right-hand CTAs ── */
.nv-d-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
.nv-d-cta {
  padding: var(--sp-2) 18px;
  border-radius: var(--r-sm);
  background: var(--c-accent-strong);
  color: #fff;
  font-family: var(--f-body);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.nv-d-cta:hover {
  background: var(--c-accent-hover);
  box-shadow: 0 4px 20px rgba(var(--c-accent-rgb), .45);
}

/* ═══════════════════════════════════════════════════
   MOBILE MENU
   The source hides the nav links below 768px and offers no replacement,
   so this is built from scratch rather than ported.
═══════════════════════════════════════════════════ */

.nv-d-burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.nv-d-burger-bar {
  width: 18px; height: 1.5px;
  background: var(--c-text-2);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nv-d-burger[aria-expanded="true"] .nv-d-burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nv-d-burger[aria-expanded="true"] .nv-d-burger-bar:nth-child(2) { opacity: 0 }
.nv-d-burger[aria-expanded="true"] .nv-d-burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

.nv-d-mobile {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
  background: var(--c-nav-bg);
  border-top: 1px solid var(--c-border);
  backdrop-filter: blur(20px);
  /* Never taller than the space under the header, and scrollable in its own
     right when the screen is short. dvh tracks the mobile browser chrome as
     it collapses; vh is the fallback for browsers without it. */
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A back-to-top button over an open menu means nothing. */
body.nav-open #btt { display: none }
.nv-d-mobile[hidden] { display: none }
.nv-d-mobile-link {
  padding: var(--sp-3) 0;
  font-size: var(--fs-400);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
  transition: color var(--dur-base);
}
.nv-d-mobile-link:hover { color: var(--c-accent) }
.nv-d-mobile-cta { margin-top: var(--sp-4); justify-content: center }

/* ── Responsive.
   The switch happens at 1024, not the 768 the rest of the theme uses: the
   row needs about 970px for the logo, six links and the CTA, so between
   768 and 970 the links overflowed. Roughly 50px of headroom is left, so
   adding another menu item means revisiting this. ── */
@media (max-width: 1024px) {
  .nv-d-inner { padding: 0 var(--sp-6) }
  .nv-d-links { display: none }
  .nv-d-burger { display: flex }
  .nv-d-mobile:not([hidden]) { display: flex }
}