/*
 * Hope's Door NY - V3 design pass.
 * Palette + type sampled from HD_Mockup_V3 (see design-spec.md,
 * "V3 EXACT TRANSCRIPTION"). Component rules reference tokens.
 */

:root {
	/* Palette (sampled from mockups) */
	--color-cream: #f3f3e9;
	--color-primary: #3e1063;
	--color-primary-mid: #491672;
	--color-accent: #5f1a97;
	--color-accent-bright: #7a20c2;
	--color-lavender: #cfc5df;
	--color-hero-bg: #cdc4db;
	--color-peach: #f4e7dc;
	--color-ink: #22201b;
	--color-white: #ffffff;
	--color-exit: #ddd8e1;

	/* Impact panel gradient */
	--grad-impact-start: #3e1063;
	--grad-impact-end: #7a20c2;
	--grad-impact: linear-gradient(135deg, var(--grad-impact-start), var(--grad-impact-end));

	/* Legacy aliases kept for scaffold rules */
	--color-dark: var(--color-ink);
	--color-light: var(--color-cream);
	--color-secondary: var(--color-primary-mid);

	/* Rounded edges are a brand default */
	--radius: 24px;
	--radius-sm: 12px;
	--radius-lg: 32px;
	--radius-pill: 999px;

	--container-max: 1300px;
	--container-pad: clamp(1.25rem, 4vw, 2.5rem);

	--font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading: "DM Serif Display", Georgia, serif;
	--font-script: "GentlemensScript", "Mr Dafoe", cursive;

	/* Fluid type scale */
	--fs-sm: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
	--fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-lg: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
	--fs-xl: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	--fs-xxl: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

	--space-section: clamp(3.5rem, 7vw, 6rem);

	--shadow-card: 0 10px 30px rgba(62, 16, 99, 0.08);
	--transition: 180ms ease;

	/* Contour-wave background lines (Figma asset, baked-in coral at 9% opacity) */
	--pattern-cream: url("../img/background-lines.svg");
	--pattern-hero: url("../img/background-lines.svg");
}

/* Brand script font, self-hosted (client asset) */
@font-face {
	font-family: "GentlemensScript";
	src: url("../fonts/gentlemens-script.woff2") format("woff2"),
		url("../fonts/gentlemens-script.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Base reset */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--color-ink);
	background: var(--color-cream);
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.12;
	color: var(--color-primary);
}

h1 {
	font-size: var(--fs-xxl);
}

h2 {
	font-size: var(--fs-xl);
}

h3 {
	font-size: var(--fs-lg);
}

h4 {
	font-size: var(--fs-md);
}

/* Bright-violet trailing period on display headings */
.accent-dot {
	color: var(--color-accent-bright);
}

a {
	color: var(--color-accent);
}

button {
	font: inherit;
	cursor: pointer;
}

/* Layout */

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

section {
	padding-block: var(--space-section);
}

/* Contour-wave texture: one continuous band across journey + FAQ,
   feathered top-to-bottom with a single mask so there is no seam */
.pattern-band {
	position: relative;
	isolation: isolate;
}

.pattern-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--pattern-cream);
	background-size: 1728px auto;
	background-position: center top;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
	pointer-events: none;
}

/* Shared section pieces */

.kicker {
	font-family: var(--font-script);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	font-weight: 400;
	color: var(--color-accent-bright);
	line-height: 1.25;
	margin-bottom: 0.35rem;
}

.section-intro {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 2.5rem;
}

.section-intro p:not(.kicker) {
	margin-top: 0.75rem;
}

.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-sm);
	background: var(--color-lavender);
	color: var(--color-primary);
	flex-shrink: 0;
}

.icon-tile .hd-icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* Accessibility helpers */

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

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 1001;
	padding: 0.75rem 1.25rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.footer-main-section :focus-visible,
.impact-panel :focus-visible,
.involved-cta-card:focus-visible,
.involved-overlay :focus-visible {
	outline-color: var(--color-white);
}

/* Buttons - pill shaped */

.btn,
.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.75em;
	font-weight: 500;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-pill);
	transition: background var(--transition), color var(--transition);
}

.btn-primary,
.button {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover,
.button:hover {
	background: var(--color-accent-bright);
	color: var(--color-white);
}

.btn-secondary {
	background: var(--color-lavender);
	color: var(--color-primary);
}

.btn-secondary:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn-outline {
	background: var(--color-white);
	color: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	padding: calc(0.8em - 1.5px) calc(1.75em - 1.5px);
}

.btn-outline:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Quick exit pill (design: light gray-lavender, dark text) */

.quick-exit-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.6em;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 600;
	border: 0;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	transition: background var(--transition);
}

.quick-exit-pill:hover {
	background: var(--color-accent-bright);
}

/* Floating safety corner: quick exit + language selector bottom-left,
   chat badge bottom-right */
.safety-corner {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 2000;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.safety-corner .quick-exit-pill {
	border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.safety-corner .gtranslate_wrapper select {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.45em 0.9em;
	border: 1.5px solid var(--color-lavender);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	box-shadow: var(--shadow-card);
}

.chat-float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 2000;
	display: inline-block;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition);
}

