/* =====================================================================
   AS Group — restaurant menu pages (/menus/<brand>/, /ar/menus/<brand>/)
   The menu is the restaurant's original printed pages, shown as optimised images in sequence.
   Loaded on the menu pages only. Uses the shared tokens from theme.css; each page sets --brand
   (the restaurant's colour, used sparingly) and --sheet-max (display width of its pages).
   ===================================================================== */
.menu-page { --brand: var(--bronze); --menu-top: 0px; background: #fff; }

/* ---------- Heading block ---------- */
.menu-hero { padding: 28px 0 40px; background: var(--ivory); border-bottom: 1px solid var(--border); }
.menu-hero__back {
    display: inline-flex; align-items: center; gap: 8px; padding-block: 10px; margin: -10px 0 16px;   /* 44px tap height, same visual spacing */
    font-size: var(--fs-xs); font-weight: 500; color: var(--grey); text-decoration: none;
    transition: color .2s var(--ease);
}
.menu-hero__back:hover { color: var(--ink); }
.menu-hero__back i { font-size: .8rem; transition: transform .25s var(--ease); }
.menu-hero__back:hover i { transform: translateX(-3px); }
[dir="rtl"] .menu-hero__back:hover i { transform: translateX(3px); }
.menu-hero__inner { display: flex; align-items: center; gap: 36px; }
.menu-hero__logo { flex-shrink: 0; width: 132px; height: auto; }
.menu-hero__eyebrow {
    display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
    font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-dark);
}
.menu-hero__eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--brand); }
.menu-hero__title { margin: 0 0 8px; font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink); }
.menu-hero__line { margin: 0; font-size: var(--fs-lead); color: var(--body-text); }
.menu-hero__meta { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--grey); }

/* ---------- Section navigation (sticky, scrolls sideways on small screens) ---------- */
.menu-nav {
    position: sticky; top: var(--menu-top); z-index: 20;
    background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
.menu-nav__list {
    display: flex; gap: 6px; padding: 12px 0; overflow-x: auto; scrollbar-width: none;
    scroll-padding-inline: 16px; overscroll-behavior-x: contain;
}
.menu-nav__list::-webkit-scrollbar { display: none; }
.menu-nav__list a {
    flex-shrink: 0; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--grey); text-decoration: none; white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.menu-nav__list a:hover { border-color: var(--graphite); color: var(--ink); }
.menu-nav__list a.is-active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.menu-nav__num { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--bronze-dark); }
.menu-nav__list a.is-active .menu-nav__num { color: var(--stone); }

/* ---------- Menu pages ---------- */
.menu-body { padding: 48px 0 88px; background: var(--ivory); }
.menu-sheet {
    max-width: var(--sheet-max, 760px); margin: 0 auto 44px;
    scroll-margin-top: calc(var(--menu-top) + var(--menu-nav-h, 64px) + 20px);
}
.menu-sheet picture { display: block; }
.menu-sheet img {
    display: block; width: 100%; height: auto; border-radius: 6px; background: var(--stone);
    box-shadow: 0 1px 2px rgba(21, 23, 22, .06), 0 14px 36px -12px rgba(21, 23, 22, .22);
}
.menu-sheet__caption {
    display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 14px;
    font-size: var(--fs-xs); color: var(--grey);
}
.menu-sheet__caption span { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.menu-sheet__caption span::after { content: ''; display: inline-block; width: 16px; height: 1px; margin-inline-start: 10px; vertical-align: middle; background: var(--brand); }
.menu-end { display: flex; justify-content: center; padding-top: 8px; }

/* ---------- Wide screens: all chips visible ---------- */
@media (min-width: 992px) {
    .menu-nav__list { flex-wrap: wrap; overflow: visible; }
}

/* ---------- Small screens: pages run edge to edge for maximum legibility ---------- */
@media (max-width: 767px) {
    .menu-hero { padding: 20px 0 28px; }
    .menu-hero__back { margin-bottom: 10px; }
    .menu-hero__inner { gap: 20px; }
    .menu-hero__logo { width: 84px; }
    .menu-nav__list {
        padding: 10px 0; margin: 0 calc(var(--bs-gutter-x) * -.5); padding-inline: calc(var(--bs-gutter-x) * .5);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
    [dir="rtl"] .menu-nav__list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
    .menu-body { padding: 24px 0 64px; }
    .menu-body > .container { padding-inline: 10px; }
    .menu-sheet { margin-bottom: 28px; }
    .menu-sheet img { border-radius: 4px; }
    .menu-sheet__caption { margin-top: 10px; }
}

/* ---------- Arabic ---------- */
[dir="rtl"] .menu-hero__eyebrow { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .menu-hero__title { letter-spacing: 0; line-height: 1.4; }
[dir="rtl"] .menu-nav__list a, [dir="rtl"] .menu-sheet__caption { font-size: .86rem; }

@media (prefers-reduced-motion: reduce) {
    .menu-hero__back i, .menu-nav__list a { transition: none; }
}