/*
 * Menyra Public Menu — Module 19.4
 *
 * Mobile-first guest Menu presentation enriched by Module 19.5 with
 * Store branding, media, dietary/allergen and Product choice metadata.
 */

.mn-public-body--menu {
    background:
        radial-gradient(circle at 50% -12rem, var(--mn-color-primary-soft), transparent 30rem),
        var(--mn-color-bg);
}

.mn-public-main--menu {
    min-height: calc(100dvh - 4.5rem);
}

.mn-public-menu-shell {
    width: min(100%, 72rem);
    margin-inline: auto;
}

.mn-menu {
    min-width: 0;
}

.mn-menu-hero {
    padding: clamp(var(--mn-space-8), 9vw, var(--mn-space-16)) var(--mn-space-4)
        clamp(var(--mn-space-6), 7vw, var(--mn-space-10));
    text-align: center;
}

.mn-menu-hero__inner {
    width: min(100%, 44rem);
    margin-inline: auto;
}

.mn-menu-hero__store {
    margin: 0 0 var(--mn-space-2);
    color: var(--mn-menu-primary, var(--mn-color-primary));
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mn-menu-hero__title {
    margin: 0;
    color: var(--mn-color-text);
    font-size: clamp(2.15rem, 9vw, 4.2rem);
    font-weight: var(--mn-font-weight-bold);
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: balance;
}

.mn-menu-hero__description {
    max-width: 38rem;
    margin: var(--mn-space-4) auto 0;
    color: var(--mn-color-text-muted);
    font-size: clamp(var(--mn-font-size-md), 2.5vw, var(--mn-font-size-lg));
    line-height: 1.65;
    text-wrap: pretty;
}

.mn-menu-category-nav {
    position: sticky;
    z-index: 40;
    top: 0;
    border-block: var(--mn-border-default);
    background: color-mix(in srgb, var(--mn-color-bg) 92%, transparent);
    backdrop-filter: blur(18px);
}

.mn-menu-category-nav__scroller {
    display: flex;
    width: min(100%, 72rem);
    margin-inline: auto;
    gap: var(--mn-space-2);
    padding: var(--mn-space-3) var(--mn-space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
}

.mn-menu-category-nav__link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 var(--mn-space-4);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-pill);
    background: var(--mn-color-surface);
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-semibold);
    line-height: 1;
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
}

.mn-menu-category-nav__link:hover,
.mn-menu-category-nav__link:focus-visible {
    border-color: var(--mn-menu-primary, var(--mn-color-primary));
    background: var(--mn-color-primary-soft);
    color: var(--mn-menu-primary, var(--mn-color-primary));
    text-decoration: none;
}

.mn-menu-content {
    display: grid;
    gap: clamp(var(--mn-space-10), 9vw, var(--mn-space-16));
    padding: clamp(var(--mn-space-8), 7vw, var(--mn-space-12)) var(--mn-space-4)
        var(--mn-space-16);
}

.mn-menu-category {
    min-width: 0;
    scroll-margin-top: 5.5rem;
}

.mn-menu-category__header {
    max-width: 44rem;
    margin-bottom: var(--mn-space-5);
}

.mn-menu-category__title {
    margin: 0;
    color: var(--mn-color-text);
    font-size: clamp(var(--mn-font-size-2xl), 5vw, var(--mn-font-size-3xl));
    font-weight: var(--mn-font-weight-bold);
    letter-spacing: -0.025em;
    line-height: var(--mn-line-height-heading);
}

.mn-menu-category__description {
    margin: var(--mn-space-2) 0 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
    line-height: 1.6;
}

.mn-menu-products {
    display: grid;
    gap: var(--mn-space-3);
}

.mn-menu-product {
    min-width: 0;
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-xl);
    background: color-mix(in srgb, var(--mn-color-surface) 96%, transparent);
    box-shadow: var(--mn-shadow-xs);
}

.mn-menu-product__body {
    padding: var(--mn-space-5);
}

.mn-menu-product__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--mn-space-4);
}