.chat-float img {
	display: block;
	width: clamp(9rem, 14vw, 12rem);
	height: auto;
	border-radius: var(--radius-sm);
}

.chat-float:hover {
	transform: translateY(-2px);
}

/* Header */

/* Transparent at the top of the page; solid once the user scrolls */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: transparent;
	padding-block: 0;
	transition: background-color var(--transition);
}

.site-header.is-scrolled {
	background: var(--color-cream);
}

/* The bar sits above the hero in the flow, so the body needs a lavender
   strip behind the transparent bar on the front page */
body.home {
	background: linear-gradient(180deg, var(--color-hero-bg) 0 10rem, var(--color-cream) 10rem);
}

.home .site-header.is-scrolled {
	background: var(--color-hero-bg);
}

.site-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.25rem;
	padding-block: 0.6rem;
}

.site-title {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	text-decoration: none;
	color: var(--color-primary);
}

/* Boxed logo card */
.site-branding .custom-logo-link {
	display: inline-block;
	padding: 0.35rem 0.5rem;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
}

.custom-logo {
	max-height: 3.25rem;
	width: auto;
	border-radius: 8px;
}

/* Hotline/Donate live in the header bar on desktop, in the menu on mobile */
.nav-cta-row {
	display: none;
}

/* Primary nav + dropdowns */

.primary-menu {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	list-style: none;
}

.primary-menu li {
	position: relative;
}

.primary-menu a {
	font-weight: 500;
	text-decoration: none;
	color: var(--color-primary);
}

.primary-menu a:hover {
	color: var(--color-accent-bright);
}

/* Caret on items with children */
.primary-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.18em) rotate(45deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 13rem;
	display: none;
	list-style: none;
	padding: 0.6rem 0;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	box-shadow: 0 14px 34px rgba(62, 16, 99, 0.18);
	z-index: 60;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	display: block;
}

.primary-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1.25rem;
	color: var(--color-ink);
}

.primary-menu .sub-menu a:hover {
	background: var(--color-cream);
	color: var(--color-accent-bright);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.header-hotline,
.header-donate {
	padding-block: 0.6em;
}

/* Mobile nav toggle */

.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 2.9rem;
	height: 2.9rem;
	background: var(--color-primary);
	border: 0;
	border-radius: var(--radius-pill);
}

.nav-toggle-bar {
	width: 20px;
	height: 2px;
	background: var(--color-white);
	border-radius: var(--radius-pill);
}

/* Hero - lavender collage around centered text */

.hero-section {
	position: relative;
	overflow: hidden;
	background-color: var(--color-hero-bg);
	background-image: linear-gradient(180deg, var(--color-hero-bg) 0%, var(--color-cream) 100%);
	isolation: isolate;
	padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--pattern-hero);
	background-size: 1728px auto;
	background-position: center top;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 95%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 95%);
	pointer-events: none;
}

.hero-content {
	position: relative;
}

.hero-text {
	position: relative;
	z-index: 2;
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
	padding-block: clamp(1rem, 3vw, 2.5rem);
}

.hero-subline {
	margin-top: 1.25rem;
	font-size: var(--fs-md);
	color: var(--color-primary);
}

.hero-intro {
	margin-top: 0.85rem;
	font-size: var(--fs-base);
	max-width: 36rem;
	margin-inline: auto;
}

.hero-photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Desktop: photos absolutely placed around the centered text */
.hero-collage .hero-photo {
	position: absolute;
	z-index: 1;
}

.hero-photo-1 {
	top: 0;
	left: 0;
	width: clamp(14rem, 22vw, 19rem);
	aspect-ratio: 4 / 3;
}

.hero-photo-2 {
	top: 0;
	right: 0;
	width: clamp(11rem, 18vw, 15rem);
	aspect-ratio: 4 / 3;
}

.hero-photo-3 {
	top: clamp(13rem, 22vw, 16rem);
	right: clamp(1rem, 4vw, 4rem);
	width: clamp(8rem, 13vw, 11rem);
	aspect-ratio: 3 / 4;
}

.hero-photo-5 {
	top: clamp(14rem, 24vw, 18rem);
	left: clamp(0.5rem, 3vw, 3rem);
	width: clamp(9rem, 15vw, 13rem);
	aspect-ratio: 4 / 3;
}

/* Bottom row: quick exit | wide family photo | chat badge */
.hero-bottom {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1.5rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-bottom .hero-photo-4 {
	position: static;
	width: clamp(16rem, 26vw, 23rem);
	aspect-ratio: 16 / 10;
}

/* Services - heading split + five divider columns */

.services-header {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.services-header h2 {
	max-width: 22ch;
}

.services-intro {
	font-size: var(--fs-base);
}

.services-columns {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.service-col {
	padding: 0.25rem 1.4rem;
	border-left: 1px solid rgba(62, 16, 99, 0.22);
}

.service-col:first-child {
	border-left: 0;
	padding-left: 0;
}

.service-col:last-child {
	padding-right: 0;
}

.service-col-icon {
	display: inline-flex;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
}

.service-col-icon .hd-icon {
	width: 1.9rem;
	height: 1.9rem;
	stroke-width: 2;
}

.service-col h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.service-col h3 a {
	color: inherit;
	text-decoration: none;
}

.service-col h3 a:hover {
	text-decoration: underline;
}

.service-col p {
	font-size: var(--fs-sm);
}

.services-cta {
	text-align: center;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Impact - violet gradient panel, stat list + photos */

.impact-section {
	padding-block: 0 var(--space-section);
}

.impact-panel {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	background: var(--grad-impact);
	color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 5vw, 4.5rem);
}

.impact-panel h2 {
	color: var(--color-white);
}

.impact-intro {
	margin-top: 0.75rem;
	color: var(--color-lavender);
}

.impact-stats {
	list-style: none;
	margin-top: 1.75rem;
}

.impact-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding-block: 0.95rem;
}

.impact-stat + .impact-stat {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.stat-value {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
	line-height: 1;
}

.stat-label {
	font-size: var(--fs-base);
}

.impact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.25rem;
	margin-top: 1.75rem;
}

.impact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--color-white);
	font-weight: 500;
}

