/* Unified mobile navigation (src/_includes/mobile-nav.njk), loaded on every page.
   Self-contained: its own tokens, no dependence on theme-2026 / brand-v2 / Webflow scoping.
   At <=1100px it replaces the legacy Webflow nav, nav-blog, and nav-2026 headers. */

.mnav {
  --mnav-ink: #0f1216;
  --mnav-ink-2: #171b21;
  --mnav-text: #f5f6f4;
  --mnav-muted: rgba(245, 246, 244, 0.68);
  --mnav-rule: rgba(245, 246, 244, 0.1);
  --mnav-rule-strong: rgba(245, 246, 244, 0.2);
  --mnav-signal: #5e55fd;
  --mnav-signal-hover: #4c43e8;
  --mnav-signal-soft: #b8b3ff;
  --mnav-focus: #b8b3ff;
  --mnav-ease: cubic-bezier(0.22, 0.68, 0, 1);
  --mnav-font: "Helvetica Neue", "Neue Haas Grotesk Display", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mnav-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  display: none;
  font-family: var(--mnav-font);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1100px) {
  .mnav { display: block; position: sticky; top: 0; z-index: 1000; }
  /* Legacy Webflow pages pad their content for a fixed 70px header, so match that. */
  body:not(.theme-2026) .mnav { position: fixed; left: 0; right: 0; }
  /* Retire every legacy header below the breakpoint. */
  .nav-bar.w-nav,
  .navigation-mob.w-nav,
  .nav-2026-desktop { display: none !important; }
}

/* Legacy Webflow headers do not fit below ~1240px (the logo wraps onto its own row). */
@media (min-width: 1101px) and (max-width: 1240px) {
  body:not(.theme-2026) .mnav { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
  body:not(.theme-2026) .nav-bar.w-nav,
  body:not(.theme-2026) .navigation-mob.w-nav { display: none !important; }
}

.mnav *, .mnav *::before, .mnav *::after { box-sizing: border-box; }
.mnav :is(nav, ul, li, details, summary, dialog) { background-color: transparent; background-image: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0; border: 0; color: inherit; position: static; height: auto; z-index: auto; text-align: left; }
.mnav a { text-decoration: none; }
.mnav .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mnav :is(a, button, summary):focus-visible {
  outline: 2px solid var(--mnav-focus);
  outline-offset: 3px;
  border-radius: 10px;
}

.mnav .mnav__bar {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 12px 0 16px;
  background: rgba(15, 18, 22, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--mnav-rule);
}
.mnav .mnav__brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--mnav-text); margin-right: auto; }
.mnav .mnav__mark { display: inline-flex; width: 30px; height: 30px; }
.mnav .mnav__mark svg { width: 100%; height: 100%; display: block; }
.mnav .mnav__word { font-size: 21px; letter-spacing: -0.02em; line-height: 1; color: var(--mnav-text); }
.mnav .mnav__word span { font-weight: 300; }
.mnav .mnav__word b { font-weight: 500; }

.mnav .mnav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--mnav-signal); color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color 0.18s ease;
}
.mnav .mnav__cta:hover { background: var(--mnav-signal-hover); color: #fff; }

.mnav .mnav__toggle, .mnav .mnav__close {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--mnav-rule-strong); border-radius: 12px;
  background: rgba(245, 246, 244, 0.06); color: var(--mnav-text); cursor: pointer;
  transition: background-color 0.18s ease;
}
.mnav .mnav__toggle:hover, .mnav .mnav__close:hover { background: rgba(245, 246, 244, 0.12); }
.mnav .mnav__burger { display: grid; gap: 6px; width: 18px; }
.mnav .mnav__burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.mnav .mnav__burger span:last-child { width: 12px; justify-self: end; }
.mnav .mnav__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 359px) {
  .mnav .mnav__bar .mnav__word { display: none; }
}

