/* =========================================================
   GRAHAM'S COFFEE CO — MENU PAGE ONLY
   Self-contained design foundation so the live Menu and the
   Shop Manager visual canvas render identically.
   Mobile-first interaction, desktop-expanded layout.
========================================================= */


/* =========================================
   SCOPED DESIGN FOUNDATION
   These are fallbacks for the Graham's sitewide tokens and
   primitives. They are intentionally scoped to the Menu page
   so the editor never depends on Elementor/global-theme CSS.
========================================= */

.grahams-menu-page {
    --grahams-menu-tabs-top: 0px;
    --grahams-cream: #f6f1e8;
    --grahams-cream-soft: #f1eadf;
    --grahams-ink: #181715;
    --grahams-ink-soft: #292622;
    --grahams-muted: #756f67;
    --grahams-line: rgba(24, 23, 21, 0.13);
    --grahams-line-light: rgba(246, 241, 232, 0.14);
    --grahams-light: rgba(246, 241, 232, 0.72);
    --grahams-gold: #b28a45;
    --grahams-serif: Georgia, "Times New Roman", serif;
    --grahams-sans: Arial, Helvetica, sans-serif;
    --grahams-container: min(100% - 64px, 1420px);
    --grahams-ease: cubic-bezier(0.16, 1, 0.3, 1);

    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;

    background: var(--grahams-cream);
    color: var(--grahams-ink);
    font-family: var(--grahams-sans);
}

.grahams-menu-page,
.grahams-menu-page *,
.grahams-menu-page *::before,
.grahams-menu-page *::after {
    box-sizing: border-box;
}

.grahams-menu-page .grahams-container {
    width: var(--grahams-container);
    margin-right: auto;
    margin-left: auto;
}

.grahams-menu-page .grahams-section {
    width: 100%;
}

.grahams-menu-page .grahams-section--dark {
    background: var(--grahams-ink);
    color: var(--grahams-cream);
}

.grahams-menu-page .grahams-section--espresso {
    background: #201e1a;
    color: var(--grahams-cream);
}

