/*
 * Nurturing Tomorrow — single stylesheet.
 *
 * 1. Design tokens   (swap brand values here — one place)
 * 2. Reset & base
 * 3. Accessibility helpers
 * 4. Buttons
 * 5. Header & navigation
 * 6. Hero & page headers
 * 7. Sections & bands
 * 8. Cards (posts / actions / stats / giving / team)
 * 9. Article (single post, entry content)
 * 10. Forms & embeds (reserved space — no CLS)
 * 11. Footer
 * 12. WooCommerce (scoped)
 * 13. Motion & print
 */

/* ------------------------------------------------------------------ *
 * 1. DESIGN TOKENS — NTF brand palette
 * Deep blue is the workhorse (text-safe everywhere: ~12:1 on white).
 * Amber and pink are light, so they are BACKGROUND-ONLY colors — never
 * text on white. Text on amber uses --c-accent-text (~6.9:1 on amber).
 * ------------------------------------------------------------------ */
:root {
	/* Brand blue */
	--c-primary:        #033c7e;
	--c-primary-deep:   #022a5a;  /* dark bands, hover states */
	--c-primary-tint:   #eef3fa;  /* alternating section background */

	/* Brand amber — donate/CTA buttons (background only, dark text) */
	--c-accent:         #ffb74d;
	--c-accent-deep:    #ffa726;  /* hover */
	--c-accent-text:    #022a5a;

	/* Brand pink — soft accent (background tint only) */
	--c-accent-soft:      #f48fb1;
	--c-accent-soft-tint: #fdeef4;

	/* Neutrals (brand near-white #fafafa) */
	--c-text:           #212529;
	--c-text-soft:      #495057;
	--c-line:           #e5e7eb;
	--c-bg:             #ffffff;
	--c-bg-warm:        #fafafa;

	/* Type — system stacks, zero font files. When brand fonts arrive:
	   add @font-face (woff2, font-display: swap) above and swap these. */
	--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--text-base: 1.125rem;      /* 18px minimum body */
	--leading:   1.65;
	--measure:   65ch;

	/* Spacing scale */
	--sp-1: 0.5rem;
	--sp-2: 0.75rem;
	--sp-3: 1rem;
	--sp-4: 1.5rem;
	--sp-5: 2.5rem;
	--sp-6: 4rem;

	--radius:    10px;
	--radius-sm: 8px;
	--shadow:    0 2px 12px rgba(41, 37, 36, 0.08);
	--shadow-up: 0 6px 20px rgba(41, 37, 36, 0.12);

	--content-max: 72rem;
	--header-h: 4rem;
}

/* ------------------------------------------------------------------ *
 * 2. RESET & BASE
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
	color: var(--c-text);
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p, ul, ol { margin: 0 0 1em; }

a { color: var(--c-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--c-primary-deep); }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

figure { margin: 0; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) 0; }

/* ------------------------------------------------------------------ *
 * 3. ACCESSIBILITY
 * ------------------------------------------------------------------ */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-primary-deep);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--c-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * 4. BUTTONS
 * ------------------------------------------------------------------ */
.btn {
	display: inline-block;
	padding: 0.65em 1.4em;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--lg { padding: 0.8em 1.8em; font-size: 1.0625rem; }

.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-deep); color: #fff; }

.btn--secondary { background: transparent; color: var(--c-primary-deep); border-color: var(--c-primary); }
.btn--secondary:hover { background: var(--c-primary-tint); color: var(--c-primary-deep); }

.btn--donate { background: var(--c-accent); color: var(--c-accent-text); }
.btn--donate:hover { background: var(--c-accent-deep); color: var(--c-accent-text); }

/* ------------------------------------------------------------------ *
 * 5. HEADER & NAVIGATION
 * ------------------------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	min-height: var(--header-h);
	padding: 0 var(--sp-3);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo__img { width: auto; max-height: 44px; }
.site-logo__text { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--c-primary-deep); }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
}

/* Desktop: let the menu float between logo and actions so the free space
   splits evenly on both sides instead of cramming against the logo */
