/* ------------------------------------------------------------------ *
 * Seasonal touches. The MCS Seasons mu-plugin (Appearance → Season)
 * emits `body.season-<slug>` for one of: valentine, easter, mothers-day,
 * summer, autumn, christmas. We layer three effects per season:
 *
 *   1. ACCENT SHIFT — overrides --global-palette1 / --global-palette2,
 *      which repaints every accent token site-wide: post titles on hover,
 *      card meta pills, browser-header underline, filter chevron/buttons,
 *      pagination current page, footer links.
 *
 *   2. SECTION BG TINT — overrides --global-palette8, which Kadence uses
 *      as the section background and which our single-post hero overlay
 *      reads. The cream baseline (#fbf5ef) shifts to a barely-perceptible
 *      seasonal hue so the page atmosphere reads warmer/cooler without
 *      breaking editorial calm.
 *
 *   3. GARLAND RIBBON — a 4px border-top on the body in the seasonal
 *      accent. Universal across all season classes (the
 *      [class*="season-"] selector matches any of them); the colour comes
 *      from the per-season --global-palette1 override, so adding a new
 *      season auto-inherits the ribbon.
 *
 * Keep shifts subtle: warm baseline (#e79d32 / #81403c / #fbf5ef) is the
 * default. Each season nudges hue while staying in editorial range.
 * ------------------------------------------------------------------ */

/* Universal garland ribbon — visible whenever ANY season class is active. */
body[class*="season-"] {
	border-top: 4px solid var(--global-palette1);
}

/* Per-season palette overrides. */
body.season-valentine {
	--global-palette1: #c2415d;
	--global-palette2: #7a2a3d;
	--global-palette8: #fcf2f3;
}

body.season-easter {
	--global-palette1: #8e7ab8;
	--global-palette2: #5e4b88;
	--global-palette8: #f7f4fb;
}

body.season-mothers-day {
	--global-palette1: #d97a7a;
	--global-palette2: #9a4f4f;
	--global-palette8: #fcf3f1;
}

body.season-summer {
	--global-palette1: #e6892e;
	--global-palette2: #9c3a16;
	--global-palette8: #fdf5e9;
}

body.season-autumn {
	--global-palette1: #b0541d;
	--global-palette2: #5a2810;
	--global-palette8: #f7ead4;
}

body.season-christmas {
	--global-palette1: #2a7045;
	--global-palette2: #1a4628;
	--global-palette8: #f0f5ef;
}

/* ------------------------------------------------------------------ *
 * PROTOTYPE — per-season flourishes on the browser-header underline.
 *
 * Replaces the generic 60×3 rectangle defined in pattern-browser.css
 * (`.mcs-browser-header .entry-title::after`) with a season-specific
 * mark. Visible on /crochet-patterns/, all category archives, and the
 * four custom-taxonomy archives.
 *
 * Currently only Christmas is wired. If the look reads well, the same
 * pattern extends to the other five seasons: heart trio for Valentine,
 * blossom for Mother's Day, sun for Summer, leaf for Autumn,
 * egg/floral for Easter — each one CSS-only via Unicode glyphs.
 * ------------------------------------------------------------------ */
body.season-christmas .mcs-browser-header .entry-title::after {
	content: "❄ ❄ ❄";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

/* Complete the seasonal title flourishes for the five remaining seasons.
 * Each uses the same CSS shape as the Christmas prototype above: Unicode
 * glyphs via content, coloured by the per-season --global-palette1
 * override, so adding a new season auto-inherits the right accent. */
body.season-valentine .mcs-browser-header .entry-title::after {
	content: "♥  ♥  ♥";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

body.season-easter .mcs-browser-header .entry-title::after {
	content: "✿  ✿  ✿";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

body.season-mothers-day .mcs-browser-header .entry-title::after {
	content: "❀  ❀  ❀";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

body.season-summer .mcs-browser-header .entry-title::after {
	content: "☀  ☀  ☀";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

body.season-autumn .mcs-browser-header .entry-title::after {
	content: "❧  ❧  ❧";
	width: auto;
	height: auto;
	background: transparent;
	color: var(--global-palette1);
	font-size: 1.4rem;
	letter-spacing: 0.5em;
	line-height: 1;
	opacity: 1;
	margin: 0.85rem auto 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ *
 * Christmas snowfall — layered on top of .mcs-decor-bg by mcs-seasons.php
 * (see the `mcs_decor_bg_extra_layers` filter). Each .mcs-decor-bg__snowflake
 * carries randomized --x / --delay / --dur / --scale custom props from PHP
 * so the flurry pattern looks organic without JS.
 * ------------------------------------------------------------------ */
.mcs-decor-bg__snow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	display: block;
}

.mcs-decor-bg__snowflake {
	display: none;
}

body.season-christmas .mcs-decor-bg__snowflake {
	display: block;
	position: absolute;
	top: -10vh;
	left: var(--x, 50%);
	color: var(--global-palette1);
	opacity: 0.6;
	font-size: calc(1.1rem * var(--scale, 1));
	line-height: 1;
	animation: mcs-snowfall var(--dur, 12s) linear var(--delay, 0s) infinite;
	will-change: transform;
}

@keyframes mcs-snowfall {
	0%   { transform: translateY(0)     translateX(0)    rotate(0); }
	50%  { transform: translateY(60vh)  translateX(20px) rotate(180deg); }
	100% { transform: translateY(120vh) translateX(-10px) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	body.season-christmas .mcs-decor-bg__snowflake {
		animation: none;
		opacity: 0;
	}
}