/* Festive themes (loaded only while a theme is switched on in Admin → Settings → Festive theme).
   Each theme recolours the site through the same --blue / --red tokens as site.css, so every button, band and heading follows.
   The falling decorations come from festive.js and are skipped for people who asked for reduced motion. */

html[data-festive="halloween"] { --blue: #4a2a8a; --red: #d9480f; --paper: #f3eefb; --line: #ddd3ee; --mute: #6a5b8f; --garland: "🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃 🦇 👻 🎃"; }
html[data-festive="christmas"] { --blue: #1b6b3a; --red: #c1121f; --paper: #eef6f0; --line: #d0e3d6; --mute: #4f7560; --garland: "🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄 ⭐ 🎁 🎄"; }
html[data-festive="newyear"]   { --blue: #1e2a78; --red: #d4145a; --garland: "🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆 ✨ 🥂 🎆"; }
html[data-festive="tsagaan"]   { --blue: #1b4fa0; --red: #a16207; --garland: "✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦ 🥟 ✧ ✦"; }

/* The announcement bar keeps its own text and movement; it only changes colour because it uses --red. */

/* a garland along the top of the footer */
html[data-festive] .site-foot::before { content: var(--garland); display: block; white-space: nowrap; overflow: hidden; text-align: center; font-size: 1.25rem; line-height: 1; padding: 10px 0; background: rgba(0, 0, 0, 0.2); user-select: none; }

/* falling decorations */
.fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; top: 0; left: var(--x); font-style: normal; line-height: 1; opacity: var(--o, 0.9); will-change: transform; animation: fx-fall var(--d) linear var(--dl) infinite; }
@keyframes fx-fall {
  from { transform: translate3d(0, -14vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--sx), 112vh, 0) rotate(var(--r)); }
}
.fx i.conf { border-radius: 1px; }
.fx i.snow { color: #a9c7ff; text-shadow: 0 0 3px rgba(40, 80, 160, 0.4); }
.fx i.gold { color: #e3a21a; text-shadow: 0 0 5px rgba(255, 220, 130, 0.9); }

@media (prefers-reduced-motion: reduce) { .fx { display: none; } }
@media print { .fx, html[data-festive] .site-foot::before { display: none; } }