@media (min-width: 900px) {
	.site-nav { margin-left: auto; }
}

.search-toggle, .nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: 0;
	padding: var(--sp-1);
	color: var(--c-text);
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.search-toggle:hover, .nav-toggle:hover { background: var(--c-primary-tint); }
.nav-toggle { display: none; }
.nav-toggle__label { font-size: 0.9rem; font-weight: 600; }

/* Menu (single render, all breakpoints) */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	display: block;
	padding: 0.4em 0.2em;
	color: var(--c-text);
	text-decoration: none;
	font-weight: 500;
}
.site-nav__list a:hover { color: var(--c-primary-deep); text-decoration: underline; }
/* Current page: bold + amber underline (inset shadow — no layout shift) */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_parent > a {
	color: var(--c-primary-deep);
	font-weight: 700;
	box-shadow: inset 0 -3px 0 var(--c-accent);
}

/* Dropdown */
.menu-item-has-children { position: relative; }
@media (min-width: 900px) {
	/* Keep the parent link and its injected arrow button on one line */
	.site-nav__list > .menu-item-has-children { display: flex; align-items: center; }
}
.submenu-toggle {
	background: none;
	border: 0;
	padding: 0.3em;
	cursor: pointer;
	color: inherit;
	line-height: 0;
	border-radius: var(--radius-sm);
}
.submenu-toggle svg { transition: transform 0.15s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--sp-1);
}
@media (min-width: 900px) {
	.sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -0.5rem;
		min-width: 13rem;
		background: var(--c-bg);
		border: 1px solid var(--c-line);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-up);
		padding: var(--sp-1);
	}
	.menu-item-has-children.is-open > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu { display: block; }
	.sub-menu a { padding: 0.5em 0.75em; border-radius: 6px; }
	.sub-menu a:hover { background: var(--c-primary-tint); text-decoration: none; }
}

/* Header search panel */
.header-search { border-top: 1px solid var(--c-line); background: var(--c-bg-warm); }
.header-search__inner { max-width: 40rem; margin: 0 auto; padding: var(--sp-3); }

/* Mobile: hamburger below 900px, Donate stays visible in the bar */
@media (max-width: 899.98px) {
	.nav-toggle { display: inline-flex; }
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-up);
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
	}
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
	.site-nav__list a { padding: 0.7em 0.4em; font-size: 1.05rem; border-bottom: 1px solid var(--c-line); }
	.site-nav__list > li:last-child > a { border-bottom: 0; }
	.menu-item-has-children { display: block; }
	.menu-item-has-children > a { display: inline-block; width: calc(100% - 3rem); }
	.sub-menu { display: none; padding-left: var(--sp-3); }
	.menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-header__donate { padding: 0.5em 1em; font-size: 0.95rem; }
	.nav-toggle__label { display: none; }
}

/* ------------------------------------------------------------------ *
 * 6. HERO & PAGE HEADERS
 * ------------------------------------------------------------------ */
.hero {
	position: relative;
	background: var(--c-primary-tint);
	overflow: hidden;
}
.hero__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--sp-6) var(--sp-3) calc(var(--sp-6) + 2rem);
	display: grid;
	gap: var(--sp-5);
	align-items: center;
}
.hero__inner--split { grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.hero__inner--split { grid-template-columns: 1.1fr 0.9fr; }
}
/* No hero image → center the copy instead of hugging the left edge */
.hero__inner:not(.hero__inner--split) { text-align: center; justify-items: center; }
.hero__inner:not(.hero__inner--split) .hero__subhead { margin-left: auto; margin-right: auto; }
.hero__inner:not(.hero__inner--split) .hero__actions { justify-content: center; }
.hero__title { color: var(--c-primary-deep); margin-bottom: 0.4em; }
.hero__subhead { font-size: 1.25rem; color: var(--c-text-soft); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-up); }
.hero__accent {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 3rem;
	color: var(--c-bg);
	display: block;
}

