/* #37133 AC3 — SSR full-menu listing (/menu). Shares the storefront design language: mobile-first,
   and every colour resolved from the tenant theme tokens ThemeCss emits server-side — no hardcoded
   values, no var() fallbacks. Nothing on this page paints a surface, so all of its text takes the
   canvas foreground pair (38424). */

html {
    /* Meta/secondary text: a dimmed mix of the canvas foreground. ThemeCss's --muted-color is a
       55% mix, which lands at 3.8:1 on the neutral light canvas — below AA for labels this
       small — so this dims less. */
    --meta-color: color-mix(in srgb, var(--on-background-color) 70%, transparent);

    background: var(--background-color);
    color-scheme: light;
}

body {
    margin: 0;
}

/* The header is the shared .site-nav from ssr-chrome.css; the horizontal measure comes from
   .ssr-content on the same element, so this page is exactly as wide as the menu and landing
   pages (37950 AC3). Only the vertical rhythm is this page's own. */
.menu-index {
    padding-block: 1rem 3rem;
    color: var(--on-background-color);
    font-family: var(--base-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.5;
}

.menu-index h1 {
    margin: 0.5rem 0 1rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--on-background-color);
}

.menu-index__empty {
    color: var(--meta-color);
}

.menu-index__category {
    margin-bottom: 2rem;
}

.menu-index__category-name {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.25rem;
    color: var(--on-background-color);
}

.menu-index__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-index__product {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.menu-index__product-link {
    color: var(--on-background-color);
    text-decoration: none;
}

.menu-index__product-link:hover,
.menu-index__product-link:focus-visible {
    text-decoration: underline;
}

.menu-index__product-price {
    flex-shrink: 0;
    color: var(--meta-color);
}