/* =========================================================================
   Homepage seasonal band -- "Santa's Big Night In" (Nov-20 Dec 2026).
   Rendered by includes/seasonal-christmas.php; loaded by includes/header.php
   only on "/" and only while seasonal_christmas_live() is true.

   Same palette/type as assets/css/christmas.css (the /christmas page), kept in
   its own sheet so christmas.css stays scoped to that page. Body copy uses the
   site's Montserrat (already loaded) so only the two display faces are fetched,
   below the fold, with swap -- the title lines are nowrap with fixed line-height
   so the swap cannot move layout. The band carries its own colours and reads
   the same in both site themes.
   ========================================================================= */

@font-face {
    font-family: "Shrikhand";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/shrikhand-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Bowlby One";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/bowlby-one-latin.woff2") format("woff2");
}

body.home-redesign .xb,
.xb {
    --x-red: #C8102E;
    --x-red2: #A80C26;
    --x-red3: #7E0A1E;
    --x-green: #0F5C3D;
    --x-green2: #0A4630;
    --x-cream: #FFF6E5;
    --x-gold: #FFC94D;
    --x-gold-text: #FFD97A;
    --x-ink: #2A1218;
    --x-ice: #BFEAFF;
    --x-icetext: #0B3A5C;
    --x-display: "Shrikhand", Georgia, serif;
    --x-block: "Bowlby One", "Arial Black", Impact, sans-serif;
    --x-body: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--x-red);
    color: var(--x-cream);
    font-family: var(--x-body);
}

.xb-stripe {
    position: relative;
    z-index: 2;
    height: 14px;
    background: repeating-linear-gradient(-45deg, var(--x-red) 0 12px, var(--x-cream) 12px 24px);
}
.xb-rays {
    position: absolute;
    inset: -60% -10%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 130, 100, .22), transparent 48%, rgba(60, 0, 10, .45)),
        repeating-conic-gradient(from 0deg at 50% 50%, var(--x-red) 0 6deg, var(--x-red2) 6deg 12deg);
    pointer-events: none;
}
.xb-snow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .8;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .85) 1.5px, transparent 2.2px) 0 0 / 90px 90px,
        radial-gradient(circle, rgba(255, 255, 255, .5) 1px, transparent 1.7px) 35px 55px / 140px 140px;
}
@keyframes xb-snow { to { background-position: 0 1260px, 35px 1315px; } }

.xb-wrap {
    position: relative;
    z-index: 1;
    width: min(1000px, 100% - 2rem);
    margin-inline: auto;
    padding: 1rem 0 .9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "copy copy"
        "side cast";
    column-gap: .75rem;
    row-gap: 1rem;
    align-items: end;
}
.xb-cast-l { grid-area: cast; }
.xb-copy   { grid-area: copy; text-align: center; }
.xb-side   { grid-area: side; display: flex; align-items: flex-end; gap: 1rem; min-width: 0; }
.xb-cast { line-height: 0; }
.xb-cast-r { display: none; }
.xb-char { display: block; width: 64px; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .18)); }

.xb :where(h2, p, ul) { margin: 0; }
.xb :where(ul) { padding: 0; list-style: none; }

.xb .xb-eyebrow {
    font: 800 .68rem / 1.3 var(--x-body);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--x-gold);
}
.xb .xb-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .35rem !important;
    color: var(--x-cream);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
}
.xb .xb-t1 {
    display: block;
    font: 400 clamp(1.3rem, 5.5vw, 1.9rem) / 1 var(--x-display);
    text-shadow: 2px 3px 0 var(--x-red3);
    transform: rotate(-3deg);
    white-space: nowrap;
}
.xb .xb-t2 {
    display: block;
    font: 400 clamp(1.6rem, 7vw, 2.5rem) / .95 var(--x-block);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--x-gold);
    text-shadow: 3px 3px 0 var(--x-red), 6px 6px 0 var(--x-red3);
}

