/* AUTO-GENERATED by `wp sdkhf:build-css` — do not edit directly.
   Edit the source files in assets/css/base|layout|components/ instead. */

/* ===== base/variables.css ===== */
/* ==========================================================================
   SDKHF design tokens — Karma Humanitarian Foundation brand system.
   Visually estimated from a brochure, NOT pixel-picked — swap for real
   hex values once Ghada confirms exact brand colors.
   ========================================================================== */
:root {
	--sdkhf-navy-deep: #0A1B32;
	--sdkhf-navy: #0E2340;
	--sdkhf-navy-muted: #96A2B8;
	--sdkhf-green: #1F7A38;
	--sdkhf-green-light: #8FD1A0;
	--sdkhf-gold: #C9A24B;
	--sdkhf-off-white: #F7F9F7;
	--sdkhf-white: #FFFFFF;
	--sdkhf-ink: #16202B;

	--sdkhf-radius: 14px;
	--sdkhf-radius-sm: 8px;
	--sdkhf-shadow: 0 4px 16px rgba(14, 35, 64, 0.08);
	--sdkhf-shadow-lg: 0 16px 48px rgba(14, 35, 64, 0.14);
	--sdkhf-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--sdkhf-font-heading: 'Fraunces', Georgia, serif;
	--sdkhf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--sdkhf-container: 1140px;

	/* Spacing scale — 4px base unit, used across margin/padding/gap */
	--sdkhf-space-1: 4px;
	--sdkhf-space-2: 8px;
	--sdkhf-space-3: 12px;
	--sdkhf-space-4: 16px;
	--sdkhf-space-5: 20px;
	--sdkhf-space-6: 24px;
	--sdkhf-space-8: 32px;
	--sdkhf-space-10: 40px;
	--sdkhf-space-12: 48px;
	--sdkhf-space-16: 64px;
	--sdkhf-space-20: 80px;

	--sdkhf-section-pad: 44px;
}

/* ===== base/reset.css ===== */
/* Minimal reset — box-sizing, margin zero, img max-width. */
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
button, input, select, textarea {
	font: inherit;
}
a {
	color: inherit;
	text-decoration: none;
}

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

/* ===== base/typography.css ===== */
/* Heading/body font rules, type scale.
   Scaled down 2026-07-11 to match the reference site's compact,
   content-dense feel — the earlier scale ran ~30% larger than the
   reference across headings, hero, and section padding. */
body {
	font-family: var(--sdkhf-font-body);
	color: var(--sdkhf-ink);
	background: var(--sdkhf-off-white);
	line-height: 1.55;
	font-size: 15px;
}

h1, h2, h3, h4 {
	font-family: var(--sdkhf-font-heading);
	color: var(--sdkhf-navy-deep);
	line-height: 1.2;
	margin-bottom: 0.4em;
}

h1 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); }   /* ~28–36px (was up to 51px) */
h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); }      /* ~22–26px (was up to 38px) */
h3 { font-size: 1.1rem; }                            /* ~17.6px (was 20.8px) */
h4 { font-size: 0.95rem; }                           /* ~15px  (was 16.8px) */

p {
	max-width: 66ch;
}

/* ===== layout/grid.css ===== */
/* Container, column utilities. */
.container {
	max-width: var(--sdkhf-container);
	margin: 0 auto;
	padding: 0 var(--sdkhf-space-6);
}

.section {
	padding: var(--sdkhf-section-pad) 0;
}

/* ===== layout/utilities.css ===== */
/* Spacing/display utility classes — used sparingly, not a full utility framework. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-to-content link — visually hidden until keyboard-focused, per WCAG 2.4.1. */
.skip-link {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	background: var(--sdkhf-navy);
	color: var(--sdkhf-white);
	z-index: 9999;
}

.skip-link:focus {
	top: var(--sdkhf-space-2);
	left: var(--sdkhf-space-2);
	width: auto;
	height: auto;
	padding: var(--sdkhf-space-3) var(--sdkhf-space-5);
	overflow: visible;
	clip: auto;
	white-space: normal;
	border-radius: var(--sdkhf-radius-sm);
	box-shadow: var(--sdkhf-shadow-lg);
	text-decoration: none;
	font-family: var(--sdkhf-font-body);
	font-weight: 600;
}

/* ===== components/buttons.css ===== */
/* Button component styles. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sdkhf-space-2);
	padding: 10px 22px;
	border-radius: var(--sdkhf-radius);
	font-weight: 600;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: transform 0.2s var(--sdkhf-ease), box-shadow 0.2s var(--sdkhf-ease);
	background: var(--sdkhf-green);
	color: var(--sdkhf-white);
}
.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--sdkhf-shadow);
}
.btn-pill { border-radius: 999px; }
.btn-primary { background: var(--sdkhf-green); color: var(--sdkhf-white); }
.btn-outline { background: transparent; color: var(--sdkhf-white); border: 2px solid var(--sdkhf-white); }
.btn-donate { background: var(--sdkhf-green); padding: 8px 18px; font-size: 13.5px; }

/* ===== components/forms.css ===== */
/* Form component styles — filled in during Phase 4 alongside template-parts/forms/. */

/* Contact page 2-column layout: info column + form column. */
.contact-columns {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: var(--sdkhf-space-16);
	align-items: start;
}

.contact-info-column h2,
.contact-form-column h2 {
	margin-bottom: var(--sdkhf-space-6);
}

.contact-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-6);
}

.contact-info-item {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-1);
}

.contact-info-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sdkhf-green);
}

.contact-info-item a {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sdkhf-navy-deep);
}

.contact-info-item a:hover {
	color: var(--sdkhf-green);
}

/* Generic form-field styles, reused by any theme <form> (contact, volunteer). */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-2);
	margin-bottom: var(--sdkhf-space-5);
}

.form-field label {
	font-weight: 600;
	font-size: 14px;
	color: var(--sdkhf-navy-deep);
}

.form-field input,
.form-field select,
.form-field textarea {
	padding: 12px 14px;
	border: 1px solid rgba(14, 35, 64, 0.15);
	border-radius: var(--sdkhf-radius-sm);
	background: var(--sdkhf-white);
	color: var(--sdkhf-ink);
	/* 16px (was 15px) — a sub-16px input font makes iOS Safari auto-zoom the
	   page on focus. Mobile-audit fix 2026-07-12. */
	font-size: 16px;
	transition: border-color 0.2s var(--sdkhf-ease), box-shadow 0.2s var(--sdkhf-ease);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--sdkhf-green);
	box-shadow: 0 0 0 3px rgba(31, 122, 56, 0.12);
}

