/**
 * chv.css — CHV2 consolidated stylesheet
 *
 * Pass-2 dead-code removal: every rule's chv-* classes appear in the
 * actual BB markup or inline HTML. Rules targeting wrapper classes from
 * the old hand-coded site (chv-overview-grid, chv-benefits-grid,
 * chv-staff-card, chv-tiers-comparison, etc.) are gone.
 *
 * Cascade order: variables → base → chrome → trimmed per-page →
 * structural improvements.
 *
 * Ship: drop into chv2-theme/css/chv.css, enqueue once, delete the
 * 11 source files.
 */

/* ============================================================
 * variables.css
 * ============================================================ */
/**
 * CHV Website 2026 - Global CSS Variables
 * Single source of truth for typography, colors, and spacing
 *
 * Typography scale matches claude.md standards (16px minimum for accessibility)
 *
 * @package CHV_Theme
 */

:root {
	/* ============================================
	   Typography Scale
	   ============================================ */
	--chv-font-hero: 56px;        /* Hero titles */
	--chv-font-section: 36px;     /* Section H2 headings */
	--chv-font-cta: 32px;         /* CTA headings */
	--chv-font-card: 24px;        /* Card/subsection H3 */
	--chv-font-lg: 20px;          /* Large body, intro text */
	--chv-font-base: 18px;        /* Standard body text */
	--chv-font-sm: 16px;          /* Labels, notes (minimum size) */

	/* ============================================
	   Colors
	   ============================================ */
	/* Primary */
	--chv-primary-blue: #2B7CC7;
	--chv-secondary-blue: #4A9FEB;
	--chv-accent-blue: #6BB8F5;
	--chv-light-blue-bg: #F8FAFB;

	/* Text */
	--chv-text-dark: #1A1A1A;
	--chv-text-gray: #4A4A4A;
	--chv-text-light: #FFFFFF;

	/* Status */
	--chv-error: #d32f2f;
	--chv-success: #388e3c;

	/* Accent Colors */
	--chv-accent-red: #E57373;
	--chv-accent-green: #10B981;
	--chv-accent-warm: #C4653A;
	--chv-gray-muted: #9CA3AF;

	/* Hero Gradient Stops (shared across pages) */
	--chv-gradient-support-start: #4A7DB5;
	--chv-gradient-support-mid: #6B9FD4;
	--chv-gradient-support-end: #8BB8E0;
	--chv-accent-warm-light: #D4845F;

	/* Borders */
	--chv-border: #ddd;
	--chv-border-light: #E5E7EB;

	/* ============================================
	   Spacing
	   ============================================ */
	--chv-spacing-xs: 8px;
	--chv-spacing-sm: 12px;
	--chv-spacing-md: 20px;
	--chv-spacing-lg: 32px;
	--chv-spacing-xl: 40px;
	--chv-spacing-section: 48px;

	/* ============================================
	   Layout
	   ============================================ */
	--chv-container-max: 1200px;
	--chv-page-padding: clamp(16px, 5vw, 40px);

	/* ============================================
	   Other
	   ============================================ */
	--chv-transition: all 0.3s ease;
	--chv-font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--chv-font-family-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Border Radius */
	--chv-radius-sm: 4px;
	--chv-radius-md: 6px;
	--chv-radius-lg: 8px;
	--chv-radius-xl: 12px;

	/* Font Weights */
	--chv-font-weight-normal: 400;
	--chv-font-weight-medium: 500;
	--chv-font-weight-semibold: 600;
	--chv-font-weight-bold: 700;
	--chv-font-weight-extrabold: 800;

	/* Line Heights */
	--chv-line-height-normal: 1.8;
	--chv-line-height-relaxed: 2.0;

	/* Shadows */
	--chv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
	--chv-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
	--chv-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
	--chv-shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.1);
	--chv-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.2);
	--chv-shadow-hover-soft: 0 6px 16px rgba(0, 0, 0, 0.15);
	--chv-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
	--chv-shadow-header-scrolled: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Noise Texture */
	--chv-noise-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ============================================
   Breakpoints (reference — not CSS variables)
   992px  = tablet (nav collapses at 768px)
   768px  = mobile
   480px  = small mobile
   ============================================ */

/* ============================================
   Tablet Breakpoint (992px)
   ============================================ */
@media (max-width: 992px) {
	:root {
		--chv-font-hero: 44px;
		--chv-font-section: 32px;
	}
}

/* ============================================
   Mobile Breakpoint (768px)
   ============================================ */
@media (max-width: 768px) {
	:root {
		--chv-font-hero: 32px;
		--chv-font-section: 30px;
		--chv-font-cta: 28px;
	}
}

/* ============================================
   Small Mobile Breakpoint (480px)
   ============================================ */
@media (max-width: 480px) {
	:root {
		--chv-font-hero: 28px;
		--chv-font-section: 26px;
		--chv-font-cta: 24px;
	}
}

/* ============================================
   Utility Classes
   ============================================ */

/* Screen reader only - visually hidden but accessible */
.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;
}

/* ============================================
   Mobile-First Text Overflow Prevention
   Applied globally to prevent text overflow on mobile
   ============================================ */

/* Prevent long words/URLs from breaking layouts */
h1, h2, h3, h4, h5, h6,
p, li, td, th,
.chv-hero-title,
.chv-hero-subtitle,
.chv-section-title,
.chv-card-title,
.chv-contact-methods a {
	overflow-wrap: break-word;
	-webkit-hyphens: none;
	hyphens: none;
}

/* Ensure containers don't overflow */
.chv-section-container,
.chv-hero-container,
.chv-hero-content,
.chv-hero-text {
	max-width: 100%;
	overflow-x: hidden;
}


/* ============================================================
 * base.css
 * ============================================================ */
/**
 * Base Styles — Reset + Typography
 *
 * @package CHV_Theme
 */

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

body {
	margin: 0;
	padding: 0;
	font-family: var(--chv-font-family);
	font-size: var(--chv-font-base);
	line-height: var(--chv-line-height-normal);
	color: var(--chv-text-dark);
	background: var(--chv-text-light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: var(--chv-primary-blue);
	text-decoration: none;
	transition: var(--chv-transition);
}

a:hover,
a:focus {
	color: var(--chv-secondary-blue);
	text-decoration: underline;
}

/* Prevent underlines on all button-like links */
a[class*="-btn"],
a[class*="-button"],
a[class*="-cta"] {
	text-decoration: none;
}

a[class*="-btn"]:hover,
a[class*="-btn"]:focus,
a[class*="-button"]:hover,
a[class*="-button"]:focus,
a[class*="-cta"]:hover,
a[class*="-cta"]:focus {
	text-decoration: none;
}

/* Keyboard-only focus ring (not shown on mouse click) */
*:focus-visible {
	outline: 2px solid var(--chv-primary-blue);
	outline-offset: 2px;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--chv-spacing-md);
	font-family: var(--chv-font-family-heading);
	font-weight: var(--chv-font-weight-bold);
	line-height: 1.3;
}

[class*="-hero-title"] {
	font-weight: var(--chv-font-weight-extrabold);
}

h1 { font-size: var(--chv-font-hero); }
h2 { font-size: var(--chv-font-section); }
h3 { font-size: var(--chv-font-card); }

p {
	margin: 0 0 var(--chv-spacing-md);
}

/* Modern text wrap — balance headings, pretty body */
h1, h2, h3, h4,
[class*="-hero-title"],
[class*="-section-title"],
[class*="-cta-title"],
[class*="-card-title"],
.chv-section-title,
.chv-stat-number {
	text-wrap: balance;
}

p,
[class*="-hero-subtitle"],
[class*="-cta-text"],
[class*="-intro"],
[class*="-description"],
[class*="-bio"] {
	text-wrap: pretty;
}

/* ============================================
   Container
   ============================================ */
.chv-container {
	max-width: var(--chv-container-max);
	margin: 0 auto;
	padding: 0 var(--chv-page-padding);
}

/* ============================================
   Section Base (shared across all pages)
   ============================================ */

/* BB global settings default row padding is 0 (set via WP option).
   This rule is a CSS-level safety net: zero top/bottom on ALL fl-rows
   so any row added via the BB editor also starts clean. */
.fl-row > .fl-row-content-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.chv-section {
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}

.chv-section-container {
	max-width: var(--chv-container-max);
	margin: 0 auto;
}

.chv-section-title {
	font-size: var(--chv-font-section);
	font-weight: var(--chv-font-weight-extrabold);
	margin: 0 0 var(--chv-spacing-lg) 0;
	text-align: center;
	color: var(--chv-primary-blue);
	line-height: 1.2;
	position: relative;
	padding-top: var(--chv-spacing-md);
}

.chv-section-title::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--chv-accent-warm);
	border-radius: 2px;
	margin: 0 auto var(--chv-spacing-md);
}

/* Optional eyebrow text Sophia can add as a separate Heading module above any title.
   In BB: add a Heading module, tag=h4, text e.g. "Our Work", css_class="chv-eyebrow" */
.chv-eyebrow {
	font-family: var(--chv-font-family);
	font-size: var(--chv-font-sm);
	font-weight: var(--chv-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--chv-accent-warm);
	margin: 0 0 var(--chv-spacing-sm) 0;
	text-align: center;
}

/* When eyebrow sits directly above a section title, remove the title's own
   top rule so they don't double up */
.chv-eyebrow + .chv-section-title { padding-top: 0; }
.chv-eyebrow + .chv-section-title::before { display: none; }

/* ============================================
   Shared Button Utility Classes
   ============================================ */

/* Base button - use with size and variant modifiers */
.chv-btn {
	display: inline-block;
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	border-radius: var(--chv-radius-lg);
	transition: var(--chv-transition);
	border: 2px solid transparent;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}