.page-header {
	background: var(--c-primary-tint);
	padding: var(--sp-5) 0;
}
.page-header__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--sp-3);
}
.page-header h1 { color: var(--c-primary-deep); margin-bottom: 0.2em; }
.page-header__intro { font-size: 1.15rem; color: var(--c-text-soft); max-width: var(--measure); margin-bottom: 0; }
.page-header__quote { margin: var(--sp-4) 0 0; max-width: var(--measure); }
.page-header__quote p { font-size: 1.3rem; font-style: italic; color: var(--c-primary-deep); }
.page-header__quote cite { font-style: normal; color: var(--c-text-soft); }

/* Mission: the whole page body is centered — center its header too */
.page-header--mission { text-align: center; }
.page-header--mission .page-header__quote { margin-left: auto; margin-right: auto; }
.page-mission .card--action { text-align: center; }
.page-header__search { max-width: 32rem; margin-top: var(--sp-3); }

/* ------------------------------------------------------------------ *
 * 7. SECTIONS & BANDS
 * ------------------------------------------------------------------ */
.section { padding: var(--sp-6) 0; }
.section--tint { background: var(--c-primary-tint); }
.section__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--sp-3);
}
.section__inner--narrow, .section--narrow .section__inner { max-width: 52rem; }
.section__title { margin-bottom: var(--sp-4); }
.section__more { margin: var(--sp-4) 0 0; font-weight: 600; }

/* Short amber accent bar under section headings */
.section__title::after,
.page-mission .entry-content > h2::after,
.page-podcast .entry-content > h2::after,
.page-newsletter .entry-content > h2::after {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--c-accent);
	margin-top: 0.4em;
}
.page-mission .entry-content > h2.has-text-align-center::after,
.page-podcast .entry-content > h2.has-text-align-center::after,
.cta-band .section__title::after { margin-left: auto; margin-right: auto; }

/* Donate CTA band */
.cta-band {
	background: var(--c-primary-deep);
	color: #fff;
	padding: var(--sp-6) 0;
	text-align: center;
}
.cta-band__inner { max-width: 44rem; margin: 0 auto; padding: 0 var(--sp-3); }
.cta-band h2 { color: #fff; }
.cta-band__trust { margin: var(--sp-3) 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.cta-band .btn--secondary { color: #fff; border-color: #fff; }
.cta-band .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cta-band .btn { margin: 0 var(--sp-1) var(--sp-1) 0; }

.cta-band--quiet {
	background: var(--c-accent-soft-tint);
	border-left: 4px solid var(--c-accent-soft);
	border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-4);
	margin: var(--sp-5) 0;
	/* Beat the .cta-band base styles this variant shares a class with */
	color: var(--c-text);
	text-align: left;
}
.cta-band--quiet__text { margin: 0; font-weight: 500; }
.cta-band--quiet__text a { font-weight: 700; }

/* Crisis note — calm, readable, not alarming */
.crisis-note {
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-primary);
	background: var(--c-bg-warm);
	border-radius: var(--radius-sm);
	padding: var(--sp-3) var(--sp-4);
	margin: var(--sp-4) 0;
}
.crisis-note p { margin: 0; font-size: 1rem; }

/* Impact stats */
.stats { padding: var(--sp-5) 0; }
.stats__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--sp-3);
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .stats__inner { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--sp-4);
	text-align: center;
}
.stat-card__number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 2.8rem);
	font-weight: 800;
	color: var(--c-primary-deep);
	line-height: 1.1;
}
.stat-card__label { color: var(--c-text-soft); }

/* Founder quote */
.founder-quote {
	display: grid;
	gap: var(--sp-4);
	align-items: center;
	max-width: 56rem;
}
@media (min-width: 720px) { .founder-quote { grid-template-columns: auto 1fr; } }
.founder-quote__photo {
	width: 160px;
	height: 200px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.founder-quote__text p {
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	font-style: italic;
	color: var(--c-primary-deep);
	margin: 0;
}
.founder-quote__text { margin: 0; padding: 0; border: 0; }
.founder-quote__attribution { grid-column: 1 / -1; }
@media (min-width: 720px) { .founder-quote__attribution { grid-column: 2; } }
.founder-quote__attribution strong { display: block; }
.founder-quote__attribution span { color: var(--c-text-soft); font-size: 0.95rem; }

/* ------------------------------------------------------------------ *
 * 8. CARDS
 * ------------------------------------------------------------------ */
.card-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}
/* wpautop turns newlines in hand-written grid/card markup into empty <p>s
   and <br>s that become phantom flex/grid children — drop them */
