/* Wildstream — Navigation (DARK MODE).
   ───────────────────────────────────────────────────────────────────────────
   SINGLE SOURCE OF TRUTH: Wildstream Design System · preview/components-nav.html
   Declarations are copied VERBATIM from that component card (light base rules +
   the `.ws-dark` overrides). They are scoped under `.nav-fixed` only to avoid
   colliding with same-named page classes (e.g. the page's own `.cta` section);
   no values are changed. `.nav-fixed` carries `ws-dark`, so the DS dark-mode
   tokens drive the nav. The "page integration" rules add fixed placement, the
   default↔scrolled scroll behaviour, and a responsive collapse.
   ─────────────────────────────────────────────────────────────────────────── */

/* ===== Page integration (fixed placement — not part of the static DS card) ===== */
.nav-fixed {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; padding: 0 var(--section-px, 24px);
  pointer-events: none;
}
.nav-fixed .nav { pointer-events: auto; width: 100%; max-width: var(--section-max, 1280px); }

/* ===== DS component — verbatim from preview/components-nav.html ===== */
.nav-fixed .nav {
  position: relative;                 /* anchor for the mobile dropdown panel */
  display: flex; align-items: center; gap: 18px;
  padding: 18px 14px 18px 24px;
  transition: all var(--dur-base) var(--ease-out-soft);
}
.nav-fixed .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.nav-fixed .brand .lockup { height: 34px; width: auto; display: block; }
.nav-fixed .nav-right {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  padding-top: 8px;
}
.nav-fixed .links { display: flex; gap: 4px; }
.nav-fixed .links a {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-muted);
  text-decoration: none; padding: 7px 11px; border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.nav-fixed .links a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 3%, transparent); }
.nav-fixed .links a.active { color: var(--fg); background: color-mix(in oklab, var(--fg) 5%, transparent); }
.nav-fixed .cta {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--ws-tan-900); color: var(--ws-tan-50);
  border: 0; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}

/* State 1 — DEFAULT (top of page): transparent, hairline divider */
.nav-fixed .nav.default {
  background: transparent;
  border-bottom: 1px solid var(--border-faint);
  border-radius: 0;
  box-shadow: none;
}
.nav-fixed .nav.default .brand .lockup { height: 34px; display: block; }

/* State 2 — SCROLLED: light-mode floating pill, aligned to the section panel width */
.nav-fixed .nav.scrolled {
  max-width: calc(var(--section-max, 1280px) - 2 * var(--section-px, 24px));
  margin-left: var(--space-10);
  margin-right: var(--space-10);
  background: color-mix(in oklab, var(--ws-tan-50) 90%, transparent);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-xs);
}
.nav-fixed .brand .mark { display: none; }
.nav-fixed .nav.scrolled .brand .lockup { display: none; }
.nav-fixed .nav.scrolled .brand .mark { display: block; height: 26px; width: auto; }
.nav-fixed .nav.scrolled .nav-right { padding-top: 0; }

/* ===== DARK MODE overrides — verbatim from the DS card's .ws-dark block ===== */
.nav-fixed.ws-dark .cta { background: var(--ws-tan-50); color: var(--ws-tan-900); }   /* invert the ink pill */
/* Scrolled pill is LIGHT mode: re-assert light-scope tokens so text reads dark on the light bar */
.nav-fixed.ws-dark .nav.scrolled {
  --fg: var(--ws-tan-900);
  --fg-muted: var(--ws-tan-700);
  --fg-subtle: var(--ws-tan-500);
  --border-faint: color-mix(in oklab, var(--ws-tan-900) 5%, transparent);
}
.nav-fixed.ws-dark .nav.scrolled .cta { background: var(--ws-tan-900); color: var(--ws-tan-50); }

/* ===== Page integration (continued) ===== */
.nav-fixed .cta:hover { filter: brightness(0.94); }