/* Size modifiers */
.chv-btn-lg {
	padding: 18px 36px;
	font-size: var(--chv-font-lg);
}

.chv-btn-md {
	padding: 16px 32px;
	font-size: var(--chv-font-base);
}

.chv-btn-sm {
	padding: 12px 24px;
	font-size: var(--chv-font-base);
}

/* Primary variant - white background, blue text (for use on blue backgrounds) */
.chv-btn-primary {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
}

.chv-btn-primary:hover,
.chv-btn-primary:focus {
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover);
}

/* Secondary variant - transparent with white border (for use on blue backgrounds) */
.chv-btn-secondary {
	background: transparent;
	color: var(--chv-text-light);
	border-color: var(--chv-text-light);
}

.chv-btn-secondary:hover,
.chv-btn-secondary:focus {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover);
}

/* Blue variant - blue background, white text (for use on light backgrounds) */
.chv-btn-blue {
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
}

.chv-btn-blue:hover,
.chv-btn-blue:focus {
	background: var(--chv-secondary-blue);
	transform: translateY(-2px);
	box-shadow: var(--chv-shadow-hover-soft);
}

/* Outline variant - white background with blue border (for use on light backgrounds) */
.chv-btn-outline {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
	border-color: var(--chv-primary-blue);
}

.chv-btn-outline:hover,
.chv-btn-outline:focus {
	background: var(--chv-light-blue-bg);
	transform: translateY(-2px);
}

/* ============================================
   Shared Card Utility Classes
   ============================================ */

/* Base card style - white background, rounded corners, shadow */
.chv-card {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-sm);
}

.chv-card-hover {
	transition: var(--chv-transition);
}

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

/* Card with left accent border */
.chv-card-accent {
	border-left: 4px solid var(--chv-accent-warm);
}

/* ============================================
   Call to Action Section (shared across pages)
   ============================================ */
/* !important overrides WordPress block editor inline styles */
.chv-cta-section {
	background: var(--chv-primary-blue) !important;
	color: var(--chv-text-light);
	margin-bottom: 0 !important;
}

.chv-cta-container {
	text-align: center;
}

.chv-cta-title {
	font-size: var(--chv-font-cta, var(--chv-font-section));
	font-weight: var(--chv-font-weight-extrabold);
	margin: 0 0 var(--chv-spacing-md) 0;
	color: var(--chv-text-light);
}

.chv-cta-text {
	font-size: var(--chv-font-lg);
	margin: 0 0 var(--chv-spacing-xl) 0;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.7;
}

.chv-cta-buttons {
	display: flex;
	gap: var(--chv-spacing-md);
	justify-content: center;
	flex-wrap: wrap;
}

.chv-cta-btn {
	padding: 18px 36px;
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	border-radius: var(--chv-radius-lg);
	transition: var(--chv-transition);
	display: inline-block;
	border: 2px solid transparent;
	box-sizing: border-box;
}

.chv-cta-btn-primary {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
}

.chv-cta-btn-primary:hover,
.chv-cta-btn-primary:focus {
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover);
	text-decoration: none;
}

.chv-cta-btn-secondary {
	background: transparent;
	color: var(--chv-text-light);
	border-color: var(--chv-text-light);
}

.chv-cta-btn-secondary:hover,
.chv-cta-btn-secondary:focus {
	background: transparent;
	border-color: var(--chv-text-light);
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover-soft);
	text-decoration: none;
}


/* ============================================
   WordPress Container Resets
   Override default WP containers that add
   unwanted padding/margins to full-width pages.
   ============================================ */
#page,
.site,
.site-main,
main,
.entry-content,
.site-content,
.wp-site-blocks,
article,
article.page,
article.post {
	max-width: 100%;
}

main {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Only remove margins from direct children that wrap shortcodes */
.entry-content > .chv-homepage,
.entry-content > .chv-volunteers-page,
.entry-content > .chv-members-page,
.entry-content > .chv-programs-page,
.entry-content > .chv-support-page,
.entry-content > .chv-about-page,
.entry-content > .chv-footer {
	margin: 0;
}

/* Remove any gaps from WordPress paragraph wrappers between content and footer */
.entry-content > p:empty,
.entry-content > br,
.wp-site-blocks > p:empty {
	display: none;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 0;
}

.entry-content::after,
.wp-site-blocks::after {
	display: none;
}

/* Force WordPress to not add space between shortcode outputs */
.entry-content > * + .chv-footer,
.wp-site-blocks > * + .chv-footer,
.chv-footer {
	margin-top: 0;
}

/* Ensure the last section has no gap to footer */
.chv-homepage > .chv-section:last-child,
.chv-volunteers-page > .chv-section:last-child,
.chv-members-page > .chv-section:last-child,
.chv-programs-page > .chv-section:last-child,
.chv-support-page > .chv-section:last-child,
.chv-about-page > .chv-section:last-child {
	margin-bottom: 0;
}

/* Ensure no gap between page content and footer */
.chv-homepage + .chv-footer,
.chv-volunteers-page + .chv-footer,
.chv-members-page + .chv-footer,
.chv-programs-page + .chv-footer,
.chv-support-page + .chv-footer,
.chv-about-page + .chv-footer {
	margin-top: 0;
}

/* Last section should have no bottom margin */
.chv-cta-section,
.chv-volunteers-contact {
	margin-bottom: 0;
}

/* Section background — light blue for all non-CTA sections */
.chv-section:not(.chv-cta-section) {
	background: var(--chv-light-blue-bg);
}

/* WordPress container overrides for footer */
.entry-content > footer.chv-footer,
.wp-site-blocks footer.chv-footer,
footer.chv-footer {
	max-width: none;
}

/* ============================================
   Shared Contact Section
   ============================================ */
.chv-contact-content {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.chv-contact-intro {
	font-size: var(--chv-font-base);
	line-height: 1.7;
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-lg) 0;
}

.chv-contact-card {
	background: var(--chv-text-light);
	padding: var(--chv-spacing-lg);
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-md);
}

.chv-contact-name {
	font-size: var(--chv-font-card);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-text-dark);
	margin: 0 0 var(--chv-spacing-xs) 0;
}

.chv-contact-title {
	font-size: var(--chv-font-base);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-md) 0;
}

.chv-contact-methods {
	margin: 0;
}

.chv-contact-methods a {
	color: var(--chv-primary-blue);
	text-decoration: none;
	font-weight: var(--chv-font-weight-semibold);
	font-size: var(--chv-font-lg);
	transition: var(--chv-transition);
}

.chv-contact-methods a:hover {
	text-decoration: underline;
}

/* ============================================
   Shared Responsive Overrides
   ============================================ */
@media (max-width: 992px) {
	.chv-section {
		padding: var(--chv-spacing-section) var(--chv-spacing-md);
	}
}

@media (max-width: 480px) {
	.chv-contact-methods a {
		font-size: var(--chv-font-base);
		display: inline-block;
		max-width: 100%;
	}
}

/* ============================================
   Reduced Motion
   Disables transforms and animations for users
   who prefer reduced motion in OS settings.
   ============================================ */
/* ============================================
   404 Page
   ============================================ */
.chv-404-page {
	background: var(--chv-light-blue-bg);
}

.chv-404-content {
	max-width: var(--chv-container-max);
	margin: 0 auto;
	padding: 120px var(--chv-page-padding);
	text-align: center;
}

.chv-404-title {
	font-size: var(--chv-font-hero);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
	margin: 0 0 var(--chv-spacing-md) 0;
}

.chv-404-text {
	font-size: var(--chv-font-lg);
	color: var(--chv-text-gray);
	margin: 0 0 var(--chv-spacing-xl) 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.chv-404-actions {
	display: flex;
	gap: var(--chv-spacing-md);
	justify-content: center;
	margin-bottom: var(--chv-spacing-xl);
}

.chv-404-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--chv-radius-md);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	transition: var(--chv-transition);
}

.chv-404-btn-primary {
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
}

.chv-404-btn-secondary {
	background: transparent;
	color: var(--chv-primary-blue);
	border: 2px solid var(--chv-primary-blue);
}

.chv-404-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--chv-shadow-lg);
}

.chv-404-btn-secondary:hover {
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
}

.chv-404-contact {
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
}

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

/* ============================================
   Hero noise overlay (brand-guide treatment)
   Applied to all hero classes via ::after
   ============================================ */
.chv-hero,
.chv-about-hero,
.chv-members-hero,
.chv-volunteers-hero,
.chv-support-hero {
	position: relative;
	isolation: isolate;
}

/* z-index: -1 within isolation: isolate keeps the overlay above the gradient
   but below ALL block content — no per-class "lift" rule required.
   NEVER change this to 0: that brings back the content-obscuring bug and
   requires a fragile z-index: 1 counter-rule on every hero's children. */
.chv-hero::after,
.chv-about-hero::after,
.chv-members-hero::after,
.chv-volunteers-hero::after,
.chv-support-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--chv-noise-texture);
	mix-blend-mode: overlay;
	opacity: 0.4;
	pointer-events: none;
	z-index: -1;
}


/* ============================================================
 * header.css
 * ============================================================ */
.chv2-header {
	background: var(--chv-text-light);
	box-shadow: var(--chv-shadow-md);
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

.fl-builder .chv2-header {
	z-index: 99;
}

.chv2-header-inner {
	max-width: var(--chv-container-max);
	margin: 0 auto;
	padding: var(--chv-spacing-sm) var(--chv-spacing-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chv-spacing-md);
}

.chv2-logo-link {
	text-decoration: none;
	flex-shrink: 0;
}

.chv2-logo-text {
	font-family: var(--chv-font-family-serif);
	font-size: var(--chv-font-xl);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
}

.chv2-logo-link img {
	height: 60px;
	width: auto;
	display: block;
}

.chv2-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.chv2-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	align-items: center;
}