.card-grid > p:empty, .doc-grid > p:empty, .team-grid > p:empty { display: none; }
.card-grid > br, .doc-grid > br, .team-grid > br { display: none; }
.card--icon > br, .card--action > br, .team-card > br { display: none; }
.card--icon > p:empty, .card--action > p:empty, .team-card > p:empty { display: none; }
@media (min-width: 600px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow-up); transform: translateY(-3px); }

/* Icon card (mission "What we do" 2x2 grid) */
.card--icon {
	padding: var(--sp-4);
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
}
.card--icon svg {
	width: 44px;
	height: 44px;
	color: var(--c-primary);
	fill: currentColor;
	flex-shrink: 0;
}
.card--icon p { margin: 0; color: var(--c-text-soft); font-size: 1rem; }
.card-grid--2x2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .card-grid--2x2 { grid-template-columns: repeat(2, 1fr); } }

/* Document link cards (annual reports) */
.doc-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
.doc-card {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--c-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.doc-card:hover { box-shadow: var(--shadow-up); transform: translateY(-2px); border-color: var(--c-primary); color: var(--c-text); }
.doc-card svg { width: 32px; height: 32px; color: var(--c-primary); fill: currentColor; flex-shrink: 0; }
.doc-card strong { display: block; color: var(--c-primary-deep); }
.doc-card span { font-size: 0.85rem; color: var(--c-text-soft); }

/* Checkmark bullet list (newsletter benefits) */
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 2.1em; margin-bottom: 0.7em; }
.check-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0.2em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-accent-text);
	font-size: 0.75em;
	font-weight: 700;
}

.card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }

.card__badge {
	align-self: flex-start;
	display: inline-block;
	background: var(--c-primary-tint);
	color: var(--c-primary-deep);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.2em 0.7em;
	border-radius: 999px;
}
.card__title { font-size: 1.15rem; margin: 0; }
.card__title a { color: var(--c-text); text-decoration: none; }
.card__title a:hover { color: var(--c-primary-deep); text-decoration: underline; }
.card__excerpt { color: var(--c-text-soft); font-size: 1rem; margin: 0; }
.card__meta { margin-top: auto; color: var(--c-text-soft); font-size: 0.9rem; }

.card--action { padding: var(--sp-4); }
.card--action .card__title { margin-bottom: 0.5em; }
.card--action p { color: var(--c-text-soft); margin: 0; }

/* Giving levels */
.giving-card {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--sp-4);
}
.giving-card__amount {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--c-primary);
}
.giving-card p { margin: 0.3em 0 0; color: var(--c-text-soft); font-size: 1rem; }

/* Team cards (markup from block patterns) */
.team-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
/* Two-person variant (podcast hosts): capped and centered */
.team-grid--2 { max-width: 52rem; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .team-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.team-card {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--sp-4);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.team-card:hover { box-shadow: var(--shadow-up); transform: translateY(-3px); }
.team-card__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-sm);
}
.team-card__name { margin: var(--sp-3) 0 0; font-size: 1.15rem; }
.team-card__role { color: var(--c-primary-deep); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.5em; }
.team-card__bio { color: var(--c-text-soft); font-size: 1rem; }
.team-card__link { margin: 0; }

/* Filter bar & pagination */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-bottom: var(--sp-4);
}
.filter-bar__item {
	display: inline-block;
	padding: 0.35em 1em;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--c-text);
	font-size: 0.95rem;
	font-weight: 500;
}
.filter-bar__item:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }
.filter-bar__item.is-active { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: #fff; }

.pagination { margin: var(--sp-5) 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; }
.pagination .page-numbers {
	display: inline-block;
	min-width: 2.4em;
	padding: 0.4em 0.7em;
	text-align: center;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--c-text);
}
.pagination .page-numbers.current { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary-deep); }

