/* ============================================================
   mobilenav — Stripe-style mobile drawer.

   Drawer slides in from the right with a cubic-bezier easing, the
   backdrop fades + blurs in, the hamburger morphs into an X, and
   the nav links cascade in with a staggered transition-delay.

   Themeable via CSS variables on :root. Falls back to dark defaults.
   ============================================================ */

/* :where(:root) gives the module defaults zero specificity so any
   site that defines :root { --mnav-cta-bg: ... } overrides cleanly,
   regardless of stylesheet load order. */
:where(:root) {
  --mnav-bg:        var(--ink-deep, #0a0e1a);
  --mnav-text:      var(--paper, #f4f1ea);
  --mnav-text-dim:  rgba(255, 255, 255, 0.55);
  --mnav-divider:   rgba(255, 255, 255, 0.08);
  --mnav-cta-bg:    var(--action, #c8252c);
  --mnav-cta-text:  #ffffff;

  /* Stripe-ish easing — slightly elastic feel without overshooting. */
  --mnav-ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --mnav-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);

  --mnav-dur-open:  380ms;
  --mnav-dur-close: 280ms;
}

/* -------- Hamburger toggle -------- */
.mnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: 6px;
  color: inherit;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 110;
  transition: border-color 200ms ease, background 200ms ease;
}
.mnav-toggle:hover { border-color: rgba(244, 241, 234, 0.40); }
.mnav-toggle:focus-visible {
  outline: 2px solid var(--mnav-cta-bg);
  outline-offset: 2px;
}

.mnav-toggle__bars {
  position: relative;
  width: 22px; height: 16px;
  pointer-events: none;
}
.mnav-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform 320ms var(--mnav-ease),
    opacity 180ms ease,
    top 320ms var(--mnav-ease);
}
.mnav-toggle__bars span:nth-child(1) { top: 0; }
.mnav-toggle__bars span:nth-child(2) { top: 7px; }
.mnav-toggle__bars span:nth-child(3) { top: 14px; }

/* Bars morph into an X when the drawer is open. */
body.mnav-open .mnav-toggle__bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
body.mnav-open .mnav-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
body.mnav-open .mnav-toggle__bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* Hide on desktop when the modifier class is present. */
.mnav-toggle--mobile-only { display: none; }
@media (max-width: 1080px) {
  .mnav-toggle--mobile-only { display: inline-flex; }
}

/* -------- Drawer overlay --------
   Bindingstone-style: the entire overlay fades in with no transform on
   the container itself. The cascading "drop in" effect lives on the
   individual links (translateY from below). Cleaner, scrolls more
   naturally, less to go wrong on resize. */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--mnav-bg);
  color: var(--mnav-text);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition:
    opacity var(--mnav-dur-close) var(--mnav-ease),
    visibility 0s var(--mnav-dur-close);
}
body.mnav-open .mnav {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--mnav-dur-open) var(--mnav-ease),
    visibility 0s 0s;
}

/* Backdrop is unused in the fade-only pattern (the .mnav itself is the
   solid overlay) but kept stylable for sites that might want partial
   coverage in a future variant. */
.mnav__backdrop { display: none; }

.mnav__panel {
  /* Panel is just the inner layout container — stretches to fill the
     fixed parent and provides padding for content. Top padding leaves
     room for the page header that floats above; .mnav__cta has
     margin-top: auto so it pins to the bottom when content fits. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--mnav-pad-top, 6rem) 1.6rem 2rem;
}

/* -------- Lift the page header above the open drawer --------
   When the drawer is open, bump the header's z-index above the
   drawer (100) so brand + the morphed X stay visible and clickable.
   Solid background so the drawer isn't visible behind translucent
   header backdrop blur. Targets common header class patterns;
   sites with custom selectors can add their own rule. */
body.mnav-open .head,
body.mnav-open .site-head,
body.mnav-open .site-header {
  z-index: 110 !important;
  background: var(--mnav-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* -------- Nav links -------- */
.mnav__link {
  display: block;
  padding: 1.05rem 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--mnav-text);
  border-bottom: 1px solid var(--mnav-divider);
  opacity: 0;
  /* Bindingstone-style: items rise UP from 16px below their final
     position, cascading into place. Easier on the eye than a slide
     and matches how the surrounding overlay just fades in. */
  transform: translateY(16px);
  transition:
    opacity 320ms ease,
    transform 380ms var(--mnav-ease),
    color 180ms ease;
}
.mnav__link:hover { color: var(--mnav-text-dim); }
.mnav__link:focus-visible {
  outline: none;
  color: var(--mnav-cta-bg);
}

/* Stagger reveal — Stripe-style cascade.
   Times the cascade so the last link finishes ~520ms after open. */
body.mnav-open .mnav__link { opacity: 1; transform: none; }
body.mnav-open .mnav__link:nth-child(1)  { transition-delay: 90ms; }
body.mnav-open .mnav__link:nth-child(2)  { transition-delay: 130ms; }
body.mnav-open .mnav__link:nth-child(3)  { transition-delay: 170ms; }
body.mnav-open .mnav__link:nth-child(4)  { transition-delay: 210ms; }
body.mnav-open .mnav__link:nth-child(5)  { transition-delay: 250ms; }
body.mnav-open .mnav__link:nth-child(6)  { transition-delay: 290ms; }
body.mnav-open .mnav__link:nth-child(7)  { transition-delay: 330ms; }
body.mnav-open .mnav__link:nth-child(8)  { transition-delay: 370ms; }
body.mnav-open .mnav__link:nth-child(9)  { transition-delay: 410ms; }
body.mnav-open .mnav__link:nth-child(10) { transition-delay: 450ms; }
body.mnav-open .mnav__link:nth-child(11) { transition-delay: 490ms; }
body.mnav-open .mnav__link:nth-child(12) { transition-delay: 530ms; }

/* -------- Bottom CTA pill -------- */
.mnav__cta {
  margin-top: auto;
  margin-bottom: env(safe-area-inset-bottom, 0);
  padding: 1.05rem 1.4rem;
  background: var(--mnav-cta-bg);
  color: var(--mnav-cta-text);
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 320ms ease,
    transform 380ms var(--mnav-ease),
    background 200ms ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
}
body.mnav-open .mnav__cta {
  opacity: 1;
  transform: none;
  transition-delay: 580ms;
}
.mnav__cta:active { transform: translateY(1px); }

/* -------- Body scroll lock while drawer is open --------
   iOS-safe: position-fixed + saved scroll position via inline style
   set by the JS module. */
body.mnav-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .mnav,
  .mnav__link,
  .mnav__cta,
  .mnav-toggle__bars span {
    transition-duration: 100ms !important;
    transition-delay: 0ms !important;
  }
  body.mnav-open .mnav__link { transform: none; }
}