/* ============================================================
   christmas.css
   Christmas landing page - assets/css/christmas.css

   Colours are taken straight from style.css:
     olive   #797a51   page background (same as body / #menu-body-wrap)
     linen   #eee3d4   cream text and cream strips
     ink     #0B1315   text on cream
     khaki   #9e8b5e   small accents only

   Every section sets its own foreground tokens, so text, borders and
   buttons can never end up the wrong colour for the block they sit on.
   Buttons follow the site pattern: solid fill, then transparent with a
   1px border on hover.
   All selectors are namespaced .xm-.
   ============================================================ */

:root {
    --xm-olive: #797a51;
    --xm-woodrush: #343511;
    --xm-linen: #eee3d4;
    --xm-ink: #0B1315;
    --xm-khaki: #9e8b5e;

    --xm-serif: 'ivyOra', Georgia, serif;
    --xm-sans: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Panels, images and boxes keep the subtle 2px used on .bpe-btn */
    --xm-radius: 2px;
    /* Pill controls, in the family of the site's rounded buttons
       (.mobile-close-btn 25px, form.checkout-form button 30px) */
    --xm-radius-btn: 30px;
}

/* ------------------------------------------------------------
   1. SHELL + CONTEXT TOKENS
   ------------------------------------------------------------ */

.xm-shell {
    background: var(--xm-olive);
}

/* Default context: cream content on the site's olive background */
.xm-page {
    --xm-bg: var(--xm-olive);
    --xm-fg: var(--xm-linen);
    --xm-fg-soft: rgba(238, 227, 212, 0.78);
    --xm-fg-faint: rgba(238, 227, 212, 0.60);
    --xm-heading: #ffffff;
    --xm-bd: rgba(238, 227, 212, 0.22);
    --xm-bd-2: rgba(238, 227, 212, 0.42);
    --xm-btn-bg: var(--xm-linen);
    --xm-btn-fg: var(--xm-ink);

    background: var(--xm-bg);
    color: var(--xm-fg);
    overflow-x: clip;
}

/* Photo block: cream content sitting over an image */
.xm-section--photo {
    --xm-bg: transparent;
    --xm-fg: var(--xm-linen);
    --xm-fg-soft: rgba(238, 227, 212, 0.82);
    --xm-fg-faint: rgba(238, 227, 212, 0.62);
    --xm-heading: #ffffff;
    --xm-bd: rgba(238, 227, 212, 0.28);
    --xm-bd-2: rgba(238, 227, 212, 0.48);
    --xm-btn-bg: var(--xm-linen);
    --xm-btn-fg: var(--xm-ink);

    color: var(--xm-fg);
}