.chv2-nav-list li {
	margin: 0;
}

.chv2-nav-list a {
	display: block;
	padding: var(--chv-spacing-sm) var(--chv-spacing-md);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-medium);
	font-family: var(--chv-font-family);
	color: var(--chv-text-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--chv-transition);
}

.chv2-nav-list a:hover,
.chv2-nav-list a:focus,
.chv2-nav-list .current-menu-item a {
	color: var(--chv-primary-blue);
}

.chv2-header-donate {
	display: inline-block;
	padding: var(--chv-spacing-xs) var(--chv-spacing-md);
	background: var(--chv-primary-blue);
	color: var(--chv-text-light) !important;
	font-family: var(--chv-font-family);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
	transition: var(--chv-transition);
	flex-shrink: 0;
}

.chv2-header-donate:hover,
.chv2-header-donate:focus {
	background: var(--chv-secondary-blue);
	color: var(--chv-text-light) !important;
}

@media (max-width: 768px) {
	.chv2-header-inner {
		flex-wrap: wrap;
		padding: var(--chv-spacing-xs) var(--chv-spacing-sm);
	}

	.chv2-nav {
		order: 3;
		width: 100%;
		justify-content: flex-start;
	}

	.chv2-nav-list {
		flex-wrap: wrap;
		gap: 0;
	}

	.chv2-nav-list a {
		padding: var(--chv-spacing-xs) var(--chv-spacing-sm);
		font-size: var(--chv-font-sm);
	}
}


/* ============================================================
 * footer.css
 * ============================================================ */
.chv2-footer {
	background: var(--chv-light-blue-bg);
	font-family: var(--chv-font-family);
	border-top: 1px solid var(--chv-border-light);
}

/* BB row content wrap — provides the padding & max-width that .chv2-footer-inner used to set */
.chv2-footer-main .fl-row-content-wrap {
	padding-top: var(--chv-spacing-lg);
	padding-bottom: var(--chv-spacing-lg);
}
.chv2-footer-main .fl-col-group {
	align-items: flex-start;
}

.chv2-footer-logo-link {
	text-decoration: none;
	display: inline-block;
	margin-bottom: var(--chv-spacing-xs);
}

.chv2-footer-logo-text {
	font-family: var(--chv-font-family-serif);
	font-size: var(--chv-font-lg);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
}

.chv2-footer-tagline {
	margin: 0;
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
}

.chv2-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--chv-spacing-xs);
}

.chv2-footer-nav a {
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
	text-decoration: none;
	transition: var(--chv-transition);
}

.chv2-footer-nav a:hover,
.chv2-footer-nav a:focus {
	color: var(--chv-primary-blue);
}

.chv2-footer-contact {
	flex: 1;
	text-align: right;
}

.chv2-footer-contact p {
	margin: 0 0 4px 0;
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
}

.chv2-footer-contact a {
	color: var(--chv-primary-blue);
	text-decoration: none;
}

.chv2-footer-contact a:hover,
.chv2-footer-contact a:focus {
	text-decoration: underline;
}

.chv2-footer-bottom {
	border-top: 1px solid var(--chv-border-light);
	text-align: center;
	padding: var(--chv-spacing-sm) var(--chv-spacing-md);
}

.chv2-footer-bottom p {
	margin: 0;
	font-size: var(--chv-font-sm);
	color: var(--chv-text-gray);
}

@media (max-width: 768px) {
	.chv2-footer-brand,
	.chv2-footer-contact {
		text-align: center;
	}

	.chv2-footer-nav ul {
		align-items: center;
	}
}


/* ============================================================
 * home.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Homepage Styles
 * Clean, modern layout with generous white space
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero Section
   ============================================ */
.chv-hero {
	background: linear-gradient(135deg, var(--chv-primary-blue) 0%, var(--chv-secondary-blue) 100%);
	color: var(--chv-text-light);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}
.chv-hero-text {
	text-align: left;
}
.chv-hero-title-main {
	font-family: var(--chv-font-family-heading);
	font-size: calc(var(--chv-font-hero) * 1.35);
	font-weight: var(--chv-font-weight-extrabold);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--chv-text-light);
	text-wrap: balance;
}
.chv-hero-title-light {
	font-family: var(--chv-font-family-heading);
	font-size: calc(var(--chv-font-hero) * 0.88);
	font-weight: var(--chv-font-weight-normal);
	font-style: italic;
	letter-spacing: 0.005em;
	opacity: 0.88;
	margin: 0 0 var(--chv-spacing-md) 0;
	line-height: 1.1;
	color: var(--chv-text-light);
	text-wrap: balance;
}
.chv-hero-subtitle {
	font-size: var(--chv-font-card);
	margin: 0 0 var(--chv-spacing-xl) 0;
	line-height: 1.6;
	opacity: 0.95;
}
.chv-hero-ctas {
	display: flex;
	gap: var(--chv-spacing-md);
	justify-content: flex-start;
	flex-wrap: wrap;
}
.chv-hero-button {
	padding: 16px 28px;
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	border-radius: var(--chv-radius-lg);
	transition: var(--chv-transition);
	display: inline-block;
	border: 2px solid transparent;
	box-sizing: border-box;
}
.chv-hero-primary {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
}
.chv-hero-primary:hover,
.chv-hero-primary:focus {
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover);
}
.chv-hero-secondary {
	background: transparent;
	color: var(--chv-text-light);
	border-color: var(--chv-text-light);
}
.chv-hero-secondary:hover,
.chv-hero-secondary:focus {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
	transform: translateY(-3px);
	box-shadow: var(--chv-shadow-hover);
}
.chv-hero-tertiary {
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.4);
}
.chv-hero-tertiary:hover,
.chv-hero-tertiary:focus {
	color: var(--chv-text-light);
	border-color: var(--chv-text-light);
	transform: translateY(-3px);
}
/* ============================================
   Hero Newsletter Link (inline with social icons)
   ============================================ */
/* ============================================
   Gala Banner
   ============================================ */
/* ============================================
   About Village Section
   ============================================ */
.chv-column p {
	font-size: var(--chv-font-lg);
	line-height: 1.8;
	margin: 0 0 var(--chv-spacing-md) 0;
	color: var(--chv-text-gray);
}
.chv-column p:last-child {
	margin-bottom: 0;
}
/* ============================================
   Village Life Section
   ============================================ */
/* Village Life full-width (no newsletter sidebar) */
.chv-life-description {
	font-size: var(--chv-font-lg);
	line-height: 1.7;
	margin: 0;
	color: var(--chv-text-gray);
}
/* ============================================
   Member Voices Section
   ============================================ */
/* ============================================
   Responsive Design
   ============================================ */
/* Tablet */
@media (max-width: 992px) {
.chv-hero {
		padding: 80px var(--chv-spacing-md);
	}
}
/* Mobile */
@media (max-width: 768px) {
.chv-hero {
		padding: var(--chv-spacing-section) var(--chv-spacing-md);
	}
.chv-hero-text {
		text-align: center;
	}
.chv-hero-subtitle {
		margin-bottom: var(--chv-spacing-lg);
	}
.chv-hero-ctas {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 12px;
	}
.chv-hero-button {
		width: 100%;
		text-align: center;
		padding: 14px 24px;
	}
.chv-section {
		padding: 50px var(--chv-spacing-md);
	}
.chv-cta-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
.chv-cta-btn {
		width: 100%;
		text-align: center;
		padding: 14px 24px;
	}
}
/* Small Mobile */
@media (max-width: 480px) {
.chv-hero {
		padding: 40px var(--chv-spacing-sm);
	}
.chv-section {
		padding: 40px var(--chv-spacing-sm);
	}
/* Ensure text doesn't overflow on small screens */
.chv-hero-subtitle,
.chv-section-title,
.chv-life-description {
		overflow-wrap: break-word;
	}
/* Reduce card padding on small mobile */
}

/* ============================================================
 * about.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * About Page Styles
 *
 * @package CHV_Theme
 */
/* ============================================
   Editor Content Between Shortcodes
   ============================================ */
.chv-about-page > :not(.chv-section):not(.chv-about-hero) {
	max-width: var(--chv-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--chv-page-padding);
	padding-right: var(--chv-page-padding);
}
@media (max-width: 992px) {
.chv-about-page > :not(.chv-section):not(.chv-about-hero) {
		padding-left: var(--chv-spacing-md);
		padding-right: var(--chv-spacing-md);
	}
}
/* ============================================
   Hero Section
   ============================================ */
