/* ── Mobile navigation ─────────────────────────────────────────────
   One drawer, four destinations, on every public page. Desktop is
   untouched: the trigger does not exist above 900px, and the drawer is
   inert until it is opened.

   Two header shapes carry it. .g-banner centres its brand and has no
   call to action, so the trigger is pinned to the inline end and the
   centring is left alone. .hd is already a flex row ending in its CTA,
   so the trigger simply becomes the next item after it.

   Colours come from the pages that define them; the fallbacks are the
   same values, for the two headers that inline their own CSS.
   ────────────────────────────────────────────────────────────────── */

.mnav-btn{ display:none }

@media (max-width:900px){
  .mnav-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;                /* the whole target, not just the glyph */
    padding:0;border:0;background:none;cursor:pointer;
    border-radius:10px;flex-shrink:0;
    color:var(--ink,#2E2014);
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-btn:focus-visible{ outline:2px solid var(--teal,#1F6468);outline-offset:2px }
  .mnav-btn svg{ width:22px;height:22px;display:block }

  /* .g-banner centres one child — keep that, and float the trigger out of flow */
  .g-banner{ position:sticky }
  .g-banner .mnav-btn{
    position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  }
  /* the homepage header is already a row; the trigger follows the CTA.
     Its 44px reclaims width from the row, which pushed the wordmark onto a
     second line at 360-390px. The row's own 26px gaps pay for it instead —
     the touch target keeps its full size. */
  .hd-in{ gap:10px }
  .hd-in .mnav-btn{ color:#fff }
  .hd.on .mnav-btn{ color:var(--ink,#2E2014) }
  .hd-in .brand-word{ white-space:nowrap }
}

/* ── the drawer itself ── */
.mnav-scrim{
  position:fixed;inset:0;z-index:1000;
  background:rgba(46,32,20,.52);
  opacity:0;transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.mnav-panel{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:1001;
  width:min(320px,86vw);
  display:flex;flex-direction:column;
  background:var(--paper-hi,#F9F1DD);
  border-inline-end:1.5px solid var(--rule,#C4A876);
  box-shadow:-18px 0 44px rgba(46,32,20,.22);
  transform:translateX(100%);              /* the panel sits at the right edge in RTL */
  transition:transform .26s cubic-bezier(.22,.7,.3,1);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior:contain;
}
.mnav-scrim[hidden],.mnav-panel[hidden]{ display:none }
.mnav-open .mnav-scrim{ opacity:1 }
.mnav-open .mnav-panel{ transform:translateX(0) }

.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px 12px;
  border-bottom:1px solid var(--rule,#C4A876);
}
.mnav-brand{ display:flex;align-items:center;gap:9px;text-decoration:none }
.mnav-brand img{ width:26px;height:26px;display:block }
.mnav-brand span{
  font-family:var(--font-display,'Suez One',serif);
  font-size:18px;color:var(--ink,#2E2014);line-height:1.1;
}
.mnav-close{
  width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;padding:0;cursor:pointer;border-radius:10px;
  color:var(--ink-soft,#6F5A3B);
  -webkit-tap-highlight-color:transparent;
}
.mnav-close:focus-visible{ outline:2px solid var(--teal,#1F6468);outline-offset:2px }
.mnav-close svg{ width:19px;height:19px;display:block }

/* four destinations, sized to be arrived at rather than scanned past */
.mnav-list{ display:flex;flex-direction:column;gap:6px;padding:14px 12px;overflow-y:auto }
.mnav-list a{
  display:block;min-height:44px;
  padding:13px 14px;border-radius:var(--r,12px);
  font-family:var(--font,'Noto Sans Hebrew',system-ui,sans-serif);
  font-size:17px;font-weight:600;line-height:1.35;
  color:var(--ink,#2E2014);text-decoration:none;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.mnav-list a:active{ background:rgba(31,100,104,.08) }
.mnav-list a:focus-visible{ outline:2px solid var(--teal,#1F6468);outline-offset:2px }
/* where you already are — marked, not shouted */
.mnav-list a[aria-current="page"]{
  background:rgba(31,100,104,.09);
  border-color:rgba(31,100,104,.28);
  color:var(--teal,#1F6468);
}

@media (prefers-reduced-motion:reduce){
  .mnav-scrim,.mnav-panel{ transition:none }
}