.xm-wrap {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.xm-section {
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px;
}

/* ------------------------------------------------------------
   2. TYPE
   ------------------------------------------------------------ */

.xm-eyebrow {
    font-family: var(--xm-sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--xm-fg-faint);
    margin: 0 0 14px;
}

.xm-h1 {
    font-family: var(--xm-serif);
    font-weight: 400;
    font-size: clamp(46px, 7vw, 88px);
    line-height: 1.04;
    color: var(--xm-heading);
    margin: 0;
}

.xm-h2 {
    font-family: var(--xm-serif);
    font-weight: 400;
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.12;
    color: var(--xm-heading);
    margin: 0 0 16px;
}

.xm-h3 {
    font-family: var(--xm-serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.24;
    color: var(--xm-fg);
    margin: 0 0 8px;
}

.xm-lead {
    font-family: var(--xm-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--xm-fg);
    max-width: 60ch;
    margin: 0;
}

.xm-body {
    font-family: var(--xm-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--xm-fg-soft);
    margin: 0;
}

.xm-note {
    font-family: var(--xm-sans);
    font-size: 13px;
    line-height: 1.7;
    color: var(--xm-fg-faint);
    margin: 0;
}

.xm-head {
    max-width: 700px;
}

.xm-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.xm-head--center .xm-lead {
    margin-left: auto;
    margin-right: auto;
}

.xm-hr {
    width: 44px;
    height: 1px;
    background: var(--xm-fg);
    border: 0;
    margin: 22px 0 0;
    opacity: 0.6;
}

.xm-head--center .xm-hr {
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   3. BUTTONS
   Solid fill, then transparent with a 1px border on hover - the
   pattern used by .chef-reservation-btn, .book-btn and friends
   throughout style.css.
   ------------------------------------------------------------ */

.xm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 40px;
    font-family: var(--xm-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--xm-radius-btn);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.xm-btn:focus-visible {
    outline: 2px solid var(--xm-btn-bg);
    outline-offset: 3px;
}

.xm-btn--solid {
    background: var(--xm-btn-bg);
    color: var(--xm-btn-fg);
    border-color: var(--xm-btn-bg);
}

.xm-btn--solid:hover {
    background: transparent;
    color: var(--xm-btn-bg);
    border-color: var(--xm-btn-bg);
}

.xm-btn--line {
    background: transparent;
    color: var(--xm-fg);
    border-color: var(--xm-bd-2);
}

.xm-btn--line:hover {
    background: var(--xm-btn-bg);
    color: var(--xm-btn-fg);
    border-color: var(--xm-btn-bg);
}

.xm-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.xm-btn-row--center {
    justify-content: center;
}

/* ------------------------------------------------------------
   4. HERO
   Overlay is the same gradient as .bat-hero-overlay.
   ------------------------------------------------------------ */

#xm-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--xm-woodrush);
}

/* Bleeds 12% above and below the hero so the GSAP parallax has room to
   travel. With inset:0 the translate exposed bare background at the top.
   No CSS transform here on purpose - GSAP owns this element's transform. */
.xm-hero-bg {
    position: absolute;
    inset: -12% 0;
    background-image: url(../images/book-a-table/hero-image.png);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.xm-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
            rgba(52, 53, 17, 0.60) 0%,
            rgba(52, 53, 17, 0.35) 50%,
            rgba(52, 53, 17, 0.58) 100%);
    z-index: 1;
}

.xm-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 160px 24px 120px;
    text-align: center;
}

.xm-hero-sub {
    font-family: var(--xm-sans);
    font-size: 17px;
    line-height: 1.76;
    color: var(--xm-linen);
    max-width: 46ch;
    margin: 22px auto 0;
}

.xm-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 34px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid rgba(238, 227, 212, 0.28);
}

.xm-hero-meta span {
    font-family: var(--xm-sans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(238, 227, 212, 0.8);
}

/* ------------------------------------------------------------
   5. TICKER - cream strip
   ------------------------------------------------------------ */

.xm-ticker {
    background: var(--xm-linen);
    overflow: hidden;
    padding-top: 18px;
    padding-bottom: 18px;
}

.xm-ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.xm-ticker-track span {
    font-family: var(--xm-serif);
    font-size: 22px;
    color: var(--xm-woodrush);
    padding-left: 26px;
    padding-right: 26px;
    white-space: nowrap;
}

.xm-ticker-dot {
    color: var(--xm-khaki);
}

/* ------------------------------------------------------------
   6. MENU
   ------------------------------------------------------------ */

.xm-menu-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 46px 0;
}

.xm-tab {
    height: 48px;
    padding: 0 26px;
    background: transparent;
    border: 1px solid var(--xm-bd-2);
    border-radius: var(--xm-radius-btn);
    color: var(--xm-fg);
    font-family: var(--xm-sans);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.xm-tab:hover {
    border-color: var(--xm-btn-bg);
}

.xm-tab[aria-selected="true"] {
    background: var(--xm-btn-bg);
    border-color: var(--xm-btn-bg);
    color: var(--xm-btn-fg);
}

.xm-tab:focus-visible {
    outline: 2px solid var(--xm-btn-bg);
    outline-offset: 2px;
}

.xm-course[hidden] {
    display: none;
}

.xm-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 0 56px;
}