.form-field textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form .btn {
	width: 100%;
	justify-content: center;
}

@media (max-width: 900px) {
	.contact-columns {
		grid-template-columns: 1fr;
		gap: var(--sdkhf-space-12);
	}
}

/* -----------------------------------------------------------------------
   Below added for the Get Involved page's volunteer interest form
   (#volunteer section) — reuses .form-field from the Contact form above.
   ----------------------------------------------------------------------- */

.involve-form {
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	box-shadow: var(--sdkhf-shadow-lg);
	padding: var(--sdkhf-space-8);
}
.involve-form h3 {
	margin-bottom: var(--sdkhf-space-6);
}
.involve-form .btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	width: 100%;
	justify-content: center;
}
.involve-form .btn[disabled]:hover {
	transform: none;
	box-shadow: none;
}

@media (max-width: 640px) {
	.involve-form {
		padding: var(--sdkhf-space-6);
	}
}

/* ===== components/cards.css ===== */
/* Card component styles — filled in during Phase 4 alongside template-parts/cards/. */

/* Resources landing page — simple 4-card link grid (title, one-line
   description, "Learn More" link). Not routed through a template-part
   (route-card.php is a different, quiz-style audience-routing card;
   program-card.php is bound to the `program` CPT loop) — this is
   plain static link markup, so it lives inline in
   template-resources.php with just the CSS here. */
.resources-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sdkhf-space-6);
}

.resource-card {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-3);
	padding: var(--sdkhf-space-8) var(--sdkhf-space-6);
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	box-shadow: var(--sdkhf-shadow);
	transition: transform 0.2s var(--sdkhf-ease), box-shadow 0.2s var(--sdkhf-ease);
}

.resource-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sdkhf-shadow-lg);
}

.resource-card-title {
	margin-bottom: 0;
	color: var(--sdkhf-navy-deep);
}

.resource-card-description {
	font-size: 14px;
	color: var(--sdkhf-navy-muted);
	margin: 0;
	flex-grow: 1;
}

.resource-card-link {
	font-weight: 700;
	font-size: 14px;
	color: var(--sdkhf-green);
}

.resource-card:hover .resource-card-link {
	color: var(--sdkhf-navy-deep);
}

@media (max-width: 900px) {
	.resources-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.resources-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   Below added for the Donate + Get Involved page templates (trust-badge
   row, sponsorship tier cards, partner/sponsorship CTA cards).
   ----------------------------------------------------------------------- */

/* Trust-badge card (Donate page trust-signal row). */
.trust-badge-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sdkhf-space-8);
}
.trust-badge {
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	box-shadow: var(--sdkhf-shadow);
	padding: var(--sdkhf-space-8) var(--sdkhf-space-6);
	text-align: center;
}
.trust-badge-icon {
	font-size: 32px;
	line-height: 1;
	margin-bottom: var(--sdkhf-space-4);
}
.trust-badge h3 {
	margin-bottom: var(--sdkhf-space-2);
	font-size: 1.05rem;
}
.trust-badge p {
	font-size: 14px;
	color: var(--sdkhf-navy-muted);
	margin: 0 auto;
}

/* Generic light-tint section background, used behind card rows to separate
   them from the page background without a hard border. */
.section.is-tinted {
	background: var(--sdkhf-white);
}

/* Sponsorship tier card (Get Involved page, #sponsorship section). */
.involve-tier-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sdkhf-space-5);
	margin-top: var(--sdkhf-space-6);
}
.involve-tier-card {
	background: var(--sdkhf-off-white);
	border: 1px solid rgba(14, 35, 64, 0.08);
	border-radius: var(--sdkhf-radius);
	padding: var(--sdkhf-space-5);
}
.involve-tier-card h3 {
	margin-bottom: var(--sdkhf-space-2);
	font-size: 1rem;
}
.involve-tier-card p {
	font-size: 14px;
	color: var(--sdkhf-navy-muted);
	margin: 0;
}

/* Partner/Sponsorship CTA card — dark surface, sits opposite the copy
   column on wide screens. */
.involve-cta-card {
	background: var(--sdkhf-navy-deep);
	color: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	padding: var(--sdkhf-space-8);
	align-self: start;
}
.involve-cta-card h3 {
	color: var(--sdkhf-white);
}
.involve-cta-card p {
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: var(--sdkhf-space-5);
}
.involve-cta-card .btn-outline-dark {
	background: var(--sdkhf-white);
	color: var(--sdkhf-navy-deep);
	border: none;
	display: inline-flex;
}
.involve-cta-card .involve-cta-phone {
	display: block;
	margin-top: var(--sdkhf-space-4);
	color: var(--sdkhf-green-light);
	font-weight: 600;
	text-decoration: none;
}
.involve-cta-card .involve-cta-phone:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.trust-badge-row,
	.involve-tier-row {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   Below added for the Programs page (page-templates/template-programs.php,
   template-parts/cards/program-card.php) — photo-top card with a
   circular icon badge overlapping the photo/text boundary, title,
   one-line excerpt, Learn More link.
   ----------------------------------------------------------------------- */

.program-grid-section {
	padding-block: var(--sdkhf-section-pad);
}

.program-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sdkhf-space-8);
}

.program-grid-empty {
	text-align: center;
	color: var(--sdkhf-navy-muted);
	padding-block: var(--sdkhf-space-12);
}

.program-card {
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	box-shadow: var(--sdkhf-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--sdkhf-ease), box-shadow 0.35s var(--sdkhf-ease);
}

.program-card:hover,
.program-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--sdkhf-shadow-lg);
}

.program-card-photo {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* Room below the photo for the icon badge to overlap into the body. */
	margin-bottom: 28px;
}

.program-card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.program-card-image-fallback {
	/* No featured image set yet — brand-gradient placeholder instead
	   of a broken/empty image so the card layout never breaks. */
	background-image: linear-gradient(135deg, var(--sdkhf-navy-deep), var(--sdkhf-navy));
}

.program-card-image-fallback.is-gradient-green {
	background-image: linear-gradient(135deg, var(--sdkhf-navy), var(--sdkhf-green));
}

.program-card-icon {
	position: absolute;
	left: var(--sdkhf-space-6);
	bottom: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sdkhf-gold);
	color: var(--sdkhf-navy-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sdkhf-shadow);
	border: 3px solid var(--sdkhf-white);
}

.program-card-icon svg {
	width: 26px;
	height: 26px;
}