.link-list { padding-left: 1.2em; }
.link-list li { margin-bottom: 0.4em; }

/* ------------------------------------------------------------------ *
 * 9. ARTICLE
 * ------------------------------------------------------------------ */
.post-single__header {
	max-width: 52rem;
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-3) var(--sp-4);
}
.post-single__title { margin: 0.4em 0 0.3em; }
.post-single__byline { color: var(--c-text-soft); font-size: 0.95rem; margin: 0; }

.post-hero {
	max-width: 52rem;
	margin: 0 auto var(--sp-4);
	padding: 0 var(--sp-3);
}
/* width/height attributes + height:auto reserve the image's space (no CLS) */
.post-hero img { width: 100%; border-radius: var(--radius); }

.entry-content,
.post-single__content {
	max-width: 52rem;
	margin: 0 auto;
	padding: 0 var(--sp-3);
}
.entry-content--wide { max-width: var(--content-max); }
.entry-content > * { max-width: var(--measure); }
/* Center-aligned blocks: center the (measure-capped) block itself too,
   otherwise its text centers within a left-pinned column */
.entry-content > .has-text-align-center { margin-left: auto; margin-right: auto; }
.entry-content--wide > * { max-width: none; }
.entry-content > .alignwide, .entry-content > .alignfull,
.entry-content > .wp-block-image, .entry-content > .wp-block-embed { max-width: none; }

.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
/* Anchor targets land below the sticky header */
.entry-content [id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > p:first-child { margin-top: 0; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content li { margin-bottom: 0.35em; }

.entry-content blockquote,
blockquote.wp-block-quote {
	margin: var(--sp-4) 0;
	padding: var(--sp-2) var(--sp-4);
	border-left: 4px solid var(--c-primary);
	background: var(--c-primary-tint);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}

/* "Sources" list convention: <h2>Sources</h2> + list */
.entry-content .sources,
.entry-content h2 + ul.sources-list {
	font-size: 0.95rem;
	color: var(--c-text-soft);
}

/* Tables in content (e.g. the volunteers list until it's rebuilt as cards) */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}
.entry-content th,
.entry-content td {
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
}
.entry-content th { color: var(--c-primary-deep); }
.entry-content tbody tr:nth-child(odd) { background: var(--c-bg-warm); }

/* Legacy "SVG Icon Block" plugin markup in imported content: the plugin's
   CSS may be absent, leaving unsized black SVGs. Constrain and brand them. */
.entry-content .wp-block-svgib-svg svg {
	max-width: 72px;
	height: auto;
	color: var(--c-primary);
	fill: currentColor;
}
/* On the FAQs page those icons are leftover accordion chevrons — hide. */
.page-faqs .wp-block-svgib-svg { display: none; }
/* Old Wavy-theme accordion shortcodes render as flat markup with a giant
   chevron SVG once that theme is gone — hide the chevrons, keep the text
   readable until the content is rebuilt with the FAQ accordion pattern. */
.entry-content .epcl-toggle svg { display: none; }

.post-single__footer {
	max-width: 52rem;
	margin: var(--sp-5) auto 0;
	padding: 0 var(--sp-3);
}

.share-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	padding: var(--sp-3) 0;
	border-top: 1px solid var(--c-line);
}
.share-links__label { font-weight: 700; font-size: 0.95rem; }
.share-links a { font-size: 0.95rem; }

.author-box {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	background: var(--c-bg-warm);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: var(--sp-4);
	margin-top: var(--sp-3);
}
.author-box img { border-radius: 50%; }
.author-box__name { font-weight: 700; margin: 0 0 0.2em; }
.author-box__bio { color: var(--c-text-soft); font-size: 0.95rem; margin: 0; }

.post-single__after {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--sp-3) var(--sp-6);
}
.post-single__after .cta-band--quiet { max-width: 52rem; margin-left: auto; margin-right: auto; }
.related-posts { margin-top: var(--sp-5); }

