/* ==========================================================================
   GATE CAPITAL — V3 REFINED
   03 · NAVIGATION / WAYFINDING
   --------------------------------------------------------------------------
   Three cooperating layers:
     1. Site header    — concise primary level + structured mega-menus
     2. Section rail   — contextual 01–05 page index, scroll-aware
     3. Mobile sheet   — a real navigation panel, not a squeezed desktop nav
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · SITE HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-material);
  -webkit-backdrop-filter: var(--c-material-blur);
          backdrop-filter: var(--c-material-blur);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-out),
              background-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-border);
  background: var(--c-material-strong);
  box-shadow: var(--e-1);
}
/* While a mega-menu is open the header becomes fully opaque and the page
   below is scrimmed, so the panel never reads as floating over unrelated
   content (and the section rail doesn't peek out beside it). */
.site-header.is-open { background: var(--c-surface); border-bottom-color: var(--c-border); }
.site-header::after {
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.site-header.is-open::after { opacity: 1; visibility: visible; pointer-events: auto; }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: nowrap;
}

/* Wordmark */
/* Logo lockup, per the approved Figma: mark + 8px gap + "gate."
   Outfit SemiBold 26 / 33, tracking -0.78px. BRAND ASSET: locked. */
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
  flex: none;
  white-space: nowrap;
}
/* GATE mark — a 1:1 transcription of the approved Figma vector
   (filled circle + 1px outlined circle, 26px each, overlapping by 10px).
   BRAND ASSET: locked. Do not redraw, restyle or re-proportion. */
.wordmark__mark {
  width: 1.615em;   /* 42 / 26 — keeps the exact Figma proportion at any size */
  height: 1em;
  flex: none;
  color: currentColor;
  overflow: visible;
}

/* Primary navigation — kept to 6 destinations */
/* NAVIGATION — LOCKED. The primary level must stay on one row at every
   desktop width; it must never wrap or shrink. Do not re-tune. */
.nav {
  display: flex; align-items: center; gap: var(--s-1);
  margin-left: var(--s-4);
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav__link { white-space: nowrap; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: var(--fw-medium);
  color: var(--c-text-secondary);
  transition: color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out);
  position: relative;
}
.nav__link:hover { color: var(--c-text); background: var(--c-control-bg); }
.nav__link[aria-expanded="true"] { color: var(--c-text); background: var(--c-control-bg); }

/* Active-section behaviour: the nav states which content group you are in */
.nav__link.is-current { color: var(--c-text); font-weight: var(--fw-semibold); }
.nav__link.is-current::after {
  content: "";
  position: absolute; left: var(--s-4); right: var(--s-4); bottom: 2px;
  height: 2px; border-radius: var(--r-pill);
  background: var(--c-accent);
}
.nav__caret { width: 10px; height: 10px; transition: transform var(--dur-2) var(--ease-out); opacity: 0.5; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); opacity: 1; }

.header__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* Theme switch */
.theme-toggle {
  width: 60px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-control-bg);
  border: 1px solid var(--c-control-border);
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 5px;
  flex: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.theme-toggle__knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--e-1);
  transition: transform var(--dur-3) var(--ease-spring);
}
:root[data-theme="dark"] .theme-toggle__knob { transform: translateX(28px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__knob { transform: translateX(28px); }
}
.theme-toggle .ico { width: 14px; height: 14px; color: var(--c-text-muted); position: relative; z-index: 1; }
.theme-toggle .ico:first-of-type { margin-right: auto; }

/* --------------------------------------------------------------------------
   MEGA-MENU
   Structured, grouped, with a descriptive lead column.
   Opens on hover (pointer) and on click/keyboard (all inputs).
   -------------------------------------------------------------------------- */
.megamenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 520px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  padding: var(--s-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              visibility var(--dur-3);
  z-index: 95;
}
.nav__item.is-open .megamenu { opacity: 1; visibility: visible; transform: none; }
.megamenu--wide { min-width: 660px; }

.megamenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-6); }
.megamenu__lead {
  grid-column: 1 / -1;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border-subtle);
}
.megamenu__eyebrow {
  font-size: var(--t-3xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-faint);
}
.megamenu__blurb { font-size: var(--t-xs); color: var(--c-text-muted); margin-top: var(--s-2); max-width: 46ch; }