.program-card-body {
	padding: var(--sdkhf-space-8) var(--sdkhf-space-6) var(--sdkhf-space-6);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.program-card-title {
	font-family: var(--sdkhf-font-heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--sdkhf-space-3);
	color: var(--sdkhf-ink);
}

.program-card-title a {
	color: inherit;
	text-decoration: none;
}

.program-card-title a:hover,
.program-card-title a:focus-visible {
	color: var(--sdkhf-green);
}

.program-card-excerpt {
	font-family: var(--sdkhf-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sdkhf-navy-muted);
	margin: 0 0 var(--sdkhf-space-5);
	flex: 1;
}

.program-card-link {
	font-family: var(--sdkhf-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sdkhf-green);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sdkhf-space-2);
	width: fit-content;
	transition: gap 0.25s var(--sdkhf-ease), color 0.25s var(--sdkhf-ease);
}

.program-card-link span {
	transition: transform 0.25s var(--sdkhf-ease);
}

.program-card-link:hover,
.program-card-link:focus-visible {
	color: var(--sdkhf-navy-deep);
	gap: var(--sdkhf-space-3);
}

.program-card-link:hover span,
.program-card-link:focus-visible span {
	transform: translateX(3px);
}

@media (max-width: 800px) {
	.program-grid {
		grid-template-columns: 1fr;
	}
}

/* Hero styling for this page lives in components/hero.css, which
   already implements the .hero-photo/.hero-compact structure that
   template-parts/hero/hero-compact.php renders — not duplicated here. */

/* ===== components/faq.css ===== */
/* FAQ accordion component styles — native <details>/<summary>, no JS.
   New file (not in the original css_build_order() list) — added here
   because cards.css/forms.css are still stubs earmarked for a
   different Phase 4 shape (cards, inputs) and an accordion is neither;
   registered in build-css-command.php's css_build_order() right after
   cards.css so it sits with the other content-display components. */
.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-4);
	max-width: 760px;
}

.faq-item {
	background: var(--sdkhf-white);
	border: 1px solid rgba(14, 35, 64, 0.08);
	border-radius: var(--sdkhf-radius);
	overflow: hidden;
	transition: box-shadow 0.2s var(--sdkhf-ease), border-color 0.2s var(--sdkhf-ease);
}

.faq-item[open] {
	box-shadow: var(--sdkhf-shadow);
	border-color: rgba(31, 122, 56, 0.25);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdkhf-space-4);
	padding: var(--sdkhf-space-5) var(--sdkhf-space-6);
	font-family: var(--sdkhf-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--sdkhf-navy-deep);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Remove default marker across browsers (Chrome/Safari use ::-webkit-details-marker, Firefox honors list-style: none). */
.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question:hover {
	color: var(--sdkhf-green);
}

.faq-question:focus-visible {
	outline: 2px solid var(--sdkhf-green);
	outline-offset: -2px;
}

.faq-icon {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.faq-icon::before,
.faq-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--sdkhf-green);
	transform: translate(-50%, -50%);
	transition: transform 0.25s var(--sdkhf-ease), opacity 0.25s var(--sdkhf-ease);
}

.faq-icon::before {
	width: 14px;
	height: 2px;
}

.faq-icon::after {
	width: 2px;
	height: 14px;
}

.faq-item[open] .faq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.faq-answer {
	padding: 0 var(--sdkhf-space-6) var(--sdkhf-space-5);
}

.faq-answer p {
	margin: 0;
	color: var(--sdkhf-ink);
	max-width: none;
}

.faq-answer a {
	color: var(--sdkhf-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 640px) {
	.faq-question {
		padding: var(--sdkhf-space-4) var(--sdkhf-space-5);
		font-size: 1rem;
	}

	.faq-answer {
		padding: 0 var(--sdkhf-space-5) var(--sdkhf-space-4);
	}
}

/* ===== components/donate.css ===== */
/* Donate page — amount selector, gift breakdown, legacy-giving box.
   Trust-badge styling lives in cards.css (shared .trust-badge pattern). */

/* -------- Frequency tabs -------- */
.donate-selector-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.donate-tabs {
	display: inline-flex;
	background: var(--sdkhf-off-white);
	border-radius: 999px;
	padding: var(--sdkhf-space-1);
	margin-bottom: var(--sdkhf-space-8);
	gap: var(--sdkhf-space-1);
}
.donate-tab {
	border: none;
	background: transparent;
	padding: 10px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	color: var(--sdkhf-navy-muted);
	cursor: pointer;
	transition: background 0.2s var(--sdkhf-ease), color 0.2s var(--sdkhf-ease);
}
.donate-tab.is-active {
	background: var(--sdkhf-navy-deep);
	color: var(--sdkhf-white);
}

/* -------- Tier grid -------- */
.donate-panel {
	margin-bottom: var(--sdkhf-space-8);
}
.donate-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sdkhf-space-4);
}
.donate-tier-btn {
	border: 2px solid rgba(14, 35, 64, 0.12);
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	padding: var(--sdkhf-space-5) var(--sdkhf-space-3);
	font-family: var(--sdkhf-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--sdkhf-navy-deep);
	cursor: pointer;
	transition: border-color 0.2s var(--sdkhf-ease), transform 0.2s var(--sdkhf-ease), box-shadow 0.2s var(--sdkhf-ease);
}
.donate-tier-btn:hover {
	border-color: var(--sdkhf-green-light);
	transform: translateY(-2px);
}
.donate-tier-btn.is-selected {
	border-color: var(--sdkhf-green);
	background: rgba(31, 122, 56, 0.06);
	box-shadow: var(--sdkhf-shadow);
}
.donate-tier-btn-other {
	font-family: var(--sdkhf-font-body);
	font-size: 15px;
}

.donate-other-row {
	margin-top: var(--sdkhf-space-5);
	text-align: left;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}
.donate-other-row label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: var(--sdkhf-space-2);
}
.donate-other-input {
	display: flex;
	align-items: center;
	border: 1px solid rgba(14, 35, 64, 0.16);
	border-radius: var(--sdkhf-radius-sm);
	background: var(--sdkhf-white);
	padding: 0 var(--sdkhf-space-3);
}
.donate-other-input span {
	color: var(--sdkhf-navy-muted);
	font-weight: 600;
}
.donate-other-input input {
	border: none;
	background: transparent;
	padding: 12px var(--sdkhf-space-2);
	font-size: 15px;
	width: 100%;
}
.donate-other-input input:focus {
	outline: none;
}

