/* ============================================================
   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, two things have to happen to the page
   header:

   1. z-index bump above the drawer (100) so brand + the morphed X
      stay visible and clickable.

   2. position: fixed top: 0. Body scroll-lock applies position:
      fixed to body, which kills sticky behavior on its descendants.
      Without this override the header floats off to its natural
      document position — visible if user opened the drawer at the
      top of the page, but stranded off-screen if they were
      scrolled. Forcing fixed top:0 keeps it pinned to viewport top
      regardless of where the user scrolled before opening.

   Solid background so the drawer isn't visible behind a translucent
   header backdrop blur. Targets common header class patterns. */
body.mnav-open .head,
body.mnav-open .site-head,
body.mnav-open .site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 110 !important;
  background: var(--mnav-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* -------- Collapsible group inside the drawer (e.g. "Services ▾") --
   Wrap a set of related links in <details class="mnav__group"> with a
   <summary> and a .mnav__sub container. Native HTML, no JS. */
.mnav__group {
  border-bottom: 1px solid var(--mnav-divider);
  /* Inherit the staggered reveal from .mnav__link parent rules. */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 280ms ease,
    transform 380ms var(--mnav-ease);
}
body.mnav-open .mnav__group { opacity: 1; transform: none; }

.mnav__group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0.2rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--mnav-text);
  cursor: pointer;
}
.mnav__group > summary::-webkit-details-marker,
.mnav__group > summary::marker { display: none; }
.mnav__group > summary svg {
  flex: 0 0 auto;
  color: var(--mnav-text-dim);
  transition: transform 240ms var(--mnav-ease);
}
.mnav__group[open] > summary svg { transform: rotate(180deg); }

.mnav__sub {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  padding-bottom: 0.4rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  margin-left: 0.2rem;
}
.mnav__sublink {
  display: block;
  padding: 0.7rem 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--mnav-text-dim);
  border-bottom: 1px solid var(--mnav-divider);
  transition: color 180ms ease;
}
.mnav__sublink:last-child { border-bottom: none; }
.mnav__sublink:hover { color: var(--mnav-text); }

/* -------- 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.
   Targets both .mnav__link and .mnav__group as direct children of
   the panel so a collapsible group cascades in alongside flat links. */
body.mnav-open .mnav__link { opacity: 1; transform: none; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(1)  { transition-delay: 90ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(2)  { transition-delay: 130ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(3)  { transition-delay: 170ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(4)  { transition-delay: 210ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(5)  { transition-delay: 250ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(6)  { transition-delay: 290ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(7)  { transition-delay: 330ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(8)  { transition-delay: 370ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(9)  { transition-delay: 410ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(10) { transition-delay: 450ms; }
body.mnav-open :is(.mnav__link, .mnav__group):nth-child(11) { transition-delay: 490ms; }
body.mnav-open :is(.mnav__link, .mnav__group):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; }
}