/* ==========================================================================
   COMPONENT: Mobile navigation (<1180px)
   Full-screen overlay · geometry-motif backdrop · staggered entrance ·
   drill-down stack with back buttons (per Muslim Hands, EXPLORE.md 1B).
   An accordion pile cannot survive eight categories of 6–15 items at 360px.
   ========================================================================== */

.c-mnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobilenav);
  background-color: var(--c-ink);
  color: var(--c-text-inv);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--d-base) var(--e-out),
    visibility 0s linear var(--d-base);
}

.c-mnav.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

@media (min-width: 1180px) {
  .c-mnav { display: none; }
}

/* Geometry-motif backdrop — texture, not wallpaper. */
.c-mnav__motif {
  position: absolute;
  inset: 0;
  opacity: var(--motif-opacity);
  background-image: url("../../icons/geometry/lattice-tile.svg");
  background-size: 180px;
  background-repeat: repeat;
  pointer-events: none;
}

.c-mnav__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  min-height: var(--header-h);
  border-block-end: 1px solid rgb(255 255 255 / 0.12);
  flex: none;
}

.c-mnav__head svg { height: 34px; width: auto; }

/* --------------------------------------------------------------------------
   DRILL-DOWN STACK
   Panels are siblings; the active one is translated into view. Only the
   active panel is focusable — inert is applied by navigation.js.
   -------------------------------------------------------------------------- */

.c-mnav__body {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.c-mnav__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5) var(--gutter) var(--sp-9);
  transform: translateX(100%);
  transition: transform var(--d-base) var(--e-in-out);
}

.c-mnav__panel--root { transform: translateX(0); }

/* Root slides left when a sub-panel opens, so the stack reads as depth. */
.c-mnav.is-drilled .c-mnav__panel--root { transform: translateX(-28%); }

.c-mnav__panel.is-active { transform: translateX(0); }

/* The sub-panel has to be opaque, and this is the defect the drill-down shipped
   with. Both panels are in the flow while drilled — root stays rendered at -28%
   on purpose, so the stack reads as depth rather than a cut — but a transparent
   sub-panel meant the root showed straight through it: "Zakat Calculator" landed
   on top of "Our Work", and root's own scrollbar drew a grey rail down the middle
   of the drawer. --c-ink is the drawer's own ground, so this changes nothing
   about the design; it just stops two panels sharing one set of pixels. */
.c-mnav__panel:not(.c-mnav__panel--root) {
  background-color: var(--c-ink);
}

/* Root is behind glass while drilled: no scrollbar of its own, no pointer
   target, and dimmed so the eye stays on the panel in front. Keyboard reach is
   already handled — navigation.js applies inert to every panel but the active
   one. */
.c-mnav.is-drilled .c-mnav__panel--root {
  overflow: hidden;
  pointer-events: none;
  opacity: 0.5;
  transition:
    transform var(--d-base) var(--e-in-out),
    opacity   var(--d-base) var(--e-out);
}

/* --------------------------------------------------------------------------
   LINKS — staggered entrance
   -------------------------------------------------------------------------- */

.c-mnav__list {
  display: grid;
  gap: var(--sp-1);
}

.c-mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--c-text-inv);
  text-align: start;
  text-decoration: none;
  border-block-end: 1px solid rgb(255 255 255 / 0.1);

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.c-mnav.is-open .c-mnav__panel--root .c-mnav__link,
.c-mnav__panel.is-active .c-mnav__link {
  opacity: 1;
  transform: translateY(0);
}

.c-mnav__link svg { width: 18px; height: 18px; flex: none; opacity: 0.6; }

/* Sub-panel links are smaller and use the body face. */
.c-mnav__panel:not(.c-mnav__panel--root) .c-mnav__link {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  padding-block: var(--sp-3);
}

/* The description is a sibling of the link text, not a child of it, so on a
   space-between flex row it landed to the RIGHT of the title — "Zakat Calculator
   … Work out what you owe" on one 375px line, with the two pushed to opposite
   edges. `flex-basis: 100%` on a wrapping row puts it on its own line under the
   title, which is where a description belongs. */