.btn-donate-continue {
	width: 100%;
	max-width: 340px;
	justify-content: center;
	font-size: 16px;
	padding: 16px 26px;
}
.btn-donate-continue[disabled] {
	opacity: 0.85;
	cursor: not-allowed;
}
.donate-selector-note {
	margin-top: var(--sdkhf-space-3);
	font-size: 13px;
	color: var(--sdkhf-navy-muted);
	max-width: none;
}

/* -------- Where Your Gift Goes -------- */
.donate-breakdown-inner {
	max-width: 720px;
	margin: 0 auto;
}
.donate-breakdown-copy {
	text-align: center;
	margin-bottom: var(--sdkhf-space-10);
}
.donate-breakdown-copy p {
	margin: 0 auto;
}
.donate-breakdown-bars {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-6);
}
.donate-breakdown-row-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--sdkhf-space-2);
	font-weight: 600;
}
.donate-breakdown-percent {
	font-family: var(--sdkhf-font-heading);
	color: var(--sdkhf-green);
}
.donate-breakdown-bar-track {
	height: 10px;
	border-radius: 999px;
	background: rgba(14, 35, 64, 0.08);
	overflow: hidden;
}
.donate-breakdown-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sdkhf-green) 0%, var(--sdkhf-green-light) 100%);
}

/* -------- Legacy giving -------- */
.donate-legacy-box {
	display: flex;
	align-items: center;
	gap: var(--sdkhf-space-8);
	background: linear-gradient(120deg, var(--sdkhf-navy-deep) 0%, var(--sdkhf-navy) 100%);
	color: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	padding: var(--sdkhf-space-10);
}
.donate-legacy-icon {
	font-size: 48px;
	line-height: 1;
	flex-shrink: 0;
}
.donate-legacy-copy h3 {
	color: var(--sdkhf-white);
	margin-bottom: var(--sdkhf-space-3);
}
.donate-legacy-copy p {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: var(--sdkhf-space-4);
}
.donate-legacy-link {
	color: var(--sdkhf-gold);
	font-weight: 600;
	text-decoration: none;
}
.donate-legacy-link:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.donate-tier-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.donate-tabs {
		width: 100%;
	}
	.donate-tab {
		flex: 1;
		padding: 10px 12px;
	}
	.donate-tier-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.donate-legacy-box {
		flex-direction: column;
		text-align: center;
		padding: var(--sdkhf-space-8) var(--sdkhf-space-6);
	}
}

/* ===== components/involve.css ===== */
/* Get Involved page — donate teaser + volunteer/partner/sponsorship section
   layout. Card patterns (tier cards, CTA cards) live in cards.css; form
   styling lives in forms.css — this file is section-level layout only. */

/* -------- Donate teaser band -------- */
.donate-teaser {
	background: var(--sdkhf-navy-deep);
	color: var(--sdkhf-white);
}
.donate-teaser-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdkhf-space-8);
	flex-wrap: wrap;
}
.donate-teaser-copy h2 {
	color: var(--sdkhf-white);
}
.donate-teaser-copy p {
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 0;
}
.donate-teaser .btn-primary {
	flex-shrink: 0;
}

/* -------- Shared eyebrow (also usable on Donate page) -------- */
.eyebrow {
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sdkhf-green);
	font-weight: 700;
	margin-bottom: var(--sdkhf-space-3);
	display: block;
}

/* -------- Volunteer / Partner / Sponsorship section layout -------- */
.involve-section.is-tinted {
	background: var(--sdkhf-white);
}
.involve-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sdkhf-space-12);
	align-items: start;
}
.involve-grid-reverse {
	grid-template-columns: 0.9fr 1.1fr;
}
.involve-grid-reverse .involve-copy {
	order: 2;
}
.involve-grid-reverse .involve-cta-card {
	order: 1;
}

.involve-role-list {
	list-style: none;
	margin: var(--sdkhf-space-6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-4);
}
.involve-role-list li {
	padding-left: var(--sdkhf-space-5);
	border-left: 3px solid var(--sdkhf-green-light);
}
.involve-role-list strong {
	display: block;
	color: var(--sdkhf-navy-deep);
	margin-bottom: 2px;
}
.involve-role-list span {
	font-size: 14px;
	color: var(--sdkhf-navy-muted);
}

@media (max-width: 900px) {
	.involve-grid,
	.involve-grid-reverse {
		grid-template-columns: 1fr;
	}
	.involve-grid-reverse .involve-copy,
	.involve-grid-reverse .involve-cta-card {
		order: initial;
	}
	.donate-teaser-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===== components/hero.css ===== */
/* Hero component styles. Heights reduced 2026-07-11 to match the
   reference's tighter hero band (was 560/280px). */
.hero-photo {
	position: relative;
	min-height: 440px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--sdkhf-navy-deep) 0%, var(--sdkhf-navy) 60%, var(--sdkhf-green) 150%);
}
.hero-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
}
.hero-bg.is-active { opacity: 1; transition: opacity 1.2s ease-in-out; }

.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(10,27,50,0.7) 0%, rgba(10,27,50,0.35) 100%);
}

.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding: var(--sdkhf-space-8) 0;
	color: var(--sdkhf-white);
}
.hero-eyebrow {
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sdkhf-green-light);
	font-weight: 700;
	margin-bottom: var(--sdkhf-space-3);
	display: block;
}
.hero-photo h1 { color: var(--sdkhf-white); margin-bottom: var(--sdkhf-space-4); }
.hero-highlight { color: var(--sdkhf-gold); }
.hero-photo p.lede { font-size: 15px; color: rgba(255,255,255,0.9); margin-bottom: var(--sdkhf-space-6); max-width: 440px; }
.hero-cta-row { display: flex; gap: var(--sdkhf-space-4); flex-wrap: wrap; }

@media (max-width: 640px) {
	.hero-photo { min-height: 480px; }
	.hero-inner { padding: var(--sdkhf-space-8) 0; }
}

/* Compact internal-page hero (About/Programs/Get Involved/Contact/
   FAQ/Resources) — shorter shell than .hero-photo, reuses .hero-bg /
   .hero-overlay / .hero-eyebrow / p.lede from the home hero above. */
.hero-compact {
	position: relative;
	min-height: 200px;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--sdkhf-navy-deep) 0%, var(--sdkhf-navy) 100%);
}

.hero-compact-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding: var(--sdkhf-space-8) 0;
	color: var(--sdkhf-white);
}

.hero-compact h1 {
	color: var(--sdkhf-white);
	margin-bottom: 0;
}

