/* CHRISTMAS DECORATIONS (RS24S-XMAS-V1). Loaded only when the station ticks Website -> Your look -> "Christmas
   decorations"; with it off this file is never linked and nothing below exists on the page. Every piece is
   decoration only: pointer-events none, aria-hidden, no text of its own, nothing over the player, the cookie
   note, the menu or a button. Colours come from the station's own --primary / --accent, plus warm gold and
   warm white, so the dressing is theirs and not ours; templates/partials/xmas.html swaps any of them that would
   not show against its background (the --xm-c / --xm-r / --xm-o set below are the fallbacks if it is absent). */
:root{
  --xm-gold:#ffc94d;--xm-warm:#fff1cf;--xm-red:#c8102e;--xm-pine:#1d5c3a;--xm-pine-2:#2e7d4f;
  --xm-c1:var(--primary);--xm-c2:var(--xm-gold);--xm-c3:var(--accent);--xm-c4:var(--xm-warm);
  --xm-r1:var(--primary);--xm-r2:var(--accent);--xm-o1:var(--primary);--xm-o2:var(--accent);
  --xm-wire:#2f3b31;--xm-snow:#ffffff;--xm-snow-edge:rgb(110 130 165 / .6);
}
[data-mode="dark"],[data-header="dark"] .masthead,[data-header="gradient"] .masthead{--xm-wire:#8f9c91}

/* --------------------------------------------------------------- the lights --
   A strand along the top of every page, in its own band above the logo, so it never sits on a word. One cell per
   bulb: the wire is the cell's scalloped bottom border, the bulb hangs from its lowest point. */
[data-xmas] .masthead{position:relative;padding-top:28px}
.xm-lights{position:absolute;left:0;right:0;top:0;height:44px;overflow:hidden;pointer-events:none;
  display:flex;justify-content:center;z-index:2}
.xm-lights i{position:relative;flex:0 0 60px;height:44px}
.xm-lights i::before{content:"";position:absolute;left:-1px;right:-1px;top:-14px;height:24px;
  border-bottom:2px solid var(--xm-wire);border-radius:0 0 50% 50% / 0 0 100% 100%}
.xm-lights i::after{content:"";position:absolute;left:calc(50% - 6px);top:8px;width:12px;height:19px;
  border-radius:45% 45% 50% 50% / 35% 35% 65% 65%;
  background:linear-gradient(to bottom,#3b3b3b 0 3px,var(--c) 3px);
  box-shadow:0 6px 16px 3px color-mix(in srgb,var(--c) 70%,transparent),inset -2px -3px 4px rgb(0 0 0 / .18),inset 2px 4px 3px rgb(255 255 255 / .45);
  animation:xm-tw 2.6s ease-in-out infinite alternate}
.xm-lights i:nth-child(4n+1){--c:var(--xm-c1)}
.xm-lights i:nth-child(4n+2){--c:var(--xm-c2)}
.xm-lights i:nth-child(4n+3){--c:var(--xm-c3)}
.xm-lights i:nth-child(4n+4){--c:var(--xm-c4)}
.xm-lights i:nth-child(3n+1)::after{animation-delay:-.9s}
.xm-lights i:nth-child(3n+2)::after{animation-delay:-1.7s;animation-duration:3.1s}
.xm-lights i:nth-child(5n)::after{animation-duration:1.9s}
.xm-lights i:nth-child(odd)::after{transform:rotate(-8deg)}
.xm-lights i:nth-child(even)::after{transform:rotate(7deg)}
@keyframes xm-tw{from{opacity:1;filter:brightness(1.1) saturate(1.2)}to{opacity:.7;filter:brightness(.82)}}

/* ---------------------------------------------------------------- the holly --
   A sprig tucked on the corner of the logo. Over the logo link but never in its way: no pointer events. */
[data-xmas] .brand{position:relative}
.xm-holly{position:absolute;left:-14px;top:-12px;width:38px;height:30px;pointer-events:none;z-index:3;
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / .25))}

/* ---------------------------------------------------------- snow on things --
   A cap of snow on the Listen button and on the live cards. */
[data-xmas] .listen-btn,[data-xmas] .live-card{position:relative}
[data-xmas] .listen-btn::before,[data-xmas] .live-card::before{content:"";position:absolute;pointer-events:none;
  left:6px;right:6px;top:-6px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' stroke='%23a9bbd2' stroke-width='.8' d='M2 8C2 3 8 1 20 2s30-1 48 0 34-2 52 0 40-1 56 0 22 1 22 5c0 3-4 3-8 3-3 0-4 4-7 4s-3-4-7-4H120c-4 0-4 5-8 5s-4-5-8-5H58c-4 0-5 3-8 3s-3-3-6-3H10C5 11 2 11 2 8z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / .18))}