.impact-link-1 {
	text-decoration: underline;
}

.impact-link-2 {
	text-decoration: none;
}

.impact-link:hover {
	text-decoration: underline;
}

.impact-link .hd-icon {
	width: 1.05rem;
	height: 1.05rem;
}

.impact-photos {
	position: relative;
}

.impact-photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.impact-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.impact-photo-1 {
	width: 68%;
	margin-left: auto;
	aspect-ratio: 3 / 4;
}

.impact-photo-2 {
	position: relative;
	width: 70%;
	margin-top: -5.5rem;
	aspect-ratio: 16 / 10;
	border: 6px solid rgba(255, 255, 255, 0.12);
}

/* Journey - centered copy + three buttons */

.journey-content {
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.journey-body {
	margin-top: 1.25rem;
}

.journey-body p + p {
	margin-top: 0.85rem;
}

.journey-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

/* FAQ accordion - base card style (also used on the Donate page) */

.faq-content {
	max-width: 52rem;
	margin-inline: auto;
}

.faq-content > h2 {
	text-align: center;
	margin-bottom: 2rem;
}

.faq-list {
	display: grid;
	gap: 1rem;
}

.faq-item {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.faq-question {
	font-size: var(--fs-base);
}

.faq-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.25rem 1.5rem;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-md);
	color: var(--color-primary);
}

/* Plus / minus indicator drawn with pseudo-elements */
.faq-indicator {
	position: relative;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--color-lavender);
}

.faq-indicator::before,
.faq-indicator::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.85rem;
	height: 2px;
	background: var(--color-primary);
	transform: translate(-50%, -50%);
	border-radius: var(--radius-pill);
}

.faq-indicator::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform var(--transition);
}

.faq-toggle[aria-expanded="true"] .faq-indicator::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq-panel {
	padding: 0 1.5rem 1.4rem;
}

.faq-panel p + p {
	margin-top: 0.75rem;
}

/* FAQ V3 variant (front page): photo left, outlined items right */

.faq-section-split .faq-content {
	max-width: none;
}

.faq-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.faq-photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 3;
}

.faq-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.faq-section-split .faq-main > h2 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-lg);
	text-align: left;
	margin-bottom: 1.5rem;
}

.faq-section-split .faq-item {
	background: transparent;
	box-shadow: none;
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius-sm);
}

.faq-section-split .faq-toggle {
	color: var(--color-accent);
	font-weight: 600;
	font-size: var(--fs-base);
}

.faq-section-split .faq-indicator {
	background: transparent;
	border: 1.5px solid var(--color-accent);
}

.faq-section-split .faq-indicator::before,
.faq-section-split .faq-indicator::after {
	background: var(--color-accent);
}

/* Get involved - violet CTA cards + overlay photo */

.involved-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 1.5rem;
	align-items: stretch;
}

.involved-cta-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.involved-cta-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex: 1;
	padding: 1.5rem 1.75rem;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius);
	text-decoration: none;
	transition: background var(--transition);
}

.involved-cta-card:hover {
	background: var(--color-accent);
}

.involved-cta-title {
	display: block;
	font-weight: 600;
	font-size: var(--fs-md);
}

.involved-cta-copy {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.85);
}

.involved-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	flex-shrink: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-pill);
	color: var(--color-white);
}

.involved-cta-arrow .hd-icon {
	width: 1.2rem;
	height: 1.2rem;
}

.involved-photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	min-height: 24rem;
}

.involved-photo > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.involved-overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: linear-gradient(180deg, rgba(34, 16, 54, 0) 0%, rgba(34, 16, 54, 0.72) 85%);
}

.involved-overlay p {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	line-height: 1.35;
	color: var(--color-white);
	max-width: 26rem;
}

.involved-overlay-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	flex-shrink: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: var(--radius-pill);
	color: var(--color-white);
}

.involved-overlay-arrow .hd-icon {
	width: 1.2rem;
	height: 1.2rem;
}

/* Legacy involved cards (still used on About / hub interior pages) */

.involved-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.involved-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 2rem 1.75rem;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.involved-card h3 {
	font-size: var(--fs-md);
}

.involved-card p {
	font-size: var(--fs-sm);
}

.involved-card .btn {
	margin-top: auto;
}

/* Testimonials - 2-up outlined carousel */

