/* =========================================================================
   Nav mode is driven by the .is-mobile-nav class on .header — toggled by
   js/main.js (setupResponsiveNav) the moment the links + buttons no longer fit
   the available width, at whatever viewport width that happens. The class, not
   a fixed media-query breakpoint, is the single source of truth, so the nav
   collapses to the hamburger exactly when content would overflow instead of at
   an arbitrary pixel count. components.js seeds the class at <=970px so narrow
   screens render collapsed on first paint even before main.js measures (and if
   main.js never runs).
   ========================================================================= */

/* ---- Desktop nav only (links fit) -------------------------------------- */
.header:not(.is-mobile-nav) .header__menu li.has-submenu>a.active::before,
.header:not(.is-mobile-nav) .header__menu li:not(.has-submenu, .submenu)>a.active::before,
.header:not(.is-mobile-nav) .header__menu ul:not(.submenu) li a.active::before {
  content: " ";
  position: absolute;
  left: 50%;
  font-size: 0.8em;
  bottom: -8px;
  transform: translateX(-50%);
  opacity: 0.7;
  width: 16px;
  height: 4px;
  border-radius: 50px;
  background: var(--color-primary);
}

.header:not(.is-mobile-nav) .header__menu .submenu a.active::before {
  content: " ";
  position: absolute;
  left: 8px !important;
  font-size: 0.8em;
  top: 50%;
  bottom: 50%;
  transform: translateX(-50%) translateY(-50%) !important;
  opacity: 0.7;
  width: 4px !important;
  height: 16px !important;
  border-radius: 50px;
  background: var(--color-primary);
}

.header:not(.is-mobile-nav) .header__menu li.has-submenu>a.active::before {
  left: calc(50% - 8px);
}

/* The separator item ("Why we exist") adds a left border + padding-left, which
   shifts its li padding-box right of the text; nudge the active dot back by half
   that padding so it recentres under the label. */
.header:not(.is-mobile-nav) .header__menu li.menu-separator>a.active::before {
  left: calc(50% + var(--space-lg) / 2);
}

/* Default state: primary CTA hidden while at the top (no .scrolled class) */
.header:not(.is-mobile-nav) .header__actions .btn--primary {
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  margin: 0;
  transform: translateX(10px);
  pointer-events: none;
}

/* Reveal the CTA once scrolled */
.header:not(.is-mobile-nav).scrolled .header__actions .btn--primary {
  max-width: 300px;
  opacity: 1;
  padding-left: 24px;
  padding-right: 24px;
  border-width: 2px;
  transform: translateX(0);
  pointer-events: auto;
}

/* ---- Measurement helper -------------------------------------------------
   main.js adds this (with .is-mobile-nav removed) for a single synchronous tick
   to read the nav's natural, worst-case desktop width: CTA fully expanded, links
   un-wrapped and non-shrinking, submenu taken out of flow. Because nothing is
   painted between adding and removing it, there is no flicker and no transition.
   Kept last among the CTA rules so it wins the specificity tie with the
   "hidden at top" rule above and forces the CTA to full width during the read. */
.header.header--measuring .header__actions .btn--primary {
  max-width: 300px;
  opacity: 1;
  padding-left: 24px;
  padding-right: 24px;
  border-width: 2px;
  margin: 0;
  transform: none;
  pointer-events: auto;
}

.header.header--measuring .header__menu {
  flex-wrap: nowrap;
}

.header.header--measuring .header__menu a {
  white-space: nowrap;
}

.header.header--measuring .header__right {
  flex-shrink: 0;
}

.header.header--measuring .header__menu .submenu {
  display: none;
}

/* .header--settling extends the transition freeze for one extra reflow past the
   removal of .header--measuring. The measuring pass forces the CTA fully visible;
   at the top of the page its real state is hidden, so re-enabling transitions the
   instant .header--measuring is removed would animate the CTA visible→hidden — the
   "Start your own" flash on every top-of-page navigation, font load, and resize.
   Keeping transitions off while the real state is flushed as the new baseline
   suppresses that animation without affecting scroll-driven reveals. */
.header.header--measuring,
.header.header--measuring *,
.header.header--settling,
.header.header--settling * {
  transition: none !important;
}

/* ---- Mobile menu overlay (global; inert until .active) ------------------ */
.header__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
  /* Below header (1000) but above content */
}

.header__overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Collapsed / mobile nav (links don't fit) -------------------------- */
.header.is-mobile-nav {
  padding: var(--space-sm);
}

.header.is-mobile-nav.scrolled {
  padding: var(--space-sm) var(--space-xl);
}

.header.is-mobile-nav .header__logo {
  height: 32px;
}

.header.is-mobile-nav::before {
  height: 55px !important;
}

.header.is-mobile-nav .header__hamburger {
  display: flex;
}

.header.is-mobile-nav .header__right {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px;
  max-width: 80vw;
  background: rgba(0, 0, 0, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 rgba(0, 0, 0, .5);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  padding: 80px var(--space-lg) var(--space-xl);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 1001;
  /* Above overlay */
}

.header.is-mobile-nav .header__menu .submenu li p {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
}

.header.is-mobile-nav .header__right.active {
  transform: translateX(0);
  box-shadow: 0 0 64px rgba(0, 0, 0, .5);
}

.header.is-mobile-nav .header__menu {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
}

.header.is-mobile-nav .header__menu li {
  width: 100%;
}

/* Reset desktop absolutes for mobile */
.header.is-mobile-nav .header__menu .submenu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  box-shadow: none;
  border: none;
  background: transparent;
  margin-top: var(--space-sm);
  display: none;
  /* Hidden by default on mobile */
  border-radius: 0;
  min-width: auto;
  left: auto;
}

/* Show submenu when parent has .open class */
.header.is-mobile-nav .header__menu li.open .submenu {
  display: flex;
}

/* CRITICAL FIX: Override desktop hover effects to prevent layout shift */
.header.is-mobile-nav .header__menu li:hover .submenu,
.header.is-mobile-nav .header__menu li:focus-within .submenu {
  transform: none;
  position: static;
  visibility: visible;
  opacity: 1;
}

.header.is-mobile-nav .header__menu li.has-submenu>a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0;
}

.header.is-mobile-nav .header__menu li.has-submenu>a::after {
  display: none;
  /* Hide desktop caret */
}

/* Add + / - indicator */
.header.is-mobile-nav .header__menu li.has-submenu>a::before {
  content: "+";
  font-weight: 400;
  font-size: 1.2em;
  order: 2;
  /* Put it on the right */
}

.header.is-mobile-nav .header__menu li.has-submenu.open>a::before {
  content: "−";
  /* Minus sign */
}

.header.is-mobile-nav .header__menu .submenu a {
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.header.is-mobile-nav .header__menu a {
  font-size: var(--text-base);
  display: block;
  width: 100%;
  padding: var(--space-sm) 0;
}

.header.is-mobile-nav .header__actions {
  flex-direction: column;
  width: 100%;
  gap: var(--space-sm);
}

.header.is-mobile-nav .header__actions .btn {
  width: 100%;
  justify-content: center;
}

.header.is-mobile-nav .menu-separator {
  border-left: 0;
  padding-left: 0;
}