/* ==========================================================================
   Base — dependency root for every other stylesheet (handle: efa-reset).
   Brand colours/fonts are theme.json presets; this file adds the derived
   tints, accessibility modes, focus rings, icon system and page chrome.
   ========================================================================== */

:root {
	/* Section gutter (Figma: px-5 → lg:px-8). Used as theme.json root padding. */
	--efa-gutter: 1.25rem;

	/* Tints — Figma's Tailwind opacity modifiers (text-ink/80, border-pine/15…). */
	--efa-ink-80: color-mix(in srgb, var(--wp--preset--color--ink) 80%, transparent);
	--efa-ink-75: color-mix(in srgb, var(--wp--preset--color--ink) 75%, transparent);
	--efa-ink-70: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
	--efa-ink-60: color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent);
	--efa-ink-55: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	--efa-ink-45: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
	--efa-white-85: rgb(255 255 255 / 0.85);
	--efa-white-75: rgb(255 255 255 / 0.75);
	--efa-white-70: rgb(255 255 255 / 0.7);
	--efa-white-60: rgb(255 255 255 / 0.6);
	--efa-line-10: color-mix(in srgb, var(--wp--preset--color--pine) 10%, transparent);
	--efa-line-15: color-mix(in srgb, var(--wp--preset--color--pine) 15%, transparent);
	--efa-line-20: color-mix(in srgb, var(--wp--preset--color--pine) 20%, transparent);
	--efa-line-25: color-mix(in srgb, var(--wp--preset--color--pine) 25%, transparent);
	--efa-line-40: color-mix(in srgb, var(--wp--preset--color--pine) 40%, transparent);
	--efa-pine-10: color-mix(in srgb, var(--wp--preset--color--pine) 10%, transparent);
	--efa-leaf-15: color-mix(in srgb, var(--wp--preset--color--leaf) 15%, transparent);

	--efa-shadow-card: 0 10px 15px -3px var(--efa-shadow-tint, rgb(30 92 58 / 0.05)), 0 4px 6px -4px var(--efa-shadow-tint, rgb(30 92 58 / 0.05));
	--efa-shadow-leaf: 0 10px 15px -3px rgb(88 166 60 / 0.1), 0 4px 6px -4px rgb(88 166 60 / 0.1);
	--efa-shadow-leaf-xl: 0 20px 25px -5px rgb(88 166 60 / 0.1), 0 8px 10px -6px rgb(88 166 60 / 0.1);
	--efa-shadow-pine-xl: 0 20px 25px -5px rgb(30 92 58 / 0.05), 0 8px 10px -6px rgb(30 92 58 / 0.05);

	--efa-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
	:root {
		--efa-gutter: 2rem;
	}
}

/* Text-resize control: scales every rem-based size on the page. */
html {
	font-size: calc(16px * var(--efa-text-scale, 1));
	scroll-padding-top: 6rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---- High-contrast mode — deepen brand tones, strengthen text/borders ---- */
html.efa-hc {
	--wp--preset--color--pine: #0f3320;
	--wp--preset--color--pine-deep: #0b2718;
	--wp--preset--color--leaf: #2f6b1c;
	--wp--preset--color--leaf-deep: #275a17;
	--wp--preset--color--ink: #000000;
	--wp--preset--color--cream: #ffffff;
	--wp--preset--color--cream-deep: #eeede4;
	--efa-ink-80: #000;
	--efa-ink-75: #000;
	--efa-ink-70: #000;
	--efa-ink-60: #000;
	--efa-ink-55: #000;
	--efa-ink-45: #000;
	--efa-white-85: #fff;
	--efa-white-75: #fff;
	--efa-white-70: #fff;
	--efa-white-60: #fff;
	--efa-line-10: var(--wp--preset--color--pine);
	--efa-line-15: var(--wp--preset--color--pine);
	--efa-line-25: var(--wp--preset--color--pine);
}

html.efa-hc body {
	background: #fff;
}

/* ---- Page chrome ---- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-bottom: 6rem; /* room for the fixed audio player */
}

.wp-site-blocks > * {
	margin-block: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > .efa-main {
	flex: 1 0 auto;
}

/* Full-bleed page sections stack flush — spacing comes from their padding. */
.efa-main .wp-block-post-content > .alignfull,
.efa-main > .alignfull {
	margin-block: 0;
}

/* ---- Typography ---- */
:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
	text-wrap: balance;
}

/*
 * Section headings (Figma: h2 text-3xl → sm:text-4xl). Kept at low
 * specificity with :where() so component classes can override them.
 */
:where(.efa-main) h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--3-xl);
	line-height: 1.2;
}

@media (min-width: 640px) {
	:where(.efa-main) h2.wp-block-heading {
		font-size: var(--wp--preset--font-size--4-xl);
		line-height: 1.111;
	}
}

strong,
b {
	font-weight: 700;
}