.testimonials-header {
	margin-bottom: 2rem;
	text-align: center;
}

.carousel-viewport {
	overflow: hidden;
}

.carousel-track {
	display: flex;
	transition: transform 320ms ease;
}

.carousel-slide {
	flex: 0 0 100%;
	min-width: 0;
	display: flex;
}

.carousel-2up .carousel-slide {
	flex-basis: 50%;
	padding-inline: 0.6rem;
}

.carousel-2up .carousel-track {
	margin-inline: -0.6rem;
}

/* Base testimonial card (also used on team interior pages) */
.testimonial-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	text-align: center;
	box-shadow: var(--shadow-card);
	margin: 0;
}

.testimonial-card p {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	color: var(--color-primary);
}

.testimonial-card cite {
	display: block;
	margin-top: 1.25rem;
	font-style: normal;
	font-weight: 500;
}

/* Front-page variant: outlined, left-aligned, sans quote text */
.testimonials-section .testimonial-card {
	width: 100%;
	background: transparent;
	box-shadow: none;
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius);
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
}

.testimonials-section .testimonial-card p {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--color-ink);
}

.testimonials-section .testimonial-card cite {
	margin-top: auto;
	padding-top: 1.25rem;
	font-weight: 600;
	color: var(--color-primary);
}

.testimonial-title {
	display: block;
	font-size: var(--fs-sm);
	color: var(--color-primary-mid);
}

.carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: transparent;
	color: var(--color-primary);
	border: 1.5px solid rgba(62, 16, 99, 0.35);
	border-radius: var(--radius-pill);
}

.carousel-btn:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.carousel-btn .hd-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.carousel-dots {
	display: flex;
	gap: 0.5rem;
}

.carousel-dot {
	width: 0.65rem;
	height: 0.65rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(62, 16, 99, 0.3);
}

.carousel-dot[aria-current="true"] {
	background: var(--color-primary);
}

/* Recent News - three outlined cards */

.news-header {
	margin-bottom: 2rem;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.news-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-ink);
	transition: background var(--transition);
}

.news-card:hover {
	background: rgba(207, 197, 223, 0.25);
}

.news-card h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--color-accent);
	text-align: center;
}

.news-card p {
	font-size: var(--fs-sm);
}

.news-card-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: auto;
	background: var(--color-accent);
	color: var(--color-white);
	border-radius: var(--radius-pill);
}

.news-card-arrow .hd-icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* Events - front page: divider-separated rows with date stacks */

.events-list {
	max-width: 62rem;
	margin-inline: auto;
}

.event-row {
	display: grid;
	grid-template-columns: auto 1fr clamp(12rem, 22vw, 17rem);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: 1.75rem;
}

.event-row + .event-row {
	border-top: 1px solid rgba(62, 16, 99, 0.22);
}

.event-date-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.75rem;
	color: var(--color-accent);
	line-height: 1.05;
	text-align: center;
}

.event-date-stack .event-month {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.event-date-stack .event-day {
	font-family: var(--font-heading);
	font-size: 2.6rem;
}

.event-date-stack .event-year {
	font-size: 0.8rem;
	font-weight: 500;
}

.event-row-body h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-md);
	color: var(--color-accent);
}

.event-row-body h3 a {
	color: inherit;
	text-decoration: none;
}

.event-row-body h3 a:hover {
	text-decoration: underline;
}

.event-row-body p {
	margin-top: 0.4rem;
	font-size: var(--fs-sm);
}

.event-row-thumb img {
	width: 100%;
	height: 9rem;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Events - interior events page keeps the card style */

.events-grid {
	display: grid;
	gap: 1.25rem;
}

.event-card {
	display: grid;
	grid-template-columns: auto 1fr 16rem;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: 1.5rem;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.event-date-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5.25rem;
	height: 5.25rem;
	background: var(--color-accent);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	line-height: 1.1;
	text-align: center;
}

.event-month {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.event-day {
	font-family: var(--font-heading);
	font-size: 1.75rem;
}

.event-year {
	font-size: 0.75rem;
}

.event-body h3 {
	font-size: var(--fs-md);
}

.event-body p {
	margin-block: 0.5rem 1rem;
	font-size: var(--fs-sm);
}

.event-thumb img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

/* Newsletter - lavender panel overlapping the footer (front page only) */

.newsletter-section {
	padding-top: 0;
}

.newsletter-panel {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3rem);
	background: var(--color-lavender);
	color: var(--color-ink);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 5vw, 4rem);
}

.newsletter-panel h2 {
	color: var(--color-primary);
}

.newsletter-copy > p {
	margin-top: 0.75rem;
}

.newsletter-form {
	display: flex;
	gap: 0.75rem;
}

.newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 0.8em 1.5em;
	font: inherit;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
}

.newsletter-privacy {
	margin-top: 1rem;
	font-size: var(--fs-sm);
	color: var(--color-primary-mid);
}

/* Overlap the violet footer - front page only */
.home .newsletter-section {
	position: relative;
	z-index: 5;
	padding-bottom: 0;
	margin-bottom: -5.5rem;
}

/* Footer */

.site-footer section {
	padding-block: 2rem;
}

