/*
 * Food Insecurity ("The Need") visual foundation. Every rule in this file is
 * scoped under body.hcfb-food-insecurity-experience (added in functions.php
 * only when templates/template-food-insecurity.html is the active page
 * template — see hcfb_is_food_insecurity_template() there), so nothing here
 * can affect the homepage, any other landing template, or a normal interior
 * page.
 *
 * This page is built NATIVELY on the consolidated prominent-page system
 * (docs/PROMINENT_PAGE_COMPONENTS.md) — every section uses the canonical
 * hcfb-prominent-hero / hcfb-feature-media / hcfb-editorial-grid-section /
 * hcfb-prominent-band / hcfb-prominent-cta classes directly, already
 * unconditionally enqueued and already in that shared file's full-bleed/
 * inner-container selector lists. What remains below is genuinely new page
 * identity: the map section's own short eyebrow/intro and extra breathing
 * room, the humanized Who Experiences list, the Why Access icon-grid, the
 * quiet Volunteer text link, and page-rhythm background overrides.
 *
 * Iteration 4 (per Harry's review) established a deliberate, alternating
 * section-chapter rhythm down the whole page, using only the site's
 * existing tokens: hero (navy/white split) -> map (cream) -> Who
 * Experiences (white) -> Why Access (cream, green top accent) -> HCFB
 * Responds (white, green top accent -- moved OFF navy) -> closing CTA
 * (navy, orange bottom accent -- now the page's one and only navy moment)
 * -> shared site footer (navy, untouched). Padding-block on the four
 * lower chapters increased from the shared hcfb-xl default to hcfb-2xl on
 * desktop (stepped back down to hcfb-xl under 768px) so each chapter
 * break reads as clearly intentional without excessively lengthening the
 * page.
 */