.mnav .mnav__sheet {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  color: var(--mnav-text);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(94, 85, 253, 0.22), transparent 60%),
    var(--mnav-ink);
  overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.32s var(--mnav-ease), overlay 0.32s allow-discrete, display 0.32s allow-discrete;
}
.mnav .mnav__sheet[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style {
  .mnav .mnav__sheet[open] { opacity: 0; transform: translateY(12px); }
}
.mnav .mnav__sheet::backdrop { background: transparent; }
html:has(.mnav__sheet[open]) { overflow: hidden; }

.mnav .mnav__sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 12px 0 16px; flex: 0 0 auto;
  border-bottom: 1px solid var(--mnav-rule);
}

.mnav .mnav__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; }
.mnav .mnav__list, .mnav .mnav__sub { list-style: none; margin: 0; padding: 0; }
.mnav .mnav__section { border-bottom: 1px solid var(--mnav-rule); }

.mnav .mnav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 0 4px;
  font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--mnav-text); cursor: pointer; list-style: none;
}
.mnav .mnav__row::-webkit-details-marker { display: none; }
.mnav .mnav__row[aria-current="page"] { color: var(--mnav-signal-soft); }
.mnav .mnav__chev { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--mnav-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.28s var(--mnav-ease), stroke 0.18s ease; }
.mnav .mnav__group[open] > .mnav__row .mnav__chev { transform: rotate(180deg); stroke: var(--mnav-text); }

.mnav .mnav__sub { padding: 0 0 14px; display: grid; gap: 2px; }
.mnav .mnav__link {
  display: grid; gap: 3px; min-height: 52px; padding: 9px 12px; border-radius: 12px;
  color: var(--mnav-text);
  transition: background-color 0.18s ease;
}
.mnav .mnav__link:hover, .mnav .mnav__link:active { background: rgba(245, 246, 244, 0.06); }
.mnav .mnav__link-label { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.mnav .mnav__link-note { font-family: var(--mnav-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--mnav-muted); }
.mnav .mnav__link[aria-current="page"] { background: rgba(94, 85, 253, 0.16); }
.mnav .mnav__link[aria-current="page"] .mnav__link-label { color: var(--mnav-signal-soft); }
.mnav .mnav__link[aria-current="page"] .mnav__link-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mnav-signal-soft);
}
.mnav .mnav__ext { width: 14px; height: 14px; fill: none; stroke: var(--mnav-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mnav .mnav__foot {
  flex: 0 0 auto; display: grid; gap: 10px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(15, 18, 22, 0.6), var(--mnav-ink) 40%);
  border-top: 1px solid var(--mnav-rule);
}
.mnav .mnav__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.mnav .mnav__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mnav .mnav__btn--primary { background: var(--mnav-signal); color: #fff; }
.mnav .mnav__btn--primary:hover { background: var(--mnav-signal-hover); color: #fff; }
.mnav .mnav__btn--ghost { border: 1px solid var(--mnav-rule-strong); color: var(--mnav-text); background: transparent; }
.mnav .mnav__btn--ghost:hover { background: rgba(245, 246, 244, 0.06); color: var(--mnav-text); }
.mnav .mnav__login {
  justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; color: var(--mnav-muted); text-decoration: underline !important; text-underline-offset: 3px;
}
.mnav .mnav__login:hover { color: var(--mnav-text); }

.mnav .mnav__lang { display: flex; justify-self: start; gap: 4px; padding: 4px; border: 1px solid var(--mnav-rule-strong); border-radius: 999px; }
.mnav .mnav__lang .home-language__button {
  min-width: 52px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--mnav-muted); font: 600 13px/1 var(--mnav-mono); letter-spacing: 0.06em; cursor: pointer;
}
.mnav .mnav__lang .home-language__button.is-active { background: var(--mnav-signal); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mnav__sheet, .mnav .mnav__chev, .mnav .mnav__cta, .mnav .mnav__link, .mnav .mnav__btn, .mnav .mnav__toggle, .mnav .mnav__close { transition: none; }
}