/* ===== PREMIUM MENU CARD STYLES — Kahramana Baghdad ===== */

:root {
    --card-bg: var(--col-dark);
    --card-border: rgba(209, 159, 81, 0.15);
    --card-hover-border: rgba(209, 159, 81, 0.4);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --card-radius: 18px;
    /* Slightly more rounded for premium feel */
}

/* ── Grid Override ── */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.8rem;
    padding-bottom: 2rem;
}

/* ── New Premium Card ── */
/* No scroll-margin-top here on purpose. The deep-link landing offset depends on
   the pinned height of .sticky-filter, which is 157px at 375px and 181px at
   1280px — a single static value is wrong at one of those widths by design.
   getMenuFragmentScrollOffset() in menu.html measures it and is the only owner. */
.menu-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--ease-magnetic), box-shadow 0.4s var(--ease-magnetic), border-color 0.4s var(--ease-magnetic);
    height: 100%;
}

.menu-item:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
    border-color: var(--card-hover-border);
}

/* ── Image Wrap ── */
.menu-item-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--col-deep);
}

.menu-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-magnetic);
}

.menu-item:hover .menu-item-img {
    transform: scale(1.08);
}

/* ── Content Body ── */
.menu-item-body {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.6rem;
    text-align: center;
}

.menu-item-name {
    font-family: var(--font-drama);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--col-cream);
    line-height: 1.3;
}

.menu-item-desc {
    font-size: 0.88rem;
    color: var(--col-parchment);
    opacity: 0.75;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0.5rem;
}

/* ── Size Dropdown ── */
.menu-size-select-wrap {
    position: relative;
    margin: 0.4rem 0;
}

.menu-size-select-wrap::after {
    content: '▾';
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--col-gold);
    font-size: 0.8rem;
    pointer-events: none;
}

.menu-size-select {
    width: 100%;
    appearance: none;
    background: rgba(45, 24, 11, 0.6);
    border: 1px solid rgba(209, 159, 81, 0.25);
    border-radius: 10px;
    color: var(--col-cream);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
    padding-inline-end: 2.2rem;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    text-align: start;
}

.menu-size-select:focus {
    border-color: var(--col-gold);
    background: rgba(45, 24, 11, 0.9);
}

/* ── Footer ── */
.menu-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem 1.2rem;
    border-top: 1px solid rgba(209, 159, 81, 0.1);
}

.menu-item-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

html[dir="rtl"] .menu-item-price-wrap {
    align-items: flex-end;
}

.menu-item-price {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--col-gold);
    line-height: 1;
}

.menu-item-currency {
    font-size: 0.7rem;
    color: var(--col-gold-dim);
    margin-top: 2px;
}

.menu-item-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    background: var(--col-gold);
    color: var(--col-dark);
    border: none;
    border-radius: 12px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--ease-magnetic);
}

.menu-item-add:hover:not(:disabled) {
    background: var(--col-cream);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(209, 159, 81, 0.3);
}

.menu-item-add:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.menu-item-add svg {
    width: 16px;
    height: 16px;
}

