/*
 * Our Impact (/our-impact/) visual foundation. Every section reuses the
 * shared docs/PROMINENT_PAGE_COMPONENTS.md primitives (hero, impact band,
 * editorial grid, strategic CTA) directly -- the rules below are only the
 * genuinely new page-specific pieces: the accessible data table, the
 * year-selector form, the geographic county map + detail panel, and the
 * progressive-enhancement trend chart container. Enqueued only alongside
 * hcfb_is_our_impact_template() (functions.php), same conditional
 * single-page convention as assets/css/finance-experience.css.
 */

/* ------------------------------------------------------------------ */
/* 1. Metric-band label detail (secondary line inside a card label)     */
/* ------------------------------------------------------------------ */

.hcfb-prominent-band__label-detail {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 0.2em;
}

/*
 * Metric-card icons (Ryan-directed): reuses the EXACT existing treatment
 * already shipped for this same `.hcfb-prominent-band` component on the
 * About page (assets/css/about-impact-experience.css's own
 * `body.hcfb-about-impact-experience .hcfb-prominent-band__icon` rule) --
 * same selector shape, same sizing/spacing/color values, only the body
 * class differs -- so every `.hcfb-prominent-band` on the site reads as
 * one consistent icon family rather than two competing treatments. A
 * bare, orange, height-sized glyph (no circular medallion) was chosen
 * deliberately over the white-card `.hcfb-editorial-grid__card-icon`
 * medallion used elsewhere: this component's cards sit on a solid navy
 * band, where the medallion's own navy/orange/green circle tokens either
 * disappear (navy-on-navy) or would have needed a new, unprecedented
 * color combination -- reusing the sibling `.hcfb-prominent-band__icon`
 * page's already-approved, already-live treatment for the identical
 * component avoids inventing either problem. Restrained by construction:
 * a single accent color, sized to sit quietly above the number rather
 * than compete with it (the number remains the visually dominant
 * element), and inherently safe under forced-colors mode -- a plain
 * `currentColor` stroke/fill glyph with no background trick follows the
 * system's own forced text color, so it can never become invisible the
 * way a color-on-color background could (verified in Playwright, not
 * just assumed).
 */
body.hcfb-our-impact-experience .hcfb-prominent-band__icon {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	height: 3.25rem;
	margin-bottom: 0.625rem;
}

body.hcfb-our-impact-experience .hcfb-prominent-band__icon svg,
body.hcfb-our-impact-experience .hcfb-prominent-band__icon img {
	display: block;
	width: auto;
	height: 100%;
}

body.hcfb-our-impact-experience .hcfb-prominent-band__icon svg {
	color: var(--wp--preset--color--hcfb-orange);
}

@media (max-width: 480px) {
	body.hcfb-our-impact-experience .hcfb-prominent-band__icon {
		height: 2.75rem;
		margin-bottom: 0.5rem;
	}
}

/*
 * Explicit, not just assumed: forced-colors mode's own UA stylesheet
 * already remaps most authored `color` values automatically, but SVG
 * `currentColor` stroke/fill can behave inconsistently across browsers
 * under that automatic remap. Forcing it here guarantees every icon
 * follows the system's own high-contrast text color -- CanvasText is
 * always drawn with guaranteed contrast against the Canvas background by
 * definition of forced-colors mode -- so the glyph can never disappear
 * the way a color-matched background trick could. (Headless browser
 * automation cannot fully reproduce real OS-level forced-colors color
 * remapping, so this rule was verified by inspection/reasoning against
 * the spec, the same limitation this codebase's other forced-colors
 * handling -- assets/css/prominent-sections.css's strategic-CTA heart
 * clip-path fallback -- already documents.)
 */
@media (forced-colors: active) {
	body.hcfb-our-impact-experience .hcfb-prominent-band__icon svg {
		color: CanvasText;
		forced-color-adjust: auto;
	}
}

