/* ==========================================================================
   TapBios Menu Layouts — headers, item layouts, accordion, dividers,
   image shapes, animations, dietary badges
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER STYLES
   -------------------------------------------------------------------------- */

/* ── Centered (default — inherits from menu.css) ── */

/* ── Banner ── */
.menu-hero--banner {
    position: relative;
    min-height: 14rem;
    display: flex;
    align-items: flex-end;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    overflow: hidden;
    background: var(--page-surface-strong);
}

.menu-hero--banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--banner-img, none) center / cover no-repeat;
    opacity: 0.35;
    z-index: 0;
}

.menu-hero--banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    z-index: 1;
}

.menu-hero-banner-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
}

.menu-hero--banner .menu-title {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.menu-hero--banner .menu-meta-pill {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
    /* Prefixed copy first: Safari before 18 only knows the -webkit- name. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.menu-hero--banner .menu-description {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
}

/* No photo uploaded: the scrim exists to darken a photo for white text, and
   without one it just smudges the plain surface panel — drop it and switch
   text back to the page's own colour so it stays legible in light mode. */
.menu-hero--banner.menu-hero--no-image::after {
    display: none;
}

.menu-hero--banner.menu-hero--no-image .menu-title {
    color: var(--page-text, var(--text-strong));
    text-shadow: none;
}

.menu-hero--banner.menu-hero--no-image .menu-meta-pill {
    background: var(--page-surface, rgba(127, 127, 127, 0.1));
    border-color: var(--page-border, var(--color-border));
    color: var(--page-text-secondary, var(--text-secondary));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.menu-hero--banner.menu-hero--no-image .menu-description {
    color: var(--page-text-secondary, var(--text-secondary));
}

/* A banner photo already carries the visual weight; plain centered text
   links read cleaner underneath it than another row of filled buttons. */
[data-header="banner"] .menu-contact {
    justify-content: center;
    text-align: center;
}

/* Higher specificity than public-theme.css's `!important` button-colour
   override (needed there so a business's custom button colours always win
   over plain component CSS) — this still has to win over that. */
.menu-page[data-header="banner"] .menu-contact-btn {
    min-height: 0;
    padding: 0.25rem 0.1rem;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: var(--page-primary, var(--accent-primary));
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.menu-page[data-header="banner"] .menu-contact-btn:hover {
    color: var(--tb-primary-hover);
    background: none;
}

/* ── Hero ── */
.menu-hero--hero {
    position: relative;
    min-height: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 24px;
    overflow: hidden;
    background: var(--page-surface-strong);
}

.menu-hero--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-img, none) center / cover no-repeat;
    z-index: 0;
}

.menu-hero-scrim {
    position: relative;
    z-index: 2;
    padding: 2rem 1.5rem;
    width: 100%;
    background: #111111A6;
}

.menu-hero--hero .menu-title {
    font-size: clamp(2.25rem, 7vw, 4rem);
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* No photo uploaded: same reasoning as the banner header above. */
.menu-hero--hero.menu-hero--no-image .menu-hero-scrim {
    background: none;
}

.menu-hero--hero.menu-hero--no-image .menu-title {
    color: var(--page-text, var(--text-strong));
    text-shadow: none;
}

.menu-hero--hero.menu-hero--no-image .menu-hero-subtitle {
    color: var(--page-text-subtle, var(--text-subtle));
}

.menu-hero-subtitle {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Hours read as a plain sentence, not a shouted label like the cuisine
   line above it. */
.menu-hero-hours {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0.85;
}

/* Website/Directions under a hero header: plain wording in the same colour
   as the title, with the underline carrying the accent colour (the same
   one the active category tab uses) instead of a filled button. */
[data-header="hero"] .menu-contact {
    justify-content: center;
    text-align: center;
}

.menu-page[data-header="hero"] .menu-contact-btn {
    min-height: 0;
    padding: 0.25rem 0.1rem;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--page-primary, var(--accent-primary)) !important;
    text-underline-offset: 0.25em;
}

.menu-page[data-header="hero"] .menu-contact-btn:hover {
    text-decoration-color: var(--tb-primary-hover) !important;
}

/* No photo uploaded: title falls back to the page's own text colour, so
   the wording follows it the same way. */
.menu-hero--hero.menu-hero--no-image ~ .menu-contact .menu-contact-btn {
    color: var(--page-text, var(--text-strong));
}

/* ── Minimal ── */
.menu-hero--minimal {
    padding: 0.5rem 0 1rem;
}

.menu-hero--minimal .menu-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: -0.04em;
    line-height: 1;
}

.menu-hero--minimal .menu-description {
    margin-top: 0.75rem;
    max-width: 38rem;
}


/* --------------------------------------------------------------------------
   2. ITEM LAYOUTS
   -------------------------------------------------------------------------- */

/* ── Shared: item image ── */
.menu-item-img-wrap {
    flex-shrink: 0;
    overflow: hidden;
}

.menu-item-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-item-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Photo failed to load (menu.js): show the item's initial on a quiet tile. */
.menu-item-img-missing {
    position: relative;
    background: var(--page-surface-strong, rgba(127, 127, 127, 0.12));
}

.menu-item-img-missing .menu-item-img {
    visibility: hidden;
}

.menu-item-img-missing::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--page-text-subtle, rgba(127, 127, 127, 0.8));
    pointer-events: none;
}

