/* ═══════════════════════════════════════════════════════════════════════════
   Winter wonderland holiday styles (December holiday meals), shared by
   order-christmas.html and holidays.html. holidays.html only uses them once
   December ordering opens (body.xmas-phase). Owner, Nov 13: say "holiday",
   not "Christmas"; whimsical / winter wonderland rather than red and green.
   All motion stops when the visitor asks for reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ww-night:#0e2340;      /* midnight blue */
  --ww-deep:#16365e;       /* deep winter blue */
  --ww-sky:#2c6aa0;        /* buttons */
  --ww-sky-dark:#1f5384;
  --ww-ice:#cfe7f7;        /* icy blue */
  --ww-frost:#eef7fd;      /* frost white */
  --ww-silver:#c7d3df;
  --ww-gold:#f1d38a;       /* warm candlelight accent */
}

/* Fairy lights: a silver wire with white, ice blue, silver and warm gold bulbs that twinkle */
.xmas-lights{position:relative;display:flex;justify-content:space-between;align-items:flex-start;
  height:30px;padding:0 10px;overflow:hidden;background:var(--ww-night)}
.xmas-lights::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:#8fa3b8;opacity:.6}
.xmas-lights i{position:relative;display:block;width:9px;height:14px;margin-top:6px;border-radius:50% 50% 45% 45%;
  background:var(--c,#fff);box-shadow:0 0 12px 3px var(--c,#fff);animation:ww-twinkle 2.6s ease-in-out infinite;flex:0 0 auto}
.xmas-lights i::before{content:"";position:absolute;top:-4px;left:2px;width:5px;height:5px;border-radius:2px;background:#9aa9b8}
.xmas-lights i:nth-child(4n+1){--c:#ffffff;animation-delay:0s}
.xmas-lights i:nth-child(4n+2){--c:#9fd4ff;animation-delay:.65s}
.xmas-lights i:nth-child(4n+3){--c:#f1d38a;animation-delay:1.3s}
.xmas-lights i:nth-child(4n+4){--c:#d9e4ef;animation-delay:1.95s}
.xmas-lights i:nth-child(n+25){display:none}            /* phones: 24 bulbs */
@media (min-width:700px){.xmas-lights i:nth-child(n+25){display:block}.xmas-lights i:nth-child(n+41){display:none}}
@media (min-width:1100px){.xmas-lights i:nth-child(n+41){display:block}}
@keyframes ww-twinkle{0%,100%{opacity:1}50%{opacity:.3;box-shadow:0 0 3px 0 var(--c,#fff)}}

/* Icicle edge (replaces the old candy cane stripe): a frosted band with a scalloped drip */
.xmas-bar{height:14px;background:
  radial-gradient(circle at 10px -2px,var(--ww-frost) 9px,transparent 10px) 0 0/20px 14px repeat-x,
  linear-gradient(var(--ww-night),var(--ww-night))}

/* Winter night hero: midnight sky, soft moon glow, gently drifting snow (pure CSS) */
.xmas-hero{background:linear-gradient(170deg,var(--ww-deep) 0%,var(--ww-night) 70%) !important;position:relative;overflow:hidden}
.xmas-hero::before{content:"";position:absolute;inset:-40% 0 0 0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(2px 2px at 20px 30px,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 90px 120px,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 160px 60px,#fff 50%,transparent 51%),
    radial-gradient(3px 3px at 230px 170px,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 300px 20px,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 60px 200px,#fff 50%,transparent 51%);
  background-size:320px 240px;animation:ww-snow 18s linear infinite}
.xmas-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 84% -10%,rgba(207,231,247,.35),transparent 45%),
             linear-gradient(to top,rgba(238,247,253,.18),transparent 22%)}
.xmas-hero > *{position:relative;z-index:1}
.xmas-hero .eyebrow{color:var(--ww-gold) !important}
.xmas-hero .lead{color:var(--ww-ice) !important}
@keyframes ww-snow{to{transform:translateY(240px)}}

@media (prefers-reduced-motion: reduce){
  .xmas-lights i,.xmas-hero::before{animation:none}
}