/* ==========================================================================
   Charlton Live Theme V2 - what every season shares
   Loaded before the season's own sheet, and only while a season is on.
   Everything here hangs off body.cl-season, or off a class only the season's
   script creates, so the sheet is inert without them.
   ========================================================================== */

/* ==========================================================================
   Falling snow or blossom - assets/js/snow.js
   ========================================================================== */

/* The fall sits over the whole viewport at z-index 50, under the consent
   banner at 60, and never catches a click. */
.cl-snow-fall {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	pointer-events: none;
}

/* Halloween's bats fly over the whole viewport the same way - assets/js/
   halloween.js - under the consent banner and never catching a click. */
.cl-bats {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	pointer-events: none;
}

/* The pile lies along the bottom of the footer, behind its content, so the
   links and the legal line stay readable as the snow deepens. */
.cl-snow-pile {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
}

/* ==========================================================================
   On the logo: a pumpkin, a poppy or bunny ears
   ========================================================================== */

/* Hung off the link around the logo rather than added as markup: cl_logo()
   prints a bare <img>, replaced elements take no pseudo-elements, and the
   parent has no function_exists guard that would let a child redefine it.

   The season's sheet sets the artwork (background-image) and its size and
   place at scale 1 against the 52px header logo:
     --cl-topper-w / -h      size
     --cl-topper-left / -top position from the logo's top-left corner
     --cl-topper-room        how far it rises above the logo (0 if it does not)
   The Customizer adds --cl-topper-scale / -x / -y / -tilt on top.

   Christmas does not use this: its santa hat predates it and keeps its own
   rules in christmas.css. */
body.cl-season.cl-topper-header .cl-header__inner {
	padding-top: max(16px, calc(12px + var(--cl-topper-room, 16px) * var(--cl-topper-scale, 1)));
}

body.cl-season.cl-topper-header .cl-brand,
body.cl-season.cl-topper-footer .cl-footer__lockup {
	position: relative;
}

body.cl-season.cl-topper-header .cl-brand::before,
body.cl-season.cl-topper-footer .cl-footer__lockup::before {
	content: "";
	position: absolute;
	background: no-repeat center / contain;
	pointer-events: none;
	z-index: 2;
	rotate: var(--cl-topper-tilt, 0deg);
	transform-origin: 50% 80%;
}

body.cl-season.cl-topper-header .cl-brand::before {
	width: calc(var(--cl-topper-w) * var(--cl-topper-scale, 1));
	height: calc(var(--cl-topper-h) * var(--cl-topper-scale, 1));
	left: calc(var(--cl-topper-left) * var(--cl-topper-scale, 1) + var(--cl-topper-x, 0px));
	top: calc(var(--cl-topper-top) * var(--cl-topper-scale, 1) + var(--cl-topper-y, 0px));
}

/* Against the 44px footer logo: the same thing, a size down. */
body.cl-season.cl-topper-footer .cl-footer__lockup::before {
	width: calc(var(--cl-topper-w) * .85 * var(--cl-topper-scale, 1));
	height: calc(var(--cl-topper-h) * .85 * var(--cl-topper-scale, 1));
	left: calc(var(--cl-topper-left) * .85 * var(--cl-topper-scale, 1) + var(--cl-topper-x, 0px));
	top: calc(var(--cl-topper-top) * .85 * var(--cl-topper-scale, 1) + var(--cl-topper-y, 0px));
}

/* ==========================================================================
   Fixture badge
   ========================================================================== */

/* Printed into the next-match strip's eyebrow by cl_v2_next_match_badge(),
   through the parent's cl_next_match_eyebrow action. The eyebrow is already
   inline-flex with a 7px gap (fixtures.css:67), so the badge lays itself out
   the way .cl-live-dot does.

   Each season sets --cl-badge-bg, a light fill that carries ink text; the
   contrast check in tests/contrast.py holds it to 4.5:1. */
body.cl-season .cl-festive {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: 3px;
	padding: 2px 9px 3px;
	border-radius: var(--cl-radius-pill);
	background: var(--cl-badge-bg);
	color: var(--cl-ink);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--cl-track-tag);
	white-space: nowrap;
}

/* The glyph is decoration - the badge says "Boxing Day" in words - and is
   hidden from assistive tech in the markup. Sized here so it sits on the text
   baseline rather than stretching the pill. */
body.cl-season .cl-festive__glyph {
	font-size: 12px;
	line-height: 1;
}

/* On a phone the eyebrow and the badge together overrun the strip, so the
   badge drops to its own line rather than squeezing the fixture. */
@media (max-width: 480px) {
	body.cl-season .cl-next .cl-eyebrow { flex-wrap: wrap; }
	body.cl-season .cl-festive { margin-inline-start: 0; }
}