.hero-compact p.lede {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.9);
	max-width: 580px;
	margin-top: var(--sdkhf-space-3);
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.hero-compact {
		min-height: 220px;
	}

	.hero-compact-inner {
		padding: var(--sdkhf-space-8) 0;
	}
}

/* ===== components/navigation.css ===== */
/* Navigation component styles. */
.site-topbar { background: var(--sdkhf-navy-deep); color: var(--sdkhf-navy-muted); font-size: 12.5px; }
.site-topbar-inner { display: flex; justify-content: flex-start; gap: var(--sdkhf-space-5); padding: var(--sdkhf-space-2) var(--sdkhf-space-6); }
.site-topbar-inner a { color: var(--sdkhf-navy-muted); }
.site-topbar-inner a:hover { color: var(--sdkhf-white); }

/* White header to match the reference (was dark navy). The thin top
   bar above it stays dark; the main header row is white with dark
   nav text and a subtle bottom rule. */
.site-header { background: var(--sdkhf-white); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(14,35,64,0.08); }
.site-header-inner { display: flex; align-items: center; gap: var(--sdkhf-space-6); padding: var(--sdkhf-space-3) var(--sdkhf-space-6); }

.site-brand { display: flex; align-items: center; gap: var(--sdkhf-space-3); flex-shrink: 0; }
.site-title { font-family: var(--sdkhf-font-heading); font-weight: 700; font-size: 17px; color: var(--sdkhf-navy-deep); }
.site-tagline { font-size: 11px; color: var(--sdkhf-green); }

.site-nav { flex: 1; display: flex; justify-content: center; }
.nav-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--sdkhf-space-6); position: relative; }
.nav-menu li { position: relative; }
.nav-menu > li > a {
	color: var(--sdkhf-navy);
	font-weight: 600;
	font-size: 14px;
	display: block;
	padding: var(--sdkhf-space-4) 0;
}
.nav-menu > li > a:hover, .nav-menu .current-menu-item > a { color: var(--sdkhf-green); }
/* Dropdown-parent chevron cue */
.nav-menu > li:has(.sub-menu) > a::after {
	content: "";
	display: inline-block;
	margin-left: 5px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
}

.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius-sm);
	box-shadow: var(--sdkhf-shadow-lg);
	list-style: none;
	margin: 0;
	padding: var(--sdkhf-space-2) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s var(--sdkhf-ease), transform 0.2s var(--sdkhf-ease), visibility 0.2s;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.nav-menu .sub-menu a { color: var(--sdkhf-navy-deep); padding: var(--sdkhf-space-2) var(--sdkhf-space-4); }
.nav-menu .sub-menu a:hover { background: var(--sdkhf-off-white); }

.header-actions { display: flex; align-items: center; gap: var(--sdkhf-space-4); flex-shrink: 0; }

.header-search-inline {
	width: 0;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: width 0.35s var(--sdkhf-ease);
}
.header-search-inline.is-open { width: 240px; }
.header-search-inline .search-form { display: flex; width: 240px; }
.header-search-inline .search-field { width: 100%; border: none; border-radius: var(--sdkhf-radius-sm) 0 0 var(--sdkhf-radius-sm); padding: 10px 12px; font-size: 16px; }
.header-search-inline .search-submit { border: none; background: var(--sdkhf-green); color: var(--sdkhf-white); padding: 0 16px; border-radius: 0 var(--sdkhf-radius-sm) var(--sdkhf-radius-sm) 0; cursor: pointer; }
.header-search-toggle { background: var(--sdkhf-off-white); border: none; color: var(--sdkhf-navy); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.header-search-toggle:hover { background: rgba(14,35,64,0.1); }

.nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--sdkhf-navy-deep); }

@media (max-width: 900px) {
	.site-topbar-inner { display: none; }
	.site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--sdkhf-white); max-height: 0; overflow: hidden; transition: max-height 0.3s var(--sdkhf-ease); box-shadow: var(--sdkhf-shadow-lg); justify-content: flex-start; }
	.site-nav.is-open { max-height: 80vh; overflow-y: auto; }
	.nav-menu { flex-direction: column; gap: 0; padding: var(--sdkhf-space-3) var(--sdkhf-space-6) var(--sdkhf-space-6); align-items: stretch; }
	/* 44px min touch targets on the mobile drawer (was ~35px). Accessibility
	   audit fix 2026-07-12. */
	.nav-menu > li > a { padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
	.nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--sdkhf-off-white); border-radius: var(--sdkhf-radius-sm); margin: 4px 0; }
	.nav-menu .sub-menu a { min-height: 44px; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
	.nav-menu > li:has(.sub-menu) > a::after { float: right; }
	.nav-toggle { display: flex; }
}

/* Custom logo image (Customizer-uploaded, see header.php) — the
   theme_support() height/width only hints at the admin cropper's
   suggested size, it does NOT constrain the rendered <img>, so this
   theme has to do that itself. Height-capped, width auto, so any
   aspect ratio the org later uploads still fits the header row. */
.custom-logo-link {
	display: flex;
	align-items: center;
}
.custom-logo {
	height: 40px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 640px) {
	.custom-logo {
		height: 34px;
	}
}

/* Very small phones (≤360px): the header row (logo + hamburger + search +
   Donate pill) was ~4px too wide at 320px, causing a hairline horizontal
   scroll site-wide. Tighten the header's own spacing so it fits 320px.
   Mobile-audit fix 2026-07-12. Content never overflowed — header only. */
@media (max-width: 360px) {
	.site-header-inner { padding-left: var(--sdkhf-space-4); padding-right: var(--sdkhf-space-4); gap: var(--sdkhf-space-3); }
	.header-actions { gap: var(--sdkhf-space-2); }
	.header-actions .btn-donate { padding-left: 14px; padding-right: 14px; }
	.header-search-toggle { width: 32px; height: 32px; }
}

/* ===== components/footer.css ===== */
/* Footer component styles. */
.pre-footer-cta { background: var(--sdkhf-green); color: var(--sdkhf-white); padding: var(--sdkhf-space-12) 0; text-align: center; }
.pre-footer-cta h2 { color: var(--sdkhf-white); }
.pre-footer-cta p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto var(--sdkhf-space-6); }
.pre-footer-cta-buttons { display: flex; gap: var(--sdkhf-space-4); justify-content: center; flex-wrap: wrap; }
.pre-footer-cta .btn-outline { border-color: var(--sdkhf-white); }

