/*
 * Service Paw Project — layered theme CSS.
 * Rules that can't be expressed in theme.json. Tokens consumed via the
 * --wp--preset--* and --wp--custom--* CSS custom properties WordPress emits
 * from theme.json on every page render.
 */

/* ===== Body baseline ===== */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Backstop against horizontal overflow on narrow viewports. Modern
	 * `clip` is preferred over `hidden` because it allows position:sticky
	 * to keep working (sticky breaks under overflow:hidden on body). */
	overflow-x: clip;
}
html {
	overflow-x: clip;
}

/* ===== Mobile column stacking override =====
 * When a wp:columns block has any blockGap style set, WP auto-applies
 * `flex-wrap: nowrap` to it. Combined with explicit per-column widths
 * (style="flex-basis:55%") that doesn't shrink down well on narrow screens —
 * columns stay side-by-side at squished widths and content overflows.
 * Force wrap at the same 781px breakpoint WP uses for column stacking, so
 * blockGap-styled columns still stack to a single column on mobile. */
@media (max-width: 781px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ===== Accent (gold) text contrast =====
 * theme.json's `accent` color (#B8860B) on white renders at 3.26:1 — passes
 * WCAG AA only for "large text" (18pt+ or 14pt bold), but we use `has-accent-color`
 * on small eyebrow labels too. Bump those to `accent-hover` (#8B6508 = 5.78:1)
 * which is visually the same hue, just enough darker to clear 4.5:1.
 * The `has-accent-background-color` class is unaffected (we only override the
 * text-color class). */
.has-accent-color:not(.has-background) {
	color: var(--wp--preset--color--accent-hover, #8B6508) !important;
}

/* ===== Site header bottom border =====
 * Applied via CSS rather than via a wp:group `border` style attribute. WP
 * adds the `has-border-color` class when a border color is set in the block
 * attributes — and that class also applies `color: var(--wp--preset--color--border) !important`
 * to the element, which CASCADES to every text descendant (nav links, h1, etc.)
 * and breaks contrast (#CBD5E1 on white = 1.48:1, way below WCAG AA 4.5:1).
 * Setting the border in CSS sidesteps the has-border-color side effect entirely. */
.spp-site-header {
	border-bottom: 1px solid var(--wp--preset--color--border, #CBD5E1);
}

/* ===== Defensive constraint on the donations form =====
 * The donate plugin sets `.spaw-donate { max-width: 640px; margin: 2rem auto }`
 * — that can exceed the parent column when the form is placed in a sub-column
 * layout (e.g., the Donate page's 60/40 split where column 2 is ~444px at 1280
 * wide). Cap the form to its parent's width so it never pushes body.scrollWidth
 * past the viewport. Plugin's own 640px max still applies on wider parents.
 *
 * Plus: `<fieldset>` defaults to `min-width: min-content` which prevents the
 * fieldset from shrinking below its intrinsic input-content width. That makes
 * `.spaw-fieldset.spaw-address` blow out of its column even when `.spaw-donate`
 * is properly capped. Override to `min-width: 0` so fieldsets respect their
 * parent's max-width. (Standard MDN-documented fieldset-overflow fix.) */
.spaw-donate {
	max-width: min(640px, 100%) !important;
}
/* All flex/grid descendants of `.spaw-donate` need `min-width: 0` so they
 * actually shrink when their parent column is narrower than their intrinsic
 * content. Default `min-width: auto` (or `min-content` on fieldset) keeps
 * them at content-natural-width and overflows the column. Covers the City /
 * State / ZIP grid + Full name / Email grid + every input + the fieldset. */
.spaw-donate fieldset,
.spaw-donate input,
.spaw-donate select,
.spaw-donate textarea,
.spaw-donate .spaw-field,
.spaw-donate .spaw-grid-2 > *,
.spaw-donate .spaw-grid-3 > * {
	min-width: 0;
}

/* Defensive: never let an image, embed, or video force horizontal scroll. */
img, svg, video, iframe, object, embed {
	max-width: 100%;
	height: auto;
}

/* ===== Content link underline policy =====
 * theme.json sets links to underlined globally. Overrides for places where
 * underlines look wrong (site title, nav, buttons, breadcrumbs, etc.) are
 * already handled in theme.json per-block. Inside post content, keep links
 * underlined and thicken on hover for clearer affordance. */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button) {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
	text-decoration-thickness: 2px;
}

/* ===== Headings: extra breathing room above, tight below ===== */
:where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: 0;
	/* Safety net: at very narrow viewports the largest headings can still
	 * have words wider than the available column. Allow break inside long
	 * words so text doesn't bleed past the viewport edge. */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
:where(.wp-block-post-content, .entry-content) > :where(h2, h3, h4) {
	margin-block-start: 2rem;
}

/* ===== Buttons: enforce min-height + flex centering for icon+text ===== */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	line-height: 1.2;
}

/* ===== Pill button (used in donate form, can be reused elsewhere) ===== */
.spp-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	min-height: 2.75rem;
	border: 2px solid var(--wp--preset--color--border-strong, #64748B);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--contrast, #0F172A);
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s, background 0.15s;
}
.spp-pill:hover {
	border-color: var(--wp--preset--color--primary, #0F2C5C);
}

/* ===== Stats row pattern ===== */
.spp-stat-card {
	text-align: center;
	padding: 1.5rem 1rem;
}
.spp-stat-card .spp-stat-number {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent, #B8860B);
	margin-bottom: 0.25rem;
	letter-spacing: -0.02em;
}
.spp-stat-card .spp-stat-label {
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--muted, #475467);
	font-weight: 500;
}

/* ===== Feature cards with inline SVG icons ===== */
.spp-feature-card {
	padding: 1.5rem;
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--border, #CBD5E1);
	border-radius: var(--wp--custom--radius--lg, 12px);
	height: 100%;
}
.spp-feature-card .spp-icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--accent, #B8860B);
	margin-bottom: 1rem;
	display: block;
}
.spp-feature-card h3 {
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}

/* ===== Program card ===== */
.spp-program-card {
	padding: 2rem 1.5rem;
	background: var(--wp--preset--color--surface, #F4F6FA);
	border: 1px solid var(--wp--preset--color--border, #CBD5E1);
	border-radius: var(--wp--custom--radius--lg, 12px);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.spp-program-card .spp-icon {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--primary, #0F2C5C);
	margin-bottom: 1rem;
}
/* Program card title is structurally an h2 (sibling of page h1) but visually
 * sized at the card-tier — keep it at xl rather than the default 2xl so the
 * three-up grid reads as parallel cards, not three competing page headings. */
.spp-program-card .spp-program-card-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.25;
	margin-block-start: 0;
	margin-block-end: 0.5rem;
}

/* ===== Story preview pattern alternation =====
 * The story-preview pattern is built with wp:columns (image left, text right).
 * On a Stories listing where multiple instances appear in sequence, alternate
 * sides for visual rhythm — even-indexed *story-preview* instances get
 * row-reverse so image is on the right and text on the left.
 *
 * `:nth-child(even of .spp-story-preview)` counts only matching elements (not
 * all sibling tags), so a lone story-preview surrounded by other div siblings
 * stays at default orientation. The earlier `:nth-of-type(even)` form counted
 * by tag, which spuriously reversed the only story when other div-siblings
 * preceded it. The mobile column-stacking override earlier in this file
 * takes precedence at <=781px. */
:nth-child(even of .spp-story-preview) > .wp-block-columns {
	flex-direction: row-reverse;
}

/* ===== FAQ accordion (native <details>/<summary>) ===== */
.spp-faq details {
	border-bottom: 1px solid var(--wp--preset--color--border, #CBD5E1);
	padding: 1.25rem 0;
}
.spp-faq details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--border, #CBD5E1);
}
.spp-faq summary {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-right: 0.5rem;
}
.spp-faq summary::-webkit-details-marker { display: none; }
.spp-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--accent, #B8860B);
	flex-shrink: 0;
}
.spp-faq details[open] summary::after { content: "\2212"; }
.spp-faq details > :not(summary) {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--muted, #475467);
	line-height: 1.6;
}

/* ===== Page header pattern ===== */
.spp-page-header {
	padding-block: var(--wp--preset--spacing--60, 3rem);
	border-bottom: 1px solid var(--wp--preset--color--border, #CBD5E1);
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
}
.spp-page-header h1 {
	margin-block: 0 0.5rem;
}
.spp-page-header .spp-lede {
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	color: var(--wp--preset--color--muted, #475467);
	max-width: 60ch;
}

/* ===== CTA panel (navy, page-end) ===== */
.spp-cta-panel {
	border-radius: var(--wp--custom--radius--lg, 12px);
	overflow: hidden;
}

/* ===== Inverted color context (navy / dark backgrounds) =====
 * theme.json sets the global heading color to `contrast` (dark navy) with
 * `:root :where(...)` selectors (specificity 0,0,1). When a heading lives
 * inside a navy/dark background section, it needs to flip to white. The
 * parent group's `textColor:base` only colors body text — headings ignore
 * inherited color because the theme.json element rule wins specificity.
 *
 * These rules use a class-prefixed `:where(...)` so they hit (0,1,0) specificity,
 * cleanly overriding theme.json's defaults inside any inverted-color context. */
.has-primary-background-color :where(h1, h2, h3, h4, h5, h6, .wp-block-heading),
.is-style-spp-section-navy :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	color: var(--wp--preset--color--base, #FFFFFF);
}
.has-primary-background-color :where(a:not(.wp-element-button):not(.wp-block-button__link)),
.is-style-spp-section-navy :where(a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--accent-soft, #FBF3DC);
}
.has-primary-background-color :where(a:not(.wp-element-button):not(.wp-block-button__link)):hover,
.is-style-spp-section-navy :where(a:not(.wp-element-button):not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--base, #FFFFFF);
	text-decoration-thickness: 2px;
}

/* ===== Header layout polish ===== */
.wp-block-template-part[data-type="header"] .wp-block-group.alignwide,
header.wp-block-group .wp-block-navigation {
	gap: 1.5rem;
}

/* ===== Footer polish (already partially in a11y.css for mobile) ===== */
.wp-block-group[role="contentinfo"] {
	color: var(--wp--preset--color--muted, #475467);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	border-top: 1px solid var(--wp--preset--color--border, #CBD5E1);
	padding-block: var(--wp--preset--spacing--40, 1.5rem);
}
.spp-nonprofit-note {
	font-size: 0.8125rem;
	margin: 0.25rem 0 0;
}

/* ===== Site logo block =====
 * Constrain max-height in the header to keep the layout proportionate even
 * when the source image is large/square. Width auto preserves aspect ratio.
 * The 60px target is enough for the wordmark inside the temp logo to remain
 * legible without dominating the header. */
.wp-block-site-logo img {
	max-height: 60px;
	width: auto;
	height: auto;
}
.wp-block-site-logo a {
	display: inline-flex;
	align-items: center;
}

/* On the home page, give the logo more presence — the home hero is the
 * primary brand statement, so the header mark earns extra weight there.
 * 60 → 80px (33% bump) is enough to register without making the temp
 * logo's flaws (JPEG fuzziness, square aspect, cream rectangle) more
 * visible. Inner pages stay at 60 since their page-header patterns already
 * establish "where am I." */
body.home .wp-block-site-logo img {
	max-height: 80px;
}

/* ===== Social bar (footer) ===== */
.spp-social-bar {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.spp-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	color: var(--wp--preset--color--primary, #0F2C5C);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.spp-social-link:hover,
.spp-social-link:focus-visible {
	color: var(--wp--preset--color--accent, #B8860B);
	background-color: rgba(15, 44, 92, 0.06);
	text-decoration: none;
}
.spp-social-link svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* ===== Print stylesheet ===== */
@media print {
	body {
		background: #fff !important;
		color: #000 !important;
	}
	.wp-block-template-part[data-type="header"],
	.wp-block-template-part[data-type="footer"],
	.skip-link,
	.wp-block-navigation,
	.wp-block-button,
	.spp-cta-panel {
		display: none !important;
	}
	a {
		color: #000 !important;
		text-decoration: underline !important;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
	h1, h2, h3 {
		page-break-after: avoid;
	}
}