.footer-main-section {
	background: var(--color-primary);
	color: var(--color-white);
	padding-block: 3.5rem 2.5rem;
	font-size: 0.9rem;
}

/* Front page: leave room for the overlapping newsletter panel */
.home .footer-main-section {
	padding-top: 9.5rem;
}

.footer-main-section a {
	color: var(--color-white);
}

.footer-zones {
	display: grid;
	grid-template-columns: 1fr 1.5fr 1.4fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-org {
	border-right: 1px solid rgba(255, 255, 255, 0.28);
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
	text-align: left;
}

.footer-logo {
	margin-bottom: 1.25rem;
}

.footer-logo .custom-logo-link {
	display: inline-block;
	padding: 0.4rem 0.55rem;
	background: var(--color-white);
	border-radius: var(--radius-sm);
}

.footer-logo .custom-logo {
	max-height: 3.5rem;
	width: auto;
}

.footer-org-line {
	font-size: 0.85rem;
	color: var(--color-lavender);
	margin-top: 0.6rem;
}

.footer-org-line a {
	color: var(--color-white);
}

.footer-org-phone {
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}

.footer-mission-text {
	font-size: 0.85rem;
	color: var(--color-lavender);
}

.footer-social {
	margin-top: 1.5rem;
}

.footer-social-label {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.footer-social-list {
	display: flex;
	gap: 0.75rem;
	list-style: none;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-white);
	transition: background var(--transition), color var(--transition);
}

.footer-social-link:hover {
	background: var(--color-white);
	color: var(--color-primary);
}

.footer-social-link .hd-icon {
	width: 1.2rem;
	height: 1.2rem;
}

.footer-hotline-box {
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
	text-align: center;
}

.footer-hotline-label {
	font-weight: 600;
	margin-bottom: 0.85rem;
}

.footer-hotline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6em 1.9em;
	background: var(--color-white);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: var(--fs-md);
	text-decoration: none;
}

.footer-main-section a.footer-hotline-btn {
	color: var(--color-primary);
}

.footer-hotline-btn:hover {
	background: var(--color-lavender);
}

.footer-links-row {
	margin-top: 1.75rem;
}

.footer-links-label {
	font-weight: 600;
	font-size: var(--fs-sm);
	margin-bottom: 0.75rem;
}

.footer-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
}

.footer-chip {
	display: inline-block;
	padding: 0.35em 1.1em;
	font-size: 0.75rem;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--radius-pill);
	transition: background var(--transition), color var(--transition);
}

.footer-chip:hover {
	background: var(--color-primary-mid);
}

.footer-main-section a.footer-chip-filled {
	background: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-primary);
	font-weight: 600;
}

.footer-main-section a.footer-chip-filled:hover {
	background: var(--color-lavender);
	border-color: var(--color-lavender);
}

.footer-legal-section {
	background: var(--color-primary);
	color: var(--color-lavender);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.875rem;
	/* Clearance for the floating Quick Exit / chat badge pair */
	padding-bottom: 5.5rem;
}

.footer-legal-content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem 1.5rem;
}

.footer-badge {
	justify-self: center;
}

.footer-badge img {
	height: 3.75rem;
	width: auto;
}

.footer-powered {
	justify-self: end;
	text-align: right;
}

.footer-powered a {
	color: var(--color-white);
}