.site-footer { background: var(--sdkhf-navy-deep); color: var(--sdkhf-navy-muted); padding: var(--sdkhf-space-12) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--sdkhf-space-8); padding-bottom: var(--sdkhf-space-8); }
.footer-col h3 { color: var(--sdkhf-white); font-size: 15px; margin-bottom: var(--sdkhf-space-4); }
.footer-col p { margin: 0 0 var(--sdkhf-space-2); font-size: 14px; }
.footer-col a:hover { color: var(--sdkhf-white); }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: var(--sdkhf-space-2); font-size: 14px; }
.footer-tagline { font-size: 13px; margin-top: var(--sdkhf-space-3); max-width: 220px; }
.footer-transparency-note { font-size: 13px; color: var(--sdkhf-navy-muted); font-style: italic; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: var(--sdkhf-space-4) 0; font-size: 13px; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== components/testimonials.css ===== */
/* Testimonial component styles now live in components/sections.css (testimonial-card.php / testimonial-marquee.php were built as part of the homepage-sections pass, alongside stat-grid/quote-band/film-reel — kept together in one file rather than splitting an already-small set of rules across two). This file is intentionally empty; kept in css_build_order() as a harmless no-op rather than removed, in case a future testimonial-specific override set grows large enough to warrant its own file again. */

/* ===== components/sections.css ===== */
/* ==========================================================================
   Homepage section components — quote/donate band + newsletter strip.
   New shared file (Phase 5 homepage build-out); appended to by multiple
   section builders, so each block below is clearly delimited by source
   file for easy scanning.
   ========================================================================== */

/* -----------------------------------------------------------------------
   template-parts/sections/quote-donate-band.php — dark pull-quote +
   donate CTA band with a terse 3-item trust-badge row.
   ----------------------------------------------------------------------- */

.quote-donate-band {
	background: var(--sdkhf-navy-deep);
	color: var(--sdkhf-white);
	padding-block: var(--sdkhf-section-pad);
}

.quote-donate-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sdkhf-space-8);
}

.quote-donate-blockquote {
	max-width: 700px;
	margin: 0;
}

.quote-donate-blockquote p {
	font-family: var(--sdkhf-font-heading);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--sdkhf-white);
	margin: 0 0 var(--sdkhf-space-5);
}

.quote-donate-blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sdkhf-green-light);
}

.quote-donate-band .btn-primary {
	background: var(--sdkhf-green);
	color: var(--sdkhf-white);
}

.quote-donate-trust-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sdkhf-space-6);
	list-style: none;
	margin: var(--sdkhf-space-4) 0 0;
	padding: 0;
}

.quote-donate-trust-item {
	display: flex;
	align-items: center;
	gap: var(--sdkhf-space-2);
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
}

.quote-donate-trust-icon {
	font-size: 1.125rem;
	line-height: 1;
}

@media (max-width: 640px) {
	.quote-donate-trust-row {
		flex-direction: column;
		gap: var(--sdkhf-space-3);
	}

	.quote-donate-trust-item {
		white-space: normal;
	}
}

/* -----------------------------------------------------------------------
   template-parts/sections/newsletter-strip.php — full-width signup strip
   above the footer. Green background gives clear contrast against the
   navy quote-donate-band above it and the (typically dark) footer below,
   without repeating the same navy twice in a row.
   ----------------------------------------------------------------------- */

.newsletter-strip {
	background: var(--sdkhf-green);
	color: var(--sdkhf-white);
	padding-block: var(--sdkhf-section-pad);
}

.newsletter-strip-inner {
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.newsletter-strip-inner h2 {
	color: var(--sdkhf-white);
	margin-bottom: var(--sdkhf-space-3);
}

.newsletter-strip-inner > p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--sdkhf-space-6);
}

.newsletter-form {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sdkhf-space-3);
}

.newsletter-form-field {
	flex: 1;
	margin-bottom: 0;
}

.newsletter-form-field input {
	width: 100%;
}

.newsletter-form .btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	flex-shrink: 0;
}

.newsletter-form .btn[disabled]:hover {
	transform: none;
	box-shadow: none;
}

.newsletter-form-note {
	margin: var(--sdkhf-space-3) 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 560px) {
	.newsletter-form {
		flex-direction: column;
	}

	.newsletter-form .btn {
		width: 100%;
		justify-content: center;
	}
}

/* -----------------------------------------------------------------------
   Homepage stat strip (template-parts/statistics/stat-grid.php,
   template-parts/cards/stat-card.php) — 4-up grid of circular icon
   badge + large number + label, no visible section title (sr-only
   heading instead, per the reference design).
   ----------------------------------------------------------------------- */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sdkhf-space-8);
}

.stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sdkhf-space-3);
}

.stat-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sdkhf-green-light);
	color: var(--sdkhf-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--sdkhf-space-1);
}

.stat-card-icon svg {
	width: 20px;
	height: 20px;
}

.stat-card-number {
	font-family: var(--sdkhf-font-heading);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--sdkhf-navy-deep);
}

.stat-card-label {
	font-family: var(--sdkhf-font-body);
	font-size: 0.8125rem;
	color: var(--sdkhf-navy-muted);
}

@media (max-width: 900px) {
	.stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.stat-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   Homepage 'Start Here' audience-routing section
   (template-parts/sections/start-here.php,
   template-parts/cards/route-card.php) — intro copy on the left,
   3 stacked routing cards on the right. Static links, not a quiz.
   ----------------------------------------------------------------------- */

.start-here-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: var(--sdkhf-space-16);
	align-items: start;
}

.start-here-intro h2 {
	margin-bottom: var(--sdkhf-space-4);
}

.start-here-intro p {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sdkhf-navy-muted);
	margin: 0;
}

.start-here-routes {
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-5);
}

.route-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sdkhf-space-2);
	background: var(--sdkhf-white);
	border-left: 4px solid var(--sdkhf-green);
	border-radius: var(--sdkhf-radius-sm);
	box-shadow: var(--sdkhf-shadow);
	padding: var(--sdkhf-space-6) var(--sdkhf-space-6);
	transition: transform 0.3s var(--sdkhf-ease), box-shadow 0.3s var(--sdkhf-ease);
}

.route-card:hover,
.route-card:focus-within {
	transform: translateX(4px);
	box-shadow: var(--sdkhf-shadow-lg);
}

.route-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sdkhf-off-white);
	color: var(--sdkhf-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--sdkhf-space-2);
}

.route-card-icon svg {
	width: 22px;
	height: 22px;
}

.route-card-heading {
	font-family: var(--sdkhf-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--sdkhf-ink);
}