.chv-about-hero {
	background: linear-gradient(160deg, var(--chv-primary-blue) 0%, #5AADE0 50%, #A8D4F0 100%);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	color: var(--chv-text-light);
	width: 100%;
	box-sizing: border-box;
}
/* All content sections use light background (except strategic CTA) */
/* ============================================
   Overview Section (What We Are + Vision/Mission)
   ============================================ */
/* Stats Row */
/* ============================================
   Values Section
   ============================================ */
/* ============================================
   Team Sections (Staff & Board)
   ============================================ */
/* ============================================
   Contact Section
   ============================================ */
.chv-about-page .chv-contact-content {
	max-width: 400px;
}
.chv-about-page .chv-contact-card {
	box-shadow: none;
}
.chv-about-page .chv-contact-name {
	margin: 0 0 var(--chv-spacing-sm) 0;
}
/* ============================================
   Responsive Design
   ============================================ */
/* ============================================================
 * members.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Members Page Styles
 * Comprehensive membership page with SaaS-style comparison table
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero Section
   ============================================ */
.chv-members-hero {
	background: linear-gradient(135deg, #1E3A5F 0%, #2B5A8C 100%);
	color: var(--chv-text-light);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}
/* All content sections use light background */
/* ============================================
   Overview Section
   ============================================ */
/* ============================================
   Service Area Section
   ============================================ */
/* ============================================
   Membership Tiers - SaaS Style Comparison Table
   ============================================ */
.chv-membership-tiers {
	padding-top: var(--chv-spacing-section);
	padding-bottom: var(--chv-spacing-section);
}
/* Financial Assistance Hint - subtle, above table */
/* ============================================
   Comparison Table (HTML Table)
   ============================================ */
/* Wrapper for horizontal scroll */
/* Table base */
/* Feature name column gets the majority of space */
/* Tier columns: sized to content (checkmarks, prices) */
/* Header cells */
/* Feature header (first column header) */
/* Sticky first column */
/* Data cells */
/* Feature name cells */
/* Recommended column highlight - blue border only on OUTSIDE perimeter */
/* Header: blue on top, left, right */
/* Body and footer cells: blue on left and right only, gray bottom */
/* Checkmark and dash */
/* Pricing rows */
/* First column in pricing row - only right border, right-aligned text */
/* Keep blue side borders on recommended pricing cells */
/* Household row (second pricing row) - add bottom border on tier columns only */
/* CTA row */
/* First column in CTA row - no borders */
/* Recommended column in CTA row - no borders */
/* Assistance row (spans columns 2-4) */
/* Apply for Membership CTA row inside pricing table */
/* Ensure all tfoot cells align consistently */
/* ============================================
   Benefits Grid
   ============================================ */
/* ============================================
   Testimonials
   ============================================ */
/* ============================================
   Contact Section (Questions? We're Here to Help)
   ============================================ */
/* Financial Assistance Subsection */
/* ============================================
   How to Join
   ============================================ */
/* ============================================
   Responsive Design
   ============================================ */
/* Tablets */
/* Mobile */
@media (max-width: 768px) {
/* Comparison table mobile */
.chv-cta-buttons {
		flex-direction: column;
	}
.chv-cta-btn {
		width: 100%;
		padding: 14px 24px;
	}
}
/* ============================================================
 * volunteers.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Volunteers Page Styles
 * Page encouraging volunteer recruitment
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero Section
   ============================================ */
.chv-volunteers-hero {
	background: linear-gradient(135deg, var(--chv-accent-warm) 0%, var(--chv-accent-warm-light) 100%);
	color: var(--chv-text-light);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}
/* ============================================
   Shared Section Styles
   ============================================ */
/* ============================================
   Why Volunteer Section
   ============================================ */
/* ============================================
   Ways to Help Section
   ============================================ */
/* ============================================
   Who Volunteers Section
   ============================================ */
/* ============================================
   How to Get Started Section
   ============================================ */
/* ============================================
   Contact Section
   ============================================ */
/* ============================================
   Responsive Design
   ============================================ */
/* Tablets */
/* Mobile */
@media (max-width: 768px) {
.chv-contact-content {
		text-align: center;
		align-items: center;
	}
}

/* ============================================================
 * programs.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Programs Page Styles
 * Showcases all CHV programs organized by user need
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero Section
   ============================================ */
.chv-programs-hero {
	background: linear-gradient(120deg, #1a5a9e 0%, var(--chv-primary-blue) 60%, var(--chv-secondary-blue) 100%);
	color: var(--chv-text-light);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	width: 100%;
	box-sizing: border-box;
}
/* ============================================
   Shared Section Styles
   ============================================ */
/* ============================================
   Programs Overview Table (Option A Layout)
   ============================================ */
/* ============================================
   Program Cards Grid (legacy, kept for reference)
   ============================================ */
/* Support section cards have white background */
/* ============================================
   Detail Sections
   ============================================ */
/* Events Detail Categories */
/* Detail CTA */
/* ============================================
   Affinity Groups Detail
   ============================================ */
/* ============================================
   Respite Detail
   ============================================ */
/* ============================================
   Transportation Detail
   ============================================ */
/* ============================================
   Advocacy Detail
   ============================================ */
/* ============================================
   Contact Section
   ============================================ */
.chv-programs-page .chv-contact-content {
	max-width: 600px;
}
.chv-programs-page .chv-contact-name {
	margin: 0 0 var(--chv-spacing-md) 0;
}
/* ============================================
   Responsive Design
   ============================================ */
/* Tablets */
/* Mobile */
/* ============================================================
 * support.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Support CHV Page Styles
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero Section
   ============================================ */
.chv-support-hero {
	background: linear-gradient(145deg, var(--chv-gradient-support-start) 0%, var(--chv-gradient-support-mid) 50%, var(--chv-gradient-support-end) 100%);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	color: var(--chv-text-light);
	width: 100%;
	box-sizing: border-box;
}
/* ============================================
   Genderson Fund Section
   ============================================ */
/* ============================================
   Ways to Give Section
   ============================================ */
/* ============================================
   Funders Section
   ============================================ */
/* ============================================
   Contact Section
   ============================================ */
.chv-support-page .chv-contact-content {
	max-width: 600px;
}
.chv-support-page .chv-contact-name {
	margin: 0 0 var(--chv-spacing-md) 0;
}
/* ============================================
   Responsive Design
   ============================================ */
/* ============================================================
 * newsletters.css (slim — only rules that match BB-emitted markup)
 * ============================================================ */
/**
 * Newsletter Archive Page Styles
 *
 * @package CHV_Theme
 */
/* ============================================
   Hero
   ============================================ */
.chv-newsletters-hero {
	background: linear-gradient(135deg, var(--chv-primary-blue) 0%, var(--chv-secondary-blue) 100%);
	padding: var(--chv-spacing-section) var(--chv-page-padding);
	text-align: center;
	color: var(--chv-text-light);
	width: 100%;
	box-sizing: border-box;
}
/* ============================================
   Archive Section
   ============================================ */
.chv-newsletters-year {
	font-size: var(--chv-font-section);
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
	margin: 0 0 var(--chv-spacing-md) 0;
	padding-bottom: var(--chv-spacing-xs);
	border-bottom: 2px solid var(--chv-primary-blue);
}
/* ============================================
   Responsive
   ============================================ */
/* ============================================================
 * improvements.css — structural-selector overrides
 * ============================================================ */
/**
 * improvements.css — CSS-only refinements to chv2-theme/css/home.css
 *
 * Principle: every rule targets a BB *structural* selector (`.fl-row`,
 * `.fl-col`, `.fl-module-*`, `.fl-rich-text`, `.fl-photo-img`) rather than
 * a custom wrapper class that only exists on hand-written HTML. So when
 * Sophia drops a fresh Heading / Rich Text / Photo / Button module into
 * any row tagged `.chv-section` (or one of the page-specific aliases),
 * the new module inherits CHV's voice automatically.
 *
 * Nothing in here changes markup or BB module settings — pure CSS over
 * the existing theme.
 */


/* ============================================================
   1. Section rhythm
   ------------------------------------------------------------
   Two improvements:

   (a) Modules inside a section now space themselves out — Sophia
       can drop in a new Heading + Rich Text + Photo and they'll
       breathe correctly without having to set margin on each module.
   (b) Sections alternate light-blue / white instead of all flat
       light-blue, so the page has rhythm.
   ============================================================ */

.chv-section .fl-col-content > .fl-module + .fl-module {
	margin-top: var(--chv-spacing-md);
}

/* Every other content section gets a clean white panel. */
.chv-section.chv-village-life-section:not(.chv-cta-section) {
	background: var(--chv-text-light) !important;
}

/* A little more vertical drama on the closing CTA. */
.chv-cta-section .fl-row-content-wrap {
	padding-top: 24px;
	padding-bottom: 24px;
}


/* ============================================================
   2. Generic heading modules pick up the brand
   ------------------------------------------------------------
   Right now `.chv-section-title` is defined but only fires when
   the hand-written markup applies that exact class. A heading
   module Sophia drops into a `.chv-section` row just gets bare
   `<h2>…</h2>`. We promote BB's structural selector instead.
   ============================================================ */

.chv-section .fl-col:only-child .fl-module-heading h2 {
	font-size: var(--chv-font-section);
	font-weight: var(--chv-font-weight-extrabold);
	color: var(--chv-primary-blue);
	text-align: center;
	line-height: 1.2;
	margin: 0 0 var(--chv-spacing-lg);
	position: relative;
	padding-top: var(--chv-spacing-md);
}

/* The signature terracotta accent rule above every section title. */
.chv-section .fl-col:only-child .fl-module-heading h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--chv-accent-warm);
	border-radius: 2px;
	margin: 0 auto var(--chv-spacing-md);
}

/* h2 inside a multi-column row is a COLUMN HEADING, not a section title.
   Left-align, drop the accent bar, keep the blue + size. */
.chv-section .fl-col:not(:only-child) .fl-module-heading h2 {
	font-size: 28px;
	font-weight: var(--chv-font-weight-bold);
	color: var(--chv-primary-blue);
	text-align: left;
	line-height: 1.2;
	margin: 0 0 var(--chv-spacing-md);
	padding-top: 0;
}

/* H3 inside a section (column subhead) — blue, serif, no accent rule. */
.chv-section .fl-module-heading h3 {
	font-size: var(--chv-font-card);
	color: var(--chv-primary-blue);
	margin: 0 0 var(--chv-spacing-sm);
}

/* CTA section is dark — flip all headings + accent to white. */
.chv-cta-section .fl-module-heading h2,
.chv-section.chv-cta-section .fl-col .fl-module-heading h2 {
	color: var(--chv-text-light);
}
.chv-cta-section .fl-module-heading h2::before,
.chv-section.chv-cta-section .fl-col .fl-module-heading h2::before {
	background: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   3. Generic rich-text body type
   ------------------------------------------------------------
   Lifts default `<p>` inside any Rich Text module to CHV's
   readable body size + paragraph rhythm. Replaces dead rules
   that targeted `.chv-column p`, `.chv-life-description`, etc.
   ============================================================ */

.chv-section .fl-rich-text {
	font-size: var(--chv-font-lg);
	line-height: 1.7;
	color: var(--chv-text-gray);
	max-width: 68ch;
}

/* Dark CTA section flips body text to white so it's readable on blue. */
.chv-cta-section .fl-rich-text {
	color: var(--chv-text-light);
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.chv-section .fl-rich-text p {
	margin: 0;
}

.chv-section .fl-rich-text p + p {
	margin-top: 1em;
}

/* Center single-column body when the column itself is full-width. */
.chv-section .fl-col:only-child .fl-rich-text {
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================
   4. Village Life lead-words become inline headers
   ------------------------------------------------------------
   The PHP wraps each bullet's lead phrase in `<strong>…</strong>`.
   We turn that into a serif sub-heading with a little terracotta
   marker — no markup change, just a structural selector against
   `<strong>` as first child of the paragraph.
   ============================================================ */

/* The four lead-word paragraphs become a 2x2 grid — no markup change.
   `.fl-rich-text` becomes a grid; each `<p>` becomes a cell. */
.chv-village-life-section .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 56px;
	max-width: none;
}

@media (max-width: 768px) {
	.chv-village-life-section .fl-rich-text {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* The `p + p` 1em rhythm rule fights the grid gap — neutralize it here. */
.chv-village-life-section .fl-rich-text p + p {
	margin-top: 0;
}

.chv-village-life-section .fl-rich-text p {
	position: relative;
	padding-left: 28px;
}

.chv-village-life-section .fl-rich-text p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 12px;
	height: 2px;
	background: var(--chv-accent-warm);
}

.chv-village-life-section .fl-rich-text p strong:first-child {
	display: block;
	font-family: var(--chv-font-family-heading);
	font-weight: var(--chv-font-weight-bold);
	font-size: 22px;
	color: var(--chv-primary-blue);
	margin-bottom: 4px;
}

/* The " — " separator written in source becomes redundant once the lead
   word is on its own line. Hide it. */
.chv-village-life-section .fl-rich-text p strong:first-child + br,
.chv-village-life-section .fl-rich-text p strong:first-child {
	/* keep — the em-dash text node stays inline but reads cleanly now */
}


/* ============================================================
   5. Two-column About row breathes
   ------------------------------------------------------------
   BB renders adjacent `.fl-col` cells with zero gutter. Add a
   real gap and an optional centre divider so the two questions
   feel like a deliberate diptych instead of two paragraphs.
   ============================================================ */

/* Heading-only row sits directly above the columns row — collapse the gap. */
.chv-about-section {
	padding-bottom: 0;
}

.chv-about-columns .fl-col-group {
	display: flex;
	gap: 64px;
	align-items: start;
}

.chv-about-columns .fl-col {
	flex: 1 1 0;
	max-width: none;
}

.chv-about-columns .fl-col + .fl-col {
	padding-left: 64px;
}

@media (max-width: 768px) {
	.chv-about-columns .fl-col + .fl-col {
		padding-left: 0;
		padding-top: 32px;
	}
}


/* ============================================================
   6. Hero — the missing pieces
   ------------------------------------------------------------
   (a) Hero text column needs right-padding so it doesn't crash
       into the photo.
   (b) Hero photo gets the 12px-radius + heavy shadow treatment
       that the volunteers/members/support heroes already get —
       the home hero was just omitted from the rule.
   (c) Hero `<p>` (the "helps neighbors live with…" line) is
       currently styled by `.chv-hero-subtitle`, a class never
       added in BB output. Style the structural selector.
   ============================================================ */

.chv-hero .fl-col-group {
	display: flex;
	gap: 48px;
	align-items: center;
}

.chv-hero .fl-col:first-child .fl-col-content {
	padding-right: 48px;
	text-align: left;
}

.chv-hero .fl-col:first-child .fl-module-heading h1,
.chv-hero .fl-col:first-child .fl-module-heading h2,
.chv-hero .fl-col:first-child .fl-rich-text,
.chv-hero .fl-col:first-child .fl-rich-text p {
	text-align: left;
}

.chv-hero .fl-photo-img {
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-xl);
	width: 100%;
	height: auto;
}

.chv-hero .fl-rich-text p {
	color: var(--chv-text-light);
	font-size: var(--chv-font-lg);
	line-height: 1.55;
	margin: 0;
	opacity: 0.95;
	max-width: 52ch;
}

.chv-hero .fl-rich-text p + p {
	margin-top: 14px;
}

/* Add space between the rich-text block (subtitle) and the CTA row below. */
.chv-hero .fl-module-rich-text + .fl-module-rich-text {
	margin-top: var(--chv-spacing-lg) !important;
}

/* CTAs sit a little tighter under the paragraph. */
.chv-hero .chv-hero-ctas {
	gap: 12px;
	margin-top: 4px;
}

@media (max-width: 768px) {
	.chv-hero .fl-col-group {
		flex-direction: column;
		gap: var(--chv-spacing-lg);
	}
	.chv-hero .fl-col {
		width: 100%;
		max-width: 100%;
	}
	.chv-hero .fl-col:first-child .fl-col-content {
		padding-right: 0;
	}
	.chv-hero .fl-rich-text p {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
	.chv-hero-ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.chv-hero-button {
		width: 100%;
		text-align: center;
	}
}


/* ============================================================
   7. Generic Button module pickup
   ------------------------------------------------------------
   When Sophia adds a BB Button module (not a hand-written
   `<a class="chv-…-btn">`), BB emits `.fl-module-button a.fl-button`.
   Style that so a fresh Button module on a light section
   automatically becomes a blue CHV button.
   ============================================================ */

.chv-section:not(.chv-cta-section) .fl-module-button .fl-button {
	display: inline-block;
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
	padding: 16px 32px;
	border-radius: var(--chv-radius-lg);
	font-family: var(--chv-font-family);
	font-size: var(--chv-font-base);
	font-weight: var(--chv-font-weight-semibold);
	border: 2px solid transparent;
	text-decoration: none;
	transition: var(--chv-transition);
}

.chv-section:not(.chv-cta-section) .fl-module-button .fl-button:hover {
	background: var(--chv-secondary-blue);
	transform: translateY(-2px);
	box-shadow: var(--chv-shadow-hover-soft);
}

/* On the dark CTA section, BB Button gets the white-on-blue treatment. */
.chv-cta-section .fl-module-button .fl-button {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
}


/* ============================================================
   8. Hero title pair — tighter, more confident
   ------------------------------------------------------------
   Current values produce a giant top line and a smaller italic
   second line that feels slightly orphaned. Tighten the
   relationship and lower the italic into a real sub-line.
   ============================================================ */

.chv-hero .fl-module-heading + .fl-module-heading {
	margin-top: 6px;
}

.chv-hero-title-main {
	font-size: clamp(44px, 6.2vw, 72px) !important;
	letter-spacing: -0.025em !important;
	line-height: 1.02 !important;
}

.chv-hero-title-light {
	font-size: clamp(28px, 3.6vw, 42px) !important;
	font-style: italic;
	opacity: 0.92 !important;
}


/* ============================================================
   9. Cross-page hero treatment
   ------------------------------------------------------------
   The same structural improvements home gets — extended to
   members / volunteers / programs / support / about / newsletters
   heroes. All target structural BB selectors so a fresh Photo
   or Rich Text in any hero row picks up the same treatment.
   ============================================================ */

/* Hero photo: radius + heavy shadow.
   This already exists for .chv-hero in section 6 above. */
.chv-members-hero .fl-photo-img,
.chv-volunteers-hero .fl-photo-img,
.chv-programs-hero .fl-photo-img,
.chv-support-hero .fl-photo-img,
.chv-about-hero .fl-photo-img,
.chv-newsletters-hero .fl-photo-img {
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-xl);
	width: 100%;
	height: auto;
}

.chv-members-hero .fl-col-group,
.chv-volunteers-hero .fl-col-group,
.chv-programs-hero .fl-col-group,
.chv-support-hero .fl-col-group {
	display: flex;
	gap: 48px;
	align-items: center;
}

/* Left-align the 55%-text column on every 2-col hero (members, volunteers,
   programs, support). Same fix as home, generalized. */
.chv-members-hero .fl-col:first-child .fl-col-content,
.chv-volunteers-hero .fl-col:first-child .fl-col-content,
.chv-programs-hero .fl-col:first-child .fl-col-content,
.chv-support-hero .fl-col:first-child .fl-col-content {
	padding-right: 48px;
	text-align: left;
}

.chv-members-hero .fl-col:first-child .fl-module-heading h1,
.chv-volunteers-hero .fl-col:first-child .fl-module-heading h1,
.chv-programs-hero .fl-col:first-child .fl-module-heading h1,
.chv-support-hero .fl-col:first-child .fl-module-heading h1 {
	font-size: clamp(40px, 5.4vw, 60px);
	font-weight: var(--chv-font-weight-extrabold);
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: 0 0 var(--chv-spacing-md);
	color: var(--chv-text-light);
	text-wrap: balance;
}

/* Hero subtitle on 2-col heroes — same readable 20px/1.55 treatment
   as the home hero. */
.chv-members-hero .fl-col:first-child .fl-rich-text,
.chv-volunteers-hero .fl-col:first-child .fl-rich-text,
.chv-programs-hero .fl-col:first-child .fl-rich-text,
.chv-support-hero .fl-col:first-child .fl-rich-text {
	color: var(--chv-text-light);
}

.chv-members-hero .fl-col:first-child .fl-rich-text p,
.chv-volunteers-hero .fl-col:first-child .fl-rich-text p,
.chv-programs-hero .fl-col:first-child .fl-rich-text p,
.chv-support-hero .fl-col:first-child .fl-rich-text p {
	color: var(--chv-text-light);
	font-size: var(--chv-font-lg);
	line-height: 1.55;
	margin: 0;
	opacity: 0.95;
	max-width: 52ch;
}

/* Section title rule also applies to in-hero heading modules on
   single-column heroes (about, newsletters). */
.chv-about-hero .fl-module-heading h1,
.chv-newsletters-hero .fl-module-heading h1 {
	font-size: clamp(40px, 5.4vw, 60px);
	font-weight: var(--chv-font-weight-extrabold);
	letter-spacing: -0.02em;
	color: var(--chv-text-light);
	margin: 0 0 var(--chv-spacing-md);
	text-wrap: balance;
}

.chv-about-hero .fl-rich-text p,
.chv-newsletters-hero .fl-rich-text p {
	color: var(--chv-text-light);
	font-size: var(--chv-font-lg);
	opacity: 0.95;
	margin: 0 auto;
	max-width: 56ch;
}


/* ============================================================
   10. Programs hero — four-photo collage on the right
   ------------------------------------------------------------
   Programs hero has FOUR photo modules in the 45% column.
   Out of the box they stack vertically. Treat them as a
   2x2 collage with overlapping cards.
   ============================================================ */

.chv-programs-hero .fl-col + .fl-col .fl-col-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.chv-programs-hero .fl-col + .fl-col .fl-module-photo {
	margin-top: 0 !important;
}

.chv-programs-hero .fl-col + .fl-col .fl-photo-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.chv-programs-hero .fl-col + .fl-col .fl-module-photo:nth-child(odd) {
	margin-top: 24px !important;
}


/* ============================================================
   11. Members — tier comparison cards
   ------------------------------------------------------------
   The members PHP already adds .chv-tier-card / .chv-tier-card--recommended
   classes to each tier column. Style those classes as real cards
   instead of plain text columns. Pure CSS — Sophia keeps editing
   bare Heading + Rich Text modules inside each column.
   ============================================================ */

.chv-membership-tiers .fl-col-group {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.chv-membership-tiers .fl-col {
	background: var(--chv-text-light);
	border-radius: var(--chv-radius-xl);
	padding: 32px 28px;
	box-shadow: var(--chv-shadow-sm);
	transition: var(--chv-transition);
	flex: 1 1 0;
	max-width: none;
}

.chv-membership-tiers .fl-col:hover {
	box-shadow: var(--chv-shadow-lg);
	transform: translateY(-4px);
}

.chv-membership-tiers .chv-tier-card--recommended {
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
	box-shadow: var(--chv-shadow-lg);
	position: relative;
}

.chv-membership-tiers .chv-tier-card--recommended::before {
	content: "Recommended";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--chv-accent-warm);
	color: var(--chv-text-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.chv-membership-tiers .chv-tier-card--recommended .fl-module-heading h3,
.chv-membership-tiers .chv-tier-card--recommended .fl-rich-text,
.chv-membership-tiers .chv-tier-card--recommended .fl-rich-text strong {
	color: var(--chv-text-light);
}

.chv-membership-tiers .fl-module-heading h3 {
	font-size: 26px;
	margin: 0 0 16px;
	color: var(--chv-primary-blue);
}

.chv-membership-tiers .fl-rich-text {
	font-size: var(--chv-font-base);
	line-height: 1.6;
	max-width: none;
}

.chv-membership-tiers .fl-rich-text ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.chv-membership-tiers .fl-rich-text li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-top: 1px solid rgba(0,0,0,0.06);
}

.chv-membership-tiers .chv-tier-card--recommended .fl-rich-text li {
	border-top-color: rgba(255,255,255,0.2);
}

.chv-membership-tiers .fl-rich-text li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--chv-accent-warm);
	border-bottom: 2px solid var(--chv-accent-warm);
	transform: rotate(-45deg);
}

.chv-membership-tiers .chv-tier-card--recommended .fl-rich-text li::before {
	border-left-color: var(--chv-text-light);
	border-bottom-color: var(--chv-text-light);
}


/* ============================================================
   12. About / Volunteers — 3-up "card row" pattern
   ------------------------------------------------------------
   About staff/board and Volunteers' ways-to-help all use the
   bb_row3() pattern: 3 columns, each with a heading + rich text
   (and sometimes a photo). Style them as cards.
   ============================================================ */

.chv-about-staff .fl-col-group,
.chv-about-board .fl-col-group,
.chv-ways-row .fl-col-group,
.chv-programs-offer .fl-col-group,
.chv-programs-events .fl-col-group {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.chv-about-staff .fl-col,
.chv-about-board .fl-col,
.chv-ways-row .fl-col,
.chv-programs-offer .fl-col,
.chv-programs-events .fl-col {
	background: var(--chv-text-light);
	border-radius: var(--chv-radius-xl);
	padding: 28px 24px;
	box-shadow: var(--chv-shadow-sm);
	transition: var(--chv-transition);
	flex: 1 1 0;
	max-width: none;
}

.chv-about-staff .fl-col:hover,
.chv-about-board .fl-col:hover,
.chv-ways-row .fl-col:hover,
.chv-programs-offer .fl-col:hover,
.chv-programs-events .fl-col:hover {
	box-shadow: var(--chv-shadow-lg);
	transform: translateY(-4px);
}

/* Portrait photos inside person cards — circular crop. */
.chv-about-staff .fl-module-photo,
.chv-about-board .fl-module-photo {
	margin-bottom: 18px;
}

/* Soft gradient placeholder behind the circular crop so the card structure
   stays visible even when the image is slow to load or fails to capture in
   third-party screenshot tools. */
.chv-about-staff .fl-photo,
.chv-about-staff .fl-photo-content,
.chv-about-board .fl-photo,
.chv-about-board .fl-photo-content {
	display: block;
	width: 140px;
	margin: 0 auto;
}

.chv-about-staff .fl-photo-content,
.chv-about-board .fl-photo-content {
	background: linear-gradient(135deg, var(--chv-light-blue-bg), #c8d8e6);
	border-radius: 50%;
	width: 140px;
	height: 140px;
	overflow: hidden;
}

.chv-about-staff .fl-photo-img,
.chv-about-board .fl-photo-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 18%;
	border-radius: 50%;
	width: 140px;
	height: 140px;
	margin: 0 auto;
	box-shadow: var(--chv-shadow-sm);
}

.chv-about-staff .fl-module-heading h3,
.chv-about-board .fl-module-heading h3,
.chv-ways-row .fl-module-heading h3,
.chv-programs-offer .fl-module-heading h3,
.chv-programs-events .fl-module-heading h3 {
	font-size: 22px;
	margin: 0 0 8px;
	color: var(--chv-primary-blue);
	text-align: center;
}

.chv-about-staff .fl-rich-text,
.chv-about-board .fl-rich-text {
	text-align: center;
	font-size: var(--chv-font-base);
	max-width: none;
}

.chv-about-staff .fl-rich-text em,
.chv-about-board .fl-rich-text em {
	display: block;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--chv-accent-warm);
	margin-bottom: 10px;
}


/* ============================================================
   13. About — stats row (2007 / 300+ / 500+)
   ------------------------------------------------------------
   The three stat columns are bare h3 + p right now. Make the
   number huge, the label small-caps.
   ============================================================ */

.chv-about-stats .fl-col-group {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.chv-about-stats .fl-col {
	background: var(--chv-text-light);
	border-radius: var(--chv-radius-xl);
	padding: 36px 24px;
	box-shadow: var(--chv-shadow-sm);
	text-align: center;
	flex: 1 1 0;
	max-width: none;
}

.chv-about-stats .fl-module-heading h3 {
	font-size: 56px;
	font-weight: var(--chv-font-weight-extrabold);
	color: var(--chv-primary-blue);
	line-height: 1;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.chv-about-stats .fl-rich-text p {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--chv-text-gray);
	margin: 0;
}


/* ============================================================
   14. Programs — affinity-group categorized list
   ------------------------------------------------------------
   Inside the affinity-group rich-text are repeating h3 + ul
   pairs. Render as a 2-column grid of category cards with
   the category h3 in serif blue.
   ============================================================ */

.chv-programs-affinity .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
	max-width: none;
}

.chv-programs-affinity .fl-rich-text > h3 {
	font-size: 22px;
	color: var(--chv-primary-blue);
	margin: 0 0 12px;
	padding-top: 18px;
	border-top: 2px solid var(--chv-accent-warm);
}

.chv-programs-affinity .fl-rich-text > h3:first-child,
.chv-programs-affinity .fl-rich-text > h3:nth-child(2) {
	padding-top: 0;
}

.chv-programs-affinity .fl-rich-text > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.chv-programs-affinity .fl-rich-text > ul li {
	padding: 6px 0;
	font-size: var(--chv-font-base);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.chv-programs-affinity .fl-rich-text {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* ============================================================
   15. Programs — Respite & Events 2-col rows
   ------------------------------------------------------------
   Two-up cards similar to About diptych.
   ============================================================ */

.chv-programs-respite-cards .fl-col-group {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.chv-programs-respite-cards .fl-col {
	background: var(--chv-text-light);
	border-radius: var(--chv-radius-xl);
	padding: 32px;
	box-shadow: var(--chv-shadow-sm);
	flex: 1 1 0;
	max-width: none;
}

.chv-programs-respite-cards .fl-module-heading h3 {
	font-size: 24px;
	color: var(--chv-primary-blue);
	margin: 0 0 12px;
}


/* ============================================================
   16. Support — Genderson Fund 2-col (photo + text)
   ------------------------------------------------------------
   ============================================================ */

.chv-support-genderson .fl-col-group {
	display: flex;
	gap: 48px;
	align-items: center;
}

.chv-support-genderson .fl-col:first-child {
	flex: 0 0 35%;
	max-width: 35%;
}

.chv-support-genderson .fl-col + .fl-col {
	flex: 0 0 calc(65% - 48px);
	max-width: calc(65% - 48px);
}

.chv-support-genderson .fl-photo-img {
	border-radius: var(--chv-radius-xl);
	box-shadow: var(--chv-shadow-md);
}

.chv-support-genderson .fl-module-heading h2 {
	text-align: left;
	font-style: italic;
	font-weight: var(--chv-font-weight-bold);
	font-size: clamp(28px, 3.4vw, 40px);
	color: var(--chv-primary-blue);
	padding-top: 0;
}

.chv-support-genderson .fl-module-heading h2::before {
	display: none;
}


/* ============================================================
   17. Members — service-area diptych & contact card
   ------------------------------------------------------------
   ============================================================ */

.chv-members-service-area .fl-col-group {
	display: flex;
	gap: 48px;
	align-items: center;
}

.chv-members-service-area .fl-module-heading h2 {
	text-align: left;
	padding-top: 0;
}

.chv-members-service-area .fl-module-heading h2::before {
	display: none;
}


/* ============================================================
   18. Newsletters — year archive as multi-column grid
   ------------------------------------------------------------
   Each year's <ul> of month links currently renders as a
   single tall column. Multi-column it so the list reads
   wide instead of long.
   ============================================================ */

.chv-newsletters-year .fl-rich-text {
	max-width: 960px;
	margin: 0 auto;
}

.chv-newsletters-year .fl-rich-text ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.chv-newsletters-year .fl-rich-text li {
	flex: 0 0 calc(16.667% - 8px);
	min-width: 120px;
}

.chv-newsletters-year .fl-rich-text li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 10px 8px;
	color: var(--chv-primary-blue);
	font-weight: var(--chv-font-weight-semibold);
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	border: 1px solid var(--chv-border-light);
	border-radius: var(--chv-radius-sm);
	transition: background 0.15s ease;
}

.chv-newsletters-year .fl-rich-text li a:hover {
	background: var(--chv-light-blue-bg);
}

@media (max-width: 768px) {
	.chv-newsletters-year .fl-rich-text li {
		flex: 0 0 calc(33.333% - 8px);
	}
}

@media (max-width: 480px) {
	.chv-newsletters-year .fl-rich-text li {
		flex: 0 0 calc(50% - 8px);
	}
}


/* ============================================================
   19. Generic CTA accent bar adjustment
   ------------------------------------------------------------
   The orange accent bar inside .chv-cta-section needs to be
   visible against the dark blue background — flip to white.
   (Already done partially in rule 3, but reinforce.)
   ============================================================ */

/* Tighten CTA section paragraph max-width for readable line lengths. */
.chv-cta-section .fl-col:only-child .fl-rich-text {
	max-width: 64ch;
}


/* ============================================================
   20. About — Our Values 2-column grid
   ------------------------------------------------------------
   Source markup is a single Rich Text module with 10 paragraphs,
   each: <p><strong>Value Name</strong> short definition.</p>
   Lay them out as a 2-col grid with the bold lead-word promoted
   to a serif blue sub-heading and the definition below it.
   ============================================================ */

.chv-about-values .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 56px;
	max-width: 980px;
	margin: 0 auto;
}

.chv-about-values .fl-rich-text p {
	margin: 0;
	padding-left: 0;
}

.chv-about-values .fl-rich-text p::before {
	display: none;
}

.chv-about-values .fl-rich-text p strong:first-child {
	display: block;
	font-family: var(--chv-font-family-heading);
	font-weight: var(--chv-font-weight-bold);
	font-size: 22px;
	color: var(--chv-primary-blue);
	margin-bottom: 4px;
	line-height: 1.2;
}

@media (max-width: 768px) {
	.chv-about-values .fl-rich-text {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}


/* ============================================================
   21. Members — Service Area column fix
   ------------------------------------------------------------
   The 50/50 row with a 48px gap exceeds 100% width and wraps.
   Same fix as About diptych: let the cols flex with gap.
   ============================================================ */

.chv-members-service-area .fl-col-group {
	flex-wrap: nowrap;
}

.chv-members-service-area .fl-col {
	flex: 1 1 0;
	max-width: none;
}

@media (max-width: 768px) {
	.chv-members-service-area .fl-col-group {
		flex-wrap: wrap;
	}
}


/* ============================================================
   22. Primary CTA button on light sections
   ------------------------------------------------------------
   .chv-cta-btn-primary is defined in home.css as white-on-blue
   (designed for the dark CTA section). When that same class
   appears inside a regular .chv-section (e.g. "Apply for
   Membership" on the members page), the white background is
   invisible against the page bg. Flip it to blue-fill when
   it's NOT inside a .chv-cta-section.
   ============================================================ */

.chv-section:not(.chv-cta-section) .chv-cta-btn-primary {
	background: var(--chv-primary-blue);
	color: var(--chv-text-light);
	padding: 14px 36px;
	font-weight: var(--chv-font-weight-semibold);
}

.chv-section:not(.chv-cta-section) .chv-cta-btn-primary:hover {
	background: var(--chv-secondary-blue);
	color: var(--chv-text-light);
	transform: translateY(-2px);
	box-shadow: var(--chv-shadow-hover-soft);
}

/* Same treatment for the .chv-cta-btn-secondary class when outside
   the dark CTA section — it's a blue outline on light. */
.chv-section:not(.chv-cta-section) .chv-cta-btn-secondary {
	background: var(--chv-text-light);
	color: var(--chv-primary-blue);
	border-color: var(--chv-primary-blue);
}

.chv-section:not(.chv-cta-section) .chv-cta-btn-secondary:hover {
	background: var(--chv-light-blue-bg);
	color: var(--chv-primary-blue);
	border-color: var(--chv-primary-blue);
	transform: translateY(-2px);
}

.chv-support-hero-tax-note {
	display: block;
	margin-top: 16px;
	font-size: var(--chv-font-sm);
	color: var(--chv-text-light);
	opacity: 0.75;
}

/* ============================================================
   23. "Who Volunteers" / "How to Get Started" / Members benefits
       — 2-col grid for bold-lead-word + definition lists
   ------------------------------------------------------------
   Same treatment as Our Values: every <p><strong>X</strong> Y</p>
   gets promoted to a serif blue sub-heading + definition below.
   ============================================================ */

.chv-volunteers-who .fl-col:only-child > .fl-col-content > .fl-module-rich-text:last-child .fl-rich-text,
.chv-volunteers-steps .fl-col:only-child > .fl-col-content > .fl-module-rich-text:last-child .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 56px;
	max-width: 980px;
	margin: 0 auto;
}

.chv-volunteers-who .fl-rich-text p,
.chv-volunteers-steps .fl-rich-text p {
	margin: 0;
	padding-left: 0;
}

.chv-volunteers-who .fl-rich-text p::before,
.chv-volunteers-steps .fl-rich-text p::before {
	display: none;
}

/* Members "What it Means to Be a Member" benefits paragraphs (the
   second Rich Text inside the section). */
.chv-members-page .chv-section > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content > .fl-module-rich-text:nth-child(3) .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 56px;
	max-width: 1100px;
	margin: 0 auto;
}

/* Support "Ways to Give" — large list, 2-col grid. */
.chv-support-ways .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 56px;
	max-width: 1100px;
	margin: 0 auto;
}

.chv-support-ways .fl-rich-text p {
	margin: 0;
	padding-left: 0;
}
.chv-support-ways .fl-rich-text p::before { display: none; }

/* Programs Transportation list — same treatment. */
.chv-programs-transport .fl-rich-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 56px;
	max-width: 1100px;
	margin: 0 auto;
}