.xm-dish {
    padding: 24px 0;
    border-bottom: 1px solid var(--xm-bd);
}

.xm-dish-name {
    font-family: var(--xm-serif);
    font-size: 21px;
    line-height: 1.3;
    color: var(--xm-fg);
}

.xm-dish-desc {
    display: block;
    margin-top: 7px;
    font-family: var(--xm-sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--xm-fg-soft);
    max-width: 52ch;
}

.xm-veg {
    display: inline-block;
    font-family: var(--xm-sans);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--xm-btn-fg);
    background: var(--xm-btn-bg);
    border-radius: var(--xm-radius-btn);
    padding: 2px 8px;
    margin-left: 8px;
    vertical-align: 3px;
}

/* Set price */
.xm-price-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    margin: 52px 0 0;
    background: var(--xm-bd);
    border: 1px solid var(--xm-bd);
    border-radius: var(--xm-radius);
    overflow: hidden;
}

.xm-price-cell {
    background: var(--xm-bg);
    padding: 36px 24px;
    text-align: center;
    margin: 0;
}

.xm-price-cell dt {
    font-family: var(--xm-sans);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--xm-fg-soft);
    margin-bottom: 12px;
    font-weight: 400;
}

.xm-price-cell dd {
    font-family: var(--xm-serif);
    font-size: 40px;
    line-height: 1;
    color: var(--xm-heading);
    margin: 0;
}

.xm-price-cell dd small {
    display: block;
    margin-top: 10px;
    font-family: var(--xm-sans);
    font-size: 12px;
    color: var(--xm-fg-soft);
}

.xm-allergen {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid var(--xm-bd);
    border-radius: var(--xm-radius);
}

.xm-allergen svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    color: var(--xm-fg);
}

/* ------------------------------------------------------------
   7. IMAGE BAND
   ------------------------------------------------------------ */

.xm-band {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.xm-band-img {
    position: absolute;
    inset: -12% 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* Heavier than the hero wash: this band carries a headline and a
   button, and the photo behind it is bright. */
.xm-band-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
            rgba(52, 53, 17, 0.82) 0%,
            rgba(52, 53, 17, 0.66) 50%,
            rgba(52, 53, 17, 0.82) 100%);
}

.xm-band-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.xm-band-quote {
    font-family: var(--xm-serif);
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.25;
    color: #fff;
    max-width: 20ch;
    margin: 0;
}

.xm-band-btn {
    margin-top: 30px;
}

/* ------------------------------------------------------------
   8. BOOKING - links only, no form
   ------------------------------------------------------------ */

.xm-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.xm-book-cell {
    border: 1px solid var(--xm-bd);
    border-radius: var(--xm-radius);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
}

.xm-book-cell .xm-body {
    margin-top: 8px;
}

.xm-book-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 26px;
    min-height: 44px;
    font-family: var(--xm-sans);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--xm-fg);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.xm-book-link span {
    border-bottom: 1px solid var(--xm-bd-2);
    padding-bottom: 3px;
    transition: border-color 0.3s ease;
}

.xm-book-link:hover {
    color: var(--xm-fg);
    opacity: 0.72;
}

.xm-book-link:hover span {
    border-bottom-color: var(--xm-fg);
}

.xm-book-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.xm-book-media {
    margin-top: 50px;
    border-radius: var(--xm-radius);
    overflow: hidden;
}

/* 3/1 keeps a wide strip without cropping the source photo hard */
.xm-book-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    display: block;
}

.xm-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    margin-top: 34px;
}

.xm-direct a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--xm-sans);
    font-size: 15px;
    color: var(--xm-fg);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.xm-direct a:hover {
    opacity: 0.72;
    text-decoration: underline;
}

.xm-direct svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   9. GIFT CARDS
   ------------------------------------------------------------ */

.xm-gift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.xm-gift-visual {
    position: relative;
    overflow: hidden;
    border-radius: var(--xm-radius);
}

