/*
Theme Name: FFA Horizon
Theme URI: https://ffa.org
Author: FFA / Lawrence Downes
Author URI: https://ffa.org
Description: Second first-party block (FSE) theme variation for the National FFA Organization — a darker, more color-forward Exploratory mode (DM Serif headings, Montserrat body) with a light Tactical mode for library/utilitarian surfaces. Brand truth lives in theme.json (approved palette only); reusable patterns/block styles come from the ffa-patterns + ffa-block-ui plugins. Sibling of ffa-brand; the plugins supply all CPT rendering via the decoupled template providers.
Version: 0.2.16
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ffa-horizon
Tags: full-site-editing, block-styles, blog
*/

/* -------------------------------------------------------------------------
 * Sticky site header.
 * The header template part renders as <header class="wp-block-template-part">,
 * a direct child of .wp-site-blocks — so the wrapper (not the inner group) is
 * the element whose containing block is tall enough for position:sticky to work.
 * ---------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Offset for the WordPress admin bar when logged in. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

/* A soft shadow appears only once the header is pinned. */
.ffa-scrolled .wp-site-blocks > header.wp-block-template-part {
	box-shadow: 0 6px 18px -10px rgba(10, 14, 40, 0.6);
}

/* -------------------------------------------------------------------------
 * Header emblem + shrink-on-scroll.
 * ---------------------------------------------------------------------- */
.ffa-emblem {
	margin: 0;
}
.ffa-emblem img {
	display: block;
	width: clamp(56px, 6vw, 84px);
	height: auto;
	transition: width 0.25s ease;
}
.ffa-main-bar {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
}

.ffa-scrolled .ffa-emblem img {
	width: 46px;
}
.ffa-scrolled .ffa-main-bar {
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
	.ffa-emblem img,
	.ffa-main-bar {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Header chrome — colors come from theme.json custom props so the Tactical
 * body class can flip the dark Exploratory header to a light one without
 * editing the header template part.
 * ---------------------------------------------------------------------- */
.ffa-main-bar {
	background-color: var(--wp--custom--header--bg);
	color: var(--wp--custom--header--text);
	border-bottom: 3px solid var(--wp--custom--header--rule);
}
/* Tactical keeps a thin hairline rule, not the bold yellow Exploratory accent. */
body.ffa-tactical .ffa-main-bar {
	border-bottom-width: 1px;
}
.ffa-main-bar .wp-block-navigation,
.ffa-main-bar .wp-block-navigation a:where(:not(:hover)) {
	color: var(--wp--custom--header--text);
}

/* Close the gap between the sticky header and the first section / title bar so
 * the hero (home) and the title bar (archives) sit flush under the header. */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

/* Seamless colour bands — adjacent full-bleed sections butt directly together
 * with no gap, so the page background never shows between them. Each band brings
 * its own internal padding for breathing room. */
.wp-block-post-content > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * Footer grit — subtle fractal-noise overlay on the dark footer.
 * ---------------------------------------------------------------------- */
.ffa-footer {
	position: relative;
	overflow: hidden;
}
.ffa-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: #ffffff;
	opacity: 0.22;
	-webkit-mask: url(/wp-content/themes/ffa-horizon/assets/motifs/grit.svg) repeat 0 0 / 640px 450px;
	mask: url(/wp-content/themes/ffa-horizon/assets/motifs/grit.svg) repeat 0 0 / 640px 450px;
}
.ffa-footer > * {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Reusable grit — texture a large field of bright colour so it isn't flat
 * (add className "ffa-grit" to any color band/block). Same fractal noise as the
 * header/footer; contents are lifted above the overlay.
 * ---------------------------------------------------------------------- */
.ffa-grit {
	position: relative;
	overflow: hidden;
}
.ffa-grit > * {
	position: relative;
	z-index: 1;
}
.ffa-grit::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* The FFA grit texture as a TINTABLE mask: the specks take the grit colour
	 * (--ffa-grit-color, default white) at the grit opacity (--ffa-grit-opacity,
	 * default 0.5). Sharp, background only. Both vars are set per band by the
	 * "FFA Grit" block control; the defaults give white specks for dark bands. */
	background-color: var(--ffa-grit-color, #ffffff);
	opacity: var(--ffa-grit-opacity, 0.5);
	-webkit-mask: url(/wp-content/themes/ffa-horizon/assets/motifs/grit.svg) repeat 0 0 / 640px 450px;
	mask: url(/wp-content/themes/ffa-horizon/assets/motifs/grit.svg) repeat 0 0 / 640px 450px;
}

/* Grit is the BAND's own background texture only — suppress it on any grit block
 * nested inside another (e.g. colour cards inside a band), so it shows on the
 * band background but never on the blocks/content placed inside it. */
.ffa-grit .ffa-grit::before {
	display: none;
}

/* -------------------------------------------------------------------------
 * Eyebrow — a small uppercase brand label above a heading (the "Eyebrow" block,
 * a core/paragraph variation; see assets/js/ffa-eyebrow.js). Typography lives
 * here so it holds even if the inline styles are cleared; colour is the author's
 * (the block defaults to Rising Sun).
 * ---------------------------------------------------------------------- */
.ffa-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	line-height: 1.3;
	margin-bottom: 0.4rem;
}

/* -------------------------------------------------------------------------
 * Line-art motifs. Used to CROWN headings and as faint same-hue texture —
 * never as lone floating decorations.
 * ---------------------------------------------------------------------- */

/* Sunburst CROWN — a clean rising-sun ray-fan SVG (blue, baked) that sits tight
 * ABOVE a section title. Small + cropped so it reads as a crown, not a banner. */
.wp-block-separator.ffa-sunburst {
	border: 0;
	opacity: 1;
	height: auto;
	width: min(190px, 52%);
	aspect-ratio: 240 / 132;
	min-height: 0;
	margin: 0 auto 0.5rem;
	background: center bottom / contain no-repeat url(/wp-content/themes/ffa-horizon/assets/motifs/sunburst.svg);
}

/* Same-hue dot texture — a faint dot field bleeding off a corner of a colour band
 * (use with .ffa-grit for position + overflow:hidden). Cropped small so it reads
 * as texture, not artwork. */
.ffa-texture-dots::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -1%;
	bottom: -3%;
	width: 34%;
	aspect-ratio: 1;
	pointer-events: none;
	opacity: 0.4;
	background-color: var(--wp--preset--color--rust);
	-webkit-mask: right bottom / contain no-repeat;
	mask: right bottom / contain no-repeat;
	-webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-dots.svg);
	mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-dots.svg);
}