/* ===== Industries dropdown — page-integration extension (hover/focus submenu).
   Not yet in the DS component card — candidate for upstreaming. Surface matches
   the .nav__mobile light panel. ===== */
.nav-fixed .links .nav__item { position: relative; display: flex; }
.nav-fixed .nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 230px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  --fg: var(--ws-tan-900); --fg-muted: var(--ws-tan-700);
  background: color-mix(in oklab, var(--ws-tan-50) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--ws-tan-900) 6%, transparent);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
/* invisible hover bridge across the 8px gap so the panel doesn't close in transit */
.nav-fixed .nav__dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-fixed .links .nav__item:hover .nav__dropdown,
.nav-fixed .links .nav__item:focus-within .nav__dropdown { opacity: 1; transform: none; pointer-events: auto; }
.nav-fixed .nav__dropdown a {
  font-family: var(--font-sans); font-size: 14px; color: var(--ws-tan-700);
  text-decoration: none; padding: 9px 11px; border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.nav-fixed .nav__dropdown a:hover { color: var(--ws-tan-900); background: color-mix(in oklab, var(--ws-tan-900) 5%, transparent); }

/* ===== Mobile navigation — burger toggle + dropdown panel (built by site.js) ===== */
.nav-fixed .nav__burger {
  display: none;                       /* shown only at the collapse breakpoint */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 4px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.nav-fixed .nav__burger:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
.nav-fixed .nav__burger svg { display: block; width: 22px; height: 22px; }
.nav-fixed .nav__burger .bar { transform-origin: center; transition: transform var(--dur-base) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-out-soft); }
.nav-fixed .nav.nav-open .nav__burger .bar-top { transform: translateY(5px) rotate(45deg); }
.nav-fixed .nav.nav-open .nav__burger .bar-mid { opacity: 0; }
.nav-fixed .nav.nav-open .nav__burger .bar-bot { transform: translateY(-5px) rotate(-45deg); }

/* Dropdown panel — always a LIGHT surface (matches the scrolled pill), in either nav state */
.nav-fixed .nav__mobile {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px;
  --fg: var(--ws-tan-900); --fg-muted: var(--ws-tan-700);
  background: color-mix(in oklab, var(--ws-tan-50) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--ws-tan-900) 6%, transparent);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.nav-fixed .nav.nav-open .nav__mobile { opacity: 1; transform: none; pointer-events: auto; }
.nav-fixed .nav__mobile a {
  font-family: var(--font-sans); font-size: 15px; color: var(--ws-tan-700);
  text-decoration: none; padding: 11px 12px; border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.nav-fixed .nav__mobile a:hover,
.nav-fixed .nav__mobile a.active { color: var(--ws-tan-900); background: color-mix(in oklab, var(--ws-tan-900) 5%, transparent); }
/* Industry sub-links (cloned from .nav__dropdown) render indented under Industries */
.nav-fixed .nav__mobile a.nav__sub { padding-left: 28px; font-size: 14px; }
.nav-fixed .nav__mobile .cta {
  margin-top: 6px; justify-content: center;
  background: var(--ws-tan-900); color: var(--ws-tan-50);
}

/* Long link sets collapse before they would overflow the pill — burger takes over. */
@media (max-width: 1080px) {
  .nav-fixed .nav .links { display: none; }
  .nav-fixed .nav .nav-right > .cta { display: none; } /* inline CTA moves into the menu */
  .nav-fixed .nav__burger { display: inline-flex; }
}
@media (min-width: 1081px) {
  .nav-fixed .nav__mobile { display: none; }            /* never render the panel on desktop */
}

/* Phones only: shrink the scrolled pill's side margins so its inset matches the
   32px page content inset (16px .nav-fixed padding + 16px here). Without this the
   40px desktop margins stack on the 16px mobile padding = 56px, collapsing the
   pill. Default state + tablet/desktop are untouched. */
@media (max-width: 640px) {
  .nav-fixed .nav.scrolled { margin-left: var(--space-4); margin-right: var(--space-4); }
}