.xb .xb-when {
    display: inline-block;
    margin-top: .9rem !important;
    background: var(--x-cream);
    color: var(--x-red);
    font: 400 clamp(.82rem, 3.4vw, 1rem) / 1.35 var(--x-block);
    text-transform: uppercase;
    padding: .45em .9em .35em;
    border-radius: 10px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
    max-width: 100%;
}
.xb .xb-when time, .xb .xb-when em { white-space: nowrap; }
.xb .xb-when em { font-style: normal; color: var(--x-green); }
.xb-dot { opacity: .55; margin: 0 .15em; }

.xb .xb-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: .35em;
    row-gap: .25rem;
    margin-top: .8rem !important;
    font: 800 .7rem / 1.3 var(--x-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--x-cream);
}
.xb .xb-list li + li::before { content: "\2605"; color: var(--x-gold); margin-right: .35em; font-size: .9em; }

.xb .xb-queue {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem !important;
    padding: .5rem .8rem .5rem .6rem;
    background: var(--x-ice);
    color: var(--x-ink);
    border-radius: 12px;
    text-align: left;
    font: 500 .8rem / 1.35 var(--x-body);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
    transform: rotate(-1deg);
}
.xb .xb-queue svg { flex: 0 0 22px; color: var(--x-icetext); }
.xb .xb-queue b { font-weight: 800; }
.xb .xb-queue span, .xb .xb-queue b { color: var(--x-ink); } /* base.css recolours bare spans in dark mode */

.xb-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1 1 auto;
    min-width: 0;
}
.xb .xb-btn {
    display: block;
    text-align: center;
    font: 400 .8rem / 1.15 var(--x-block);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .85em 1.1em .75em;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.xb .xb-btn:hover, .xb .xb-btn:focus-visible { transform: translateY(-2px); text-decoration: none; }
.xb-btn:focus-visible { outline: 3px solid var(--x-gold); outline-offset: 3px; }
.xb .xb-btn-cream { background: var(--x-cream); color: var(--x-red); }
.xb .xb-btn-cream:hover, .xb .xb-btn-cream:focus-visible { color: var(--x-red3); }
.xb .xb-btn-green { background: var(--x-green); color: var(--x-cream); }
.xb .xb-btn-green:hover, .xb .xb-btn-green:focus-visible { background: var(--x-green2); color: var(--x-cream); }

/* ---------- Tablet / desktop: Santa | copy | buttons (+ elf) ---------- */
@media (min-width: 760px) {
    .xb-wrap {
        grid-template-columns: 110px minmax(0, 1fr) auto;
        grid-template-areas: "cast copy side";
        column-gap: 1.5rem;
        padding: 1.75rem 0 1.5rem;
        align-items: center;
    }
    .xb-cast-l { align-self: end; margin-bottom: -1.5rem; }
    .xb-char { width: 100px; }
    .xb-copy { text-align: left; }
    .xb .xb-title { align-items: flex-start; }
    .xb .xb-t1 { transform: rotate(-3deg) translateX(.15em); }
    .xb .xb-list { justify-content: flex-start; }
    .xb-side { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
    .xb-actions { width: 15rem; }
    .xb-btn { font-size: .82rem; }
    .xb .xb-when { line-height: 1.15; padding: .55em .9em .45em; } /* wraps between its parts (each part is nowrap) */
}
@media (min-width: 1000px) {
    .xb-wrap { grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: 2rem; }
    .xb-cast-l .xb-char { width: 120px; }
    .xb-side { flex-direction: row; align-items: flex-end; gap: 1.25rem; }
    .xb-actions { align-self: center; }
    .xb-cast-r { display: block; margin-bottom: -1.5rem; }
    .xb-cast-r .xb-char { width: 92px; }
    .xb-t1 { font-size: 2rem; }
    .xb-t2 { font-size: 2.7rem; }
}

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .xb-snow { animation: xb-snow 70s linear infinite; }
    .xb-santa { animation: xb-sway 2.6s ease-in-out infinite; }
    .xb-elf { animation: xb-hop 1.1s cubic-bezier(.3, 0, .5, 1) infinite alternate; }
}
@keyframes xb-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-4px); } }
@keyframes xb-hop { from { transform: translateY(0) scaleY(.97); } to { transform: translateY(-8px) scaleY(1.02); } }