/* =========================================================================
   01-nav — top navigation
   Two roots:
     ._navbar  — fixed top bar (logo · center links · lang + CTAs · hamburger)
     ._menu    — mobile full-screen overlay drawer
   Structure (._navbar / ._menu / ._dropdown /
   .lang-cta-wrapper / .ctas rules) and rewritten against the tokens.
   Breakpoints match source: 1023px (mobile drawer), 1290px, 743px.
   ========================================================================= */

/* ===== Desktop / sticky top bar ===================================== */
._navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--100vw);
  padding: var(--16-12) 0;
  z-index: var(--z-header);
  /* Fully transparent, colour-adaptive: the text/icon colour follows the
     section touching the bar (data-theme, set by 01-nav.js). */
  color: #fff;
  background: transparent;
  transition: transform var(--dur) var(--ease-out-quart),
              color var(--dur) var(--ease-in-out);
}
/* Light section behind → dark text; dark/coloured section → white text. */
._navbar[data-theme="light"] { color: var(--orange-900); }
._navbar[data-theme="dark"]  { color: #fff; }

/* Logo focus ring (source: ._navbar .homepage-link:focus-visible:after) */
._navbar .homepage-link { display: inline-flex; }
._navbar .homepage-link:focus-visible { outline: none; }
._navbar .homepage-link:focus-visible::after {
  content: "";
  position: absolute;
  inset: -.75em -1em;
  border-radius: .5em;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(255, 255, 255, .5);
}

/* Wordmark colour follows the bar's colour state */
._navbar .logo { color: inherit; }

/* Inline icon paths are painted via data-mode; map to the current colour so
   the globe/chevron/external-flag follow the bar's white/orange state. */
._navbar ._icon [data-mode="stroke"],
._menu ._icon [data-mode="stroke"] { stroke: currentColor; }
._navbar ._icon [data-mode="fill"],
._menu ._icon [data-mode="fill"]   { fill: currentColor; }

/* ---- Center menu links ------------------------------------------------ */
._navbar-menu {
  gap: var(--8);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
._navbar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--44);
  padding: 0 var(--16);
  border-radius: 6em;
  color: inherit;
  position: relative;
  transition: background-color var(--dur) var(--ease-in-out);
}
._navbar-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-in-out);
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  ._navbar-link:hover::before { opacity: .08; }
}
._navbar-link .external-flag {
  margin-top: -.4em;
  transition: transform var(--dur) var(--ease-out-quart);
}
._navbar-link:hover .external-flag { transform: translate(2px, -2px); }

/* ---- Right cluster: language dropdown + CTAs -------------------------- */
._navbar .lang-cta-wrapper {
  display: flex;
  align-items: center;
  gap: var(--24-16);
}
._navbar .ctas { gap: var(--12-8); }

/* ---- Language: bare globe icon button (currentColor → adapts) ---------- */
._lang-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--40);
  height: var(--40);
  border-radius: 100%;
  color: inherit;
  position: relative;
  transition: background-color var(--dur) var(--ease-in-out);
}
._lang-globe ._icon { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) {
  ._lang-globe:hover { background-color: color-mix(in srgb, currentColor 12%, transparent); }
}
._lang-globe:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 55%, transparent);
}

/* ---- "Get early access" CTA — solid pill, contrast flips with the bar --- */
.cta-early[data-button] { --height: 44px; font-weight: var(--fw-medium); }
._navbar[data-theme="dark"]  .cta-early { --color: var(--orange);  --background-color: #fff; }
._navbar[data-theme="light"] .cta-early { --color: #fff; --background-color: var(--orange); }

/* ---- Hamburger toggle (mobile only) ----------------------------------- */
._menu-toggle {
  display: none;
  width: var(--44);
  height: var(--44);
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: inherit;
}
._menu-toggle ._icon { width: 24px; height: 24px; }

/* ===== Mobile overlay drawer ======================================== */
/* Hidden on desktop; shown when JS sets data-expanded="true". */
._menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  color: #fff;
  pointer-events: none;
  visibility: hidden;
}
._menu[data-expanded="true"] {
  pointer-events: auto;
  visibility: visible;
}
._menu .menu-overlay {
  position: fixed;
  inset: 0;
  width: var(--100vw);
  height: 100vh;
  height: 100lvh;
  background: var(--orange);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out-quart);
}
._menu[data-expanded="true"] .menu-overlay { opacity: 1; }

._menu .main-slot {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100lvh;
  padding-bottom: 80px;
}
._menu .menu-overlay-top { padding-top: var(--32-24); }

._menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--44);
  height: var(--44);
  border-radius: 100%;
  color: #fff;
}
._menu-close ._icon { width: 24px; height: 24px; }

/* Scrolling list */
._menu .list-slot {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
._menu .list-container { padding: var(--24-16) var(--grid-margin); }
._menu .list-container > li { padding: 12px 0; }

._menu .menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 0;
  position: relative;
  font-size: clamp(19px, 17.518px + 100vw * .0038, 24px);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  line-height: 1.2;
  color: #fff;
}
._menu .menu-link .external-flag { margin-top: -.5em; }
._menu .menu-link::before {
  content: "";
  position: absolute;
  inset: 0 -8px;
  border-radius: 12px;
  background-color: #fff;
  opacity: 0;
}
._menu .menu-link:hover::before { opacity: .1; }
._menu .menu-link .label { overflow: hidden; }

/* Overlay CTAs (source: ._menu[data-variant=overlay] .ctas) */
._menu .ctas {
  gap: var(--24-16);
  justify-content: center;
  padding: 16px var(--grid-margin) 0;
}
._menu .ctas .overlay-container { right: 0; }
/* On the orange overlay the CTA is a white pill with orange text. */
._menu .cta-early { --color: var(--orange); --background-color: #fff; }

/* ===== Responsive ================================================== */
/* Tablet / mobile: hide center links + the last CTA, show hamburger.    */
@media only screen and (max-width: 1023px) {
  /* Mobile bar = logo + hamburger only. Language + Login/Sign up move into
     the full-screen overlay drawer (._menu), so hide them in the bar. */
  ._navbar-menu { display: none; }
  ._navbar .lang-cta-wrapper ._dropdown._language-select { display: none; }
  ._navbar .ctas { display: none; }
  ._menu-toggle { display: inline-flex; }
}

/* Desktop: never render the mobile overlay drawer. */
@media only screen and (min-width: 1024px) {
  ._menu { display: none; }
}

/* Large-desktop scale switch (source: min-width 2000px) */
@media only screen and (min-width: 2000px) {
  ._navbar .lang-cta-wrapper { gap: 1.2vw; }
  ._navbar .ctas { gap: .6vw; }
}

/* ---- Language menu: white panel, dark selected pill with a check --------- */
._language-select .overlay {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
}
._language-select .overlay a[role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--orange-900);
}
._language-select .overlay a[role="option"]:hover { background: var(--orange-25); }
._language-select .overlay a[role="option"][aria-selected="true"] {
  background: var(--orange);
  color: #fff;
}
._language-select .overlay .check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0;
}
._language-select .overlay a[aria-selected="true"] .check { opacity: 1; }
._language-select .overlay .check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}