.route-card-description {
	font-family: var(--sdkhf-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--sdkhf-navy-muted);
	margin: 0;
}

.route-card-link {
	font-family: var(--sdkhf-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--sdkhf-green);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--sdkhf-space-2);
	margin-top: var(--sdkhf-space-1);
	transition: gap 0.25s var(--sdkhf-ease), color 0.25s var(--sdkhf-ease);
}

.route-card-link span {
	transition: transform 0.25s var(--sdkhf-ease);
}

.route-card-link:hover,
.route-card-link:focus-visible {
	color: var(--sdkhf-navy-deep);
	gap: var(--sdkhf-space-3);
}

.route-card-link:hover span,
.route-card-link:focus-visible span {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.start-here-grid {
		grid-template-columns: 1fr;
		gap: var(--sdkhf-space-10);
	}
}

/* -----------------------------------------------------------------------
   template-parts/sections/film-reel.php — vertical scrolling photo-strip
   section, 3 columns of stacked tiles drifting up/down/up to create a
   masonry-drift effect. Each column's tile set is duplicated once in the
   markup so `filmReelUp`/`filmReelDown` below can loop seamlessly from
   0% to -50%. `prefers-reduced-motion` disables the animation entirely
   (tiles render static) per this theme's respect-reduced-motion
   convention.
   ----------------------------------------------------------------------- */

.film-reel {
	background: var(--sdkhf-off-white);
	padding-block: var(--sdkhf-section-pad);
	overflow: hidden;
}

.film-reel-columns {
	display: flex;
	flex-direction: row;
	gap: var(--sdkhf-space-4);
	height: 500px;
	overflow: hidden;
}

.film-reel-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-4);
	overflow: hidden;
}

.film-reel-tile {
	flex-shrink: 0;
	width: 100%;
	height: 220px;
	border-radius: var(--sdkhf-radius-sm);
	overflow: hidden;
	box-shadow: var(--sdkhf-shadow);
}

.film-reel-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.film-reel-image-fallback.is-gradient-navy {
	background: linear-gradient(135deg, var(--sdkhf-navy) 0%, var(--sdkhf-navy-deep) 100%);
}

.film-reel-image-fallback.is-gradient-green {
	background: linear-gradient(135deg, var(--sdkhf-green) 0%, var(--sdkhf-navy-deep) 100%);
}

@media (prefers-reduced-motion: no-preference) {
	.film-reel-column-up {
		animation: filmReelUp 32s linear infinite;
	}

	.film-reel-column-down {
		animation: filmReelDown 36s linear infinite;
	}
}

@keyframes filmReelUp {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-50%);
	}
}

@keyframes filmReelDown {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0);
	}
}

@media (max-width: 900px) {
	.film-reel-columns {
		height: 420px;
	}

	.film-reel-tile {
		height: 180px;
	}
}

@media (max-width: 640px) {
	.film-reel-columns {
		gap: var(--sdkhf-space-2);
		height: 320px;
	}

	.film-reel-tile {
		height: 140px;
	}
}

/* -----------------------------------------------------------------------
   template-parts/testimonials/testimonial-marquee.php +
   testimonial-card.php — horizontal infinite marquee of short
   placeholder quotes. The card set is duplicated once in the markup so
   `marqueeScroll` below can loop seamlessly from 0% to -50%.
   `prefers-reduced-motion` swaps the marquee for a static horizontal-
   scroll row instead of an animated strip.
   ----------------------------------------------------------------------- */

.testimonial-marquee {
	background: var(--sdkhf-white);
	padding-block: var(--sdkhf-section-pad);
	overflow: hidden;
}

.testimonial-marquee-viewport {
	overflow: hidden;
}

.testimonial-marquee-track {
	display: flex;
	flex-direction: row;
	gap: var(--sdkhf-space-6);
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
	.testimonial-marquee-track {
		animation: marqueeScroll 28s linear infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-marquee-viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@keyframes marqueeScroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.testimonial-card {
	flex-shrink: 0;
	width: 340px;
	background: var(--sdkhf-white);
	border-radius: var(--sdkhf-radius);
	box-shadow: var(--sdkhf-shadow);
	padding: var(--sdkhf-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--sdkhf-space-4);
}

.testimonial-stars {
	display: inline-flex;
	flex-direction: row;
	gap: var(--sdkhf-space-1);
	color: var(--sdkhf-gold);
}

.testimonial-quote {
	font-family: var(--sdkhf-font-heading);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--sdkhf-ink);
	margin: 0;
}

.testimonial-attribution-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sdkhf-space-3);
	margin-top: auto;
}

.testimonial-avatar-badge {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sdkhf-gold);
	color: var(--sdkhf-navy-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sdkhf-font-heading);
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
}

.testimonial-attribution {
	font-family: var(--sdkhf-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--sdkhf-navy-muted);
}

@media (max-width: 640px) {
	.testimonial-card {
		width: 280px;
		padding: var(--sdkhf-space-6);
	}
}

/* Homepage program-grid section CTA link (below the 2-card grid,
   linking out to the full /programs/ archive page). */
.home-program-grid-cta {
	text-align: center;
	margin-top: var(--sdkhf-space-8);
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Founder page — 2-column profile (photo | bio), per MSG 19: 'instead of
   stacking everything vertically, use two columns — one for the story,
   one for her image.' Stacks on mobile.
   ----------------------------------------------------------------------- */
.founder-profile {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--sdkhf-space-12);
	align-items: start;
}
.founder-photo {
	position: sticky;
	top: 96px;
	border-radius: var(--sdkhf-radius);
	overflow: hidden;
	box-shadow: var(--sdkhf-shadow-lg);
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, var(--sdkhf-navy), var(--sdkhf-green));
}
.founder-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.founder-photo .media-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: var(--sdkhf-white); font-size: 0.9rem; text-align: center; padding: var(--sdkhf-space-6);
}
.founder-name { margin-bottom: var(--sdkhf-space-1); }
.founder-title {
	display: block;
	color: var(--sdkhf-green);
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: var(--sdkhf-space-5);
}
.founder-bio p { margin-bottom: var(--sdkhf-space-4); }
.founder-note {
	margin-top: var(--sdkhf-space-6);
	padding: var(--sdkhf-space-5);
	background: var(--sdkhf-off-white);
	border-left: 3px solid var(--sdkhf-green);
	border-radius: 0 var(--sdkhf-radius-sm) var(--sdkhf-radius-sm) 0;
	font-size: 0.9rem;
	color: var(--sdkhf-navy-muted);
}
@media (max-width: 820px) {
	.founder-profile { grid-template-columns: 1fr; gap: var(--sdkhf-space-8); }
	.founder-photo { position: static; max-width: 360px; }
}