[data-xmas] .listen-btn::before{left:10px;right:10px;top:-5px;height:11px}

/* ------------------------------------------------- ribbon under headings --
   The short brand-coloured bar under every section heading becomes a wrapped ribbon in the station's colours. */
[data-xmas] .sec-title::after{height:5px;bottom:-3px;width:84px;border-radius:3px;
  background:repeating-linear-gradient(115deg,var(--xm-r1) 0 7px,#fff 7px 10px,var(--xm-r2) 10px 17px,#fff 17px 20px);
  box-shadow:0 1px 2px rgb(0 0 0 / .15)}

/* ----------------------------------------------------- the player's ribbon --
   A thin red-and-white ribbon along the top edge of the player bar, inside it, over nothing. */
[data-xmas] .player::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;pointer-events:none;
  background:repeating-linear-gradient(115deg,var(--xm-red) 0 9px,#fff 9px 15px,var(--xm-pine-2) 15px 24px,#fff 24px 30px)}

/* ------------------------------------------------------- the snow outside --
   The bottom of every page: a snowy bank with the station's tree on it, presents underneath, two little firs on
   the far side. It takes the gap that is already above the footer, so the page grows by a few pixels only. */
[data-xmas] .footer{margin-top:0}
.xm-scene{position:relative;height:clamp(118px,15vw,170px);margin-top:calc(var(--block) - 20px);
  pointer-events:none;overflow:hidden}
.xm-scene svg{position:absolute;bottom:0;display:block}
.xm-scene .xm-bank{left:0;width:100%;height:46px}
.xm-scene .xm-tree{left:clamp(10px,7vw,120px);height:94%;width:auto}
.xm-scene .xm-firs{right:clamp(8px,6vw,110px);height:58%;width:auto}
.xm-tree .xm-b1{fill:var(--xm-o1)}.xm-tree .xm-b2{fill:var(--xm-o2)}.xm-tree .xm-b3{fill:var(--xm-gold)}
.xm-tree .xm-tl{fill:var(--xm-warm);animation:xm-tw 2.2s ease-in-out infinite alternate}
.xm-tree .xm-tl:nth-of-type(2n){animation-delay:-1.1s}
.xm-tree .xm-star{fill:var(--xm-gold);transform-origin:50% 50%;transform-box:fill-box;animation:xm-star 3.4s ease-in-out infinite}
.xm-tree .xm-p1{fill:var(--xm-o1)}.xm-tree .xm-p2{fill:var(--xm-o2)}
@keyframes xm-star{0%,100%{filter:drop-shadow(0 0 2px var(--xm-gold))}50%{filter:drop-shadow(0 0 9px var(--xm-gold))}}

/* ---------------------------------------------------------------- the snow --
   Drawn by xmas.js on one canvas over the page and under the player, the cookie note and the phone menu. The
   button in the menu bar stops it (and remembers, on this device). */
.xm-snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:58}
.xm-snowbtn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;
  border:1px solid color-mix(in srgb,var(--ink-2) 70%,transparent);border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.xm-snowbtn + .listen-btn{margin-left:8px}
.xm-snowbtn svg{width:20px;height:20px}
.xm-snowbtn[aria-pressed="false"]{opacity:.55}
.xm-snowbtn[aria-pressed="false"] svg{transform:scale(.85)}
/* the gradient header colours only the masthead (site.css): the nav row stays light, so only a dark header gets
   the white button (XMAS-SNOWBTN-CONTRAST-V1, 12 Nov 2026: white on white on bold-pop) */
[data-header="dark"] .xm-snowbtn{color:#fff;border-color:rgb(255 255 255 / .4)}
.xm-snowbtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

@media (max-width:640px){
  [data-xmas] .masthead{padding-top:24px}
  .xm-lights{height:38px}
  .xm-lights i{flex-basis:48px;height:38px}
  .xm-lights i::after{top:8px;width:10px;height:15px;left:calc(50% - 5px)}
  .xm-holly{left:-10px;top:-10px;width:30px;height:24px}
}
/* Still, for anyone who has asked their device for less movement: the lights glow without twinkling, the star
   without pulsing, and xmas.js draws no snow at all (and hides its button). */
@media (prefers-reduced-motion: reduce){
  .xm-lights i::after,.xm-tree .xm-tl,.xm-tree .xm-star{animation:none}
  .xm-snow,.xm-snowbtn{display:none}
}
@media print{.xm-lights,.xm-holly,.xm-scene,.xm-snow,.xm-snowbtn{display:none !important}}