/*
Theme Name: HCFB
Theme URI: https://www.hcfb.org
Author: Harry Chapin Food Bank
Author URI: https://www.hcfb.org
Description: Ground-up foundation theme for the new Harry Chapin Food Bank website. Phase 3B implements the accessible brand and visual-design system (colors, typography, spacing) and approved production logo assets — see docs/DESIGN_SYSTEM.md. Not built on, or derived from, the current live HCFB theme.
Version: 0.4.57
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hcfb
*/

/*
 * Block themes generally style through theme.json. This stylesheet exists so
 * WordPress recognizes the theme and to hold small progressive-enhancement
 * rules and component styles theme.json cannot express. See
 * docs/DESIGN_SYSTEM.md for the full brand token/typography/spacing system.
 */

.hcfb-local-dev-notice {
	background: #fff3cd;
	color: #664d03;
	border-bottom: 1px solid #ffe69c;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	text-align: center;
}

/* Phase 3B development-preview notice — see docs/DESIGN_SYSTEM.md §18.
 * Explicitly gated in functions.php to local development only. Non-modal,
 * no automatic timing, no scroll trigger, no focus trap. Dismissal is
 * persisted (localStorage) by assets/js/hcfb-interactive.js so it never
 * repeatedly interrupts; entirely readable/dismissible without JS breaking
 * anything (the close button simply does nothing without JS, and the
 * notice remains visible, which is a safe no-op, not a broken state). */
.hcfb-preview-notice {
	background: var(--wp--preset--color--hcfb-cream);
	color: var(--wp--preset--color--hcfb-text);
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	padding: 0.6rem 1rem;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	text-align: center;
}

/* The dismiss script (assets/js/hcfb-interactive.js) sets the `hidden`
 * boolean attribute to close this notice. Without this rule, the class
 * selector above (same specificity as the `[hidden]` attribute selector,
 * 0-1-0) wins the cascade tie by appearing later, so `display: flex`
 * would keep rendering the "hidden" notice -- caught by
 * tests/browser/keyboard.spec.ts. */
.hcfb-preview-notice[hidden] {
	display: none;
}

/* Packet 1 (structural accessibility): min-height brings this standalone
 * control up to the ~44px target size WCAG 2.2 AA prefers, via
 * inline-flex centering rather than enlarging the visible pill through
 * padding alone -- text/border size is otherwise unchanged. */
.hcfb-preview-notice__dismiss {
	background: transparent;
	border: 1px solid var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-navy);
	border-radius: 999px;
	padding: 0.15rem 0.75rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-size: 0.8rem;
	cursor: pointer;
	flex-shrink: 0;
}

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

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--hcfb-surface, #ffffff);
	color: var(--wp--preset--color--hcfb-text, #1d1e24);
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1rem;
	z-index: 100000;
	text-decoration: none;
}

/*
 * Phase 3B: brand color/typography/spacing tokens are final semantic
 * values (docs/DESIGN_SYSTEM.md) — no hcfb-todo-* placeholder remains
 * anywhere in this theme.
 */

/*
 * Global readability foundation, revised pass (2026-09-02, Ryan-
 * directed): the first version was too weak to perceive -- 1.15em/0.6em
 * margins on a bare, low-specificity `p`/`h1-6` were silently losing to
 * every existing component's own class-scoped margin (`.hcfb-give-
 * impact__body`, `.hcfb-editorial-grid__card-body`, etc.), which is
 * every card/panel that actually contains real copy. This revision
 * still never touches an existing component's own visual identity --
 * class selectors still outrank these -- but makes the ACTUAL foundation
 * (plain paragraphs/headings, ordinary block content, and every future
 * Finance/Privacy/Policies page) visibly, not marginally, more spacious.
 * `.wp-block-post-content` is the real WordPress core content container
 * ordinary block-editor pages render into -- the deliberate, shared
 * selector this rule targets, per instruction, over a blanket bare-tag
 * rule alone.
 */
p {
	margin: 0 0 1rem;
}