.xm-gift-visual img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.xm-denoms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.xm-denoms li {
    font-family: var(--xm-sans);
    font-size: 14px;
    color: var(--xm-fg);
    border: 1px solid var(--xm-bd-2);
    border-radius: var(--xm-radius-btn);
    padding: 11px 22px;
}

/* ------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------ */

.xm-faq {
    max-width: 820px;
    margin: 46px auto 0;
}

.xm-faq-item {
    border-bottom: 1px solid var(--xm-bd);
}

.xm-faq-item:first-child {
    border-top: 1px solid var(--xm-bd);
}

.xm-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-height: 68px;
    padding: 18px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--xm-serif);
    font-size: 20px;
    color: var(--xm-fg);
    transition: opacity 0.3s ease;
}

.xm-faq-q:hover {
    opacity: 0.72;
}

.xm-faq-q:focus-visible {
    outline: 2px solid var(--xm-btn-bg);
    outline-offset: 2px;
}

.xm-faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.xm-faq-icon::before,
.xm-faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--xm-fg);
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.xm-faq-icon::before {
    width: 14px;
    height: 1px;
}

.xm-faq-icon::after {
    width: 1px;
    height: 14px;
}

.xm-faq-q[aria-expanded="true"] .xm-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.xm-faq-a {
    overflow: hidden;
    height: 0;
}

.xm-faq-a > div {
    padding-bottom: 24px;
}

.xm-faq-a a {
    color: var(--xm-fg);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   11. CLOSING CTA
   Photo behind a woodrush wash, the same treatment as #bat-cta
   on the book a table page.
   ------------------------------------------------------------ */

#xm-close {
    background: var(--xm-woodrush);
    text-align: center;
    overflow: hidden;
}

#xm-close::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/book-a-table/cta-image.png);
    background-size: cover;
    background-position: center;
    opacity: 0.28;
    pointer-events: none;
}

#xm-close .xm-wrap {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   12. SNOW
   Fixed layer over the whole page. Sits under the header (z-index
   99) and never takes pointer events, so nothing becomes unclickable.
   Flakes are built in JS and animate transform/opacity only.
   ------------------------------------------------------------ */

.xm-snow {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.xm-flake {
    position: absolute;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--xm-linen);
    opacity: 0;
    will-change: transform, opacity;
    animation: xm-fall linear infinite;
}

@keyframes xm-fall {
    0% {
        transform: translate3d(0, -12vh, 0);
        opacity: 0;
    }

    10% {
        opacity: var(--flake-op, 0.6);
    }

    90% {
        opacity: var(--flake-op, 0.6);
    }

    100% {
        transform: translate3d(var(--flake-drift, 40px), 112vh, 0);
        opacity: 0;
    }
}

/* ------------------------------------------------------------
   13. REVEAL - GSAP animates these
   .xm-js is only set when motion is allowed, and is removed again
   if GSAP fails to load, so content can never stay invisible.
   ------------------------------------------------------------ */

.xm-js .xm-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    will-change: transform, opacity;
}

/* ------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 991px) {
    .xm-gift-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .xm-band {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .xm-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    #xm-hero {
        min-height: 86vh;
    }

    .xm-hero-inner {
        padding: 140px 20px 90px;
    }

    .xm-band {
        height: 280px;
    }

    .xm-book-cell {
        padding: 30px 24px;
    }

    .xm-book-media img {
        aspect-ratio: 2 / 1;
    }

    .xm-menu-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .xm-menu-tabs::-webkit-scrollbar {
        display: none;
    }

    .xm-tab {
        flex: 0 0 auto;
    }

    .xm-btn {
        width: 100%;
    }

    .xm-btn-row {
        flex-direction: column;
    }

    .xm-direct {
        gap: 4px;
    }

    .xm-direct a {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   15. REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .xm-js .xm-reveal {
        opacity: 1;
        transform: none;
    }

    .xm-ticker-track {
        transform: none !important;
    }

    .xm-snow {
        display: none;
    }

    .xm-page *,
    .xm-page *::before,
    .xm-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}