.c-mnav__link { flex-wrap: wrap; }

.c-mnav__link-desc {
  flex-basis: 100%;
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--c-text-muted-inv);
  margin-block-start: 2px;
}

/* --------------------------------------------------------------------------
   BACK BUTTON
   -------------------------------------------------------------------------- */

.c-mnav__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted-inv);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--r-full);
  min-height: 40px;
}

.c-mnav__back:hover { color: var(--c-text-inv); }
.c-mnav__back svg { width: 16px; height: 16px; }

.c-mnav__panel-title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  color: var(--c-text-inv);
  margin-block-end: var(--sp-4);
}

/* --------------------------------------------------------------------------
   FOOTER OF THE OVERLAY — auth + utility, which the compact header drops
   -------------------------------------------------------------------------- */

.c-mnav__foot {
  position: relative;
  flex: none;
  padding: var(--sp-5) var(--gutter);
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  display: grid;
  gap: var(--sp-4);
  background-color: var(--c-ink-90);
}

.c-mnav__auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.c-mnav__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  color: var(--c-text-muted-inv);
}

/* --------------------------------------------------------------------------
   SHORT VIEWPORTS — landscape phones
   --------------------------------------------------------------------------
   A phone on its side is 375px tall. The drawer spends 80px of that on the head
   and 100px on the footer, and its links are --fs-xl with --sp-4 padding because
   they were sized for a 667px column — so one and a half items were visible and
   the other seven categories were below a scroll nobody would guess was there.
   Everything below trades display size for items on screen, which is the right
   trade when there is no screen. The 44px tap floor is unaffected: the links keep
   a 46px box at --sp-2 padding.
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (max-width: 1179px) {
  .c-mnav__head { min-height: 0; padding-block: var(--sp-2); }
  .c-mnav__head svg { height: 26px; }

  .c-mnav__panel { padding-block: var(--sp-3) var(--sp-5); }

  .c-mnav__link {
    font-size: var(--fs-base);
    padding-block: var(--sp-2);
    min-height: 46px;
  }

  /* The description is the first thing to go — it is a nicety, and it costs a
     whole row per item at the width where rows are scarcest. */
  .c-mnav__link-desc { display: none; }

  .c-mnav__back { margin-block-end: var(--sp-3); }
  .c-mnav__panel-title { font-size: var(--fs-lg); margin-block-end: var(--sp-2); }

  /* The footer's auth buttons and language toggle are reachable by scrolling the
     panel to the end on a phone; pinned, they were a fifth of the viewport. */
  .c-mnav__foot { padding-block: var(--sp-3); }
  .c-mnav__auth { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
}

/* Lock the page behind the overlay. */
.is-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   STICKY MOBILE DONATE BAR — persistent, with a subtle pulse.
   -------------------------------------------------------------------------- */

.c-donate-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-donatebar);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--gutter);
  min-height: var(--donatebar-h);
  /* Opaque, not frosted — same reasoning as the header. A fixed bar with
     backdrop-filter forces the compositor to re-blur everything behind it on
     every scroll frame, and this one sits on mobile, where the budget is
     tightest. The bar is only 64px tall, so nothing is gained by seeing
     through it. */
  background-color: var(--c-plaster);
  border-block-start: 1px solid var(--c-line);
  padding-block-end: max(var(--sp-2), env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  .c-donate-bar { display: none; }
}

.c-donate-bar__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: var(--c-text-muted);
}

.c-donate-bar__label strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* Pulse — box-shadow only, so no layout or paint of the button itself. */
.c-donate-bar .c-btn--donate { animation: pulse-donate 3.4s var(--e-in-out) infinite; }

@keyframes pulse-donate {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgb(245 165 36 / 0); }
  84%           { box-shadow: 0 0 0 8px rgb(245 165 36 / 0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .c-donate-bar .c-btn--donate { animation: none; }
}