/* Mobile - aligns with the nav breakpoint */

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
	}

	/* Stack the bottom-left safety corner so it never reaches the chat badge */
	.safety-corner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.safety-corner .quick-exit-pill {
		font-size: 0.85rem;
		padding: 0.55em 1.25em;
	}

	.chat-float img {
		width: 8rem;
	}

	.header-hotline,
	.header-donate {
		display: none;
	}

	.nav-cta-row {
		display: flex;
		gap: 0.75rem;
		margin-top: 1.25rem;
	}

	.nav-cta-row .btn {
		flex: 1;
		text-align: center;
	}

	.custom-logo {
		max-height: 2rem;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--color-cream);
		border-bottom: 1px solid var(--color-lavender);
		padding: 1rem var(--container-pad) 1.5rem;
	}

	.home .site-nav {
		background: var(--color-hero-bg);
	}

	.site-nav.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	/* Dropdown children expand inline on mobile */
	.primary-menu .menu-item-has-children > a::after {
		content: none;
	}

	.primary-menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0.25rem 0 0.25rem 1rem;
		background: transparent;
		box-shadow: none;
	}

	.primary-menu .sub-menu a {
		padding: 0.35rem 0;
		color: var(--color-primary);
	}

	.primary-menu .sub-menu a:hover {
		background: transparent;
	}

	.header-hotline,
	.header-donate {
		padding: 0.55em 1.2em;
	}

	/* Hero: tight 2-col collage above/below centered text */
	.hero-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.hero-collage {
		display: contents;
	}

	.hero-collage .hero-photo {
		position: static;
		width: 100%;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius);
	}

	.hero-photo-1 {
		order: 1;
	}

	.hero-photo-2 {
		order: 2;
	}

	.hero-text {
		order: 3;
		grid-column: 1 / -1;
		padding-block: 1rem;
	}

	.hero-photo-3 {
		order: 4;
	}

	.hero-photo-5 {
		order: 5;
	}

	.hero-bottom {
		order: 6;
		grid-column: 1 / -1;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
	}

	.hero-bottom .hero-photo-4 {
		width: 100%;
		order: -1;
	}

	/* Services stack with horizontal dividers */
	.services-header {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.services-columns {
		grid-template-columns: 1fr;
	}

	.service-col {
		border-left: 0;
		border-top: 1px solid rgba(62, 16, 99, 0.22);
		padding: 1.25rem 0;
	}

	.service-col:first-child {
		border-top: 0;
		padding-top: 0;
	}

	/* Impact stacks; stat list stays a list */
	.impact-panel {
		grid-template-columns: 1fr;
	}

	.impact-photo-1 {
		width: 80%;
	}

	.impact-photo-2 {
		width: 85%;
		margin-top: -3.5rem;
	}

	.faq-split {
		grid-template-columns: 1fr;
	}

	.faq-photo {
		aspect-ratio: 4 / 3;
	}

	.involved-split {
		grid-template-columns: 1fr;
	}

	.involved-photo {
		min-height: 20rem;
	}

	.involved-grid {
		grid-template-columns: 1fr;
	}

	.carousel-2up .carousel-slide {
		flex-basis: 100%;
	}

	.news-grid {
		grid-template-columns: 1fr;
	}

	/* Event rows stack, image on top */
	.event-row {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.event-row-thumb {
		order: -1;
	}

	.event-row-thumb img {
		height: 11rem;
	}

	.event-date-stack {
		flex-direction: row;
		align-items: baseline;
		gap: 0.4rem;
		min-width: 0;
	}

	.event-date-stack .event-day {
		font-size: 1.9rem;
	}

	.event-card {
		grid-template-columns: auto 1fr;
	}

	.event-thumb {
		grid-column: 1 / -1;
		order: -1;
	}

	.event-thumb img {
		height: 11rem;
	}

	/* Newsletter panel full-width stack */
	.newsletter-panel {
		grid-template-columns: 1fr;
	}

	.newsletter-form {
		flex-direction: column;
	}

	.footer-zones {
		grid-template-columns: 1fr;
	}

	.footer-org {
		border-right: 0;
		padding-right: 0;
	}

	.footer-legal-content {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.footer-powered {
		justify-self: center;
		text-align: center;
	}
}

/* Reduced motion - standing requirement: kill animation for users who ask */

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

/* =========================================================
 * Interior pages
 * Shared page hero, prose, CTA panel, team grids, service
 * anchors, giving/contact cards, flexible pages, blog cards.
 * Additive only - nothing above this block is modified.
 * ========================================================= */

/* Page hero (all interior pages) */

.page-hero-section {
	background:
		radial-gradient(34rem 20rem at 85% 0%, rgba(207, 197, 223, 0.45), transparent 70%),
		radial-gradient(26rem 18rem at 8% 100%, rgba(244, 231, 220, 0.6), transparent 70%),
		var(--color-cream);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.page-hero-content {
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}

.page-hero-intro {
	margin-top: 1.25rem;
	font-size: var(--fs-md);
}

.page-hero-intro p + p {
	margin-top: 0.85rem;
}

.page-hero-actions {
	margin-top: 1.75rem;
}

/* Prose blocks (ACF textarea bodies, page content) */

.prose p + p,
.prose p + ul,
.prose ul + p,
.page-body-content p + p {
	margin-top: 0.85rem;
}

.prose ul {
	padding-left: 1.4rem;
}

.prose li + li {
	margin-top: 0.35rem;
}

.prose h3 {
	font-size: var(--fs-md);
	margin-top: 1.5rem;
	margin-bottom: 0.4rem;
}

.page-body-section {
	padding-top: 0;
}

.page-body-content {
	max-width: 46rem;
	margin-inline: auto;
}

.page-body-content h2 {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

.post-back-link {
	margin-top: 2rem;
}

/* Deep violet CTA panel (Get Help Now / Donate / team CTAs) */

.page-cta-section {
	padding-top: 0;
}

/* Services: the last service section is a full-bleed lavender band, so the
   CTA needs its own top spacing to breathe */
.page-template-template-services .page-cta-section {
	padding-top: var(--space-section);
}

/* On the violet panel the primary pill must invert or it disappears */
.cta-panel .btn-primary {
	background: var(--color-white);
	color: var(--color-primary);
}

.cta-panel .btn-primary:hover {
	background: var(--color-lavender);
	color: var(--color-primary);
}

.cta-panel {
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}

.cta-panel h2 {
	color: var(--color-white);
}

.cta-panel > p {
	max-width: 38rem;
	margin: 0.75rem auto 0;
	color: var(--color-lavender);
}

.cta-panel-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.75rem;
}

.cta-panel .btn .hd-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.cta-panel :focus-visible {
	outline-color: var(--color-white);
}

/* About page: mission / vision / values */

.mvv-section {
	padding-top: 0;
}

.mvv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.mvv-card {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 2rem 1.75rem;
	border-top: 6px solid var(--color-lavender);
}

.mvv-card h3 {
	font-size: var(--fs-md);
	margin-bottom: 0.6rem;
}

.mvv-card p {
	font-size: var(--fs-sm);
}

.about-features-section {
	padding-top: 0;
}

/* Team pages (Leadership / Staff / Board & Advisory) */

.team-section {
	padding-top: 0;
}

.team-list-heading {
	text-align: center;
	margin-bottom: 1.75rem;
}

.team-grid + .team-list-heading,
.team-grid + h2.team-list-heading {
	margin-top: 3rem;
}

.team-grid {
	display: grid;
	gap: 1.5rem;
}

.team-grid-bios {
	grid-template-columns: repeat(3, 1fr);
}

.team-grid-simple {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.team-card {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	text-align: center;
}

.team-grid-simple .team-card {
	padding: 1.25rem 1.5rem;
}

.team-photo {
	width: 7.5rem;
	height: 7.5rem;
	margin: 0 auto 1rem;
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-lavender);
}

.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--color-primary);
}

.team-name {
	font-size: var(--fs-md);
}

.team-role {
	font-size: var(--fs-sm);
	color: var(--color-accent);
	font-weight: 500;
	margin-top: 0.25rem;
}

.team-bio {
	font-size: var(--fs-sm);
	margin-top: 0.75rem;
	text-align: left;
}

.team-quote-section {
	padding-top: 0;
}

.team-quote-content {
	max-width: 52rem;
	margin-inline: auto;
}

/* Services anchor page */

.anchor-nav {
	margin-top: 2rem;
}

.anchor-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	list-style: none;
}