/* ------------------------------------------------------------------ */
/* 2. Accessible data table -- always in the DOM, scrollable region     */
/*    only if content genuinely doesn't fit, never the page itself.     */
/* ------------------------------------------------------------------ */

.hcfb-table-scroll {
	overflow-x: auto;
	margin-block: 1.5rem;
	border: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 12px;
}

.hcfb-table-scroll:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-impact-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px; /* forces the scroll region to engage below this, rather than crushing columns unreadably */
	font-size: 0.95rem;
}

.hcfb-impact-table caption {
	text-align: left;
}

.hcfb-impact-table th,
.hcfb-impact-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
}

.hcfb-impact-table thead th {
	background: var(--wp--preset--color--hcfb-cream, #faf5ec);
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy, #262760);
}

.hcfb-impact-table tbody th[scope="row"] {
	font-weight: 700;
	white-space: nowrap;
}

.hcfb-impact-table tbody tr:last-child td,
.hcfb-impact-table tbody tr:last-child th {
	border-bottom: none;
}

/*
 * County-row highlight when its quick-jump anchor is visited -- pure CSS,
 * zero JavaScript required. Uses a left border + background tint (never
 * color alone: the border itself is a shape/position change, and the row
 * that was just navigated to also receives real keyboard focus via the
 * anchor's own default scroll-into-view behavior).
 */
.hcfb-impact-table tbody tr:target {
	background: var(--wp--preset--color--hcfb-cream, #faf5ec);
	border-left: 4px solid var(--wp--preset--color--hcfb-orange, #f78d22);
}

/* ------------------------------------------------------------------ */
/* 3. Year-selector form -- a real GET form, always-visible submit      */
/*    button (no auto-submit-on-change, per WCAG 3.2.2).                */
/* ------------------------------------------------------------------ */

.hcfb-impact-year-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-block: 1.5rem;
}

.hcfb-impact-year-form label {
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy, #262760);
}

.hcfb-impact-year-form select {
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 8px;
	background: var(--wp--preset--color--hcfb-surface, #fff);
	color: var(--wp--preset--color--hcfb-text, #1d1e24);
}

.hcfb-impact-year-form select:focus-visible,
.hcfb-impact-year-form__submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-impact-year-form__submit {
	appearance: none;
	border: 2px solid var(--wp--preset--color--hcfb-navy, #262760);
	background: var(--wp--preset--color--hcfb-navy, #262760);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	cursor: pointer;
}

.hcfb-impact-year-form__submit:hover {
	background: var(--wp--preset--color--hcfb-surface, #fff);
	color: var(--wp--preset--color--hcfb-navy, #262760);
}

/*
 * Shown only once JavaScript has actually attached the auto-submit
 * change-listener (assets/js/our-impact-experience.js's
 * initYearFormAutoSubmit() flips the [hidden] attributes on this and the
 * submit button together) -- advises the visitor in advance of the
 * automatic context change, which is what satisfies WCAG 3.2.2 here.
 */
.hcfb-impact-year-form__hint {
	width: 100%;
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
}

/* ------------------------------------------------------------------ */
/* 4. Geographic county map + selected-county detail panel.             */
/*    Visual-density correction (Ryan-directed, 2026-09-10): the prior   */
/*    version sized the map by WIDTH (100% of its grid column) with the  */
/*    height following the aspect ratio -- on a wide desktop column that */
/*    produced a ~740px-tall map that pushed the table far down and      */
/*    forced the detail card to stretch to match it, leaving a large     */
/*    empty area below its short content. The map is now sized by        */
/*    HEIGHT instead (capped per breakpoint, width follows the aspect    */
/*    ratio automatically) -- same Census geometry, same complete        */
/*    un-cropped shape, just smaller. `align-items: center` (not         */
/*    `stretch`) lets the detail card stay its own natural content       */
/*    height and sit vertically centered beside the now-shorter map,     */
/*    instead of being stretched to match it. Desktop: map left, detail  */
/*    right (CSS grid, DOM/reading order unchanged -- no `order`         */
/*    property, so this also gives the correct single-column "map above  */
/*    detail" stacking at mobile for free, still sized by width there).  */
/* ------------------------------------------------------------------ */

.hcfb-impact-map-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem; /* tightened from 1.5rem -- brings the table visually closer now that the map is shorter */
	align-items: start;
}

@media (min-width: 900px) {
	.hcfb-impact-map-layout {
		grid-template-columns: 1.13fr 1fr; /* ~53% / 47% */
		/* Detail card is content-height and vertically centered beside the
		   map -- no more equal-height stretch. */
		align-items: center;
	}
}

.hcfb-impact-map-layout__map {
	background: var(--wp--preset--color--hcfb-cream, #faf5ec);
	border-radius: 12px;
	padding: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hcfb-impact-county-map {
	width: 100%;
	height: auto;
	/* Keeps the map's own true proportions at any container height
	   (mobile has no definite parent height to inherit a fixed `height`
	   from -- sized by width there instead, same as before). */
	aspect-ratio: 600 / 627.5;
	max-width: 100%;
	display: block;
}

/*
 * From the two-column breakpoint up, the map is sized by HEIGHT instead
 * of width -- `aspect-ratio` then computes width automatically, so the
 * complete, un-cropped, un-stretched Census geometry is preserved at a
 * controlled size. One continuous formula (not a hard jump between two
 * fixed values) interpolates from the tablet target (~430px, within the
 * directed 400-460px range at ~1024px) up to the desktop target
 * (~500px, within the directed 480-520px range at 1440px+), clamped at
 * both ends so it never goes below/above either named range.
 */
@media (min-width: 900px) {
	.hcfb-impact-county-map {
		width: auto;
		/* 1vw = 1% of viewport width, so the target linear formula
		   (0.1683px of height per 1px of viewport width) is expressed
		   here as 16.83vw, not 0.17vw. Solved from two points: 1024px
		   viewport -> 430px height, 1440px viewport -> 500px height. */
		height: clamp(400px, 16.83vw + 257.7px, 520px);
		max-width: 100%;
	}
}

/*
 * Default ("All Counties") state: every county shares ONE uniform
 * treatment -- reads as a single cohesive service region, with no county
 * appearing more or less prominent than any other.
 */
/*
 * The theme's global `a:where(:not(.wp-element-button))` rule
 * (functions.php/theme.json) sets text-decoration:underline on every
 * link, including this SVG <a> -- CSS text-decoration is inherited by
 * SVG <text> and was rendering as a real underline beneath each county
 * label. Overridden here explicitly; this shape is a map region, not
 * inline text, so an underline was never appropriate regardless.
 */
.hcfb-impact-county-map__shape {
	text-decoration: none;
}

.hcfb-impact-county-map__shape path {
	fill: var(--wp--preset--color--hcfb-green, #a2c13d);
	fill-opacity: 0.65;
	stroke: var(--wp--preset--color--hcfb-surface, #fff);
	stroke-width: 1.5;
	transition: fill 0.15s ease, fill-opacity 0.15s ease, stroke-width 0.15s ease;
}

.hcfb-impact-county-map__shape:hover path {
	fill-opacity: 0.85;
}

/*
 * Selected state: fill color change (green -> orange) is only ONE of
 * several redundant cues -- also a visibly heavier stroke and a bold
 * label -- so selection is never communicated by color alone.
 */
.hcfb-impact-county-map__shape.is-selected path {
	fill: var(--wp--preset--color--hcfb-orange, #f78d22);
	fill-opacity: 1;
	stroke: var(--wp--preset--color--hcfb-navy, #262760);
	stroke-width: 3;
}

.hcfb-impact-county-map__shape.is-selected .hcfb-impact-county-map__label {
	font-weight: 800;
}

/*
 * Once any one county is selected, the other four settle into a more
 * muted (but still clearly visible) navy tone so the selected county
 * reads as prominent without any other county disappearing -- ":has()"
 * is progressive enhancement; browsers without it simply keep every
 * county at the same default green tone, which is still a fully
 * legible, non-broken presentation.
 */
@supports selector(:has(*)) {
	.hcfb-impact-county-map:has(.is-selected) .hcfb-impact-county-map__shape:not(.is-selected) path {
		fill: var(--wp--preset--color--hcfb-navy, #262760);
		fill-opacity: 0.28;
	}
}

.hcfb-impact-county-map__label {
	font-size: 20px;
	font-family: var(--wp--preset--font-family--hcfb-body, sans-serif);
	font-weight: 700;
	fill: var(--wp--preset--color--hcfb-navy, #262760);
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

.hcfb-impact-county-map__shape:focus-visible path {
	outline: none; /* SVG doesn't support outline on <path> in every engine; draw a visible ring on the shape's own stroke instead */
	stroke: var(--wp--preset--color--hcfb-focus, #262760);
	stroke-width: 4;
	stroke-dasharray: 3 2;
}

.hcfb-impact-map-layout__detail {
	background: var(--wp--preset--color--hcfb-surface, #fff);
	border: 2px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
	border-radius: 12px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hcfb-impact-map-controls {
	display: flex;
	margin-bottom: 1rem;
}

.hcfb-impact-map-controls__all {
	appearance: none;
	border: 2px solid var(--wp--preset--color--hcfb-navy, #262760);
	background: var(--wp--preset--color--hcfb-surface, #fff);
	color: var(--wp--preset--color--hcfb-navy, #262760);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	cursor: pointer;
}

/*
 * A real toggle button (aria-pressed is the CORRECT native pattern for a
 * button representing "is this view currently active," unlike the county
 * map's links, which use aria-current instead -- see
 * inc/our-impact-sections.php's docblock for why the two differ).
 */
.hcfb-impact-map-controls__all[aria-pressed='true'] {
	background: var(--wp--preset--color--hcfb-navy, #262760);
	color: #fff;
}

.hcfb-impact-map-controls__all:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-impact-map-detail__heading {
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	color: var(--wp--preset--color--hcfb-navy, #262760);
}

.hcfb-impact-map-detail__list {
	margin: 0;
}

.hcfb-impact-map-detail__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border, #d8d3c6);
}

.hcfb-impact-map-detail__row:last-child {
	border-bottom: none;
}

.hcfb-impact-map-detail__row dt,
.hcfb-impact-map-detail__row dd {
	margin: 0;
}

.hcfb-impact-map-detail__row dt {
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
}

.hcfb-impact-map-detail__row dd {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wp--preset--color--hcfb-navy, #262760);
	text-align: right;
	white-space: nowrap;
}

.hcfb-impact-map-detail__caption {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
}

.hcfb-impact-counties__note {
	font-size: 0.9rem;
	color: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
	margin-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* 5. Progressive-enhancement chart container.                          */
/* ------------------------------------------------------------------ */

/*
 * Empty by default (no JavaScript ran, or it hasn't finished yet) --
 * collapses to nothing rather than reserving a blank box. Only takes
 * visible space once assets/js/our-impact-experience.js has populated it
 * with an inline <svg>.
 */
.hcfb-impact-chart:empty {
	display: none;
}

.hcfb-impact-chart {
	margin-block: 1.5rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--hcfb-cream, #faf5ec);
	border-radius: 12px;
}

.hcfb-impact-chart svg {
	max-width: 100%;
	height: auto;
	display: block;
}

.hcfb-impact-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--hcfb-text, #1d1e24);
}

.hcfb-impact-chart__legend-swatch {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.4em;
	border-radius: 2px;
	vertical-align: -0.1em;
}

@media (prefers-reduced-motion: reduce) {
	.hcfb-impact-chart svg rect,
	.hcfb-impact-county-map__shape path {
		transition: none;
	}
}

@media (max-width: 600px) {
	.hcfb-impact-year-form {
		flex-direction: column;
		align-items: flex-start;
	}
}