/* ==========================================================================
   Meme's Cafe — Christmas season layer (2026)
   Loaded after styles.css on every page. To end the season, remove the
   <link href="holiday.css"> line and the .holiday-bar block from each page.
   ========================================================================== */
:root{
  --evergreen:#1F4B3A;
  --evergreen-deep:#14332A;
  --cranberry:#A6352B;
  --gold:#E7B84E;
  --tinsel:#F3E2B3;
}

/* ---------- Announcement bar ---------- */
.holiday-bar{position:relative;z-index:45;display:flex;align-items:center;justify-content:center;gap:10px 16px;flex-wrap:wrap;padding:10px 18px;background:linear-gradient(90deg,var(--evergreen-deep),var(--evergreen) 45%,var(--cranberry));color:#fff;font-size:14px;font-weight:850;text-align:center}
.holiday-bar strong{font-family:Newsreader,Georgia,serif;font-size:17px;letter-spacing:-.01em;color:var(--tinsel)}
.holiday-bar a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--gold);color:var(--evergreen-deep);text-decoration:none;font-weight:950;white-space:nowrap}
.holiday-bar a:hover{background:#f2cc6f}

/* ---------- Garland with multicolored lights under the nav ---------- */
.nav{border-bottom:0}
.nav:after{content:"";position:absolute;left:0;right:0;bottom:-44px;height:58px;pointer-events:none;
  background:url("assets/holiday/garland-lights.svg") 0 0/240px 58px repeat-x;
  filter:drop-shadow(0 4px 6px rgba(20,51,42,.25))}

/* ---------- Nav: Tinseltown link ---------- */
.nav a.nav-holiday{background:var(--cranberry);color:#fff;border-radius:999px}
.nav a.nav-holiday:hover,.nav a.nav-holiday.active{background:var(--evergreen);color:#fff}
.nav-order{background:var(--evergreen)}

/* ---------- Hero: winter wash, snowfall, lit trees ---------- */
.hero:not(.tinsel-feature){padding-top:92px;padding-bottom:178px;background:
    radial-gradient(circle at 78% 10%,rgba(255,255,255,.65),transparent 26%),
    linear-gradient(135deg,#f7f1e7 0%,#e4ece9 48%,#3c6b5a 100%)}
.hero:not(.tinsel-feature):before{content:"";position:absolute;inset:-40px 0 0;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 2px);
  background-size:180px 180px,130px 130px,90px 90px;
  background-position:0 0,40px 60px,70px 20px;
  animation:snow 22s linear infinite}
.hero:not(.tinsel-feature):after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;pointer-events:none;z-index:0;
  background:
    url("assets/holiday/trees-left.svg") left -10px bottom 0/286px 160px no-repeat,
    url("assets/holiday/trees-right.svg") right -10px bottom 0/286px 160px no-repeat,
    linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0) 22px) left bottom/100% 22px no-repeat}
.hero > *{position:relative;z-index:1}
@keyframes snow{to{background-position:0 720px,40px 580px,70px 380px}}
.btn.primary{background:var(--evergreen);box-shadow:0 14px 34px rgba(20,51,42,.25)}
.myth-stamp{color:var(--cranberry)}
.poster-card{outline-color:var(--evergreen)}

/* ---------- Poster tiles & cards get Christmas colors ---------- */
.poster-tile.pumpkin{background:linear-gradient(135deg,var(--evergreen-deep),var(--evergreen))}
.poster-tile.apple{background:linear-gradient(135deg,var(--evergreen-deep),var(--cranberry))}
.poster-tile.pizza{background:linear-gradient(135deg,var(--deep),#8a2a22)}
.card-number{background:var(--cranberry)}
.card.green{background:#dfeae2}
.card.rose{background:#f1dcd8}

/* ---------- Footer: ribbon stripe ---------- */
.footer{background:var(--evergreen-deep);border-top:8px solid transparent;border-image:repeating-linear-gradient(135deg,var(--cranberry) 0 14px,#fff 14px 20px,var(--evergreen) 20px 34px,#fff 34px 40px) 8}
.mobile-bar{background:rgba(20,51,42,.95)}

/* ---------- Homepage: Meme as Mrs. Claus ---------- */
.meme-sleigh-card{margin:0 auto 18px;max-width:360px;background:#fff;border-radius:30px;padding:12px 12px 14px;box-shadow:0 22px 50px rgba(20,51,42,.22);outline:2px solid var(--cranberry);outline-offset:-8px;transform:rotate(-1.5deg)}
.meme-sleigh-card img{display:block;width:100%;height:auto;border-radius:20px}
.meme-sleigh-card figcaption{text-align:center;font-family:Caveat,cursive;font-size:24px;font-weight:700;line-height:1.1;color:var(--cranberry);padding:2px 10px 0}
@media(max-width:900px){.meme-sleigh-card{max-width:300px;margin-top:6px}}

/* ==========================================================================
   Tinseltown feature blocks (homepage + events)
   ========================================================================== */
.tinsel-feature{position:relative;overflow:hidden;color:#fff;background:var(--evergreen-deep)}
.tinsel-feature:before{content:"";position:absolute;inset:0;background:url("assets/photos/tinseltown-throwdown-tinsel-ornament-wide.jpg") center/cover no-repeat;opacity:.55}
.tinsel-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,25,.94) 0%,rgba(15,30,25,.78) 48%,rgba(15,30,25,.25) 100%)}
.tinsel-feature .wrap{position:relative;z-index:1}
.tinsel-feature h2,.tinsel-feature h1{color:#fff}
.tinsel-feature p{color:rgba(255,255,255,.9)}
.tinsel-feature .eyebrow{color:var(--gold)}
.tinsel-feature .myth-stamp{color:var(--gold);background:rgba(0,0,0,.25)}
.tinsel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.tinsel-copy{max-width:640px}
.tinsel-copy .lead{color:rgba(255,255,255,.92)}
.tinsel-dates{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tinsel-dates span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(243,226,179,.4);font-weight:900;font-size:14px;color:var(--tinsel)}
.btn.gold{background:var(--gold);color:var(--evergreen-deep);box-shadow:0 14px 34px rgba(0,0,0,.25)}
.btn.gold:hover{background:#f2cc6f}
.btn.ghost.light{color:#fff}
.tinsel-ticket{background:rgba(255,250,240,.96);color:var(--ink);border-radius:30px;padding:28px;box-shadow:0 26px 60px rgba(0,0,0,.35);outline:2px solid var(--cranberry);outline-offset:-12px}
.tinsel-ticket h3{font-family:Newsreader,Georgia,serif;font-size:34px;color:var(--evergreen-deep)}
.tinsel-ticket p{color:var(--muted)!important;font-size:16px}
.tinsel-ticket .myth-stamp{color:var(--cranberry);background:rgba(166,53,43,.06)}
.ticket-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 18px}
.ticket-prices div{border-radius:16px;padding:12px;background:#f2e8d8;text-align:center}
.ticket-prices strong{display:block;font-family:Newsreader,Georgia,serif;font-size:30px;line-height:1;color:var(--cranberry)}
.ticket-prices span{font-size:13px;font-weight:900;color:var(--evergreen-deep)}

/* ---------- Tinseltown page ---------- */
.tinsel-hero{padding:96px 0 84px}
.tinsel-hero h1{font-size:clamp(52px,8vw,104px)}
.seating-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.seating-night{background:#fffaf0;border:1px solid rgba(36,56,74,.12);border-radius:26px;padding:22px;box-shadow:0 16px 38px rgba(36,56,74,.08);position:relative}
.seating-night:before{content:"";position:absolute;left:22px;right:22px;top:0;height:6px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(90deg,var(--cranberry) 0 14px,var(--evergreen) 14px 28px)}
.seating-night h3{font-family:Newsreader,Georgia,serif;font-size:30px;color:var(--evergreen-deep);margin-top:8px}
.seating-night .night-date{font-weight:950;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--cranberry)}
.seating{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-top:1px dashed rgba(36,56,74,.2)}
.seating:first-of-type{margin-top:12px}
.seating strong{display:block;color:var(--ink)}
.seating small{color:var(--muted);font-weight:800}
.seat-status{flex:none;font-size:12px;font-weight:950;padding:7px 11px;border-radius:999px;text-decoration:none;white-space:nowrap}
.seat-status.open{background:var(--evergreen);color:#fff}
.seat-status.limited{background:var(--gold);color:var(--evergreen-deep)}
.seat-status.sold{background:rgba(36,56,74,.1);color:var(--muted)}
.disco{background:linear-gradient(135deg,#2a1640,#6b2350 55%,var(--cranberry));color:#fff;border-radius:34px;padding:36px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.disco:before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 8deg,rgba(255,255,255,.05) 8deg 16deg);opacity:.55}
.disco > *{position:relative}
.disco h2,.disco h3{color:#fff}
.disco p{color:rgba(255,255,255,.9)!important}
.disco .eyebrow{color:var(--tinsel)}
.disco-price{text-align:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:22px}
.disco-price strong{display:block;font-family:Newsreader,Georgia,serif;font-size:64px;line-height:1;color:var(--tinsel)}
.good-to-know{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.good-to-know article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px}
.good-to-know h3{font-size:19px;color:var(--evergreen-deep);margin-bottom:6px}
.good-to-know p{font-size:16px!important;margin:0}

@media(max-width:900px){
  .tinsel-grid,.disco{grid-template-columns:1fr}
  .seating-grid,.good-to-know{grid-template-columns:1fr}
  .tinsel-feature:after{background:linear-gradient(180deg,rgba(15,30,25,.9),rgba(15,30,25,.8))}
  .tinsel-hero{padding:60px 0 54px}
  .holiday-bar{font-size:13px;padding:8px 12px;gap:10px}
  .holiday-bar span{display:none}
  .holiday-bar strong{font-size:15px}
  .holiday-bar a{padding:5px 10px}
}
@media(max-width:900px){
  .hero:not(.tinsel-feature){padding-top:70px;padding-bottom:124px}
  .hero:not(.tinsel-feature):after{height:110px;background-size:197px 110px,197px 110px,100% 22px}
  .nav:after{bottom:-36px;height:46px;background-size:190px 46px}
}
@media(prefers-reduced-motion:reduce){
  .hero:before{animation:none}
  .nav:after{background-image:url("assets/holiday/garland-lights-static.svg")}
  .hero:not(.tinsel-feature):after{background-image:url("assets/holiday/trees-left-static.svg"),url("assets/holiday/trees-right-static.svg"),linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0) 22px)}
}