/*
 * Five Counties, One Region (iteration 5, per Harry's review): a distinct
 * HCFB-green chapter band immediately before the interactive map --
 * genuinely standing out (not fading into the surrounding cream/white
 * page) via the one brand color this page hadn't used yet as a section
 * background. Uses the shared .hcfb-editorial-grid-section class (set
 * alongside this modifier in inc/food-insecurity-sections.php) purely for
 * its already-proven full-bleed page-shell release; every color/spacing
 * rule below is this page's own.
 *
 * Contrast: navy (#262760) text on this exact green (#a2c13d) computes to
 * 6.64:1 (WCAG AA normal-text minimum is 4.5:1) -- verified via the same
 * relative-luminance formula this project's own docs/COLOR_USAGE_RULES.md
 * already uses, not assumed. White text on this same green computes to
 * only 2.05:1 (matches that doc's own already-documented finding for this
 * pair), which is why every text color below is explicitly navy, never
 * white/surface.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band {
	background: var(--wp--preset--color--hcfb-green);
	padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band__inner {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band__eyebrow {
	display: block;
	color: var(--wp--preset--color--hcfb-navy);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.75rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band__heading {
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 1rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band__body {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 768px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-region-band {
		padding-block: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
	}
}

/*
 * The interactive Food Map component (hcfb-food-map/templates/full.php) is
 * a self-contained, plugin-styled experience -- this wrapper gives it the
 * same canonical wide inner measure every other section on this page uses,
 * plus a full-bleed cream band so it reads as its own distinct moment in
 * the page rhythm. Its own eyebrow/heading/intro text moved to the green
 * band immediately above (iteration 5) so this section no longer needs
 * its own kicker/intro.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-map-section {
	background: var(--wp--preset--color--hcfb-cream);
	padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
}

/*
 * Who Experiences Food Insecurity: already a white/light surface by
 * default (.hcfb-feature-media's own shared background is hcfb-surface --
 * no color change needed here, per this pass's own "keep white/light"
 * instruction). Iteration 4 (per Harry's review) only increases its
 * vertical breathing room slightly, so the bottom-of-page section rhythm
 * (white -> cream -> white -> navy) reads as more deliberate rather than
 * each section sharing the exact same default padding.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who {
	padding-block: var(--wp--preset--spacing--hcfb-2xl, 6rem);
}

/*
 * Who Experiences Food Insecurity (iteration 2): a plain, unboxed list --
 * deliberately no card backgrounds/borders, per this pass's move away from
 * a "generic nonprofit infographic" four-card grid. A short colored rule
 * above each name is the only visual separator, echoing the small accent
 * marks already used elsewhere on this page (e.g. the impact-band icons on
 * the About/Impact page) without introducing a new decorative treatment.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who-list li {
	padding-top: 0.75rem;
	border-top: 2px solid var(--wp--preset--color--hcfb-green);
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who-list strong {
	display: block;
	color: var(--wp--preset--color--hcfb-navy);
	font-size: 1.0625rem;
	margin-bottom: 0.25rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who-list span {
	color: var(--wp--preset--color--hcfb-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * Why Access Is Complicated (iteration 2): four restrained icon + label +
 * phrase concepts, replacing the previous paragraph-plus-bullet-list
 * treatment -- typography and simple iconography, not a card wall (no
 * background/border per item, unlike .hcfb-editorial-grid's card
 * treatment used elsewhere on this site).
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-item {
	text-align: left;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-icon {
	display: inline-flex;
	color: var(--wp--preset--color--hcfb-green-text, #627425);
	width: 2rem;
	height: 2rem;
	margin-bottom: 0.75rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-icon svg {
	width: 100%;
	height: 100%;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-label {
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.4rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-phrase {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--hcfb-text-muted);
	margin: 0;
}

@media (max-width: 900px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Bridge to HCFB (iteration 4, per Harry's review): moved OFF the shared
 * .hcfb-prominent-band component's default navy background onto white --
 * with the closing CTA below it ALSO navy by default, two navy bands were
 * running back-to-back, which is exactly why the bottom of the page read
 * as one continuous block. This section now shares the page's white/cream
 * chapter rhythm (white -> cream -> WHITE -> navy); every one of that
 * shared component's text-color rules (heading/note/period) is
 * white-on-transparent by design for its own navy default, so each is
 * re-pointed to a dark, readable color here. A single green top accent
 * rule (same restrained accent already used on Why Access above) keeps
 * this section from reading as a bare, undecorated white gap between two
 * more visually rich chapters.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-bridge {
	background: var(--wp--preset--color--hcfb-surface);
	padding-block: var(--wp--preset--spacing--hcfb-2xl, 6rem);
	border-top: 4px solid var(--wp--preset--color--hcfb-green);
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-bridge .hcfb-prominent-band__heading {
	color: var(--wp--preset--color--hcfb-navy);
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-bridge .hcfb-prominent-band__note {
	color: var(--wp--preset--color--hcfb-text);
	opacity: 1;
	margin-bottom: 0.75rem;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-bridge .hcfb-prominent-band__period {
	color: var(--wp--preset--color--hcfb-text-muted);
	opacity: 1;
}

@media (max-width: 768px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-bridge {
		padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
	}
}

/*
 * Final CTA (iteration 4, per Harry's review): now the ONE strong navy
 * moment on the page -- "where the dark brand field should have maximum
 * impact." Padding increased from the shared hcfb-xl default to hcfb-2xl
 * for more presence without becoming disproportionate to the rest of the
 * page. The bottom accent bar (orange, the same primary accent already
 * carried by this section's own "Find Food Near You" button, not a new
 * color) gives an intentional "chapter ends here" boundary before the
 * shared site footer (parts/footer-home.html, completely untouched)
 * begins immediately after -- previously the two navy surfaces ran
 * directly into each other with no seam at all.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-action {
	padding-block: var(--wp--preset--spacing--hcfb-2xl, 6rem);
	border-bottom: 5px solid var(--wp--preset--color--hcfb-orange);
}

@media (max-width: 768px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-action {
		padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
	}
}

/*
 * Quiet tertiary action under the closing CTA's two buttons -- deliberately
 * plain-text, not a third button, per this packet's own "do not overwhelm
 * with six competing CTAs" instruction.
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-volunteer-link {
	color: var(--wp--preset--color--hcfb-cream);
	opacity: 0.85;
	font-size: 0.9375rem;
	margin: 1.5rem 0 0;
}

body.hcfb-food-insecurity-experience .hcfb-food-insecurity-volunteer-link a {
	color: var(--wp--preset--color--hcfb-cream);
	font-weight: 700;
	text-decoration: underline;
}

/*
 * Page-rhythm background-color override (loads after prominent-sections.css
 * in functions.php's dependency array, so it wins) -- Who Experiences and
 * Why Access are two consecutive white/surface-background sections by
 * default; without this they would repeat identically back to back. Same
 * "page rhythm, not shared geometry" precedent already documented in
 * find-food-experience.css and partner-experience.css for their own
 * equivalent overrides. Targeted via this page's own
 * hcfb-food-insecurity-access modifier class (set in
 * inc/food-insecurity-sections.php) rather than :nth-of-type, since every
 * section on this page shares the same <section> tag -- :nth-of-type counts
 * position among ALL sibling <section>s, not just this class, so it would
 * not reliably land on the right one.
 *
 * Iteration 4 (per Harry's review): "clearly distinct warm cream
 * section... enough top/bottom padding that it reads as a deliberate
 * chapter" -- padding increased from the shared hcfb-xl default to
 * hcfb-2xl, and a restrained green top accent rule added (the same green
 * already used for the Who Experiences list's own accent marks and for
 * every eyebrow's text color sitewide -- not a new color).
 */
body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access {
	background: var(--wp--preset--color--hcfb-cream);
	padding-block: var(--wp--preset--spacing--hcfb-2xl, 6rem);
	border-top: 4px solid var(--wp--preset--color--hcfb-green);
}

@media (max-width: 768px) {
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-who,
	body.hcfb-food-insecurity-experience .hcfb-food-insecurity-access {
		padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
	}
}