/* ── LIST layout (default) ── */
[data-layout="list"] .menu-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

[data-layout="list"] .menu-item-img-wrap {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 12px;
}

[data-layout="list"] .menu-item-content {
    flex: 1;
    min-width: 0;
}

/* ── GRID layout ── */
[data-layout="grid"] .menu-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}

[data-layout="grid"] .menu-item {
    display: flex;
    flex-direction: column;
}

[data-layout="grid"] .menu-item-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px 12px 0 0;
    margin: -1rem -1.125rem 0.75rem;
    width: calc(100% + 2.25rem);
}

[data-layout="grid"] .menu-item-content {
    flex: 1;
}

[data-layout="grid"] .menu-item-row {
    flex-direction: column;
    gap: 0.35rem;
}

[data-layout="grid"] .menu-item-price {
    text-align: left;
}

/* ── COMPACT layout ── */
[data-layout="compact"] .menu-item-img-wrap {
    display: none;
}

[data-layout="compact"] .menu-item {
    padding: 0.65rem 0.85rem;
}

[data-layout="compact"] .menu-item-desc {
    font-size: 0.82rem;
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-layout="compact"] .menu-items {
    gap: 0.4rem;
}

/* ── MAGAZINE layout ── */
[data-layout="magazine"] .menu-item {
    display: flex;
    flex-direction: column;
}

[data-layout="magazine"] .menu-item-img-wrap {
    width: calc(100% + 2.25rem);
    margin: -1rem -1.125rem 1rem;
    aspect-ratio: 16 / 9;
    border-radius: 12px 12px 0 0;
}

[data-layout="magazine"] .menu-item-name {
    font-size: 1.25rem;
}

[data-layout="magazine"] .menu-item-desc {
    font-size: 0.95rem;
    line-height: 1.65;
}

[data-layout="magazine"] .menu-items {
    gap: 1.25rem;
}


/* --------------------------------------------------------------------------
   3. IMAGE SHAPES
   -------------------------------------------------------------------------- */
[data-image-shape="rounded"] .menu-item-img-wrap {
    border-radius: 12px;
}

[data-image-shape="circle"] .menu-item-img-wrap {
    border-radius: 50%;
    aspect-ratio: 1;
}

[data-image-shape="square"] .menu-item-img-wrap {
    border-radius: 0;
}

[data-image-shape="pill"] .menu-item-img-wrap {
    border-radius: 999px;
}

/* grid & magazine layouts override top-rounded images when image shape is active */
[data-layout="grid"][data-image-shape="circle"] .menu-item-img-wrap,
[data-layout="magazine"][data-image-shape="circle"] .menu-item-img-wrap {
    width: 6rem;
    margin: 0 auto 0.75rem;
    aspect-ratio: 1;
}

[data-layout="grid"][data-image-shape="pill"] .menu-item-img-wrap,
[data-layout="grid"][data-image-shape="square"] .menu-item-img-wrap {
    border-radius: 0;
}

[data-layout="grid"][data-image-shape="pill"] .menu-item-img-wrap {
    border-radius: 999px 999px 0 0;
}


/* --------------------------------------------------------------------------
   4. CARD SHAPES
   -------------------------------------------------------------------------- */
[data-card-shape="rounded"] .menu-item {
    border-radius: 12px;
}

[data-card-shape="sharp"] .menu-item {
    border-radius: 0;
}