/* Comments */
.comments { max-width: 52rem; margin: var(--sp-5) auto 0; }
.comments__list { list-style: none; padding: 0; }
.comments__list .comment { border-top: 1px solid var(--c-line); padding: var(--sp-3) 0; }
.comments .avatar { border-radius: 50%; float: left; margin-right: var(--sp-2); }

/* FAQ accordion — native details/summary */
.faq-content details,
.faq-item {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	margin-bottom: var(--sp-2);
	max-width: none;
}
.faq-content summary {
	padding: var(--sp-3) var(--sp-4);
	font-weight: 600;
	cursor: pointer;
	list-style-position: outside;
	border-radius: var(--radius-sm);
}
.faq-content summary:hover { background: var(--c-primary-tint); }
.faq-content details[open] summary { border-bottom: 1px solid var(--c-line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.faq-content details > *:not(summary) { padding: 0 var(--sp-4); }
.faq-content details > p:first-of-type { padding-top: var(--sp-3); }
.faq-content details > *:last-child { padding-bottom: var(--sp-3); }
.faq-content h2 { margin-top: 1.6em; }

/* 404 */
.error-404__search { max-width: 28rem; margin-top: var(--sp-4); }

/* ------------------------------------------------------------------ *
 * 10. FORMS & EMBEDS (reserved space — no CLS)
 * ------------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
	width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid #a8a29e;
	border-radius: var(--radius-sm);
	font: inherit;
	color: var(--c-text);
	background: var(--c-bg);
}
textarea { min-height: 8rem; }
label { font-weight: 600; font-size: 0.95rem; }

/* Form-plugin submit buttons (e.g. Contact Form 7) pick up the primary style */
input[type="submit"] {
	display: inline-block;
	padding: 0.65em 1.4em;
	background: var(--c-primary);
	color: #fff;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
input[type="submit"]:hover { background: var(--c-primary-deep); }
/* CF7 utility containers that its own CSS normally hides */
.entry-content fieldset.hidden-fields-container { display: none; }

.search-form { display: flex; gap: var(--sp-1); }
.search-form__input { flex: 1; }
.search-form__submit { flex-shrink: 0; }

/* Zeffy donation iframe — height reserved before load */
.embed-zeffy {
	min-height: 700px;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--c-bg-warm);
}
@media (max-width: 599.98px) { .embed-zeffy { min-height: 900px; } }
.embed-zeffy iframe {
	width: 100%;
	height: 100%;
	min-height: inherit;
	border: 0;
	display: block;
}

/* Newsletter (Mailchimp) — fixed-height block, no external CSS/JS */
.newsletter-embed { min-height: 16rem; }
.newsletter-form {
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--sp-4);
	position: relative;
}
.newsletter-form__fields { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (min-width: 640px) { .newsletter-form__fields { grid-template-columns: 1fr 1.4fr; } }
.newsletter-form__field { margin: 0; }
.newsletter-form__field label { display: block; margin-bottom: 0.3em; }
.newsletter-form__promise { margin: var(--sp-2) 0 0; font-size: 0.9rem; color: var(--c-text-soft); }
.newsletter-embed__placeholder {
	padding: var(--sp-4);
	border: 1px dashed var(--c-line);
	border-radius: var(--radius);
	color: var(--c-text-soft);
}

/* Click-to-load facade (podcast player) */
.embed-facade {
	min-height: 232px; /* Spotify embed height — reserved before and after load */
	display: grid;
	place-items: center;
	background: var(--c-primary-tint);
	border-radius: var(--radius);
}
.embed-facade iframe { width: 100%; height: 232px; border: 0; border-radius: var(--radius); }

/* Donate page layout */
.donate-layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .donate-layout { grid-template-columns: 1.4fr 1fr; } }
.donate-layout__levels { display: grid; gap: var(--sp-3); align-content: start; }
.donate-layout__note { font-size: 0.95rem; color: var(--c-text-soft); margin: var(--sp-2) 0 0; }
.donate-trust { text-align: center; }
.donate-trust .doc-grid { max-width: 40rem; margin: var(--sp-4) auto; text-align: left; }
.donate-trust__tax { font-size: 0.95rem; color: var(--c-text-soft); }
.donate-trust .btn { margin: 0 var(--sp-1) var(--sp-1) 0; }

/* Contact layout */
.contact-layout { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 800px) { .contact-layout { grid-template-columns: 1fr 1.6fr; } }
.contact-layout .entry-content { padding: 0; margin: 0; }
/* Both column headings sit on the same baseline; keep the column left-aligned */
.contact-layout .entry-content > *:first-child { margin-top: 0; }
.contact-layout__details h2,
.contact-layout .entry-content h2 { font-size: 1.5rem; margin-top: 0; }
.contact-layout .entry-content h2 + * { margin-top: 0.5em; }
.contact-layout .entry-content .has-text-align-center { text-align: left; }
.contact-layout .entry-content > h2:not(:first-child) { margin-top: 1.6em; }

/* Podcast — centered hero to match the page's centered rhythm */
.page-header--podcast { text-align: center; }
.page-header--podcast .page-header__intro { margin-left: auto; margin-right: auto; }
.podcast-listen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); justify-content: center; }
.podcast-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--c-text);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.6em 1.2em;
	border-radius: var(--radius-sm);
}
.podcast-badge:hover { background: #000; color: #fff; }
.podcast-listen__placeholder { color: var(--c-text-soft); font-size: 0.95rem; }

/* Mission / team CTA band — centered to match the page rhythm */
.mission-cta { text-align: center; }
.mission-cta .btn { margin: 0 var(--sp-1) var(--sp-1) 0; }

/* ------------------------------------------------------------------ *
 * 11. FOOTER
 * ------------------------------------------------------------------ */
.site-footer {
	background: var(--c-bg-warm);
	border-top: 1px solid var(--c-line);
	margin-top: var(--sp-6);
	font-size: 1rem;
}
.site-footer__columns {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-3);
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__columns { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.site-footer__logo { max-height: 40px; width: auto; margin-bottom: var(--sp-2); }
.site-footer__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--c-primary-deep); }
.footer-mission { color: var(--c-text-soft); }
.footer-ein { font-size: 0.9rem; color: var(--c-text-soft); }
.candid-seal { margin: var(--sp-3) 0 0; }
.candid-seal img { display: inline-block; width: 128px; height: 128px; }