.megamenu__link {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease-out);
}
.megamenu__link:hover { background: var(--c-control-bg); }
.megamenu__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; background: var(--c-control-bg); }
.megamenu__link.is-current { background: var(--c-accent-soft); }
.megamenu__title { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.megamenu__desc  { font-size: var(--t-2xs); color: var(--c-text-muted); line-height: 1.45; }

.megamenu__foot {
  grid-column: 1 / -1;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--c-border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}

/* --------------------------------------------------------------------------
   2 · SECTION RAIL — contextual page index
   A compact, scroll-aware horizontal control. Deliberately not a second
   navbar: no background chrome until it sticks, hairline only.
   -------------------------------------------------------------------------- */
.rail {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  height: var(--rail-h);
  background: var(--c-material);
  -webkit-backdrop-filter: var(--c-material-blur);
          backdrop-filter: var(--c-material-blur);
  border-bottom: 1px solid var(--c-border-subtle);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out),
              visibility var(--dur-3);
}
.rail.is-visible { opacity: 1; visibility: visible; transform: none; }

.rail__inner {
  height: 100%;
  display: flex; align-items: center; gap: var(--s-4);
}
.rail__list {
  display: flex; align-items: center; gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1; min-width: 0;
}
.rail__list::-webkit-scrollbar { display: none; }

.rail__item {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.rail__item:hover { color: var(--c-text); background: var(--c-control-bg); }
.rail__num {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-text-faint);
  transition: color var(--dur-2) var(--ease-out);
}
.rail__item.is-current { color: var(--c-text); font-weight: var(--fw-semibold); }
.rail__item.is-current .rail__num { color: var(--c-accent-text); }

/* Progress line — reading position across the whole page */
.rail__progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px;
  background: var(--c-accent);
  width: 0;
  transition: width 90ms linear;
}
.rail__end { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.rail__pct {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  color: var(--c-text-faint); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3 · MOBILE NAVIGATION SHEET
   A full navigation panel with the same grouping as desktop.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-control-border);
  background: var(--c-surface);
  place-items: center;
  flex: none;
}
.nav-toggle__bars { width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.6px;
  background: var(--c-text); border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5.2px; }
.nav-toggle__bars span:nth-child(3) { top: 10.4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

.sheet-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: var(--c-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sheet-scrim.is-open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 101;
  width: min(420px, 92vw);
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  /* visibility (not just transform) so the closed sheet neither extends the
     document's scroll width nor keeps its links in the tab order */
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out),
              visibility var(--dur-3);
  box-shadow: var(--e-4);
}
.sheet.is-open { transform: none; visibility: visible; }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  flex: none;
}
.sheet__close {
  width: 40px; height: 40px; border-radius: var(--r-md);
  border: 1px solid var(--c-control-border);
  display: grid; place-items: center;
  color: var(--c-text);
}
.sheet__body { overflow-y: auto; padding: var(--s-5); flex: 1; }
.sheet__foot {
  padding: var(--s-5);
  border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: var(--s-3);
  flex: none;
}

.sheet__group { border-bottom: 1px solid var(--c-border-subtle); }
.sheet__group:last-child { border-bottom: 0; }
.sheet__grouphead {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--s-4) 0;
  font-size: var(--t-h4); font-weight: var(--fw-semibold);
  text-align: left;
}
.sheet__grouphead .ico { transition: transform var(--dur-3) var(--ease-out); color: var(--c-text-muted); }
.sheet__group.is-open .sheet__grouphead .ico { transform: rotate(180deg); }
.sheet__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.sheet__group.is-open .sheet__panel { grid-template-rows: 1fr; }
.sheet__panel > div { overflow: hidden; }
.sheet__links { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s-4); }
.sheet__link {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--c-text-secondary);
}
.sheet__link:hover { background: var(--c-control-bg); color: var(--c-text); }
.sheet__link.is-current { background: var(--c-accent-soft); color: var(--c-accent-text); font-weight: var(--fw-semibold); }
.sheet__direct {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) 0;
  font-size: var(--t-h4); font-weight: var(--fw-semibold);
}

/* Current content group — marked on the group, not on every link inside it */
.sheet__group.is-current .sheet__grouphead,
.sheet__direct.is-current { color: var(--c-accent-text); }
.sheet__group.is-current .sheet__grouphead::before,
.sheet__direct.is-current::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent);
  margin-right: var(--s-3);
  flex: none;
}
.sheet__group.is-current .sheet__grouphead { justify-content: flex-start; gap: auto; }
.sheet__group.is-current .sheet__grouphead .ico { margin-left: auto; }

/* --------------------------------------------------------------------------
   RESPONSIVE SWITCH
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .header__end .btn--account { display: none; }
}
@media (min-width: 1101px) {
  .sheet, .sheet-scrim { display: none; }
}
@media (max-width: 640px) {
  .rail__end { display: none; }
}