/* Diagonal-line accent — small, crisp, bleeds off the BOTTOM-LEFT corner of a band
 * (use with .ffa-grit). Tinted to a neighbouring hue so it reads as a brand accent. */
.ffa-texture-diagonal::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: -1%;
	bottom: -3%;
	width: 32%;
	aspect-ratio: 1;
	pointer-events: none;
	opacity: 0.36;
	background-color: var(--wp--preset--color--sky);
	-webkit-mask: left bottom / contain no-repeat;
	mask: left bottom / contain no-repeat;
	-webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-diagonal-lines.svg);
	mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-diagonal-lines.svg);
}

/* Wave accent — small, crisp, bleeds off the TOP-RIGHT corner of a band
 * (use with .ffa-grit). */
.ffa-texture-waves::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -1%;
	top: -2%;
	width: 42%;
	aspect-ratio: 16 / 9;
	pointer-events: none;
	opacity: 0.34;
	background-color: var(--wp--preset--color--cream);
	-webkit-mask: right top / contain no-repeat;
	mask: right top / contain no-repeat;
	-webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-waves.svg);
	mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-waves.svg);
}

/* -------------------------------------------------------------------------
 * Configurable accent (the "FFA Accent" block control — see assets/js/ffa-accent.js
 * + render_block_accent() in functions.php). The block carries has-ffa-accent +
 * modifier classes and the --ffa-accent-* custom props; this draws the masked
 * motif, tinted to the chosen brand colour, positioned per the controls. A
 * positive offset translates the accent past the edge to overlap the next band.
 * ---------------------------------------------------------------------- */