.footer-col__title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-soft); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0.5em; }
.footer-links a { color: var(--c-text); text-decoration: none; }
.footer-links a:hover { color: var(--c-primary-deep); text-decoration: underline; }
.footer-contact p { margin-bottom: 0.6em; }
address { font-style: normal; }

/* Crisis line — quiet but readable, every page */
.footer-crisis {
	border-top: 1px solid var(--c-line);
	background: var(--c-primary-tint);
}
.footer-crisis p {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--sp-3);
	text-align: center;
	font-size: 0.95rem;
	color: var(--c-primary-deep);
}

.footer-colophon {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--sp-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	color: var(--c-text-soft);
}
.footer-colophon p { margin: 0; }
.footer-legal { list-style: none; display: flex; gap: var(--sp-3); margin: 0; padding: 0; }
.footer-legal a { color: var(--c-text-soft); }

/* ------------------------------------------------------------------ *
 * 12. WOOCOMMERCE (scoped to shop pages; Woo assets are dequeued
 *     everywhere else — see inc/performance.php)
 * ------------------------------------------------------------------ */
.woocommerce-page .site-main { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-5) var(--sp-3); }
.woocommerce-page .button,
.woocommerce-page button[type="submit"] {
	background: var(--c-primary);
	color: #fff;
	border: 0;
	border-radius: var(--radius-sm);
	font-weight: 600;
}
.woocommerce-page .button:hover { background: var(--c-primary-deep); }
.woocommerce-page ul.products li.product { border-radius: var(--radius); overflow: hidden; }
.woocommerce-page ul.products li.product img { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ *
 * 13. MOTION & PRINT
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.site-header, .site-footer, .cta-band, .share-links, .nav-toggle { display: none; }
}