.mn-menu-product__name {
    margin: 0;
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-lg);
    font-weight: var(--mn-font-weight-semibold);
    line-height: 1.35;
    text-wrap: pretty;
}

.mn-menu-product__price {
    margin: 0;
    color: var(--mn-menu-primary, var(--mn-color-primary));
    font-size: var(--mn-font-size-md);
    font-variant-numeric: tabular-nums;
    font-weight: var(--mn-font-weight-bold);
    line-height: 1.35;
    white-space: nowrap;
}

.mn-menu-product__description {
    margin: var(--mn-space-2) 0 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
    line-height: 1.6;
    text-wrap: pretty;
}

.mn-menu-category__empty {
    margin: 0;
    padding: var(--mn-space-5);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-xl);
    background: var(--mn-color-surface-subtle);
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
}

.mn-menu-back-top {
    display: inline-flex;
    margin-top: var(--mn-space-4);
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-semibold);
    text-decoration: none;
}

.mn-menu-back-top:hover {
    color: var(--mn-menu-primary, var(--mn-color-primary));
    text-decoration: none;
}

.mn-menu-empty {
    width: min(100%, 34rem);
    margin: clamp(var(--mn-space-8), 8vw, var(--mn-space-16)) auto;
    padding: clamp(var(--mn-space-8), 8vw, var(--mn-space-12));
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-2xl);
    background: var(--mn-color-surface);
    box-shadow: var(--mn-shadow-sm);
    text-align: center;
}

.mn-menu-empty__mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--mn-space-4);
    place-items: center;
    border-radius: var(--mn-radius-lg);
    background: var(--mn-color-primary-soft);
    color: var(--mn-menu-primary, var(--mn-color-primary));
    font-size: var(--mn-font-size-xl);
}

.mn-menu-empty__title {
    margin: 0;
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-xl);
    line-height: var(--mn-line-height-heading);
}

.mn-menu-empty__text {
    margin: var(--mn-space-2) 0 0;
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
}

.mn-menu-footer {
    display: flex;
    justify-content: center;
    padding: 0 var(--mn-space-4) var(--mn-space-8);
}

.mn-menu-footer__brand {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--mn-space-2);
    padding: var(--mn-space-2) var(--mn-space-3);
    border-radius: var(--mn-radius-pill);
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-medium);
    text-decoration: none;
}

.mn-menu-footer__brand:hover {
    background: var(--mn-color-surface-subtle);
    color: var(--mn-color-text);
    text-decoration: none;
}

.mn-menu-footer__mark {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 48rem) {
    .mn-menu-hero {
        padding-inline: var(--mn-space-8);
    }

    .mn-menu-category-nav__scroller,
    .mn-menu-content {
        padding-inline: var(--mn-space-8);
    }

    .mn-menu-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mn-space-4);
    }

    .mn-menu-product__body {
        padding: var(--mn-space-6);
    }
}

@media (max-width: 24rem) {
    .mn-menu-product__heading {
        grid-template-columns: 1fr;
        gap: var(--mn-space-2);
    }

    .mn-menu-product__price {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* Module 19.5 guest enrichment */

.mn-menu-hero__logo {
    display: flex;
    width: min(14rem, 52vw);
    min-height: 3.5rem;
    max-height: 7rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--mn-space-4);
}

.mn-menu-hero__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 7rem;
    margin-inline: auto;
    object-fit: contain;
}

.mn-menu-hero__utility {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mn-space-3);
    margin-bottom: var(--mn-space-2);
}

.mn-menu-hero__utility .mn-menu-hero__store {
    margin: 0;
}

.mn-menu-locale-switch {
    display: inline-flex;
    padding: 0.15rem;
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-pill);
    background: var(--mn-color-surface);
}

.mn-menu-locale-switch__form {
    display: inline;
    margin: 0;
}

.mn-menu-locale-switch__button {
    min-width: 2.1rem;
    min-height: 1.9rem;
    padding: 0 var(--mn-space-2);
    border: 0;
    border-radius: var(--mn-radius-pill);
    background: transparent;
    color: var(--mn-color-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-bold);
}