.has-ffa-accent {
	position: relative;
	z-index: 1;
}
.has-ffa-accent > * {
	position: relative;
	z-index: 1;
}
.has-ffa-accent::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-color: var(--ffa-accent-color, #F1DCAA);
	/* The motif is a FIXED-scale pattern — the lines/dots are a constant size. The
	 * accent box is a MASK WINDOW onto it: growing the box reveals MORE of the
	 * pattern (it never stretches the lines/dots). mask-size is a constant; the
	 * mask anchors to the chosen corner so the reveal grows out from there.
	 *
	 * --ffa-accent-scale shrinks the WHOLE accent proportionally on small screens
	 * (set in the media queries below): it multiplies the locked dimension, the
	 * reveal length, AND the pattern size together, so the composition stays the
	 * same — just smaller — rather than cropping to a corner on mobile. */
	--ffa-accent-scale: 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: calc(var(--ffa-accent-pattern, 900px) * var(--ffa-accent-scale));
	mask-size: calc(var(--ffa-accent-pattern, 900px) * var(--ffa-accent-scale));
	-webkit-mask-position: var(--ffa-accent-mx, center) var(--ffa-accent-my, center);
	mask-position: var(--ffa-accent-mx, center) var(--ffa-accent-my, center);
	transform: translateY(var(--ffa-accent-ty, 0px));
}
.ffa-accent--waves::after    { -webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-waves.svg);          mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-waves.svg); }
.ffa-accent--dots::after     { -webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-dots.svg);           mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-dots.svg); }
.ffa-accent--diagonal::after { -webkit-mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-diagonal-lines.svg); mask-image: url(/wp-content/plugins/ffa-patterns/assets/motifs/motif-diagonal-lines.svg); }

/* Orientation sets which axis is locked and which is the variable reveal length:
 * a landscape (horizontal) window keeps a fixed 150px HEIGHT and grows in WIDTH;
 * a portrait (vertical) window keeps a fixed 150px WIDTH and grows in HEIGHT.
 * No rotation — only the window shape changes, so the pattern never disappears. */
.ffa-accent--horizontal::after { height: calc(150px * var(--ffa-accent-scale)); width: calc(var(--ffa-accent-len, 320px) * var(--ffa-accent-scale)); }
.ffa-accent--vertical::after   { width: calc(150px * var(--ffa-accent-scale));  height: calc(var(--ffa-accent-len, 320px) * var(--ffa-accent-scale)); }

/* Side + vertical edge anchor the window (and the mask) to one corner of the band;
 * a positive overlap offset pushes it out past that edge to spill onto the next. */
.ffa-accent--left::after   { left: 0;   --ffa-accent-mx: left; }
.ffa-accent--right::after  { right: 0;  --ffa-accent-mx: right; }
.ffa-accent--top::after    { top: 0;    --ffa-accent-my: top;    --ffa-accent-ty: calc(-1 * var(--ffa-accent-offset, 0px) * var(--ffa-accent-scale)); }
.ffa-accent--bottom::after { bottom: 0; --ffa-accent-my: bottom; --ffa-accent-ty: calc(var(--ffa-accent-offset, 0px) * var(--ffa-accent-scale)); }

/* Scale the whole accent down on smaller screens so it reads in proportion to the
 * narrower bands instead of dominating them (the locked dimension, reveal length
 * and pattern size all shrink together). */
@media (max-width: 781px) {
	.has-ffa-accent::after { --ffa-accent-scale: 0.7; }
}
@media (max-width: 480px) {
	.has-ffa-accent::after { --ffa-accent-scale: 0.5; }
}

/* Tricolor band — three brand-colour columns butted edge-to-edge into one
 * seamless full-bleed band. blockGap:0 in the block draws the seam; equal height
 * comes from the columns' default stretch, so each colour fills its full column. */