.grahams-menu-page .grahams-eyebrow {
    margin: 0 0 18px;
    color: var(--grahams-muted);
    font-family: var(--grahams-sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.grahams-menu-page .grahams-heading {
    margin: 0;
    font-family: var(--grahams-serif);
    font-weight: 400;
    letter-spacing: -0.04em;
}

.grahams-menu-page .grahams-heading--xl {
    font-size: clamp(58px, 7vw, 104px);
    line-height: 0.9;
}

.grahams-menu-page .grahams-heading--lg {
    font-size: clamp(48px, 5.5vw, 78px);
    line-height: 0.94;
}

.grahams-menu-page .grahams-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 166px;
    min-height: 50px;
    padding: 0 28px;
    border: 1px solid var(--grahams-ink);
    border-radius: 0;
    background: var(--grahams-ink);
    color: var(--grahams-cream);
    font-family: var(--grahams-sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.grahams-menu-page .grahams-button--light {
    border-color: var(--grahams-cream);
    background: var(--grahams-cream);
    color: var(--grahams-ink);
}

.grahams-menu-page .grahams-button--light:hover {
    background: transparent;
    color: var(--grahams-cream);
    transform: translateY(-2px);
}

.grahams-menu-page .grahams-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}


/* =========================================
   HERO
========================================= */

.grahams-menu-hero {
    padding-top: 96px;
    padding-bottom: 78px;
}

.grahams-menu-hero__inner {
    max-width: 1420px;
}

.grahams-menu-hero__eyebrow {
    color: var(--grahams-light);
}

.grahams-menu-hero h1 {
    max-width: 900px;
}

.grahams-menu-hero__copy {
    max-width: 520px;

    margin: 28px 0 0;

    color: var(--grahams-light);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   STICKY CATEGORY NAV
========================================= */

.grahams-menu-tabs {
    position: sticky;

    top: var(--grahams-menu-tabs-top);

    z-index: 40;

    width: 100%;

    border-bottom:
        1px solid
        rgba(246, 241, 232, 0.12);

    background:
        rgba(24, 23, 21, 0.96);

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}

.grahams-menu-tabs__scroll {
    display: flex;

    align-items: center;

    gap: 4px;

    width:
        var(--grahams-container);

    margin:
        0 auto;

    padding:
        10px 0;

    overflow-x:
        auto;

    overscroll-behavior-x:
        contain;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}

.grahams-menu-tabs__scroll::-webkit-scrollbar {
    display: none;
}

.grahams-menu-tab {
    flex:
        0 0 auto;

    min-height:
        44px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        rgba(246, 241, 232, 0.62);

    font-family:
        var(--grahams-sans);

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.grahams-menu-tab:hover {
    color:
        var(--grahams-cream);
}

.grahams-menu-tab.is-active {
    background:
        var(--grahams-cream);

    color:
        var(--grahams-ink);
}

.grahams-menu-tab:focus-visible {
    outline:
        2px solid
        var(--grahams-cream);

    outline-offset:
        2px;
}


/* =========================================
   CONTENT
========================================= */

.grahams-menu-content {
    min-height:
        720px;

    padding:
        86px 0 110px;

    background:
        var(--grahams-cream);
}

.grahams-menu-page.is-js
.grahams-menu-panel:not(.is-active) {
    display:
        none;
}

.grahams-menu-panel {
    animation:
        grahams-menu-panel-in
        0.5s
        var(--grahams-ease);
}

@keyframes grahams-menu-panel-in {
    from {
        opacity:
            0;

        transform:
            translateY(14px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


/* =========================================
   PANEL HEADER
========================================= */

.grahams-menu-panel__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    padding-bottom:
        38px;

    border-bottom:
        1px solid
        var(--grahams-line);
}

.grahams-menu-panel__note {
    margin:
        0 0 4px;

    color:
        var(--grahams-muted);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================
   DESKTOP SIZE HEADER
========================================= */

.grahams-menu-size-head {
    display:
        grid;

    grid-template-columns:
        minmax(260px, 1fr)
        repeat(4, 92px);

    gap:
        12px;

    padding:
        26px 0 12px;

    color:
        var(--grahams-muted);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.grahams-menu-size-head span:not(:first-child) {
    text-align:
        center;
}


/* =========================================
   PRICED DRINK LIST
========================================= */

.grahams-menu-price-item {
    display:
        grid;

    grid-template-columns:
        minmax(260px, 1fr)
        404px;

    align-items:
        center;

    gap:
        24px;

    min-height:
        78px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--grahams-line);
}

.grahams-menu-price-item h3,
.grahams-menu-simple-item h3 {
    margin:
        0;

    font-family:
        var(--grahams-serif);

    font-size:
        24px;

    font-weight:
        400;

    line-height:
        1.15;

    letter-spacing:
        -0.02em;
}

.grahams-menu-price-item h3 small,
.grahams-menu-simple-item h3 small {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--grahams-muted);

    font-family:
        var(--grahams-sans);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.grahams-menu-prices {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}

.grahams-menu-prices span {
    font-size:
        13px;

    line-height:
        1;

    text-align:
        center;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================
   SIMPLE LISTS
========================================= */

.grahams-menu-simple-list {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    column-gap:
        58px;

    margin-top:
        18px;
}

.grahams-menu-simple-item {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    min-height:
        78px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        var(--grahams-line);
}

.grahams-menu-simple-item strong {
    flex:
        0 0 auto;

    padding-top:
        4px;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.3;

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


/* =========================================
   SMOOTHIES
========================================= */

.grahams-menu-size-cards {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        1px;

    margin-top:
        34px;

    border:
        1px solid
        var(--grahams-line);

    background:
        var(--grahams-line);
}

.grahams-menu-size-cards div {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    padding:
        24px 18px;

    background:
        var(--grahams-cream-soft);
}

.grahams-menu-size-cards span {
    color:
        var(--grahams-muted);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.grahams-menu-size-cards strong {
    font-family:
        var(--grahams-serif);

    font-size:
        25px;

    font-weight:
        400;
}

.grahams-menu-name-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        0 58px;

    margin-top:
        26px;
}

.grahams-menu-name-grid p {
    margin:
        0;

    padding:
        22px 0;

    border-bottom:
        1px solid
        var(--grahams-line);

    font-family:
        var(--grahams-serif);

    font-size:
        24px;

    line-height:
        1.2;
}


/* =========================================
   PROTEIN
========================================= */

.grahams-menu-base-price {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        5px;
}

.grahams-menu-base-price span {
    color:
        var(--grahams-muted);

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.grahams-menu-base-price strong {
    font-family:
        var(--grahams-serif);

    font-size:
        34px;

    font-weight:
        400;

    line-height:
        1;
}

.grahams-menu-feature-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        1px;

    margin-top:
        34px;

    border:
        1px solid
        var(--grahams-line);

    background:
        var(--grahams-line);
}

.grahams-menu-feature {
    padding:
        38px;

    background:
        var(--grahams-cream-soft);
}

.grahams-menu-feature h3 {
    margin:
        0 0 24px;

    font-family:
        var(--grahams-serif);

    font-size:
        clamp(30px, 3vw, 42px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -0.03em;
}

.grahams-menu-feature__note {
    margin:
        -10px 0 18px;

    color:
        var(--grahams-muted);

    font-size:
        12px;

    line-height:
        1.5;
}

.grahams-menu-feature ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.grahams-menu-feature li {
    padding:
        10px 0;

    border-bottom:
        1px solid
        var(--grahams-line);

    font-size:
        14px;

    line-height:
        1.5;
}

.grahams-menu-feature li:last-child {
    border-bottom:
        0;
}


/* =========================================
   FINAL CTA
========================================= */

.grahams-menu-cta {
    padding-top:
        88px;

    padding-bottom:
        88px;
}

.grahams-menu-cta__inner {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 430px);

    align-items:
        end;

    gap:
        clamp(60px, 8vw, 130px);
}

.grahams-menu-cta__eyebrow {
    color:
        var(--grahams-light);
}

.grahams-menu-cta__details {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        28px;
}

.grahams-menu-cta__details p {
    margin:
        0;

    color:
        var(--grahams-light);

    font-size:
        13px;

    line-height:
        1.65;
}


/* Keep the scoped container aligned with the rest of the Graham's system. */
@media (max-width: 1000px) {
    .grahams-menu-page {
        --grahams-container: min(100% - 40px, 1420px);
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .grahams-menu-price-item {
        grid-template-columns:
            minmax(210px, 1fr)
            340px;
    }

    .grahams-menu-size-head {
        grid-template-columns:
            minmax(210px, 1fr)
            repeat(4, 76px);
    }

    .grahams-menu-prices {
        gap:
            6px;
    }

    .grahams-menu-simple-list,
    .grahams-menu-name-grid {
        column-gap:
            38px;
    }

    .grahams-menu-cta__inner {
        grid-template-columns:
            1fr 1fr;

        gap:
            50px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .grahams-menu-page {
        --grahams-container: calc(100% - 32px);
    }

    .grahams-menu-hero {
        padding-top:
            72px;

        padding-bottom:
            56px;
    }

    .grahams-menu-hero__copy {
        margin-top:
            20px;

        font-size:
            14px;
    }


    /* Tabs intentionally run full width on mobile */

    .grahams-menu-tabs__scroll {
        width:
            100%;

        padding:
            9px 16px;
    }

    .grahams-menu-tab {
        min-height:
            42px;

        padding:
            0 15px;
    }


    .grahams-menu-content {
        min-height:
            650px;

        padding:
            58px 0 82px;
    }


    .grahams-menu-panel__header {
        align-items:
            flex-start;

        gap:
            20px;

        padding-bottom:
            28px;
    }

    .grahams-menu-panel__note {
        display:
            none;
    }


    /* On phones the size label lives with each price.
       No user has to remember which column is which. */

    .grahams-menu-size-head {
        display:
            none;
    }

    .grahams-menu-price-item {
        display:
            block;

        min-height:
            0;

        padding:
            22px 0;
    }

    .grahams-menu-price-item h3 {
        font-size:
            23px;
    }

    .grahams-menu-prices {
        display:
            grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap:
            6px;

        margin-top:
            17px;
    }

    .grahams-menu-prices span {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;

        padding:
            11px 9px;

        background:
            var(--grahams-cream-soft);

        font-size:
            12px;

        text-align:
            left;
    }

    .grahams-menu-prices span::before {
        content:
            attr(data-size);

        color:
            var(--grahams-muted);

        font-size:
            8px;

        font-weight:
            600;

        line-height:
            1;

        letter-spacing:
            0.1em;

        text-transform:
            uppercase;
    }


    .grahams-menu-simple-list,
    .grahams-menu-name-grid {
        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            10px;
    }

    .grahams-menu-simple-item {
        min-height:
            72px;

        padding:
            20px 0;
    }

    .grahams-menu-simple-item h3,
    .grahams-menu-name-grid p {
        font-size:
            22px;
    }


    .grahams-menu-size-cards {
        grid-template-columns:
            1fr 1fr;

        margin-top:
            28px;
    }


    .grahams-menu-feature-grid {
        grid-template-columns:
            1fr;

        margin-top:
            28px;
    }

    .grahams-menu-feature {
        padding:
            30px 24px;
    }


    .grahams-menu-base-price {
        flex:
            0 0 auto;
    }

    .grahams-menu-base-price strong {
        font-size:
            28px;
    }


    .grahams-menu-cta {
        padding-top:
            72px;

        padding-bottom:
            72px;
    }

    .grahams-menu-cta__inner {
        grid-template-columns:
            1fr;

        gap:
            36px;
    }

    .grahams-menu-cta__details {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .grahams-menu-page {
        --grahams-container: calc(100% - 28px);
    }

    .grahams-menu-prices {
        gap:
            4px;
    }

    .grahams-menu-prices span {
        padding:
            10px 7px;

        font-size:
            11px;
    }

    .grahams-menu-panel__header {
        flex-direction:
            column;
    }

    .grahams-menu-base-price {
        align-items:
            flex-start;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .grahams-menu-panel {
        animation:
            none;
    }

}


/* =========================================
   SEASONAL TAB
   Seasonal uses the Menu page's editorial list language here.
   The image-forward seasonal cards remain exclusive to Homepage.
========================================= */

.grahams-menu-panel--seasonal {
    width: 100%;
}

.grahams-menu-seasonal-panel__header {
    align-items: flex-end;
}

.grahams-menu-seasonal-panel__intro {
    max-width: 460px;
    line-height: 1.7;
    text-align: right;
}

.grahams-menu-seasonal-list {
    display: grid;
    margin-top: 18px;
}

.grahams-menu-seasonal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
    align-items: center;
    gap: 36px;
    min-height: 96px;
    padding: 22px 0;
    border-bottom: 1px solid var(--grahams-line);
}

.grahams-menu-seasonal-item__badge {
    margin: 0 0 7px;
    color: var(--grahams-muted);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.grahams-menu-seasonal-item h3 {
    margin: 0;
    font-family: var(--grahams-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.grahams-menu-seasonal-item h3 small {
    display: block;
    max-width: 700px;
    margin-top: 7px;
    color: var(--grahams-muted);
    font-family: var(--grahams-sans);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .02em;
}

.grahams-menu-seasonal-item__types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.grahams-menu-seasonal-item__types span {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid var(--grahams-line);
    color: var(--grahams-muted);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.grahams-menu-seasonal-item__prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 10px;
}

.grahams-menu-seasonal-item__prices div {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid var(--grahams-line);
    background: var(--grahams-cream-soft);
    text-align: center;
}

.grahams-menu-seasonal-item__prices span {
    color: var(--grahams-muted);
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.grahams-menu-seasonal-item__prices strong {
    color: var(--grahams-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
    .grahams-menu-seasonal-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .grahams-menu-seasonal-panel__intro {
        max-width: 620px;
        text-align: left;
    }

    .grahams-menu-seasonal-item {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .grahams-menu-seasonal-item__prices {
        grid-template-columns: repeat(auto-fit, minmax(72px, 110px));
    }
}

@media (max-width: 520px) {
    .grahams-menu-seasonal-item {
        padding: 20px 0;
    }

    .grahams-menu-seasonal-item h3 {
        font-size: 24px;
    }

    .grahams-menu-seasonal-item__prices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}