/* ============================================================
   Shared mobile navigation — hamburger trigger + full-screen overlay.
   Loaded on every page; the overlay markup is generated by nav.js
   from each page's existing .nav-links / .nav-cta.
   Colour/type tokens fall back to sensible defaults so the menu is
   never invisible even if a page is missing a :root variable.
   ============================================================ */

.nav-toggle {
  display: none;                 /* revealed at ≤960px by the media block below */
  flex-direction: column;        /* stack the bars into a normal hamburger */
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: auto;             /* pin to the right once the desktop nav is hidden */
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink, #0A0A0A);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: rgba(10, 10, 10, 0.05); }
.nav-toggle .bar {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle .bar + .bar { margin-top: 5px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;                  /* above the sticky header (z-index 50) */
  background: var(--bg, #ffffff);
  display: flex;
  flex-direction: column;
  padding: 0 24px 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 260ms ease-out,
              transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 260ms;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  flex: 0 0 auto;
}
.mobile-menu-top .brand-name {
  font-family: var(--display, ui-sans-serif, sans-serif);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink, #0A0A0A);
}
.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink, #0A0A0A);
  font-size: 26px;
  line-height: 1;
}
.mobile-menu-close:hover { background: rgba(10, 10, 10, 0.05); }
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  gap: 2px;
}
.mobile-menu-links a {
  font-family: var(--display, ui-sans-serif, sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 40px);
  letter-spacing: -0.02em;
  color: var(--ink, #0A0A0A);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #E4E8EC);
  opacity: 0;
  transform: translateY(10px);
}
.mobile-menu-links a:active { color: var(--orange, #FF4502); }
.mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  flex: 0 0 auto;
}
.mobile-menu-cta .btn,
.mobile-menu-cta button,
.mobile-menu-cta > a {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  padding: 15px 18px;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms ease-out,
              transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s;
}
.mobile-menu.is-open .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-menu.is-open .mobile-menu-links a:nth-child(1) { transition-delay: 70ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(2) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(3) { transition-delay: 170ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(4) { transition-delay: 220ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(5) { transition-delay: 270ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(6) { transition-delay: 320ms; }

body.menu-open { overflow: hidden; }

/* Standardise the desktop-nav ↔ hamburger swap at 960px on every page,
   overriding each page's own (and inconsistent) breakpoint. */
@media (min-width: 961px) {
  header.nav .nav-links { display: flex !important; }
  header.nav .nav-toggle { display: none !important; }
}
@media (max-width: 960px) {
  header.nav .nav-links { display: none !important; }
  header.nav .nav-cta { display: none !important; }
  header.nav .nav-toggle { display: inline-flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: opacity 150ms ease-out, visibility 0s linear 150ms; transform: none; }
  .mobile-menu.is-open { transition: opacity 150ms ease-out, visibility 0s; }
  .mobile-menu-links a,
  .mobile-menu.is-open .mobile-menu-links a {
    transform: none;
    transition: opacity 150ms ease-out;
    transition-delay: 0s;
  }
}

/* ---- Shared mobile overflow safety net ----
   The oversized footer wordmark is set nowrap on several pages, which forces
   horizontal scroll on narrow screens. Let it wrap on phones. */
@media (max-width: 640px) {
  .footer-wordmark { white-space: normal; overflow-wrap: break-word; }
}