p:last-child {
	margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 0.9rem;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
.wp-block-heading + p {
	margin-top: 1rem;
}

.wp-block-post-content > * + * {
	margin-top: 1rem;
}

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.wp-block-post-content h1 + p,
.wp-block-post-content h2 + p,
.wp-block-post-content h3 + p,
.wp-block-post-content h4 + p {
	margin-top: 1rem;
}

.wp-block-post-content p + p {
	margin-top: 1rem;
}

/* Eyebrow -> heading: the one shared label class already used across
 * every "prominent" section (Give, Volunteer, About, Partner, Find
 * Food, Food Insecurity) -- a real existing selector, not a new one,
 * so this actually reaches the live pages this pass is meant to
 * strengthen, not just hypothetical future ones. */
.hcfb-prominent-eyebrow {
	margin-bottom: 0.75rem;
}

/* Final paragraph -> CTA: the shared button-row wrapper already used
 * site-wide immediately after body copy. */
.hcfb-prominent-hero__actions,
.hcfb-prominent-cta__actions {
	margin-top: 1.25rem;
}

/*
 * Card copy stays a deliberate step below feature-panel/main-content
 * copy (~16px, not the new 17-18px body default) -- explicit here so
 * it's set once, sitewide, rather than every card component (Volunteer
 * opportunity cards, Give's Ways to Give/Gift at Work, About, Partner)
 * separately re-declaring the same value.
 */
.hcfb-editorial-grid__card-body {
	font-size: 1rem;
	line-height: 1.6;
}

/* Visible keyboard focus on every interactive element site-wide — never
 * suppressed, never color-only (an outline is always a shape change, not
 * just a color change). Default treatment is the high-contrast navy ring;
 * inside the navy footer (or any future dark/reversed section) it swaps to
 * white so it never disappears against a dark background. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-site-footer :focus-visible {
	outline-color: var(--wp--preset--color--hcfb-surface, #ffffff);
}

/* Buttons: pill-shaped site-wide (used by the header Donate action, the How
 * Can You Help cards, and every other call-to-action) for a consistent,
 * friendly CTA affordance. */
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Header                                                               */
/* ------------------------------------------------------------------ */

.hcfb-utility-bar {
	background: var(--wp--preset--color--hcfb-cream);
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	padding-top: var(--wp--preset--spacing--hcfb-xs);
	padding-bottom: var(--wp--preset--spacing--hcfb-xs);
}

.hcfb-utility-links {
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-sm, 1rem);
}

.hcfb-utility-link {
	margin: 0;
}

.hcfb-header-search.wp-block-search {
	margin: 0;
	/* Flex/form children default to `min-width: auto` (their content's
	 * intrinsic width) in some browsers, which lets this search form refuse
	 * to shrink below its input's natural width and overflow the viewport
	 * at narrow widths -- observed in Firefox at 320px (caught by
	 * tests/browser/responsive.spec.ts), though not Chromium/WebKit at the
	 * same width. max-width caps it; min-width:0 permits it to actually
	 * shrink inside the utility bar's flex layout. */
	max-width: 100%;
	min-width: 0;
}

.hcfb-header-search.wp-block-search .wp-block-search__inside-wrapper,
.hcfb-header-search.wp-block-search .wp-block-search__input {
	min-width: 0;
}

.hcfb-header-row {
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-sm, 1rem);
	padding-top: var(--wp--preset--spacing--hcfb-sm);
	padding-bottom: var(--wp--preset--spacing--hcfb-sm);
}

/* Logo: intrinsic width/height attributes (set in inc/template-tags.php)
 * reserve the correct aspect ratio before the image loads — these rules
 * only control the *displayed* size, so nothing shifts on load. Documented
 * maximum displayed widths (docs/DESIGN_SYSTEM.md §Logo):
 *   Desktop header: 44px tall  → ≈166px wide (hcfb-logo-horizontal-color, 1101:291)
 *   Mobile header:  36px tall  → ≈136px wide
 *   Narrow fallback icon: 40px tall → ≈37px wide (hcfb-mark-color, 417:446)
 *   Footer: 40px tall → ≈152px wide (hcfb-logo-horizontal-reversed-accent, 1101:292)
 */
.hcfb-logo-link {
	display: inline-flex;
	align-items: center;
}

.hcfb-logo {
	display: block;
	width: auto;
}