.mn-menu-locale-switch__button[aria-current="true"] {
    background: var(--mn-menu-primary, var(--mn-color-primary));
    color: var(--mn-color-on-primary);
}

.mn-menu-product {
    overflow: hidden;
}

.mn-menu-product__media {
    display: flex;
    overflow: hidden;
    min-height: 8rem;
    max-height: 32rem;
    align-items: center;
    justify-content: center;
    border-bottom: var(--mn-border-default);
    background: var(--mn-color-surface-subtle);
}

.mn-menu-product__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 32rem;
    object-fit: contain;
}

.mn-menu-product__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-space-2);
    margin: var(--mn-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.mn-menu-product__tags li {
    padding: 0.3rem var(--mn-space-2);
    border-radius: var(--mn-radius-pill);
    background: color-mix(
        in srgb,
        var(--mn-menu-accent, var(--mn-color-success)) 16%,
        transparent
    );
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-xs);
    font-weight: var(--mn-font-weight-semibold);
}

.mn-menu-product__allergens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-space-1);
    margin-top: var(--mn-space-3);
    padding: var(--mn-space-3);
    border-radius: var(--mn-radius-md);
    background: var(--mn-color-warning-soft);
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-xs);
    line-height: 1.5;
}

.mn-menu-product__details {
    margin-top: var(--mn-space-4);
    padding-top: var(--mn-space-4);
    border-top: var(--mn-border-default);
}

.mn-menu-product__details h4 {
    margin: 0 0 var(--mn-space-2);
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-bold);
}

.mn-menu-product__choice-list {
    display: grid;
    gap: var(--mn-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-menu-product__choice-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mn-space-3);
    color: var(--mn-color-text-muted);
    font-size: var(--mn-font-size-sm);
}

.mn-menu-product__choice-list strong {
    flex: 0 0 auto;
    color: var(--mn-color-text);
    font-variant-numeric: tabular-nums;
    font-size: var(--mn-font-size-xs);
}

.mn-menu-product__option-group + .mn-menu-product__option-group {
    margin-top: var(--mn-space-3);
}

.mn-menu-product__option-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mn-space-3);
    margin-bottom: var(--mn-space-2);
}

.mn-menu-product__option-heading strong {
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-sm);
}

.mn-menu-product__option-heading span {
    color: var(--mn-color-text-subtle);
    font-size: var(--mn-font-size-xs);
}

@media (max-width: 32rem) {
    .mn-menu-hero__utility {
        flex-direction: column;
    }

    .mn-menu-product__option-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--mn-space-1);
    }
}

/* Customer-facing Store social links */

.mn-menu-social {
    padding: 0 var(--mn-space-4) var(--mn-space-8);
}

.mn-menu-social__inner {
    width: min(100%, 64rem);
    margin-inline: auto;
    padding: var(--mn-space-5);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-lg);
    background: var(--mn-color-surface);
    box-shadow: var(--mn-shadow-sm);
}

.mn-menu-social__inner h2 {
    margin: 0 0 var(--mn-space-3);
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-bold);
}

.mn-menu-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mn-menu-social__links a {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--mn-space-2);
    padding: 0.5rem var(--mn-space-3);
    border: var(--mn-border-default);
    border-radius: var(--mn-radius-pill);
    background: var(--mn-color-surface-subtle);
    color: var(--mn-color-text);
    font-size: var(--mn-font-size-sm);
    font-weight: var(--mn-font-weight-semibold);
    text-decoration: none;
}

.mn-menu-social__links a:hover,
.mn-menu-social__links a:focus-visible {
    border-color: var(--mn-menu-primary, var(--mn-color-primary));
    color: var(--mn-menu-primary, var(--mn-color-primary));
}

.mn-menu-social__links i {
    font-size: 0.75em;
}

@media (max-width: 32rem) {
    .mn-menu-social {
        padding-inline: var(--mn-space-3);
    }

    .mn-menu-social__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mn-menu-social__links a {
        justify-content: space-between;
    }
}

@media (max-width: 22rem) {
    .mn-menu-social__links {
        grid-template-columns: 1fr;
    }
}