.ffa-tricolor.wp-block-columns {
	gap: 0;
	border-radius: 16px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Anton (the `display` family) is ALWAYS all-caps and ALWAYS weight 400 — it's a
 * heavy display face, so faux-bold (700) smears it and it's unreadable small.
 * Anton is now opt-in: h1 (page titles) + anything tagged with the display font.
 * h2–h6 are Montserrat and untouched. Doubled :root out-specifies theme.json.
 * ---------------------------------------------------------------------- */
:root:root h1,
.has-display-font-family,
.impact-single__title,
.ffarl-collection-title {
	text-transform: uppercase;
	font-weight: 400;
	font-synthesis-weight: none;
}

/* Rule 3 (size floor): Anton is unreadable below 20px, so any display-tagged block
 * at the small/medium size presets (14px/18px) falls back to Montserrat 700. The
 * large/x-large/display presets (≥24px) keep Anton; headings h2–h6 are already
 * Montserrat. See docs/brand-typography-anton.md. */
.has-display-font-family.has-small-font-size,
.has-display-font-family.has-medium-font-size {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 700 !important;
	text-transform: none;
}

/* -------------------------------------------------------------------------
 * Exploratory (default) is a light canvas with a dark, gritty header + footer
 * and color-blocked sections. Tactical config — flips the chrome to the clean,
 * restrained library treatment (white header, hairline rule, steel linework) on
 * the library/document/video/search surfaces (body.ffa-tactical, set in
 * functions.php). WP has no native per-template style variation, so this scope
 * class is the mechanism.
 * ---------------------------------------------------------------------- */
body.ffa-tactical {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	--wp--custom--header--bg: var(--wp--preset--color--white);
	--wp--custom--header--text: var(--wp--preset--color--corduroy);
	--wp--custom--header--rule: #E3E7EE;
	--wp--custom--titlebar--bg: #EEF1F5;
	--wp--custom--titlebar--text: var(--wp--preset--color--corduroy);
	--wp--custom--titlebar--rule: var(--wp--preset--color--ffa-blue);
	--wp--custom--linework: var(--wp--preset--color--steel);
}
/* On the Tactical shell, pin headings/eyebrows to the restrained corduroy/steel
 * ladder (vs. Exploratory's ffa-blue + accent colours) for the utilitarian look. */
body.ffa-tactical :where(h1, h2, h3, h4, .wp-block-post-title) {
	color: var(--wp--preset--color--corduroy);
}
body.ffa-tactical :where(h5) { color: var(--wp--preset--color--steel); }
body.ffa-tactical :where(h6) { color: var(--wp--preset--color--red-deep); }
body.ffa-tactical a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ffa-blue);
}

/* -------------------------------------------------------------------------
 * Page title bar — a full-bleed band under the header carrying the page/archive
 * title. Exploratory (dark): blue band + 4px yellow top rule, white text.
 * Tactical (light): light band + blue left bar, navy text.
 * ---------------------------------------------------------------------- */
.ffa-title-bar {
	background-color: var(--wp--custom--titlebar--bg);
	color: var(--wp--custom--titlebar--text);
	border-top: 4px solid var(--wp--custom--titlebar--rule);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.ffa-title-bar :where(h1, h2, p) {
	color: var(--wp--custom--titlebar--text);
}
body.ffa-tactical .ffa-title-bar {
	border-top: 0;
	position: relative;
}
body.ffa-tactical .ffa-title-bar::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	left: max(var(--wp--style--root--padding-left, 1rem), calc((100% - var(--wp--style--global--content-size)) / 2));
	width: 6px;
	background: var(--wp--custom--titlebar--rule);
}
body.ffa-tactical .ffa-title-bar :where(h1, p) {
	padding-left: 2rem;
}

/* Search-term highlight (ElasticPress wraps matches). */
.ep-highlight,
.wp-block-post-template mark,
.impact-single mark {
	background: var(--wp--preset--color--ffa-yellow);
	color: var(--wp--preset--color--corduroy);
	padding: 0 0.15em;
	border-radius: 2px;
}

/* =========================================================================
 * Content-engine brand layer — Our Impact (ffa-report) single.
 * impact.css is structural only; the theme supplies brand colour + type. The
 * Impact hero reads like the dark Exploratory title bar (blue + yellow rule).
 * ====================================================================== */