.chv-programs-transport .fl-rich-text p {
	margin: 0;
	padding-left: 0;
}
.chv-programs-transport .fl-rich-text p::before { display: none; }

@media (max-width: 768px) {
	.chv-volunteers-who .fl-rich-text,
	.chv-volunteers-steps .fl-rich-text,
	.chv-support-ways .fl-rich-text,
	.chv-programs-transport .fl-rich-text {
		grid-template-columns: 1fr !important;
	}
}


/* ============================================================
   24. Card-row sections — widen to fill more of the page
   ------------------------------------------------------------
   The 3-up card rows ("Ways to Help", "What We Offer",
   "Events & Activities", staff/board) were sitting inside a
   1200px container that left ~12% empty on either side of
   the cards. Widen the inner content + tighten the row padding
   so the three cards stretch closer to the page edges.
   ============================================================ */

.chv-ways-row,
.chv-programs-offer,
.chv-programs-events,
.chv-about-staff,
.chv-about-board,
.chv-membership-tiers,
.chv-about-stats,
.chv-programs-respite-cards {
	padding-top: var(--chv-spacing-md);
	padding-bottom: var(--chv-spacing-section);
}

.chv-ways-row > .fl-row-content-wrap > .fl-row-content,
.chv-programs-offer > .fl-row-content-wrap > .fl-row-content,
.chv-programs-events > .fl-row-content-wrap > .fl-row-content,
.chv-about-staff > .fl-row-content-wrap > .fl-row-content,
.chv-about-board > .fl-row-content-wrap > .fl-row-content,
.chv-membership-tiers > .fl-row-content-wrap > .fl-row-content,
.chv-about-stats > .fl-row-content-wrap > .fl-row-content,
.chv-programs-respite-cards > .fl-row-content-wrap > .fl-row-content {
	max-width: 1400px;
}


