/* mobile-nav.css — full-screen mega-menu sheet for the mobile burger (ROUND-2 item 5).
   Markup contract: #mnav[hidden][aria-hidden] > .mnav-in > .mnav-head(.mnav-logo img +
   .mnav-close > i*2) + .mnav-body( .mnav-group > .eyebrow + one of: .mnav-rows > a.mnav-row
   [data-svc] > figure>img + .mnav-row-copy > strong + .mnav-chips > span*, OR (sunmood #133) a
   div.mnav-row.mnav-split > figure>img + .mnav-row-copy > strong > a.mnav-main[data-svc] +
   .mnav-chips > a.mnav-sub* (when a row carries more than one destination — a link cannot sit
   inside another link, so the row itself is a <div> and the heading becomes its own <a>), OR
   .mnav-pills > a*, OR .mnav-areas > a* ) + .mnav-bar > a.btn* (a WhatsApp CTA + a tel: CTA). Pair with
   mobile-nav.js, which toggles [hidden]/.is-open and body.mnav-open.
   Tokens used: --green, --paper, --amber(via .btn-amber), --line-d, --r-card, --r-pill, --serif,
   --sans(inherited), --mute-d. All translucent surfaces are color-mix() derived from --paper/
   --green — no literal rgba() colours (FIX-2 #21).
   Reduced motion: row entrance animation is skipped entirely (rows render at full opacity); the
   menu still opens/closes instantly via [hidden], which is not itself motion. The row stagger
   itself is driven by mobile-nav.js (GSAP) - this file only sets each row's resting appearance, so
   rows are correct (fully visible) even before any script runs.
   Init: call initMobileNav({ trigger, menu }) from mobile-nav.js once both elements exist. */
/* FIX-2 #1 (J ruling): the sheet sits ABOVE the nav (z-index higher than .nav's 100) while open,
   so its own .mnav-close is the one visible, focusable close control - the real nav (including
   the burger, which would otherwise double as a second, confusingly-covered close affordance) is
   intentionally hidden beneath it, not partially visible above it. */
.mnav { position: fixed; inset: 0; z-index: 110; background: var(--green); color: var(--paper); }
.mnav-in { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; flex: none; }
.mnav-logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.mnav-close { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 14%, transparent); flex: none; }
.mnav-close i { position: absolute; width: 18px; height: 1.6px; background: currentColor; }
.mnav-close i:first-child { transform: rotate(45deg); }
.mnav-close i:last-child { transform: rotate(-45deg); }
.mnav-body { overflow-y: auto; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mnav-group .eyebrow { margin-bottom: 12px; }
.mnav-rows { display: flex; flex-direction: column; gap: 10px; }
.mnav-row { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: var(--r-card); background: color-mix(in srgb, var(--paper) 6%, transparent); }
.mnav-row figure { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: clip; background: color-mix(in srgb, var(--paper) 10%, transparent); }
.mnav-row img { width: 100%; height: 100%; object-fit: cover; }
.mnav-row-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mnav-row-copy strong { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.2; }
.mnav-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mnav-chips span { font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 12px; background: color-mix(in srgb, var(--paper) 10%, transparent); color: var(--mute-d); }
/* .mnav-split (協議書及證書, sunmood #133): the row cannot be one <a> because each of the three
   chips (婚前協議書 / 分居協議書 / 補領結婚證書) is its own destination. The heading link
   (.mnav-main) is stretched over the whole row (::after, inset:0 relative to the positioned
   .mnav-split) so a tap anywhere still opens /divorce-agreement/; each chip (.mnav-sub) sits above
   that overlay (z-index) with its own independent tap target. `.mnav-row` is kept on the wrapper
   (mobile-nav.js staggers every `.mnav-row` by that class alone, never caring whether it is an <a>
   or a <div>). Sized to clear the work order's >=24px tap-target floor directly (inline-flex +
   min-height), not via an oversized invisible ::before bleed: at 390/360px the three chips wrap to
   two rows only 6px apart, and a bleed wide enough to reach 44px would overlap the next row and
   misroute an edge tap there. */
.mnav-split { position: relative; }
.mnav-split .mnav-main { color: inherit; }
.mnav-split .mnav-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mnav-sub { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.mnav-sub:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.mnav-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnav-pills a { display: flex; align-items: center; height: 46px; padding: 0 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--paper) 8%, transparent); font-size: 14px; }
.mnav-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav-areas span { height: 38px; padding: 0 14px; display: flex; align-items: center; border-radius: 19px; background: color-mix(in srgb, var(--paper) 8%, transparent); font-size: 13px; }
.mnav-bar { flex: none; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--green); border-top: 1px solid var(--line-d); }
.mnav-bar .btn { flex: 1; }
/* FIX-2 #22: scroll-lock owned here only (the identical rule in site.css was deleted). */
body.mnav-open { overflow: hidden; }
@media (min-width: 1024px) {
  .mnav { display: none; }
}