/* Tailwind-equivalent line heights for the font-size presets. */
.has-xs-font-size { line-height: 1.333; }
.has-sm-font-size { line-height: 1.43; }
.has-base-font-size { line-height: 1.5; }
.has-lg-font-size { line-height: 1.556; }
.has-xl-font-size { line-height: 1.4; }
.has-2-xl-font-size { line-height: 1.333; }
.has-3-xl-font-size { line-height: 1.2; }
.has-4-xl-font-size { line-height: 1.111; }
.has-5-xl-font-size,
.has-6-xl-font-size,
.has-7-xl-font-size { line-height: 1; }

/* Headings on dark bands inherit the band's text colour. */
.has-pine-dark-background-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.has-pine-background-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/* ---- WCAG 2.2 — always-visible, high-contrast focus indication ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--pine);
	outline-offset: 3px;
	border-radius: 4px;
}

.has-pine-dark-background-color :where(a, button, input, [tabindex]):focus-visible,
.efa-a11y-bar :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--leaf);
}

::selection {
	background: var(--wp--preset--color--leaf);
	color: #fff;
}

/* Hide scrollbars until scrolling */
* {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

*:hover,
*:focus-within {
	scrollbar-color: rgb(30 92 58 / 0.4) transparent;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Screen-reader helpers + skip link ---- */
.screen-reader-text,
.efa-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.efa-skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 60;
	border-radius: 9999px;
	background: var(--wp--preset--color--pine);
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.efa-skip-link:focus {
	position: fixed;
	left: 1rem;
}

/* ==========================================================================
   Icon system — SVGs in assets/icons, drawn with mask-image and tinted by
   currentColor. Add `efa-icon-{name}` to a block's "Additional CSS class":
   - buttons / paragraphs / headings get a leading icon (::before)
   - add `efa-icon-after` to put it after the text instead (arrows)
   - add `efa-icon-heart-red` style via `efa-icon-red`
   ========================================================================== */
.efa-i {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--efa-icon) center / contain no-repeat;
	mask: var(--efa-icon) center / contain no-repeat;
	vertical-align: middle;
}

.efa-i--play, .efa-icon-play { --efa-icon: url(../../assets/icons/play.svg); }
.efa-i--pause, .efa-icon-pause { --efa-icon: url(../../assets/icons/pause.svg); }
.efa-i--search, .efa-icon-search { --efa-icon: url(../../assets/icons/search.svg); }
.efa-i--heart, .efa-icon-heart { --efa-icon: url(../../assets/icons/heart.svg); }
.efa-i--skip-back, .efa-icon-skip-back { --efa-icon: url(../../assets/icons/skip-back.svg); }
.efa-i--arrow, .efa-icon-arrow { --efa-icon: url(../../assets/icons/arrow.svg); }
.efa-i--menu, .efa-icon-menu { --efa-icon: url(../../assets/icons/menu.svg); }
.efa-i--close, .efa-icon-close { --efa-icon: url(../../assets/icons/close.svg); }
.efa-i--contrast, .efa-icon-contrast { --efa-icon: url(../../assets/icons/contrast.svg); }
.efa-i--reset, .efa-icon-reset { --efa-icon: url(../../assets/icons/reset.svg); }
.efa-i--live, .efa-icon-live { --efa-icon: url(../../assets/icons/live.svg); }
.efa-i--vote, .efa-icon-vote { --efa-icon: url(../../assets/icons/vote.svg); }
.efa-i--users, .efa-icon-users { --efa-icon: url(../../assets/icons/users.svg); }
.efa-i--book, .efa-icon-book { --efa-icon: url(../../assets/icons/book.svg); }
.efa-i--globe, .efa-icon-globe { --efa-icon: url(../../assets/icons/globe.svg); }
.efa-i--seed, .efa-icon-seed { --efa-icon: url(../../assets/icons/seed.svg); }
.efa-i--apple-podcasts, .efa-icon-apple-podcasts { --efa-icon: url(../../assets/icons/apple-podcasts.svg); }
.efa-i--spotify, .efa-icon-spotify { --efa-icon: url(../../assets/icons/spotify.svg); }
.efa-i--rss, .efa-icon-rss { --efa-icon: url(../../assets/icons/rss.svg); }
.efa-i--scale, .efa-icon-scale { --efa-icon: url(../../assets/icons/scale.svg); }
.efa-i--music, .efa-icon-music { --efa-icon: url(../../assets/icons/music.svg); }

/* Leading icon on paragraphs / headings (e.g. badges, card icons). */
p[class*="efa-icon-"]::before,
.wp-block-heading[class*="efa-icon-"]::before,
.wp-block-button[class*="efa-icon-"]:not(.efa-icon-after) .wp-block-button__link::before,
.wp-block-button.efa-icon-after .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: var(--efa-icon-size, 1.25rem);
	height: var(--efa-icon-size, 1.25rem);
	background-color: var(--efa-icon-color, currentColor);
	-webkit-mask: var(--efa-icon) center / contain no-repeat;
	mask: var(--efa-icon) center / contain no-repeat;
}

.wp-block-button[class*="efa-icon-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.efa-icon-red {
	--efa-icon-color: var(--wp--preset--color--heart-red);
}