.hcfb-logo--horizontal {
	height: 44px;
}

.hcfb-logo--icon {
	height: 40px;
	display: none;
}

.hcfb-logo--footer {
	height: 40px;
	width: auto;
}

/* Narrow-mobile fallback: only once the horizontal lockup no longer fits
 * comfortably alongside the mobile nav toggle does the icon-only mark take
 * over. display:none removes the hidden image from the accessibility tree
 * entirely, so the accessible name (carried by the parent link's
 * aria-label) is only ever announced once, never twice. */
@media (max-width: 360px) {
	.hcfb-logo--horizontal {
		display: none;
	}
	.hcfb-logo--icon {
		display: block;
	}
}

@media (max-width: 782px) {
	.hcfb-logo--horizontal {
		height: 36px;
	}
	.hcfb-utility-bar .wp-block-group {
		flex-direction: column;
		align-items: flex-start;
	}
	.hcfb-utility-links {
		flex-direction: column;
		align-items: flex-start;
	}
}

.hcfb-donate-action .wp-block-button__link {
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */

/*
 * Global readability/header-density refinement (2026-09-02, Ryan-
 * directed): the footer previously inherited the sitewide body font-size
 * verbatim (no rule of its own existed) -- kept deliberately more
 * compact than main content, per direct instruction, while still
 * clearing a comfortable reading size and the same improved line-height
 * as the rest of the site.
 */
.hcfb-site-footer {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.hcfb-site-footer a {
	color: var(--wp--preset--color--hcfb-surface);
	text-decoration: underline;
}

.hcfb-site-footer a:hover,
.hcfb-site-footer a:focus-visible {
	color: var(--wp--preset--color--hcfb-orange);
}

.hcfb-site-footer h1,
.hcfb-site-footer h2,
.hcfb-site-footer h3,
.hcfb-site-footer h4 {
	color: var(--wp--preset--color--hcfb-surface);
}

.hcfb-footer-separator {
	opacity: 0.35;
}

/* ------------------------------------------------------------------ */
/* Accessible thermometer/progress pattern. Meaning is carried by the
 * visible numeric label — the fill is a supplementary visual cue only. */
/* ------------------------------------------------------------------ */

.hcfb-thermometer {
	max-width: 28rem;
}

.hcfb-thermometer__track {
	background: var(--wp--preset--color--hcfb-surface, #fff);
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 999px;
	height: 1.25rem;
	overflow: hidden;
}

.hcfb-thermometer__bar {
	height: 100%;
	background: var(--wp--preset--color--hcfb-green, #a2c13d);
	border-radius: 999px 0 0 999px;
}

.hcfb-thermometer__label {
	font-weight: 600;
	margin-top: 0.35rem;
}

/* Alert/emergency notice — border + icon-style prefix, not color alone. */
.hcfb-alert-notice {
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-left-width: 6px;
	border-left-color: var(--wp--preset--color--hcfb-orange);
	padding: 1rem 1.25rem;
}

.hcfb-alert-notice__label {
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Breadcrumbs */
.hcfb-breadcrumbs {
	font-size: 0.875rem;
}

.hcfb-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}

.hcfb-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.35rem;
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
}

.hcfb-breadcrumbs [aria-current="page"] {
	font-weight: 600;
}

/* Card patterns (program/story/news/event/report) share a light border so
 * they read as distinct items without relying on color alone. */
.hcfb-card-pattern {
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 6px;
	padding: 1.25rem;
	height: 100%;
}

/* Metadata list (event date/time/location, etc.) */
.hcfb-metadata-list {
	margin: 1rem 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35rem 1rem;
}

.hcfb-metadata-list__row {
	display: contents;
}

.hcfb-metadata-list dt {
	font-weight: 600;
}

.hcfb-metadata-list dd {
	margin: 0;
}

.hcfb-related-content ul {
	list-style: none;
	padding: 0;
}

/* Event registration/details CTAs and past-event notice (single-hcfb_event) */
.hcfb-event-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0;
}

.hcfb-event-cta {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
}

.hcfb-event-cta--primary {
	background: var(--wp--preset--color--hcfb-navy, #262760);
	color: #fff;
}

.hcfb-event-cta--secondary {
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	color: inherit;
}

.hcfb-event-past-notice {
	font-style: italic;
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
}

/* Reports archive download link (archive-hcfb_report) */
.hcfb-report-file-link {
	font-weight: 600;
}

/* Empty / no-results states */
.hcfb-empty-state-public {
	border: 1px dashed var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 6px;
	padding: 2rem;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Unified News + Press Release stream (/news/, homepage What's Happening) */
/* ------------------------------------------------------------------ */

.hcfb-news-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.hcfb-news-filters__link {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--hcfb-navy, #1c2b39);
}

.hcfb-news-filters__link.is-active {
	background-color: var(--wp--preset--color--hcfb-navy, #1c2b39);
	color: #fff;
	border-color: var(--wp--preset--color--hcfb-navy, #1c2b39);
}

.hcfb-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.hcfb-news-card__thumb {
	display: block;
	margin-bottom: 0.75rem;
}

.hcfb-news-card__thumb img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.hcfb-news-card__title {
	margin: 0.35rem 0;
	font-size: 1.1rem;
}

.hcfb-news-card__date {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--hcfb-text-muted, #5b5b5b);
}

.hcfb-news-type-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.35rem;
}

/*
 * Navy text on the brand green/orange fill -- not white -- matching this
 * theme's own already-measured-accessible convention for a colored-fill
 * badge (see the header-actions refinement's Volunteer/Find Food buttons:
 * "measured 6.64:1, WCAG AA" for navy-on-green). White text on either of
 * these two brand colors was axe-flagged here at only ~2:1-2.4:1 --
 * caught by this packet's own accessibility test, not assumed.
 */
.hcfb-news-type-badge--news {
	background-color: var(--wp--preset--color--hcfb-green, #2e7d32);
	color: var(--wp--preset--color--hcfb-navy, #1c2b39);
}

.hcfb-news-type-badge--press-release {
	background-color: var(--wp--preset--color--hcfb-orange, #d9622b);
	color: var(--wp--preset--color--hcfb-navy, #1c2b39);
}

.hcfb-news-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* How Can You Help (homepage)                                         */
/* ------------------------------------------------------------------ */

.hcfb-help-grid {
	gap: var(--wp--preset--spacing--hcfb-md, 1.5rem);
}

.hcfb-help-card {
	border-radius: 12px;
	padding: var(--wp--preset--spacing--hcfb-md, 1.5rem);
}

.hcfb-help-card--find-food {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
}

.hcfb-help-card__icon {
	margin: 0 0 0.5rem;
	line-height: 1;
}

@media (max-width: 600px) {
	.hcfb-help-grid.wp-block-columns {
		flex-wrap: wrap;
	}
	.hcfb-help-grid .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* Choice accordion (homepage split feature/choice section)            */
/* ------------------------------------------------------------------ */

.hcfb-choice-accordion {
	max-width: 48rem;
	margin: 0 auto;
}

.hcfb-choice-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
}

.hcfb-choice-accordion__heading {
	margin: 0;
}

.hcfb-choice-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: 0;
	text-align: left;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy);
	/* Right padding gives the rotated chevron (below) room to sit inside its
	 * own box -- a `transform: rotate()` doesn't reflow, so its painted
	 * corners can extend past a 0px-padding edge and cause a few pixels of
	 * page-level horizontal scroll at narrow widths (caught by
	 * tests/browser/responsive.spec.ts / public-home.spec.ts's overflow
	 * checks). */
	padding: 1rem 0.25rem 1rem 0;
	cursor: pointer;
}

.hcfb-choice-accordion__icon {
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
	margin-left: 1rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.hcfb-choice-accordion__trigger[aria-expanded="true"] .hcfb-choice-accordion__icon {
	transform: rotate(-135deg);
	/* Decorative, non-text shape (a CSS border chevron) -- safe to accent in
	 * orange here. The label text itself must stay navy (13.62:1) rather
	 * than also switching to orange: automated testing (tests/browser/
	 * accessibility.spec.ts) caught that orange label text on white
	 * measures only 2.38:1, short of the 3:1 minimum even at this bold,
	 * borderline-large size -- see docs/COLOR_USAGE_RULES.md. */
	color: var(--wp--preset--color--hcfb-orange);
}

.hcfb-choice-accordion__trigger[aria-expanded="true"] {
	border-left: 3px solid var(--wp--preset--color--hcfb-orange);
	padding-left: 0.75rem;
}

.hcfb-choice-accordion__panel {
	padding: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.hcfb-choice-accordion__icon {
		transition: none;
	}
}

/* Launch Press Room: native page blocks remain editable while the release
 * cards reuse the unified News renderer and its fail-closed date rules. */
.hcfb-press-room-latest__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/*
 * Real bug found and fixed (2026-09-29, Ryan-directed): with an odd
 * number of cards (3 -- two per row, one alone on its own final row),
 * the shared `.hcfb-card-pattern { height: 100%; }` rule created a
 * circular sizing dependency against this grid's own implicit
 * auto-sized rows (each row's auto height depends on its tallest
 * child's rendered height, which itself depended on the row's height)
 * -- confirmed empirically: it made this grid's own last row report a
 * shorter height than its card actually rendered at, so the "View all
 * news" button immediately below visually overlapped that card's own
 * bottom edge by ~26px. `.hcfb-card-pattern` itself is shared by many
 * other card grids sitewide (Programs, Our Impact's Explore More,
 * Volunteer, etc.) that don't have this problem, so this override is
 * scoped to this one grid only, not a sitewide change to that class.
 * `height: auto` lets each card size to its own natural content instead
 * -- confirmed via direct measurement that both the row heights and the
 * following button's position are correct afterward.
 */
.hcfb-press-room-latest__grid .hcfb-card-pattern {
	height: auto;
}

.hcfb-press-room-section {
	margin-block: clamp(2rem, 5vw, 4rem);
}

/* The Events archive needs separation between events, not a second heavy
 * container around each one. Internal image/body structure remains intact. */
.post-type-archive-hcfb_event .hcfb-event-card {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 clamp(1.25rem, 3vw, 2rem);
}

/* ------------------------------------------------------------------ */
/* Community / facility gallery (homepage)                             */
/* ------------------------------------------------------------------ */

.hcfb-gallery__track {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--hcfb-md, 1.5rem);
}

.hcfb-gallery.is-enhanced .hcfb-gallery__track {
	flex-direction: row;
	overflow: hidden;
}

.hcfb-gallery__slide {
	flex: 1 0 100%;
}

.hcfb-gallery__placeholder-media {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
	border-radius: 8px;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.75rem;
}

.hcfb-gallery__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

.hcfb-gallery__controls button {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	border: 0;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.hcfb-gallery__track {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Impact metrics: green figure on a navy chip (see pattern file for the
 * contrast rationale), navy label on the plain section background.     */
/* ------------------------------------------------------------------ */

.hcfb-metric {
	text-align: center;
}

.hcfb-metric__value {
	display: inline-block;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-green);
	border-radius: 999px;
	padding: 0.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 0.75rem;
}

/* ------------------------------------------------------------------ */
/* What's Happening: borderless media list (homepage-only; the general   */
/* News archive keeps its own bordered card treatment).                  */
/* ------------------------------------------------------------------ */

.hcfb-media-list .hcfb-media-list__item {
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	padding-bottom: var(--wp--preset--spacing--hcfb-sm);
	margin-bottom: var(--wp--preset--spacing--hcfb-sm);
}

.hcfb-media-list__date {
	color: var(--wp--preset--color--hcfb-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------ */
/* Get in Touch — Constant Contact form                                */
/* ------------------------------------------------------------------ */

/*
 * Wire-up-to-Constant-Contact pass: the disabled hand-authored preview
 * fields this pattern used to render are gone -- the real form markup now
 * comes from the official Constant Contact Forms plugin's own shortcode,
 * rendered with this environment's configured form ID (see
 * hcfb_get_in_touch_ctct_form_id(), inc/template-tags.php, and
 * patterns/contact-preview-placeholder.php -- never a hardcoded ID here
 * or there). Deliberately narrow-scoped selectors below (the
 * plugin's own stable class names, `.ctct-form-field`/`.ctct-label-top`/
 * etc., plus this specific form's own `hcfb-ctct-form` custom class -- set
 * via the plugin's own "Custom Classes" field, not hardcoded here) --
 * never a blanket `.ctct-form` override, so any OTHER Constant Contact
 * form added elsewhere on the site keeps the plugin's own default styling
 * unless it opts in the same way.
 */
.hcfb-contact-preview__form {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--hcfb-md);
}

.hcfb-contact-preview__privacy-note {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

form.hcfb-ctct-form .ctct-form-field {
	margin-bottom: 1rem;
}

form.hcfb-ctct-form .ctct-label-top {
	display: block;
	margin-bottom: 0.3rem;
}

form.hcfb-ctct-form label {
	font-weight: 600;
}

form.hcfb-ctct-form input:not([type="checkbox"]):not([type="submit"]),
form.hcfb-ctct-form textarea {
	display: block;
	width: 100%;
	max-width: 26rem;
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-text);
	box-sizing: border-box;
}

form.hcfb-ctct-form textarea {
	max-width: none;
}

/*
 * Newsletter opt-in checkbox pass: the plugin's own checkbox field markup
 * (`.ctct-form-field-checkbox > .ctct-input-container > input + label`)
 * otherwise stacks the checkbox above its label (inheriting the block
 * "label above field" treatment meant for text inputs) -- restyled here so
 * it reads as one normal inline checkbox-and-label row instead, matching
 * how a checkbox is conventionally presented. Deliberately excluded from
 * the input rule above (`:not([type="checkbox"])`) rather than overridden
 * after the fact, so this never has a `width:100%` box to undo.
 */
form.hcfb-ctct-form .ctct-form-field-checkbox .ctct-input-container {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

form.hcfb-ctct-form .ctct-form-field-checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--hcfb-orange);
}

form.hcfb-ctct-form .ctct-form-field-checkbox label {
	font-weight: 400;
	color: var(--wp--preset--color--hcfb-text);
}

/* CAN-SPAM-style disclosure the plugin renders under the submit button
 * once opt-in is enabled -- restyled to the site's existing small/muted
 * fine-print treatment instead of the plugin's default full-size text. */
.hcfb-contact-preview__form .ctct-disclosure {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

.hcfb-contact-preview__form .ctct-disclosure hr {
	margin: 0 0 0.75rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hcfb-border);
}

/* The plugin's own required-field asterisk -- restyled to the same
 * restrained treatment the rest of the site uses for required indicators,
 * not its default red. */
form.hcfb-ctct-form .ctct-required-indicatior {
	color: var(--wp--preset--color--hcfb-orange);
	font-weight: 700;
}

form.hcfb-ctct-form .ctct-textarea-warning-label {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

/* Per-field validation error, rendered by the plugin next to the
 * relevant label/input (includes/class-display.php). */
form.hcfb-ctct-form .ctct-field-error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b3261e;
}

form.hcfb-ctct-form input[type="submit"] {
	width: auto;
	max-width: none;
	border-radius: 999px;
	padding: 0.6rem 1.5rem;
	font-weight: 700;
	border: 0;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	cursor: pointer;
}

form.hcfb-ctct-form input[type="submit"]:hover,
form.hcfb-ctct-form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--hcfb-navy);
	opacity: 0.85;
}

/*
 * Success/error messaging the plugin renders in place of (success) or
 * alongside (error) the form -- `.ctct-message.success`/`.ctct-error` are
 * the plugin's own stable classes (includes/class-display.php's message()
 * helper), scoped here to this form's wrapper only.
 */
.hcfb-contact-preview__form .ctct-message {
	border-radius: 8px;
	padding: 0.85rem 1.1rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.hcfb-contact-preview__form .ctct-message.success {
	border: 1px solid var(--wp--preset--color--hcfb-green);
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-contact-preview__form .ctct-message.error {
	border: 1px solid var(--wp--preset--color--hcfb-orange);
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

/* Reduced motion: the only motion this theme introduces is WordPress
 * core's own Navigation-block overlay transition (which core already
 * respects prefers-reduced-motion for) plus the small chevron/notice
 * transitions added above (each individually guarded); this rule is
 * defense-in-depth so nothing added by this theme ever animates against
 * that preference. */
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}