/* ============================================================
   25. Tighten vertical whitespace between sections
   ------------------------------------------------------------
   Default .chv-section has 48px top + 48px bottom padding,
   plus the hero adds another 48px below itself → 96px gap
   between the hero and the first content section, and 96px
   between every pair of content sections. Trim to keep the
   rhythm without the dead space.
   ============================================================ */

.chv-section {
	padding-top: var(--chv-spacing-lg);
	padding-bottom: var(--chv-spacing-lg);
}

/* Hero sections keep a bit more bottom padding for breathing room,
   but trim from the default 48 to 36. */
.chv-hero,
.chv-about-hero,
.chv-members-hero,
.chv-volunteers-hero,
.chv-programs-hero,
.chv-support-hero,
.chv-newsletters-hero {
	padding-top: var(--chv-spacing-xl);
	padding-bottom: var(--chv-spacing-xl);
}

@media (max-width: 768px) {
	.chv-hero,
	.chv-about-hero,
	.chv-members-hero,
	.chv-volunteers-hero,
	.chv-programs-hero,
	.chv-support-hero,
	.chv-newsletters-hero {
		padding-left: var(--chv-spacing-md);
		padding-right: var(--chv-spacing-md);
	}
}

@media (max-width: 480px) {
	.chv-hero,
	.chv-about-hero,
	.chv-members-hero,
	.chv-volunteers-hero,
	.chv-programs-hero,
	.chv-support-hero,
	.chv-newsletters-hero {
		padding-left: var(--chv-spacing-sm);
		padding-right: var(--chv-spacing-sm);
	}
}