[data-card-shape="pill"] .menu-item {
    border-radius: 999px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

[data-card-shape="sharp"] .menu-section {
    border-radius: 0;
}

[data-card-shape="pill"] .menu-section {
    border-radius: 28px;
}


/* --------------------------------------------------------------------------
   5. ACCORDION
   -------------------------------------------------------------------------- */
.menu-section-toggle {
    display: flex;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.menu-section-toggle .menu-section-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.menu-section-chevron {
    flex-shrink: 0;
    color: var(--page-text-subtle, #96a4ba);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-section-toggle[aria-expanded="false"] .menu-section-chevron {
    transform: rotate(-90deg);
}

.menu-section-body {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 1;
}


/* --------------------------------------------------------------------------
   6. SECTION DIVIDERS
   -------------------------------------------------------------------------- */
.menu-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
}

.menu-divider--line {
    border: none;
}

.menu-divider--line::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--page-border, rgba(148, 163, 184, 0.16));
}

.menu-divider--dot {
    gap: 0.5rem;
}

.menu-divider--dot span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--page-text-subtle, #96a4ba);
    opacity: 0.5;
}


/* --------------------------------------------------------------------------
   7. BACKGROUND STYLES
   -------------------------------------------------------------------------- */
[data-bg-style="solid"] .menu-shell {
    background: var(--page-surface-strong, rgba(20, 31, 45, 0.96));
}

[data-bg-style="solid"] .menu-shell::before {
    display: none;
}

[data-bg-style="image"] .menu-shell {
    background: var(--page-surface-strong, rgba(20, 31, 45, 0.96));
}

[data-bg-style="image"] .menu-shell::before {
    background: var(--menu-bg-image, none) center / cover no-repeat;
    opacity: 0.15;
    border-radius: inherit;
}


/* --------------------------------------------------------------------------
   8. DIETARY / ALLERGEN BADGES
   -------------------------------------------------------------------------- */
.menu-badge-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.2rem;
    vertical-align: -1px;
}

.menu-badge-icon svg {
    width: 14px;
    height: 14px;
}

.menu-badge--popular {
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.25);
    background: rgba(234, 179, 8, 0.1);
}

.menu-badge--spicy {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.1);
}

.menu-badge--vegan {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.1);
}

.menu-badge--vegetarian {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
    background: rgba(22, 163, 74, 0.1);
}

.menu-badge--gluten-free {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.1);
}

.menu-badge--new {
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.1);
}

.menu-badge--special {
    color: #ec4899;
    border-color: rgba(236, 72, 153, 0.25);
    background: rgba(236, 72, 153, 0.1);
}


/* --------------------------------------------------------------------------
   9. SCROLL ANIMATIONS + HOVER EFFECTS
   -------------------------------------------------------------------------- */
/* The hidden start state only applies once the page script has added
   .menu-anim to <html>. Without it (script blocked, slow, or failed) the
   menu is simply visible instead of blank. */
.menu-item {
    transition: opacity 0.45s ease,
                transform 0.45s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
}

.menu-anim .menu-item {
    opacity: 0;
    transform: translateY(16px);
}

.menu-section {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.menu-anim .menu-section {
    opacity: 0;
    transform: translateY(12px);
}

.menu-item.is-visible,
.menu-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger items within a section */
.menu-item:nth-child(2) { transition-delay: 0.04s; }
.menu-item:nth-child(3) { transition-delay: 0.08s; }
.menu-item:nth-child(4) { transition-delay: 0.12s; }
.menu-item:nth-child(5) { transition-delay: 0.16s; }
.menu-item:nth-child(6) { transition-delay: 0.20s; }

/* Hover lift */
.menu-item.is-visible:hover {
    transform: translateY(-3px);
    box-shadow: var(--tb-shadow-sm);
    border-color: rgba(var(--color-primary-rgb, 0, 217, 245), 0.25);
}

/* Badge entrance */
.menu-item-badges {
    transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
}

.menu-anim .menu-item-badges {
    opacity: 0;
    transform: translateY(6px);
}

.menu-item.is-visible .menu-item-badges {
    opacity: 1;
    transform: translateY(0);
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
    .menu-item,
    .menu-section,
    .menu-item-badges {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .menu-section-body {
        transition: none;
    }

    .menu-section-chevron {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    [data-layout="grid"] .menu-items {
        grid-template-columns: 1fr;
    }

    [data-layout="list"] .menu-item {
        flex-direction: column;
    }

    [data-layout="list"] .menu-item-img-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    [data-layout="list"] .menu-item-row {
        flex-direction: column;
    }

    [data-layout="list"] .menu-item-price {
        text-align: left;
    }

    .menu-hero--banner {
        min-height: 10rem;
    }

    .menu-hero--hero {
        min-height: 12rem;
    }
}