/* ── Mobile nav (hamburger + slide-down drawer) ───────────────────────────
   Pairs with nav.js, which clones .nav-links + .nav-cta into #navMobile.
   >1024px: DS shows .nav-links inline, .nav-toggle stays hidden.
   ≤1024px: DS hides .nav-links; .nav-toggle appears and opens the drawer.
   Bars swap white→dark to match the nav's island/scrolled states, like
   .nav-links do. Nav height is the DS 72px, so the drawer sits at top:72px. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  padding: 0; margin-left: 8px;
  background: transparent; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bar {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.95);
  transition: transform var(--sd-dur-base) var(--sd-ease),
              opacity var(--sd-dur-fast) var(--sd-ease),
              background-color var(--sd-dur-base) var(--sd-ease);
}
.nav-toggle .bar + .bar { margin-top: 6px; }
.nav.is-scrolled .nav-toggle .bar,
.nav.nav-open .nav-toggle .bar { background: var(--sd-neutral-950); }
.nav-toggle:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 3px; border-radius: 6px; }

/* open → X */
.nav.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* drawer open → solid nav bar with the dark logo */
.nav.nav-open {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.nav.nav-open .logo-light { display: none; }
.nav.nav-open .logo-dark  { display: block; }

.nav-mobile {
  position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 99;
  background: #fff; padding: 16px 24px 40px;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--sd-dur-base) var(--sd-ease),
              transform var(--sd-dur-base) var(--sd-ease),
              visibility 0s linear var(--sd-dur-base);
}
.nav-mobile.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--sd-dur-base) var(--sd-ease),
              transform var(--sd-dur-base) var(--sd-ease);
}
.nav-mobile .mlink {
  display: block; padding: 16px 4px; font-size: 20px;
  font-weight: var(--sd-fw-semibold); color: var(--sd-neutral-950);
  text-decoration: none; border-bottom: 1px solid var(--sd-hairline);
}
.nav-mobile .mlink:hover,
.nav-mobile .mlink:focus-visible { color: var(--sd-primary); }
.nav-mobile-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.nav-mobile-cta .btn { width: 100%; height: 54px; font-size: 17px; }
.nav-mobile-cta .login-link {
  text-align: center; padding: 12px; color: var(--sd-neutral-950);
  font-weight: var(--sd-fw-semibold); text-decoration: none;
}
.nav-mobile-cta .login-link:hover { color: var(--sd-primary); }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile, .nav-toggle .bar { transition: none; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
}