/* When a section title leads directly into a card row, drop the
   double padding (title section bottom + card row top). */
.chv-section:has(+ .chv-ways-row),
.chv-section:has(+ .chv-programs-offer),
.chv-section:has(+ .chv-programs-events),
.chv-section:has(+ .chv-about-staff),
.chv-section:has(+ .chv-about-board),
.chv-section:has(+ .chv-membership-tiers),
.chv-section:has(+ .chv-about-stats),
.chv-section:has(+ .chv-programs-respite-cards) {
	padding-bottom: var(--chv-spacing-sm);
}

.chv-ways-row,
.chv-programs-offer,
.chv-programs-events,
.chv-about-staff,
.chv-about-board,
.chv-membership-tiers,
.chv-about-stats,
.chv-programs-respite-cards {
	padding-top: var(--chv-spacing-sm);
}


/* ============================================================
   26. Universal bold-lead-word promotion
   ------------------------------------------------------------
   Any paragraph that leads with a <strong> gets that bold
   phrase promoted to a serif blue sub-heading on its own line.
   This covers Programs "What We Offer", "Events & Activities",
   "Advocacy", Members "What it Means" benefits, and anywhere
   else Sophia writes <p><strong>Term</strong> definition</p>.
   ============================================================ */

.chv-section .fl-rich-text > p > strong:first-child {
	display: block;
	font-family: var(--chv-font-family-heading);
	font-weight: var(--chv-font-weight-bold);
	font-size: 22px;
	color: var(--chv-primary-blue);
	margin-bottom: 4px;
	line-height: 1.25;
}