.impact-single__hero,
.impact-single__body,
.impact-breadcrumb {
	max-width: var(--wp--style--global--wide-size, 1600px);
	margin-inline: auto;
}
.impact-breadcrumb {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}
.impact-breadcrumb a {
	color: var(--wp--preset--color--steel);
	text-decoration: none;
}
.impact-single__hero {
	background: var(--wp--preset--color--corduroy);
	border-top: 4px solid var(--wp--preset--color--ffa-yellow);
	color: #fff;
}
.impact-single__pills .impact-type-pill,
.impact-single__pills .impact-series-pill {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}
.impact-single__pills .impact-type-pill {
	background: var(--wp--preset--color--ffa-yellow);
	color: var(--wp--preset--color--corduroy);
}
.impact-single__pills .impact-series-pill {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}
.impact-single__title {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0;
	line-height: 1.04;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin: 0.15em 0 0.1em;
	color: #fff;
}
.impact-single__byline,
.impact-single__method {
	color: #d9e2ef;
	font-size: 0.92rem;
}
.impact-single__byline a {
	color: var(--wp--preset--color--ffa-yellow);
}
.impact-single__glance {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.impact-single__glance-title {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--ffa-yellow);
	margin: 0 0 0.6rem;
}
.impact-single__glance-list dt {
	color: #fff;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.impact-single__glance-list dd {
	color: #d9e2ef;
	font-size: 0.95rem;
}
.impact-key-points {
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--ffa-blue);
	color: var(--wp--preset--color--ink);
}
.impact-key-points__title,
.impact-footnotes__title {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ffa-blue);
	font-size: 1.3rem;
}
.impact-single__content {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
}
.impact-single__content :where(h2, h3) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--wp--preset--color--ffa-blue);
}
.impact-sidebar-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
}
.impact-sidebar-card__title {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ffa-blue);
	margin: 0 0 0.6rem;
}
.impact-study-details dt {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	margin-top: 0.6rem;
}
.impact-study-details dd {
	margin: 0;
}
.impact-study-details a,
.impact-related-item a {
	color: var(--wp--preset--color--ffa-blue);
	text-decoration: none;
}
.impact-btn,
.impact-btn--primary {
	display: inline-block;
	background: var(--wp--preset--color--steel-teal);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	text-decoration: none;
}
.impact-tag {
	font-size: 0.72rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--wp--preset--color--steel-teal) 12%, transparent);
	color: var(--wp--preset--color--steel-teal);
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	text-decoration: none;
}

/* =========================================================================
 * Content-engine brand layer — FFARL resource/curriculum + CFVL video singles.
 * These bodies are driven by the plugins' scheme-token system; override the
 * tokens with brand values so they render as clean light (Tactical) surfaces.
 * ====================================================================== */
.ffarl-player-wrap[class*="ffarl-scheme-"],
.cfvl-player-wrap[class*="cfvl-scheme-"] {
	--ffarl-bg: var(--wp--preset--color--white);
	--ffarl-text: var(--wp--preset--color--ink);
	--ffarl-muted: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	--ffarl-accent: var(--wp--preset--color--steel-teal);
	--ffarl-accent-ink: var(--wp--preset--color--white);
	--ffarl-surface: var(--wp--preset--color--surface);
	--ffarl-border: var(--wp--preset--color--line);
	--ffarl-font-display: var(--wp--preset--font-family--display);
	--ffarl-font-body: var(--wp--preset--font-family--sans);
	--ffarl-radius: 9px;
	--cfvl-bg: var(--wp--preset--color--white);
	--cfvl-text: var(--wp--preset--color--ink);
	--cfvl-muted: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	--cfvl-accent: var(--wp--preset--color--steel-teal);
	--cfvl-accent-ink: var(--wp--preset--color--white);
	--cfvl-surface: var(--wp--preset--color--surface);
	--cfvl-border: var(--wp--preset--color--line);
	--cfvl-font-display: var(--wp--preset--font-family--display);
	--cfvl-font-body: var(--wp--preset--font-family--sans);
	--cfvl-radius: 9px;
}
.ffarl-resource-header .ffarl-collection-title,
.ffarl-resource-header h1 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ffa-blue);
}
.ffarl-resource-pill {
	background: color-mix(in srgb, var(--wp--preset--color--steel-teal) 12%, transparent);
	color: var(--wp--preset--color--steel-teal);
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* Resource-library single pages: re-skin the FFARL partials to the brand
 * palette + type by overriding the --ffarl-* design tokens. */
.ffarl-lib-single .ffarl-player-wrap.ffarl-library-wrap {
	--ffarl-accent: var(--wp--preset--color--ffa-blue);
	--ffarl-accent-ink: var(--wp--preset--color--white);
	--ffarl-surface: var(--wp--preset--color--surface);
	--ffarl-border: var(--wp--preset--color--line);
	--ffarl-radius: 8px;
	--ffarl-text: var(--wp--preset--color--ink);
	--ffarl-bg: transparent;
	--ffarl-font-body: var(--wp--preset--font-family--sans);
	--ffarl-font-display: var(--wp--preset--font-family--display);
}
.ffarl-lib-single .ffarl-resource-header {
	margin: 0 0 1.5rem;
}
.ffarl-lib-single .ffarl-collection-title {
	line-height: 1.08;
	letter-spacing: 0;
}
.ffarl-lib-single .ffarl-series-season-title {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ffa-blue);
}