.hcfb-food-map {
	--hcfb-food-map-navy: var(--wp--preset--color--hcfb-navy, #262760);
	--hcfb-food-map-orange: var(--wp--preset--color--hcfb-orange, #f78d22);
	--hcfb-food-map-cream: var(--wp--preset--color--hcfb-cream, #faf5ec);
	--hcfb-food-map-surface: var(--wp--preset--color--hcfb-surface, #ffffff);
	--hcfb-food-map-text: var(--wp--preset--color--hcfb-text, #1d1e24);
	--hcfb-food-map-muted: var(--wp--preset--color--hcfb-text-muted, #5a5a66);
	--hcfb-food-map-border: var(--wp--preset--color--hcfb-border, #d8d3c6);
	--hcfb-food-map-focus: var(--wp--preset--color--hcfb-focus, #262760);
	color: var(--hcfb-food-map-text);
	font-family: var(--wp--preset--font-family--hcfb-body, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif);
	line-height: 1.6;
}

.hcfb-food-map .hcfb-food-map__inner {
	max-width: 75rem;
	margin-inline: auto;
	padding: 2.5rem 1rem;
}

.hcfb-food-map .hcfb-food-map__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--hcfb-food-map-muted);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hcfb-food-map .hcfb-food-map__heading,
.hcfb-food-map .hcfb-food-map__selector-heading,
.hcfb-food-map .hcfb-food-map__summary-name,
.hcfb-food-map .hcfb-food-map__map-placeholder h3,
.hcfb-food-map .hcfb-food-map__methodology h3 {
	color: var(--hcfb-food-map-navy);
	font-family: var(--wp--preset--font-family--hcfb-heading, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif);
	line-height: 1.2;
}

.hcfb-food-map .hcfb-food-map__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
}

.hcfb-food-map .hcfb-food-map__intro {
	max-width: 45rem;
}

.hcfb-food-map .hcfb-food-map__selector {
	margin-block: 1rem;
}

.hcfb-food-map .hcfb-food-map__selector-heading,
.hcfb-food-map .hcfb-food-map__summary-name {
	font-size: 1.25rem;
}

.hcfb-food-map .hcfb-food-map__county-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcfb-food-map .hcfb-food-map__county-button {
	min-height: 2.75rem;
	border: 2px solid var(--hcfb-food-map-navy);
	border-radius: 999px;
	background: var(--hcfb-food-map-surface);
	color: var(--hcfb-food-map-navy);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.5rem 1rem;
}

.hcfb-food-map .hcfb-food-map__county-button[aria-pressed="true"] {
	background: var(--hcfb-food-map-orange);
	box-shadow: inset 0 0 0 2px var(--hcfb-food-map-navy);
}

/*
 * County hover/focus treatment: a very light orange tint (green read as
 * an unrelated brand color competing with the orange "selected" state;
 * this keeps hover/selected in the same warm family, just different
 * intensities). Navy text is unchanged -- still comfortably readable
 * against a tint this light. Declared before the [aria-pressed="true"]
 * override below so a selected county's own solid orange always wins the
 * cascade tie (equal specificity, later rule wins) instead of fading
 * toward this lighter tint when hovered/focused -- selected and
 * hover/focus must never be confused.
 */
.hcfb-food-map .hcfb-food-map__county-button:hover,
.hcfb-food-map .hcfb-food-map__county-button:focus-visible {
	background: rgba(247, 141, 34, 0.16);
}

.hcfb-food-map .hcfb-food-map__county-button[aria-pressed="true"]:hover,
.hcfb-food-map .hcfb-food-map__county-button[aria-pressed="true"]:focus-visible {
	background: var(--hcfb-food-map-orange);
}

.hcfb-food-map .hcfb-food-map__county-button:focus-visible,
.hcfb-food-map .hcfb-food-map__cta:focus-visible {
	outline: 3px solid var(--hcfb-food-map-focus);
	outline-offset: 3px;
}

.hcfb-food-map .hcfb-food-map__summary,
.hcfb-food-map .hcfb-food-map__map-placeholder,
.hcfb-food-map .hcfb-food-map__methodology {
	border: 1px solid var(--hcfb-food-map-border);
	border-radius: 0.75rem;
	background: var(--hcfb-food-map-cream);
	padding: 1.5rem;
}

.hcfb-food-map .hcfb-food-map__summary p,
.hcfb-food-map .hcfb-food-map__map-placeholder p,
.hcfb-food-map .hcfb-food-map__methodology p {
	margin-bottom: 0;
}

/*
 * Short local-impact-story treatment (replaces an earlier dt/dl "stats
 * table" layout entirely -- plain stacked paragraphs now, no definition
 * list, no row borders/dividers, so this reads as a few short lines
 * about this place, not a research table row-by-row).
 *
 * "Pounds distributed" keeps its own label-above-value pair, substantially
 * larger and strong-navy, as the one clear headline figure. The clamp
 * reuses this file's own .hcfb-food-map__heading responsive scale
 * technique (line ~42) at a smaller range -- flat at 2.25rem from roughly
 * 1100px viewport width up (desktop), scaling smoothly down to a 1.5rem
 * floor at phone widths.
 */
.hcfb-food-map .hcfb-food-map__lead-label {
	margin: 0 0 0.2rem;
	color: var(--hcfb-food-map-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.hcfb-food-map .hcfb-food-map__lead-value {
	margin: 0 0 0.75rem;
	color: var(--hcfb-food-map-navy);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
	line-height: 1.15;
}

/*
 * Content-integrity fail-closed state (templates/banner.php): a plain
 * sentence, not a headline figure, replaces the pounds/produce/meals/
 * period block while distribution-impact source verification is pending --
 * the oversized headline-number treatment above would look wrong applied
 * to a full sentence, so this modifier reads as normal body copy instead.
 */
.hcfb-food-map .hcfb-food-map__lead-value--unavailable {
	color: var(--hcfb-food-map-text);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
}

/*
 * The two secondary figures (fresh produce, meal equivalents): each a
 * single plain sentence -- "1.3 million pounds fresh produce" -- with the
 * number leading, exactly as the friendly-number formatting already reads
 * elsewhere, rather than a separate label alongside a right-aligned
 * value. No border between them; a small margin is the only separation.
 */
.hcfb-food-map .hcfb-food-map__summary-line {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
}

.hcfb-food-map .hcfb-food-map__summary-line:last-of-type {
	margin-bottom: 0.75rem;
}

.hcfb-food-map .hcfb-food-map__period {
	font-size: 0.8rem;
	color: var(--hcfb-food-map-muted);
	margin-bottom: 0;
}

.hcfb-food-map .hcfb-food-map__cta-wrap {
	margin-bottom: 0;
}

.hcfb-food-map .hcfb-food-map__cta {
	display: inline-block;
	border-radius: 999px;
	background: var(--hcfb-food-map-navy);
	color: var(--hcfb-food-map-surface);
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

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

/* Stage 2 banner: official five-county geometry, with HTML buttons remaining
 * the authoritative keyboard controls. SVG paths support pointer selection
 * without adding five duplicate tab stops. */
.hcfb-food-map--banner {
	background: var(--hcfb-food-map-cream);
}

/*
 * Section relationship: less top padding than the shared
 * .hcfb-food-map__inner default (2.5rem) so this tan section sits closer
 * to the Find Food / See Our Impact tab strip right above it -- real
 * padding, not a negative-margin/overlap trick, kept scoped to the
 * banner variant only (via the .hcfb-food-map--banner ancestor) so the
 * full interactive map page's own .hcfb-food-map__inner padding is
 * untouched.
 */
.hcfb-food-map--banner .hcfb-food-map__inner {
	padding-top: 1.5rem;
}

.hcfb-food-map--banner .hcfb-food-map__banner-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
	grid-template-areas:
		"map introduction"
		"map controls"
		"note controls";
	align-items: start;
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: 1.25rem;
}

.hcfb-food-map--banner .hcfb-food-map__introduction,
.hcfb-food-map--banner .hcfb-food-map__map-region,
.hcfb-food-map--banner .hcfb-food-map__controls-details {
	min-width: 0;
}

.hcfb-food-map--banner .hcfb-food-map__introduction {
	grid-area: introduction;
}

.hcfb-food-map--banner .hcfb-food-map__map-region {
	grid-area: map;
	align-self: center;
}

.hcfb-food-map--banner .hcfb-food-map__controls-details {
	grid-area: controls;
}

/*
 * Unified-module fix: this frame's background matches the exact same
 * token (--hcfb-food-map-cream, i.e. var(--wp--preset--color--hcfb-cream))
 * used by the Find Food / See Our Impact tab strip
 * (.hcfb-neighbor-map-bridge__toggle, neighbor-journey.css) -- and the
 * section around it -- so no border or card background is needed at all;
 * either would read as a separate card dropped onto the tan banner rather
 * than part of the same tan module. The unselected county shapes below
 * already fill with this same cream token, so they blend into the frame
 * by design -- navy stroke outlines and labels remain the visual
 * definition of each county. overflow:hidden is kept only for the mobile
 * label layer (.hcfb-food-map__mobile-labels, absolutely positioned
 * within this frame) and for the parallax transform below, which must
 * never visibly spill past the map's own layout area.
 */
.hcfb-food-map--banner .hcfb-food-map__map-frame {
	position: relative;
	overflow: hidden;
	background: var(--hcfb-food-map-cream);
	padding: 0.75rem;
}

.hcfb-food-map--banner .hcfb-food-map__county-map {
	display: block;
	width: 100%;
	height: auto;
	max-height: 35rem;
}

.hcfb-food-map--banner .hcfb-food-map__county-shape {
	fill: var(--hcfb-food-map-cream);
	stroke: var(--hcfb-food-map-navy);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	shape-rendering: geometricPrecision;
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	transition: fill 0.15s ease, stroke-width 0.15s ease;
}

/*
 * Service Area mode (default on load): a subtle, low-intensity warm wash
 * across all five counties -- distinct from the plain cream fill beneath
 * it (county boundaries), from the slightly stronger hover/preview tint
 * just below, and from the strong solid orange used for an individual
 * county selection further below, so this can never read as "one county
 * is selected" or as grey. rgba() is used because a CSS variable can't be
 * mixed into a plain rgba() without relative-color syntax, which isn't
 * yet reliably supported across every browser this project tests
 * (playwright.config.ts runs chromium/firefox/webkit); the literal is
 * --hcfb-food-map-orange's own value (#f78d22 -> rgb(247, 141, 34)) at
 * low opacity, not an invented color. Declared before .is-preview/
 * .is-selected below so hovering or selecting a county (equal
 * specificity, later rule wins on a tie) still visibly overrides this
 * wash on that one shape.
 */
.hcfb-food-map--banner .hcfb-food-map__county-shape.is-service-area {
	fill: rgba(247, 141, 34, 0.12);
}

/*
 * County hover/focus preview (triggered by hovering/focusing either the
 * county button or the shape itself -- assets/js/hcfb-food-map.js's
 * previewCounty()): a warm orange tint one step stronger than the
 * Service Area wash above but still well short of the solid selected
 * orange below -- same family, three clearly distinct intensities.
 */
.hcfb-food-map--banner .hcfb-food-map__county-shape.is-preview {
	fill: rgba(247, 141, 34, 0.32);
	stroke-width: 3;
}

.hcfb-food-map--banner .hcfb-food-map__county-shape.is-selected {
	fill: var(--hcfb-food-map-orange);
	stroke-width: 4;
}

.hcfb-food-map--banner .hcfb-food-map__county-labels {
	fill: var(--hcfb-food-map-navy);
	font-size: 15px;
	font-weight: 700;
	pointer-events: none;
	text-anchor: middle;
}

.hcfb-food-map--banner .hcfb-food-map__county-labels text {
	paint-order: stroke;
	stroke: var(--hcfb-food-map-surface);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.hcfb-food-map--banner .hcfb-food-map__mobile-labels {
	display: none;
	position: absolute;
	inset: 0.75rem;
	overflow: hidden;
	pointer-events: none;
}

.hcfb-food-map--banner .hcfb-food-map__mobile-label {
	position: absolute;
	left: var(--hcfb-food-map-label-x);
	top: var(--hcfb-food-map-label-y);
	color: var(--hcfb-food-map-navy);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	text-shadow:
		-1px -1px 0 var(--hcfb-food-map-cream),
		1px -1px 0 var(--hcfb-food-map-cream),
		-1px 1px 0 var(--hcfb-food-map-cream),
		1px 1px 0 var(--hcfb-food-map-cream);
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.hcfb-food-map--banner .hcfb-food-map__map-note {
	grid-area: note;
	margin: -0.5rem 0 0;
	color: var(--hcfb-food-map-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.hcfb-food-map--banner .hcfb-food-map__summary {
	border-left: 0.35rem solid var(--hcfb-food-map-orange);
	background: var(--hcfb-food-map-surface);
	padding: 1rem 1.25rem;
}

.hcfb-food-map--banner .hcfb-food-map__county-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hcfb-food-map--banner .hcfb-food-map__county-list li:last-child {
	grid-column: 1 / -1;
}

.hcfb-food-map--banner .hcfb-food-map__county-button {
	width: 100%;
}

/*
 * Service Area: its own full-width row above the county grid (a sibling
 * of .hcfb-food-map__county-list, not one more grid cell), spaced away
 * from the grid below it. Already gets width:100% and the shared pill/
 * border/hover/selected treatment from the rules above via the shared
 * .hcfb-food-map__county-button base class -- this only adds the block
 * display + spacing a standalone row needs, plus explicit centering
 * (grid buttons already read centered under default UA button styling,
 * made explicit here since this one isn't a grid cell relying on that).
 */
.hcfb-food-map--banner .hcfb-food-map__county-button--service-area {
	display: block;
	margin-bottom: 0.75rem;
	text-align: center;
}

.hcfb-food-map .hcfb-food-map__table-wrap {
	margin-block: 1.5rem;
	overflow-x: auto;
}

.hcfb-food-map .hcfb-food-map__table {
	width: 100%;
	border-collapse: collapse;
}

.hcfb-food-map .hcfb-food-map__table caption {
	color: var(--hcfb-food-map-navy);
	font-size: 1.25rem;
	font-weight: 700;
	padding-bottom: 0.75rem;
	text-align: left;
}

.hcfb-food-map .hcfb-food-map__table th,
.hcfb-food-map .hcfb-food-map__table td {
	border: 1px solid var(--hcfb-food-map-border);
	padding: 0.75rem;
	text-align: left;
	vertical-align: top;
}

.hcfb-food-map .hcfb-food-map__table thead {
	background: var(--hcfb-food-map-navy);
	color: var(--hcfb-food-map-surface);
}

@media (max-width: 600px) {
	.hcfb-food-map--banner .hcfb-food-map__banner-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"introduction"
			"map"
			"controls"
			"note";
		gap: 1.5rem;
	}

	.hcfb-food-map--banner .hcfb-food-map__county-map {
		max-height: none;
	}

	.hcfb-food-map--banner .hcfb-food-map__county-labels {
		display: none;
	}

	.hcfb-food-map--banner .hcfb-food-map__mobile-labels {
		display: block;
	}

	.hcfb-food-map--banner .hcfb-food-map__county-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hcfb-food-map--banner .hcfb-food-map__county-button {
		width: 100%;
		white-space: normal;
	}

	.hcfb-food-map--banner .hcfb-food-map__county-list li:last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 0.5rem) / 2);
	}

	.hcfb-food-map--banner .hcfb-food-map__cta-wrap,
	.hcfb-food-map--banner .hcfb-food-map__cta {
		width: 100%;
	}

	.hcfb-food-map--banner .hcfb-food-map__cta {
		display: flex;
		min-height: 2.75rem;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
	}
}

@media (max-width: 340px) {
	.hcfb-food-map--banner .hcfb-food-map__county-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcfb-food-map--banner .hcfb-food-map__county-list li:last-child {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
	}
}

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