/* ==========================================================================
   Menu page — desktop category rail + per-category sections.

   Base rules target MOBILE (the existing horizontal chip strip, unchanged).
   Desktop rail/layout is added additively inside @media (min-width: 768px),
   so mobile behaviour is preserved. All values come from base design tokens,
   so the client theme overlay re-colours everything for free.
   ========================================================================== */

/* ── Layout: stacked on mobile ─────────────────────────────────────────── */
.menu-layout {
    display: block;
}

/* ── Rail (mobile = sticky horizontal chip strip) ──────────────────────── */
.menu-rail-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Preserve the current mobile order: category chips, dietary, then search. */
.menu-rail-heading { display: none; }
.menu-rail-list    { order: 1; }
.dietary-filter-row { order: 2; }
.menu-rail-search  { order: 3; }

.menu-rail-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 4px;
    /* Sticky under the header, matching the old .pill-row behaviour. */
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin-inline: calc(-1 * var(--space-4));
    padding-inline: var(--space-4);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--transition), border-color var(--transition);
}
.menu-rail-list::-webkit-scrollbar { display: none; }

.menu-rail.is-stuck .menu-rail-list {
    border-bottom-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* Category link = chip on mobile (mirrors .pill). */
.menu-rail-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    background: var(--surface-warm);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 0.7rem 1.1rem;
    font-weight: 800;
    font-size: var(--text-sm);
    box-shadow: 0 8px 18px rgba(23, 19, 15, 0.04);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition),
        background var(--transition);
}
.menu-rail-link:hover {
    color: var(--brand);
    border-color: rgba(var(--brand-rgb), 0.28);
}
.menu-rail-link.is-active {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}
.menu-rail-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Counts are a desktop-only signal; hidden in the mobile chip strip. */
.menu-rail-count { display: none; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.menu-section {
    /* Anchor jumps (incl. homepage deep-links) clear the sticky header.
       Single source of truth: --header-height. */
    scroll-margin-top: calc(var(--header-height) + var(--space-8));
    margin-top: var(--space-8);
}
.menu-section:first-child { margin-top: var(--space-4); }
.menu-section.is-empty { display: none; }

/* The base .empty-state{display:flex} otherwise overrides the [hidden]
   attribute, so the "no results" block would never hide. */
.menu-main .empty-state[hidden] { display: none; }

.menu-section-head { margin-bottom: var(--space-4); }
.menu-section-head h2 {
    font-size: var(--text-xl);
    font-weight: 900;
    line-height: 1.15;
}
.menu-section-desc {
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP (>= 768px): two-column layout with a sticky vertical rail.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .menu-layout {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }

    .menu-rail {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        max-height: calc(100vh - var(--header-height) - var(--space-8));
        display: flex;
        flex-direction: column;
    }
    .menu-rail-inner {
        min-height: 0;               /* let the list flex-shrink and scroll */
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    /* Natural desktop order: search, heading, categories, dietary. */
    .menu-rail-search   { order: 0; margin: 0; }
    .menu-rail-heading  {
        order: 1;
        display: block;
        margin: 0 0 0 var(--space-3);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 800;
    }
    .menu-rail-list     { order: 2; }
    .dietary-filter-row { order: 3; }

    /* Vertical, independently scrolling list (many-category case). */
    .menu-rail-list {
        flex-direction: column;
        gap: 2px;
        overflow-x: visible;
        overflow-y: auto;
        min-height: 0;
        padding-block: 0;
        /* Undo the mobile sticky/full-bleed treatment. */
        position: static;
        z-index: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        margin-inline: 0;
        padding-inline: 0;
        border-bottom: 0;
        box-shadow: none;
        scrollbar-width: thin;
    }
    .menu-rail-list::-webkit-scrollbar { width: 6px; }
    .menu-rail-list::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }

    /* Category link = full-width row on desktop. */
    .menu-rail-link {
        justify-content: space-between;
        gap: var(--space-2);
        width: 100%;
        border: 0;
        border-left: 2px solid transparent;
        border-radius: var(--radius-sm);
        background: none;
        box-shadow: none;
        padding: 0.55rem var(--space-3);
        font-weight: 700;
        line-height: 1.25;
        white-space: normal;
    }
    .menu-rail-link:hover {
        background: var(--surface-hover);
        color: var(--text);
        border-color: transparent;
    }
    .menu-rail-link.is-active {
        background: var(--brand-light);
        color: var(--brand-dark);
        border-left-color: var(--brand);
    }
    .menu-rail-count {
        display: inline;
        font-size: var(--text-xs);
        font-weight: 700;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
    .menu-rail-link.is-active .menu-rail-count { color: var(--brand); }

    /* Dietary pills wrap under the categories rather than scroll. */
    .dietary-filter-row {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border-light);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-rail-list,
    .menu-rail-link { transition: none; }
    html { scroll-behavior: auto; }
}