/* ── Animation ── */
.menu-item {
    animation: cardAppear 0.6s var(--ease-magnetic) backwards;
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHATSAPP CTA vs CART FAB — a page stylesheet overriding GLOBAL chrome.
   Unusual on purpose; read this before moving or "tidying" it.

   `.floating-wa-cta` and `.kh-float-cart` both resolve to the physical
   RIGHT in Arabic: the cart FAB is pinned right in BOTH locales by design
   (cart.css `html[dir=ltr]{inset-inline-end}` / `html[dir=rtl]{inset-inline-start}`,
   2026-07-15), and the CTA became right-in-RTL when it was converted from
   `left` to `inset-inline-start` (8c0edb2) to stop it colliding with the
   row's (+) button. Their vertical bands then coincided — cart FAB
   95–153px up from the viewport bottom at ≤900px, CTA 96–149px — so the
   cart FAB (z-index 9992) completely covered the CTA (z-index 999):
   58×53px of occlusion at EVERY width ≥381px, desktop included. Arabic
   only; measured, not inferred. ≤380px was clear only because cart.css's
   ≤380px block drops the FAB to 20–72px, which is why a 375px check
   missed it.

   The fix is breakpoint-dependent, because the two breakpoints have
   different amounts of room. Measured bands, px UP from viewport bottom:

     capsule nav    24– 94   (full width)
     cart FAB       95–153   (right; 20–72 under cart.css's ≤380px block)
     sticky filter 161–246   (full width — the binding constraint)

   >900px — VERTICAL SEPARATION WORKS. The cart FAB tops out at 86px, the
   safe-zone correction does not run at all above 900px, so raising the CTA
   to 7rem (112px) puts it at 112–165px: clear by 26px, verified at
   901/1024/1280/1440. The CTA keeps shared.css's `inset-inline-start`.

   ≤900px — VERTICAL SEPARATION IS IMPOSSIBLE, so we go horizontal instead.
   The only gap on the RIGHT is between the cart FAB's top (153) and the
   sticky panel's bottom (161): EIGHT pixels. The CTA is 53px tall, and
   that height is set by its 38px icon plus padding — hiding `.wa-cta-text`
   takes it from 133×53 to 66×53, i.e. halves the WIDTH and changes the
   height by zero. Even an aggressively compacted 45px pill needs 5.6× the
   room available. Compressing the safe-zone's 12px margin buys 12px and
   makes the filter bar sit closer to the chrome it is being protected
   from. Raising the CTA into the sticky panel's band was implemented and
   measured: it broke two e2e invariants (`overlapsFloatingWaCta`) and was
   reverted. Moving the cart FAB down into cart.css's ≤380px geometry also
   works geometrically — and permanently blocks the "الرئيسية" bottom-nav
   button, so it was rejected too.

   So at ≤900px the CTA goes back to the PHYSICAL LEFT, deliberately
   breaking the logical-property convention the rest of this codebase
   follows. The left band (capsule top 94 → sticky bottom 161) is 67px and
   fits the 53px pill. The cost is real and accepted: in Arabic the row's
   (+) buttons are also on the left, so they collide — but that collision
   is TRANSIENT (the buttons scroll, a given (+) is reachable at ~73% of
   scroll positions) whereas the cart FAB hid this CTA 100% of the time.
   A sometimes-blocked (+) beats an always-invisible ordering CTA.

   ⚠ Do NOT "fix" the ≤900px rule back to `inset-inline-start` for
   consistency. That is exactly what 8c0edb2 did, and it is what put the
   cart FAB on top of this button at every width ≥381px, desktop included.

   SCOPING IS THE FILE, NOT A SELECTOR. menu-cards.css is linked from
   public/menu.html and nowhere else (verified), and `.kh-float-cart` only
   exists on /menu (measured null on /, /contact, /riffa, /gallery), so a
   bare selector cannot leak. A `body:has(.kh-float-cart)` guard was
   considered and rejected: if `:has()` ever failed it would fail OPEN,
   back to a fully hidden ordering CTA. A bare selector always applies.
   If this file is ever linked from a second page, add that guard.

   Base rule first, media query second — both live HERE rather than in
   shared.css so this stays a 2-file change instead of a 15-reference
   cache-bust across all 14 pages. Order matters: menu-cards.css loads
   after shared.min.css, so the base rule below also outranks shared.css's
   own ≤900px `bottom: 6rem`; the media query below then outranks the base.

   ⚠ Currently inert: the `display:none` rule further down this file (the
   "redundant on /menu" block) hides this element outright on this page, so
   these position values don't paint here today. Left as-is rather than
   deleted — the geometry stays correct if that block is ever removed, and
   rewriting/pruning the analysis above it is a separate cleanup, not part
   of the sitewide fix that moved shared.css's own numbers (see that file's
   `.floating-wa-cta` comment for the current, non-/menu-specific picture).
   ═══════════════════════════════════════════════════════════════════════ */
.floating-wa-cta {
    bottom: 7rem;
}

@media (max-width: 900px) {
    .floating-wa-cta {
        /* `inset-inline-start: auto` first — shared.css sets it, and in RTL it
           resolves to `right`, so leaving it would pin both edges and the
           physical `left` below would never take effect. */
        inset-inline-start: auto;
        left: 1.2rem;
        /* Restores shared.css's own ≤900px value, which the base rule above
           would otherwise override to 7rem at this breakpoint too. */
        bottom: 6rem;
    }
}

/* On /menu, the cart's own WhatsApp checkout sends a structured, itemized
   order — this generic "I'd like to order" quick-CTA is redundant here, and
   the header nav's "اطلب" button (.nav-cta-link, sticky, reachable at every
   scroll depth) already covers the same quick-order use case. Scoped via
   this file being linked only from menu.html, same as the block above. */
.floating-wa-cta {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE ROW LIST (≤767px) — THIS BLOCK'S POSITION IS LOAD-BEARING.

   It must stay LAST in this file, and this file must stay the LAST
   stylesheet linked in menu.html (see its <head>). Every override below
   wins on source order alone against equal-specificity rules in
   shared.min.css and menu.css — there is no !important anywhere. Moving
   the block, or reordering the <link> tags, silently reverts the mobile
   layout with no error and no failing test.

   Scoped to `.menu-grid > .menu-item` deliberately: the static SEO/no-JS
   block between menu.html's STATIC-MENU markers uses
   `section.menu-category > article.menu-item` with NO .menu-grid
   ancestor, so it keeps its original form for crawlers.

   Four rules below are deliberately NOT under `.menu-grid > .menu-item`,
   because they structurally cannot be: `.menu-grid` IS the container being
   switched to one column, and `.category-title` / `.category-count` /
   `.category-section` are section-header siblings of the grid, not
   descendants of a menu item. Scoping them further would require DOM
   changes, which this CSS-only change forbids. Blast radius verified nil:
   this file is linked from menu.html ONLY, and the STATIC-MENU block marks
   its headings up as a bare <h2> inside `section.menu-category` — it
   carries none of these four class names, so the crawler block is untouched.

   Breakpoint is 767px, NOT the 900px used by the filter-bar safe-zone
   system in menu.css — those two solve unrelated problems and must not
   be merged.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 1rem;
    }

    /* ── Row shell: flat list, hairline separator, no card chrome ── */
    .menu-grid > .menu-item {
        /* The thumbnail size, the button size and the top padding each feed
           the (+) offset further down. Kept as variables so the three stay
           in step: editing a literal in one place and not the others moves
           the button off the thumbnail corner silently — no error, and no
           test catches it (a bounding box cannot see overflow clipping). */
        --row-thumb-size: 104px;
        --row-add-size: 44px;
        --row-pad-block-start: 0.9rem;

        position: relative;
        display: grid;
        grid-template-columns: 1fr var(--row-thumb-size);
        grid-template-areas:
            "body media"
            "foot media";
        column-gap: 0.9rem;
        align-items: start;
        height: auto;
        /* Block-end padding must clear the half-button that hangs below the
           thumbnail, since .menu-item still inherits overflow:hidden from
           shared.css. Derived from --row-add-size rather than hardcoded, and
           in px so the 4px margin survives a non-16px root font-size. */
        padding-block: var(--row-pad-block-start) calc(var(--row-add-size) / 2 + 4px);
        background: none;
        border: 0;
        border-block-end: 1px solid color-mix(in srgb, var(--col-gold) 14%, transparent);
        border-radius: 0;
        box-shadow: none;
        animation: none;
        transition: none;
    }

    .menu-grid > .menu-item:last-child {
        border-block-end: 0;
    }

    /* Touch devices never truly hover; kill the desktop lift + image zoom.
       Only transform needs resetting — the row's own box-shadow and border
       declarations above already outrank the desktop :hover rules. */
    .menu-grid > .menu-item:hover {
        transform: none;
    }

    .menu-grid > .menu-item:hover .menu-item-img {
        transform: none;
    }

    /* ── Thumbnail ── */
    .menu-grid > .menu-item .menu-item-img-wrap {
        grid-area: media;
        width: var(--row-thumb-size);
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        /* Load-bearing: the (+) offset below is measured from the row's
           top edge, so the thumbnail must start there. `center` would
           desynchronise the button on rows made taller by a dropdown. */
        align-self: start;
    }

    .menu-grid > .menu-item .menu-item-img {
        height: 100%;
        transition: none;
    }

    /* ── Text column ── */
    .menu-grid > .menu-item .menu-item-body {
        grid-area: body;
        padding: 0;
        gap: 0.3rem;
        text-align: start;
    }

    .menu-grid > .menu-item .menu-item-name {
        /* --font-primary, not --font-drama: Playfair Display carries no
           Arabic glyphs, so Arabic already falls back and the pairing is
           inconsistent at this size. */
        font-family: var(--font-primary);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 0;
        text-align: start;
    }

    .menu-grid > .menu-item .menu-item-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.82rem;
        opacity: 0.6;
        line-height: 1.5;
        margin: 0;
        /* The desktop card gives this flex-grow so it pushes the footer down
           (`flex: 1` above, `flex-grow: 1` in menu.css). In a row the footer
           is a grid area, so the growth just inflates the description. */
        flex: none;
    }

    /* ── Size / variant selects stay visible and operable: the selected
          option drives the displayed price AND the cart line key. ── */
    .menu-grid > .menu-item .menu-size-select-wrap {
        margin: 0.15rem 0 0;
    }

    /* Padding trimmed (start 0.7→0.5rem, end 1.9→1.4rem) to buy back ~11px of
       text width for the selected option, which clips rather than ellipsises
       on a closed <select>. The chevron below moves in by the same amount so
       the text still clears it — the two MUST be edited together: the
       inline-end padding exists solely to reserve room for that pseudo-element,
       so trimming one without the other runs the price under the ▾. */
    .menu-grid > .menu-item .menu-size-select {
        font-size: 0.78rem;
        padding: 0.42rem 0.5rem;
        padding-inline-end: 1.4rem;
        border-radius: 10px;
    }

    .menu-grid > .menu-item .menu-size-select-wrap::after {
        inset-inline-end: 0.5rem;
    }

    /* ── Footer becomes the price row; the Add button leaves the flow ── */
    .menu-grid > .menu-item .menu-item-footer {
        grid-area: foot;
        justify-content: flex-start;
        align-items: flex-end;
        /* shared.css sets margin-top: 0.8rem and neither menu.css nor the
           desktop rules above override it — it must be reset here. */
        margin-top: 0.35rem;
        padding: 0;
        border-top: 0;
    }

    .menu-grid > .menu-item .menu-item-price-wrap {
        flex-direction: row;
        align-items: baseline;
        gap: 0.3rem;
    }

    .menu-grid > .menu-item .menu-item-price {
        font-size: 1rem;
    }

    .menu-grid > .menu-item .menu-item-currency {
        margin-top: 0;
    }

    /* ── The (+) button ──
       Centred on the thumbnail's bottom outer corner: top padding + thumbnail
       height puts us on that edge, then half the button re-centres on it.
       Exact on every row because the thumbnail is start-aligned above. */
    .menu-grid > .menu-item .menu-item-add {
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: calc(
            var(--row-pad-block-start) + var(--row-thumb-size) - var(--row-add-size) / 2
        );
        width: var(--row-add-size);
        height: var(--row-add-size);
        padding: 0;
        gap: 0;
        border-radius: 50%;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--col-black) 45%, transparent);
        transition: none;
    }

    .menu-grid > .menu-item .menu-item-add svg {
        width: 20px;
        height: 20px;
    }

    /* Visually hidden but still in the accessibility tree — display:none,
       visibility:hidden or font-size:0 would strip the button's
       accessible name. */
    .menu-grid > .menu-item .menu-item-add span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Touch has no real hover, but a tap leaves :hover stuck. menu.css's
       .menu-item-add:hover carries no :not(:disabled) guard, so without this
       the button stays lifted and cream after every tap — including on the
       disabled "Ask for price" buttons. The reduced opacity and not-allowed
       cursor for :disabled already come from .menu-item-add:disabled above,
       which applies at every width. */
    .menu-grid > .menu-item .menu-item-add:hover {
        background: var(--col-gold);
        transform: none;
    }

    /* ── Section headers, scaled to the compact rows ── */
    .category-title {
        font-size: 1.4rem;
        margin-bottom: 0.2rem;
    }

    .category-count {
        margin-bottom: 0.8rem;
    }

    .category-section {
        margin-bottom: 2.2rem;
    }
}