/* ==========================================================================
   Layout: mobile menu  (partials/site/menu.blade.php)
   --------------------------------------------------------------------------
   A full-screen sheet on the page colour: logo + round close button, the
   pages as a white rounded card of rows (number · label · arrow), then the
   actions and the language / hours footer. js/modules/sheet.js toggles
   [hidden] then .is-open, traps focus and closes on Esc.
   ========================================================================== */

.menu { position: fixed; inset: 0; z-index: var(--z-menu); }
.menu[hidden] { display: none; }

.menu__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow-y: auto;
    padding: 0 var(--gutter) calc(var(--s-6) + var(--safe-bottom));
    background: var(--page);
    color: var(--navy);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
    overscroll-behavior: contain;
}
.menu.is-open .menu__panel { opacity: 1; transform: none; }

.menu__top { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: var(--header-h-mobile); }
.menu__logo { width: 112px; color: var(--navy); }
.menu__close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 1.25rem;
}

/* ── Page rows in a white card ───────────────────────────────────────────── */
.menu__nav { padding: var(--s-2) var(--s-5); border-radius: var(--r-xl); background: var(--card); }
.menu__nav li + li { border-top: 1px solid var(--line); }
.menu__link {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-4);
}
.menu__no    { color: var(--teal); font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xs); }
.menu__label { font-weight: 600; font-size: var(--fs-md); }
.menu__arrow { color: var(--ink-faint); }
.menu__link.is-active .menu__label { font-weight: 700; }
.menu__link.is-active .menu__arrow {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: var(--lemon);
    color: var(--navy);
}

/* ── Actions & footer ────────────────────────────────────────────────────── */
.menu__actions { display: grid; gap: var(--gap); }
.menu__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }

.menu__foot { padding: var(--s-5); border-radius: var(--r-xl); background: var(--card); color: var(--ink-soft); font-size: var(--fs-sm); }
.menu__langs { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.menu__langs a {
    padding: 0.4em 1.1em;
    border-radius: var(--r-pill);
    background: var(--card-soft);
    color: var(--navy);
    font-weight: 600;
}
.menu__langs a.is-active { background: var(--navy); color: #fff; }
.menu__hours { display: flex; align-items: center; gap: var(--s-2); }
.menu__hours .icon { color: var(--teal); }