/* The "Connect & Explore" / "Learn Together" etc. promotion that was
   scoped only to .chv-village-life-section is now redundant — the
   universal rule above covers it. The list-style padding/tick stays. */

/* Exception: tier-card pricing uses bold for label prefixes
   (Individual:, Household:) that should stay inline with their values. */
.chv-membership-tiers .fl-rich-text p > strong:first-child {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin-bottom: 0;
	line-height: inherit;
}

/* Exception: hero subtitle paragraphs shouldn't promote bold either. */
.chv-hero .fl-rich-text p > strong:first-child,
.chv-members-hero .fl-rich-text p > strong:first-child,
.chv-volunteers-hero .fl-rich-text p > strong:first-child,
.chv-programs-hero .fl-rich-text p > strong:first-child,
.chv-support-hero .fl-rich-text p > strong:first-child,
.chv-about-hero .fl-rich-text p > strong:first-child {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin-bottom: 0;
	line-height: inherit;
}


/* ============================================================
   27. Hide blank cards in person grids
   ------------------------------------------------------------
   When a 3-col bb_row3() has fewer than 3 people (e.g. the 7th
   staff member sits alone in a 3-col row), the empty cols
   render as empty cards. Hide them.
   ============================================================ */

.chv-about-staff .fl-col:not(:has(.fl-module)),
.chv-about-board .fl-col:not(:has(.fl-module)) {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	visibility: hidden;
}


/* ============================================================
   28. Heading wrap — keep long words intact
   ------------------------------------------------------------ */
h1, h2, h3 {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: manual;
}

/* ============================================================
   29. Hamburger menu — collapsible nav on mobile
   ------------------------------------------------------------
   Checkbox-label pattern, no JS required.
   ============================================================ */

.chv2-nav-toggle-input { display: none; }
.chv2-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
	cursor: pointer;
	margin-right: 8px;
}
.chv2-nav-toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	background: var(--chv-text-dark);
	border-radius: 2px;
	transition: var(--chv-transition);
}

@media (max-width: 768px) {
	/* Header is the positioning context for the absolute nav panel */
	.chv2-header { position: relative; }
	.chv2-header-inner { flex-wrap: nowrap; align-items: center; justify-content: space-between; }

	/* Hamburger: visible, pushed to the far right */
	.chv2-nav-toggle { display: flex; margin-left: auto; flex-shrink: 0; }
	.chv2-header-donate { display: none; }

	/* Nav: hidden absolute panel that drops below the header */
	.chv2-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
		z-index: 1000;
		flex: unset;
		order: unset;
		justify-content: flex-start;
	}
	.chv2-nav-toggle-input:checked ~ .chv2-nav {
		max-height: 600px;
	}
	.chv2-nav-list { flex-direction: column; gap: 0; width: 100%; }
	.chv2-nav-list a {
		display: block;
		padding: 14px 20px;
		border-bottom: 1px solid var(--chv-border-light);
		white-space: normal;
		font-size: var(--chv-font-base);
	}
	.chv2-nav-list li:last-child a { border-bottom: 0; }

	/* Bars animate to X when open */
	.chv2-nav-toggle-input:checked ~ .chv2-nav-toggle .chv2-nav-toggle-bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.chv2-nav-toggle-input:checked ~ .chv2-nav-toggle .chv2-nav-toggle-bar:nth-child(2) { opacity: 0; }
	.chv2-nav-toggle-input:checked ~ .chv2-nav-toggle .chv2-nav-toggle-bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* ============================================================
   30. Programs hero photo collage — clean 2x2 on mobile
   ------------------------------------------------------------
   Desktop has the staggered offset for visual interest.
   Mobile should be flat 2x2.
   ============================================================ */

@media (max-width: 768px) {
	.chv-programs-hero .fl-col + .fl-col .fl-module-photo:nth-child(odd) {
		margin-top: 0 !important;
	}
	.chv-programs-hero .fl-col + .fl-col .fl-col-content {
		gap: 8px;
		max-width: 320px;
		margin: 0 auto;
	}
	.chv-programs-hero .fl-col + .fl-col .fl-photo-img {
		aspect-ratio: 1 / 1;
		border-radius: 12px;
		font-size: 0 !important;
		color: transparent !important;
	}
}

/* ============================================================
   31. 2-col hero mobile stacking (members, volunteers, programs, support)
   ============================================================ */
@media (max-width: 768px) {
	.chv-members-hero .fl-col-group,
	.chv-volunteers-hero .fl-col-group,
	.chv-programs-hero .fl-col-group,
	.chv-support-hero .fl-col-group {
		flex-direction: column;
		gap: var(--chv-spacing-lg);
	}
	.chv-members-hero .fl-col,
	.chv-volunteers-hero .fl-col,
	.chv-programs-hero .fl-col,
	.chv-support-hero .fl-col {
		width: 100%;
		max-width: 100%;
	}
	.chv-members-hero .fl-col:first-child .fl-col-content,
	.chv-volunteers-hero .fl-col:first-child .fl-col-content,
	.chv-programs-hero .fl-col:first-child .fl-col-content,
	.chv-support-hero .fl-col:first-child .fl-col-content {
		padding-right: 0;
	}
}

/* ============================================================
   32. Global mobile column stacking — all content BB rows
   BB sets inline width on every .fl-col; !important overrides it.
   Heroes already handle their own stacking via flex-direction above.
   ============================================================ */
@media (max-width: 768px) {
	.fl-col-group .fl-col {
		width: 100% !important;
		max-width: 100% !important;
		float: none;
		flex: none;
	}
}

/* ============================================================
   33. Mobile stacking — all flex-based multi-col rows
   Every row that sets display:flex on .fl-col-group needs
   flex-direction:column at mobile; section 32's width:100%
   then makes each column fill the full width.
   ============================================================ */
@media (max-width: 768px) {
	.chv-about-staff .fl-col-group,
	.chv-about-board .fl-col-group,
	.chv-about-stats .fl-col-group,
	.chv-about-columns .fl-col-group,
	.chv-ways-row .fl-col-group,
	.chv-membership-tiers .fl-col-group,
	.chv-programs-offer .fl-col-group,
	.chv-programs-events .fl-col-group,
	.chv-programs-respite-cards .fl-col-group,
	.chv-support-genderson .fl-col-group {
		flex-direction: column;
	}
}