/* ============================================================
   ST. ERMIN'S PUB — CHRISTMAS / HOME ALONE THEME  v2.3.5
   Attivato quando .sepm-wrap ha classe .sepm-christmas
   NON modifica sepm_sections, sepm_items, sepm_flags.
   ============================================================ */

/* ── TOKEN NATALE ── */
/* Sfondo lasciato identico al tema base (nessun override su body/wrap).
   Solo accenti cromatici natalizi: oro caldo, rosso, verde. */
.sepm-christmas {
  --xgold:      #c8961a;
  --xgold-lt:   #e8b830;
  --xgold-pale: #3d2800;
  --xcream:     #f5e9c8;
  --xcream-dim: #9e8a60;
  --xred:       #c0120c;
  --xgreen:     #1a4a1a;
}

/* ── FAIRY LIGHTS BAR ── */
/* NON sticky: scorre con la pagina, il menu nav resta sticky sopra.
   Sfondo = stesso colore sepm-hero (#1a1712 default) così si fonde. */
.sepm-christmas .sepm-lights-bar {
  position: relative;
  background: var(--sepm-bg2, #1a1712);
  overflow: hidden;
  height: 64px;
  flex-shrink: 0;
  width: 100%;
}
.sepm-christmas .sepm-lights-svg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.sepm-christmas .sepm-lights-row {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.sepm-christmas .sepm-bulb-wrap {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%);
}
.sepm-christmas .sepm-bulb-wire {
  width: 1.5px; background: #3a2800;
}
.sepm-christmas .sepm-bulb {
  width: 10px; height: 14px;
  border-radius: 50% 50% 45% 45%;
  position: relative;
  animation: sepm-flicker 3s ease-in-out infinite;
  flex-shrink: 0;
}
.sepm-christmas .sepm-bulb::after {
  content: '';
  position: absolute;
  top: -3px; left: 2px; width: 6px; height: 4px;
  background: #3a2800; border-radius: 2px 2px 0 0;
}
.sepm-christmas .sepm-b-red   { background:#e01010; box-shadow:0 0 6px 2px #ff3333,0 0 14px 4px rgba(220,20,20,.5); }
.sepm-christmas .sepm-b-gold  { background:#e8b830; box-shadow:0 0 6px 2px #ffd040,0 0 14px 4px rgba(230,170,30,.5); }
.sepm-christmas .sepm-b-green { background:#20c020; box-shadow:0 0 6px 2px #40ff40,0 0 14px 4px rgba(30,180,30,.5); }
.sepm-christmas .sepm-b-blue  { background:#1060e8; box-shadow:0 0 6px 2px #3080ff,0 0 14px 4px rgba(30,80,230,.5); }
.sepm-christmas .sepm-b-white { background:#ffe8a0; box-shadow:0 0 6px 2px #fff4c0,0 0 14px 4px rgba(255,230,140,.5); }

.sepm-christmas .sepm-bulb-wrap:nth-child(3n)  .sepm-bulb { animation-delay:.3s; }
.sepm-christmas .sepm-bulb-wrap:nth-child(5n)  .sepm-bulb { animation-delay:.7s; animation-duration:2.5s; }
.sepm-christmas .sepm-bulb-wrap:nth-child(7n)  .sepm-bulb { animation-delay:1.2s; animation-duration:3.8s; }
.sepm-christmas .sepm-bulb-wrap:nth-child(2n)  .sepm-bulb { animation-delay:.5s; animation-duration:2.8s; }
.sepm-christmas .sepm-bulb-wrap:nth-child(11n) .sepm-bulb { animation-delay:1.8s; animation-duration:4.2s; }

@keyframes sepm-flicker {
  0%,100%{opacity:1} 45%{opacity:.95} 47%{opacity:.4} 49%{opacity:1}
  80%{opacity:.9} 82%{opacity:.5} 84%{opacity:1}
}

/* ── WRAP / SFONDO ── */
/* Nessun override di sfondo: resta il colore del tema base del pub */

/* ── ACCENTI NATALIZI SU TITOLI / LABEL ── */
/* Sfondo e colori base restano quelli del tema pub originale.
   Aggiungiamo solo tocchi natalizi: titoli dorati caldi, badge rosso. */
.sepm-christmas .sepm-section-title {
  text-shadow: 0 0 12px rgba(200,150,26,.3) !important;
}

/* ── KEVIN — dentro l'hero, sborda verso il box speciali ── */
.sepm-christmas .sepm-hero {
  position: relative !important;
  overflow: visible !important;   /* permette a Kevin di sbordare */
  padding-bottom: 100px !important; /* spazio per il corpo di Kevin */
}
.sepm-kevin-img {
  position: absolute;
  bottom: -60px;          /* sborda di 60px sotto il bordo hero */
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  max-width: 50vw;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.7));
}

/* ── SPECIALS SLIDER ── */
.sepm-christmas .sepm-specials-wrap {
  padding-top: 70px !important; /* spazio per Kevin che sborda dall'hero */
  position: relative !important;
  z-index: 1;
}
.sepm-christmas .sepm-specials-label {
  color: #c8961a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: 0 0 20px rgba(200,150,26,.4) !important;
  margin-bottom: 20px !important;
}
.sepm-christmas .sepm-special-card {
  background: linear-gradient(160deg, #2e0a0a 0%, #1a0505 100%) !important;
  border: 1px solid rgba(200,150,26,.35) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  position: relative;
}
.sepm-christmas .sepm-special-title,
.sepm-christmas .sepm-special-card h3 {
  color: #c8961a !important;
}
.sepm-christmas .sepm-special-subtitle {
  color: #9e8a60 !important;
}
.sepm-christmas .sepm-special-ingredients li,
.sepm-christmas .sepm-special-card li {
  color: #f5e9c8 !important;
}

/* Nessun override per badge, allergens, footer:
   restano quelli del tema base del pub. */

/* ── CAMEI SVG — position:fixed, fuori dal wrapper ── */
/* Usano ID diretti perché escono dal .sepm-wrap */
#sepmCameoSanta,
#sepmCameoSled {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.8));
}
#sepmCameoSanta { left: -120px; bottom: 80px; }
#sepmCameoSled  { right: -130px; bottom: 80px; }

@keyframes sepmPeekSanta {
  0%   { opacity:0; transform: translate(-80px, 50px) rotate(22deg); }
  18%  { opacity:1; transform: translate(0, 0) rotate(22deg); }
  72%  { opacity:1; transform: translate(0, 0) rotate(22deg); }
  100% { opacity:0; transform: translate(-80px, 50px) rotate(22deg); }
}
@keyframes sepmPeekSled {
  0%   { opacity:0; transform: translate(80px, 50px) rotate(-22deg) scaleX(-1); }
  18%  { opacity:1; transform: translate(0, 0) rotate(-22deg) scaleX(-1); }
  72%  { opacity:1; transform: translate(0, 0) rotate(-22deg) scaleX(-1); }
  100% { opacity:0; transform: translate(80px, 50px) rotate(-22deg) scaleX(-1); }
}
#sepmCameoSanta.sepm-peek { animation: sepmPeekSanta 3.8s cubic-bezier(.34,1.1,.64,1) forwards; }
#sepmCameoSled.sepm-peek  { animation: sepmPeekSled  3.8s cubic-bezier(.34,1.1,.64,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .sepm-christmas .sepm-bulb { animation: none !important; }
  #sepmCameoSanta, #sepmCameoSled { display: none !important; }
}