/* ===== components/decor.css ===== */
/* Floating decorative background shapes — soft, low-opacity blobs and
   rings that drift slowly behind sections to add depth and "something
   is always moving" without distracting from content (Adam, MSG 19:
   "large abstract shapes, soft gradients, floating elements, light
   geometric patterns, slow-moving background animations"). Keyframes
   live in animations.css. All motion is paused under reduce-motion.

   Usage: give a section position:relative + overflow:hidden and a
   .has-decor class, then drop .decor-shape children inside it (or rely
   on the ::before/::after generated ones on .has-decor). */

.has-decor { position: relative; overflow: hidden; }
.has-decor > .container,
.has-decor > * { position: relative; z-index: 1; }

/* Generated soft blobs on any .has-decor section — no extra markup
   needed. Two blobs, opposite corners, different drift + tint. */
.has-decor::before,
.has-decor::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(28px);
	--decor-op: 0.35;
	opacity: var(--decor-op);
}
.has-decor::before {
	width: 320px; height: 320px;
	top: -90px; left: -70px;
	background: radial-gradient(circle at 30% 30%, var(--sdkhf-green-light), transparent 70%);
	animation: floatDriftA 18s ease-in-out infinite;
}
.has-decor::after {
	width: 260px; height: 260px;
	bottom: -80px; right: -60px;
	background: radial-gradient(circle at 60% 40%, var(--sdkhf-gold), transparent 72%);
	--decor-op: 0.22;
	animation: floatDriftB 22s ease-in-out infinite;
}

/* Dark sections get lighter, more visible decor tuned for navy grounds. */
.has-decor.is-dark::before {
	background: radial-gradient(circle at 30% 30%, var(--sdkhf-green), transparent 70%);
	--decor-op: 0.28;
}
.has-decor.is-dark::after {
	background: radial-gradient(circle at 60% 40%, var(--sdkhf-green-light), transparent 72%);
	--decor-op: 0.18;
}

/* Optional explicit shape elements for finer control (e.g. a floating
   ring outline). Drop <span class="decor-shape decor-ring"></span>. */
.decor-shape {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.decor-ring {
	width: 140px; height: 140px;
	border-radius: 50%;
	border: 2px solid var(--sdkhf-green-light);
	opacity: 0.25;
	animation: floatPulse 9s ease-in-out infinite;
}
.decor-dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--sdkhf-gold);
	opacity: 0.4;
	animation: floatDriftA 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.has-decor::before,
	.has-decor::after,
	.decor-shape { animation: none !important; }
}
.reduce-motion .has-decor::before,
.reduce-motion .has-decor::after,
.reduce-motion .decor-shape { animation: none !important; }

/* ===== animations.css ===== */
/* All @keyframes + motion utilities in one place, referenced by
   components. This is the site's MOTION SYSTEM — the goal is that
   something is always gently, purposefully moving, never decoration
   for its own sake, and every effect is fully reduce-motion-safe. */

/* ---------------------------------------------------------------------
   1. Scroll-reveal — elements start hidden/offset, transition to rest
   once .is-revealed is added by scroll-reveal.js (IntersectionObserver).
   Directional + stagger variants for richer entrances.
   --------------------------------------------------------------------- */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--sdkhf-ease), transform 0.7s var(--sdkhf-ease);
	will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: none; }

/* directional variants */
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-scale { transform: scale(0.94); }
.reveal-left.is-revealed,
.reveal-right.is-revealed,
.reveal-scale.is-revealed { transform: none; }

/* stagger: children of a .reveal-stagger reveal in sequence. The parent
   gets .is-revealed; each child animates with an increasing delay. */
.reveal-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--sdkhf-ease), transform 0.6s var(--sdkhf-ease);
}
.reveal-stagger.is-revealed > * { opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 0.13s; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 0.21s; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 0.29s; }
.reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 0.37s; }
.reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 0.45s; }

.reduce-motion .reveal-on-scroll,
.reduce-motion .reveal-stagger > * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ---------------------------------------------------------------------
   2. Floating decorative background shapes (see components/decor.css).
   Slow, low-opacity drift — depth without distraction.
   --------------------------------------------------------------------- */
@keyframes floatDriftA {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(18px, -22px) rotate(8deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes floatDriftB {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(-24px, 16px) rotate(-6deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes floatPulse {
	0%,100% { transform: scale(1); opacity: var(--decor-op, 0.5); }
	50%     { transform: scale(1.08); opacity: calc(var(--decor-op, 0.5) * 0.7); }
}

/* ---------------------------------------------------------------------
   3. Card hover-life — subtle lift; image-zoom handled per component.
   --------------------------------------------------------------------- */
.hover-lift { transition: transform 0.3s var(--sdkhf-ease), box-shadow 0.3s var(--sdkhf-ease); }
.hover-lift:hover, .hover-lift:focus-within { transform: translateY(-6px); box-shadow: var(--sdkhf-shadow-lg); }
.reduce-motion .hover-lift { transition: none; }
.reduce-motion .hover-lift:hover { transform: none; }

/* forms.js: required-field error state. */
.has-error {
	border-color: #C0392B !important;
	outline-color: #C0392B;
}

/* accessibility.js: keyboard-only focus ring — mouse/touch users
   don't trigger .using-keyboard, so they don't see this outline. */
body:not(.using-keyboard) :focus {
	outline: none;
}
body.using-keyboard :focus-visible,
body.using-keyboard a:focus,
body.using-keyboard button:focus,
body.using-keyboard input:focus,
body.using-keyboard textarea:focus,
body.using-keyboard select:focus {
	outline: 3px solid var(--sdkhf-gold);
	outline-offset: 2px;
}

/* hero-animations.js: word-cycle crossfade on .hero-highlight. */
.hero-photo .hero-highlight {
	transition: opacity 0.3s var(--sdkhf-ease);
}

/* ===== responsive.css ===== */
/* Media-query overrides that don't fit cleanly inside a component file — kept last so it always wins the cascade. Filled in during Phase 4/8 (QA responsive pass). */

/* ===== print.css ===== */
/* Minimal print stylesheet — hide nav/footer/decorative elements on print. */
@media print {
	.site-header,
	.site-footer,
	.whatsapp-fab,
	.pre-footer-cta {
		display: none !important;
	}
}