.anchor-chip {
	display: inline-block;
	padding: 0.45em 1.2em;
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-primary);
	background: var(--color-white);
	border: 1px solid var(--color-lavender);
	border-radius: var(--radius-pill);
	transition: background var(--transition), color var(--transition);
}

.anchor-chip:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Anchored sections must clear the sticky header */
.service-detail-section[id],
section[id] {
	scroll-margin-top: 6.5rem;
}

.service-detail-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.service-detail-alt {
	background: rgba(207, 197, 223, 0.25);
}

.service-detail-content {
	max-width: 52rem;
	margin-inline: auto;
}

.service-detail-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.service-detail-header h2 {
	margin: 0;
}

/* Giving types + donate info (Donate page) */

.giving-section {
	padding-top: 0;
}

.giving-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.giving-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.5rem;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}

.giving-card h3 {
	font-size: var(--fs-md);
}

.giving-card p {
	font-size: var(--fs-sm);
}

.donate-info-section {
	padding-top: 0;
}

.donate-info-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.donate-info-card {
	background: var(--color-peach);
	border-radius: var(--radius);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

.donate-info-card h2 {
	font-size: var(--fs-lg);
	margin-bottom: 0.75rem;
}

.donate-info-tax {
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.donate-ein {
	margin-top: 1rem;
	font-size: var(--fs-md);
}

.donate-info-card .btn {
	margin-top: 1.25rem;
}

/* Flexible pages (Volunteer / Careers / Ways You Can Help) */

.flex-body-section {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.flex-body-content {
	max-width: 52rem;
	margin-inline: auto;
	display: grid;
	gap: 1.5rem;
}

.flex-block {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

.flex-block h2 {
	font-size: var(--fs-lg);
	margin-bottom: 0.75rem;
}

.flex-block .btn {
	margin-top: 1.25rem;
}

/* Events page */

.events-page-section {
	padding-top: 0;
}

.event-title {
	font-size: var(--fs-md);
}

/* Contact page */

.contact-methods-section {
	padding-top: 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: 2rem 1.75rem;
}

.contact-card h2 {
	font-size: var(--fs-md);
}

.contact-card p {
	font-size: var(--fs-sm);
}

.contact-card-hotline {
	background: var(--color-primary);
	color: var(--color-white);
}

.contact-card-hotline h2 {
	color: var(--color-white);
}

.contact-card-hotline .icon-tile {
	background: var(--color-primary-mid);
	color: var(--color-white);
}

.contact-card-hotline p {
	color: var(--color-lavender);
}

.contact-hotline-number {
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-white);
	text-decoration: none;
}

.contact-card-hotline :focus-visible {
	outline-color: var(--color-white);
}

.contact-details {
	color: var(--color-primary-mid);
}

/* Contact form (static markup, provider wired later) */

.contact-form-section {
	padding-top: 0;
}

.contact-form-content {
	max-width: 46rem;
	margin-inline: auto;
}

.contact-form {
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.contact-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.contact-form-field label {
	font-weight: 500;
	font-size: var(--fs-sm);
}

.contact-form-field input,
.contact-form-field textarea {
	font: inherit;
	padding: 0.7em 1.25em;
	border: 1px solid var(--color-lavender);
	background: var(--color-cream);
	color: var(--color-ink);
}

.contact-form-field input {
	border-radius: var(--radius-pill);
}

.contact-form-field textarea {
	border-radius: var(--radius);
	resize: vertical;
}

.contact-form-privacy {
	font-size: var(--fs-sm);
	color: var(--color-primary-mid);
	margin-bottom: 1.25rem;
}

/* Blog archive cards */

.archive-section {
	padding-top: 0;
}

.archive-content {
	max-width: 52rem;
	margin-inline: auto;
}

.post-grid {
	display: grid;
	gap: 1.5rem;
}

.post-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.post-card:has(.post-card-thumb) {
	grid-template-columns: 16rem 1fr;
}

.post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.75rem;
}

.post-card-date {
	font-size: var(--fs-sm);
	color: var(--color-accent);
	font-weight: 500;
}

.post-card-title {
	font-size: var(--fs-md);
}

.post-card-title a {
	color: var(--color-primary);
	text-decoration: none;
}

.post-card-excerpt {
	font-size: var(--fs-sm);
}

.post-card .service-link::after {
	border-radius: var(--radius);
}

.archive-content .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 2rem;
}

.archive-content .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-primary);
	text-decoration: none;
	box-shadow: var(--shadow-card);
}

.archive-content .nav-links .page-numbers.current {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Interior responsive */

@media (max-width: 900px) {
	.mvv-grid,
	.team-grid-bios,
	.team-grid-simple,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.team-grid-simple {
		grid-template-columns: 1fr 1fr;
	}

	.giving-grid {
		grid-template-columns: 1fr 1fr;
	}

	.donate-info-content {
		grid-template-columns: 1fr;
	}

	.contact-form-row {
		grid-template-columns: 1fr;
	}

	.post-card:has(.post-card-thumb) {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.team-grid-simple,
	.giving-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   The Events Calendar - brand theming
   TEC ships blue (#334aff) via CSS custom properties; override the
   variable set with the brand purples. Declared on both :root and
   .tribe-common so the override wins regardless of enqueue order.
   ------------------------------------------------------------------ */
:root,
.tribe-common {
	--tec-color-accent-primary: var(--color-accent);
	--tec-color-accent-primary-hover: rgba(95, 26, 151, 0.8);
	--tec-color-accent-primary-active: rgba(95, 26, 151, 0.9);
	--tec-color-accent-primary-background: rgba(95, 26, 151, 0.07);
	--tec-color-accent-primary-multiday: rgba(95, 26, 151, 0.24);
	--tec-color-accent-primary-multiday-hover: rgba(95, 26, 151, 0.34);
	--tec-color-button-primary: var(--color-accent);
	--tec-color-button-primary-hover: rgba(95, 26, 151, 0.8);
	--tec-color-button-primary-active: rgba(95, 26, 151, 0.9);
	--tec-color-button-primary-background: rgba(95, 26, 151, 0.07);
	--tec-color-link-accent: var(--color-accent);
	--tec-color-link-accent-hover: rgba(95, 26, 151, 0.8);
	--tec-color-link-primary: var(--color-ink);
	--tec-color-text-events-title: var(--color-primary);
	--tec-color-text-event-title: var(--color-primary);
	--tec-color-background-events: transparent;
	--tec-font-family-sans-serif: var(--font-body);
	--tec-font-family-base: var(--font-body);
}

/* Event titles and month-view day numbers pick up the heading serif */
.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-primary);
}

/* Round TEC buttons and search field to match the site's pill style */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-common .tribe-common-c-btn-border,
.tribe-common .tribe-events-c-search__input,
.tribe-common .tribe-common-form-control-text__input {
	border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------
   Placeholder donate modal (opens from any donate link; payment
   wiring pending - the submit button falls through to Blackbaud)
   ------------------------------------------------------------------ */
.donate-modal {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.donate-modal[hidden] {
	display: none;
}

.donate-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(34, 32, 27, 0.55);
}

.donate-modal-card {
	position: relative;
	width: min(30rem, 100%);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--color-white);
	border-radius: var(--radius);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: 0 24px 60px rgba(34, 32, 27, 0.3);
}

.donate-modal-close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--color-ink);
	background: transparent;
	border: 0;
	border-radius: 50%;
}

.donate-modal-close:hover {
	background: var(--color-cream);
}

.donate-modal-card h2 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--color-ink);
	text-align: center;
	margin-bottom: 0.4rem;
}

.donate-modal-subtitle {
	text-align: center;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}

.donate-frequencies {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #f4f4f1;
	border-radius: var(--radius-pill);
	padding: 0.25rem;
	margin-bottom: 1.25rem;
}

.donate-frequency {
	padding: 0.6em 0.5em;
	font-weight: 500;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	transition: background var(--transition);
}

.donate-frequency.is-selected {
	background: var(--color-lavender);
	font-weight: 600;
}

.donate-amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.donate-amount {
	padding: 0.75em 0.5em;
	font-weight: 500;
	background: #f4f4f1;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	transition: background var(--transition);
}

.donate-amount:hover {
	background: var(--color-cream);
}

.donate-amount.is-selected {
	background: var(--color-lavender);
	font-weight: 600;
}

.donate-other-wrap {
	margin-bottom: 1.25rem;
}

.donate-other-input {
	width: 100%;
	padding: 0.65em 1.1em;
	font: inherit;
	border: 1.5px solid var(--color-lavender);
	border-radius: var(--radius-sm);
}

.donate-total-row {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	color: var(--color-primary-mid);
	margin-bottom: 1rem;
}

.donate-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	padding: 0.9em 1em;
	background: var(--color-lavender);
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-pill);
	transition: background var(--transition);
}

.donate-submit:hover {
	background: var(--color-hero-bg);
}

.donate-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	font-size: 0.8rem;
	color: #6b675f;
	margin-top: 0.9rem;
}