/*
 * Shared Find Food shell. Every rule in this file is scoped under either
 * body.hcfb-find-food-shell or body.hcfb-find-food-near-me-experience
 * (added in functions.php only on the Find Food templates — see
 * hcfb_is_find_food_experience_mode_template() there), so nothing here can
 * affect the homepage, the earlier Find Food hub
 * (templates/template-find-food.html, a separate template/body class), or
 * any other page.
 *
 * Revision (UX simplification packet): the earlier three-mode tab-nav rules
 * this file used to hold ([hcfb_find_food_mode_nav]) are removed — that
 * selector was not approved (see this packet's report). Two parts remain:
 *   1. .hcfb-ffu-* — small additions for [hcfb_find_food_unified], the ONE
 *      primary Find Food experience at /find-food/. Its base panel AND
 *      result-card styling both come from hcfb-agency-portal's own approved
 *      agency-portal.css (.hcfb-food-finder*, .hcfb-location-card*,
 *      .hcfb-map-popup, .hcfb-location-card__action*; enqueued directly by
 *      functions.php on this template) — this file only adds what that
 *      stylesheet doesn't have yet: the mobile-inclusion/transit checkboxes,
 *      the compact legend, field hints, and the small pantry-vs-mobile kind
 *      badge on cards/popups.
 *   2. .hcfb-ffc-* — the earlier "All food near me" combined map
 *      ([hcfb_find_food_combined_map]), left as-is at /find-food/near-me/
 *      (route kept, no longer linked from primary navigation).
 *
 * Uses only the existing approved HCFB design tokens (theme.json): navy
 * #262760, orange #f78d22, cream #faf5ec — no new palette introduced.
 */

/* ---------------------------------------------------------------------- */
/* 1. Unified finder additions (checkbox, quiet link, compact legend)      */
/* ---------------------------------------------------------------------- */

.hcfb-ffu-status-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;
	min-width: 0;
}

/* Filter-panel density pass: hcfb-agency-portal's own panel padding/gap
   (assets/css/agency-portal.css) is tuned for a 3-row field grid; reduced
   here (~20-25%) now that this panel also carries the compact options row
   below, so the whole panel reads calmer without touching that plugin's own
   file or any other page that reuses it.

   Visual-refinement pass: replaces that plugin's plain gray panel
   (--hcfb-surface-alt) with a warm HCFB-orange-tinted background here only
   (scoped to .hcfb-ffu, the unified finder -- the standalone
   [hcfb_food_finder] shortcode keeps its own unchanged gray panel). Inputs
   stay white (agency-portal.css's own input/select background rule,
   untouched) so they read as clean white fields floating on the tinted
   panel; label/text colors are untouched navy/ink, unaffected by a
   background-only change, so contrast is unchanged. */
.hcfb-ffu .hcfb-food-finder__controls {
	padding: .78rem;
	gap: .65rem;
	background: linear-gradient(180deg, #fff6ec 0%, #fdecd8 100%);
	border-color: #f3d6b0;
}

/* Brand-alignment pass: the primary "Find food" CTA moves from
   hcfb-agency-portal.css's own local, non-global orange
   (--hcfb-orange: #f26522, scoped to .hcfb-food-finder/.hcfb-partner-portal
   only -- a different, locally-introduced shade from theme.json's real
   global brand orange #f78d22) to the true global HCFB navy token
   (var(--wp--preset--color--hcfb-navy), #262760 -- the same value the site
   header/homepage buttons already use) with white text, so the button no
   longer competes visually with orange's other meaning here (Mobile
   Distributions / selected-marker accents). Hover/active darken the same
   navy via `filter: brightness()` rather than hard-coding a second shade --
   the identical convention already established for the site's own donate
   button (assets/css/public-shell.css). Scoped to .hcfb-ffu only: the
   standalone [hcfb_food_finder] shortcode's own orange primary button is
   unchanged. Specificity/`!important` needed to beat that plugin's own
   `.hcfb-food-finder .hcfb-button--primary` rule (also !important). */
.hcfb-ffu .hcfb-food-finder__actions .hcfb-button--primary {
	background: var(--wp--preset--color--hcfb-navy) !important;
	color: #fff !important;
}

.hcfb-ffu .hcfb-food-finder__actions .hcfb-button--primary:hover,
.hcfb-ffu .hcfb-food-finder__actions .hcfb-button--primary:focus-visible {
	background: var(--wp--preset--color--hcfb-navy) !important;
	filter: brightness(1.15);
}

.hcfb-ffu .hcfb-food-finder__actions .hcfb-button--primary:active {
	background: var(--wp--preset--color--hcfb-navy) !important;
	filter: brightness(1.3);
}

/* Final Find Food filter-panel shape (this packet): "Who is it for?" is
   removed from the visible finder entirely (see find-food-shell.php), so
   this panel now has just two real fields left -- Availability, County --
   sharing one row, each getting an even 2-column span for "Availability
   prioritized" (it comes first) rather than leaving columns empty. The
   transit checkbox and Find food/Reset actions now share their OWN row side
   by side (a new "transit"/"actions" split) instead of each spanning full
   width on separate rows, matching Harry's approved desktop layout:
     Search                      Use my location
     Availability                County
     Show public transit options  Find food / Reset
   grid-area assignment itself isn't width-dependent -- only which
   grid-template-areas string is active is -- so .hcfb-ffu-options-row gets
   "transit" unconditionally below, and the >1050px vs <=1050px blocks each
   define a grid-template-areas string using that name (plus the plugin's
   own "county"/"availability"/"actions" names) in the new arrangement. DOM
   order (find-food-shell.php) matches this visual order too, so keyboard
   Tab order is never out of sync with what's visually first. */
.hcfb-ffu-options-row {
	grid-area: transit;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.75rem;
	row-gap: .4rem;
}

@media (min-width: 1051px) {
	.hcfb-ffu .hcfb-food-finder__controls {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"search search search geolocation"
			"availability availability county county"
			"transit transit actions actions";
	}
}

/* Matches hcfb-agency-portal.css's own <=1050px single-column collapse
   breakpoint exactly, restated here only to reorder the same named rows
   (never touching that plugin file) -- County/Availability keep their own
   existing grid-area names/behavior everywhere else on the page; this media
   query only ever affects .hcfb-ffu. At this width transit and
   actions go back to separate full-width rows (a single-column grid gives
   every named area its own row automatically), matching Harry's requested
   390px stack: Search, Use my location, Availability, County, Transit, Find
   food/Reset. */
@media (max-width: 1050px) {
	.hcfb-ffu .hcfb-food-finder__controls {
		grid-template-areas:
			"search"
			"geolocation"
			"availability"
			"county"
			"transit"
			"actions";
	}
}

.hcfb-ffu-field-hint {
	margin-left: .35rem;
	color: var(--hcfb-muted, #8a8a94);
	font-size: .72rem;
	font-weight: 500;
	font-style: italic;
}

/* Open Now toggle (replaces the old Any availability/Open now <select> --
   see find-food-shell.php's own comment on this field). `width: 100%`
   matches the exact footprint the old <select> had (agency-portal.css's
   blanket select rule is `width: 100% !important`, which never applied to
   buttons) -- this is what keeps the control filling its field slot at
   every width, including the <=1050px single-column stack, with no dead
   space left where the dropdown used to be. Inactive state deliberately
   reuses the same quiet, bordered "secondary" look as
   .hcfb-button--secondary (not the primary CTA's orange/navy fill) so it
   reads as an optional filter, not the main "Find food" action. Active
   state reuses the exact same border+tint+checkmark convention as the
   quick-filter chips' own `.is-active` state just below (never color
   alone) -- keyed off the real `aria-pressed` attribute JS already
   maintains (updateOpenNowButtonState(), hcfb-find-food-unified.js) rather
   than a second class, since there's only ever one of these buttons.
   Selectors are qualified with the ".hcfb-food-finder" ancestor for the
   exact same reason documented on .hcfb-ffu-legend-item below: that
   plugin's own blanket ".hcfb-food-finder button" rule (border/padding,
   !important) has higher specificity than a single class alone and loads
   after this file, so it would otherwise win regardless of source order. */
.hcfb-food-finder .hcfb-ffu-open-now-toggle {
	width: 100% !important;
	border: 1px solid var(--hcfb-border-strong) !important;
	background: var(--hcfb-surface) !important;
	color: var(--wp--preset--color--hcfb-navy) !important;
}

.hcfb-food-finder .hcfb-ffu-open-now-toggle:hover {
	border-color: var(--wp--preset--color--hcfb-orange) !important;
}

.hcfb-food-finder .hcfb-ffu-open-now-toggle[aria-pressed="true"] {
	border: 2px solid var(--wp--preset--color--hcfb-navy) !important;
	background: #fdecd8 !important;
	padding: calc(.75rem - 1px) calc(1.1rem - 1px) !important;
}

.hcfb-food-finder .hcfb-ffu-open-now-toggle[aria-pressed="true"]::after {
	content: "\2713";
	margin-left: .4rem;
	font-weight: 800;
}

/* A simple, native, compact checkbox row -- deliberately NOT a card/button/
   tile. Two separate inherited-from-agency-portal.css problems, both
   confirmed via a computed-style audit at 1440 before writing this fix:
   1. `.hcfb-field { display: grid !important; ... }` stacked each label's
      children (checkbox, then text) into separate grid rows.
   2. `.hcfb-food-finder input, .hcfb-food-finder select, ... { display:
      block !important; width: 100% !important; min-height: 50px !important;
      padding: .72rem .85rem !important; border: 1px solid
      var(--hcfb-border-strong) !important; background: var(--hcfb-surface)
      !important; ... }` (agency-portal.css ~L210-230) is a blanket rule for
      this panel's *text/select* fields that also matches any bare
      `<input>` inside .hcfb-food-finder -- including these checkboxes. The
      audit confirmed the checkbox input's actual computed box was
      321.6px × 50px (min-height: 50px winning over any smaller `height`
      because min-height takes precedence, and every prior override here
      lost outright because it lacked !important to beat that rule's
      !important declarations) -- that's the real cause of the oversized
      squares, not the grid-stacking fix from the previous pass, which only
      ever addressed problem 1. Every property below matches one the
      blanket rule sets with !important, so each needs !important here too,
      scoped to only this one selector -- .hcfb-field and the plugin's own
      form controls elsewhere are completely untouched. */
.hcfb-ffu-mobile-toggle {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: .45rem !important;
	margin: 0 !important;
	font-weight: 700;
	font-size: .88rem !important;
}

.hcfb-ffu-mobile-toggle input[type="checkbox"] {
	display: inline-block !important;
	width: 1.15rem !important;
	height: 1.15rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 1.15rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: none !important;
	box-shadow: none !important;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--hcfb-navy);
}

/* Compact inline legend -- replaces the earlier large boxed Map Key.
   Accessible text + shape-distinct swatch, never color alone. Each entry is
   its own chip (border + background + padding + rounded shape) with
   generous spacing around it, rather than plain inline text, so the key
   stays easy to scan and wraps cleanly onto multiple lines at any width. */
.hcfb-ffu-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	font-size: .84rem;
}

.hcfb-ffu-legend-label {
	font-weight: 800;
	color: var(--wp--preset--color--hcfb-navy);
}

/* The label sits in .hcfb-ffu-legend directly; the quick-filter buttons
   themselves are generated into this one wrapper div (buildQuickFilterButtons(),
   hcfb-find-food-unified.js), built once, not per-render -- it needs its own
   flex/wrap so the chips space and wrap independently of the label. */
[data-hcfb-ffu-legend-items] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
}

/* Pet food's own role="group" (find-food-shell.php) -- a SEPARATE
   accessible group from [data-hcfb-ffu-legend-items] above so it never
   reads as a Type-of-help option, but styled as the exact same flex/wrap
   row so its one pill visually continues that row immediately after Hot
   meals, sharing the same gap value as both .hcfb-ffu-legend (its own
   parent) and [data-hcfb-ffu-legend-items] (its sibling). */
[data-hcfb-ffu-additional-filters] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
}

/* Pet food pill's paw icon. .hcfb-ffu-legend-item is already
   `display:inline-flex; align-items:center; gap:.45rem;` (~7px, the same
   value every other pill's own icon+text pairing already uses) -- that
   existing gap is reused here rather than duplicated/overridden, so this
   is the only rule needed: fixed size (restrained, ~18px, not the 15px
   colored-tile swatch size used elsewhere), vertical centering inherited
   from the button's own flex row, and currentColor so it tracks the
   button's text color in both the normal (navy) and .is-active (still
   navy, but see that rule's own comment) states without a second color
   rule to keep in sync. flex: 0 0 auto keeps it from ever compressing
   when the pill wraps at narrow widths. */
.hcfb-ffu-pet-food-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* The "Availability may vary" notice now lives on its own line beneath the
   whole filter-pill row (find-food-shell.php), shown only while Pet food
   is active -- distinct from .hcfb-ffu-field-hint's original inline-beside-
   a-control use (that rule's margin-left doesn't fit a standalone line), so
   this overrides margin/adds top spacing without touching that base rule's
   other (still-shared) typography. */
.hcfb-ffu-pet-food-notice {
	margin: .5rem 0 0 !important;
}

/* Real <button>s, not clickable divs/spans -- quick filters, not just a
   display legend. hcfb-agency-portal.css's own blanket
   ".hcfb-food-finder button" rule (its Find food/Reset action-button base
   style: min-height 50px, 9px corners, transparent border, all !important)
   loads AFTER this file and has HIGHER specificity than a single class
   (1 class + 1 element beats 1 class alone) as well as !important, so it
   wins over a plain ".hcfb-ffu-legend-item" rule regardless of source
   order. Every rule below is qualified with the ".hcfb-food-finder"
   ancestor (matching the real DOM -- these buttons live inside that same
   section) specifically to clear that higher bar; scoped tightly to this
   one class so the actual Find food/Reset buttons are completely
   unaffected. Layers on hover/active/focus-visible/pressed states after the
   reset. Only one category may be active at a time (aria-pressed tracked in
   JS); active state never relies on color alone -- a stronger border, a
   subtle tint, and a checkmark all combine with the (still visible) icon +
   text label. */
.hcfb-food-finder .hcfb-ffu-legend-item {
	display: inline-flex !important;
	align-items: center;
	gap: .45rem;
	min-height: 2.5rem !important;
	margin: 0 !important;
	padding: .55rem .8rem .55rem .6rem !important;
	border: 1px solid var(--hcfb-border, #d8d3c6) !important;
	border-radius: 999px !important;
	background: var(--hcfb-surface, #fff);
	box-shadow: none !important;
	font: inherit !important;
	font-weight: 700 !important;
	font-size: .84rem !important;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--hcfb-navy);
	white-space: nowrap;
	cursor: pointer;
}

.hcfb-food-finder .hcfb-ffu-legend-item--all {
	padding: .55rem .95rem !important;
}

.hcfb-food-finder .hcfb-ffu-legend-item:hover {
	border-color: var(--wp--preset--color--hcfb-orange) !important;
}

.hcfb-food-finder .hcfb-ffu-legend-item:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-navy);
	outline-offset: 2px;
}

.hcfb-food-finder .hcfb-ffu-legend-item.is-active {
	border: 2px solid var(--wp--preset--color--hcfb-navy) !important;
	background: #fdecd8;
	padding: calc(.55rem - 1px) calc(.8rem - 1px) calc(.55rem - 1px) calc(.6rem - 1px) !important;
}

.hcfb-food-finder .hcfb-ffu-legend-item--all.is-active {
	padding: calc(.55rem - 1px) calc(.95rem - 1px) !important;
}

.hcfb-food-finder .hcfb-ffu-legend-item.is-active::after {
	content: "\2713";
	margin-left: .1rem;
	font-weight: 800;
	color: var(--wp--preset--color--hcfb-navy);
}

/* Pet food card note: matches .hcfb-location-card__detail's own
   font-size/line-height/color (agency-portal.css) so it reads as part of
   the same restrained details block, but WITHOUT that class's 2-column
   icon+text CSS grid -- this note deliberately has no icon (see this
   packet's "do not add a new icon" instruction), and reusing the grid
   class without a matching icon-column child collapsed the text into the
   22px icon column and wrapped it one word per line. A plain block element
   already lays out correctly as a sibling inside
   .hcfb-location-card__details' own `display:grid; gap:.5rem;` (one
   implicit row per child), so no grid/flex of its own is needed here. */
.hcfb-ffu-pet-food-note {
	margin: 0 !important;
	color: var(--hcfb-ink) !important;
	font-size: .94rem !important;
	line-height: 1.4 !important;
}

/* One unified "Get directions" treatment across every unified Find Food
   context -- pantry card, mixed-program card, Sheet Mobile Distribution
   card, and map popup -- all four already shared the exact same
   .hcfb-location-card.hcfb-location-card__action--primary markup/class, so
   a single .hcfb-ffu-scoped rule safely covers all of them (popups render
   inside the Leaflet map container, itself a descendant of .hcfb-ffu, so no
   separate .hcfb-map-popup-qualified duplicate is needed).

   Audit found two real inconsistencies, both fixed here:
   1. Color: agency-portal.css's own .hcfb-location-card__action--primary
      sets background/border-color from that stylesheet's LOCAL scoped
      --hcfb-orange (#f26522, declared on .hcfb-food-finder/.hcfb-partner-
      portal) -- a different, non-global shade from theme.json's real brand
      orange (var(--wp--preset--color--hcfb-orange), #f78d22). Computed
      background was rgb(242, 101, 34) = #f26522 in all four contexts before
      this fix. This rule switches the unified finder (only) to the true
      global token.
   2. Font-weight: cards computed 750 (agency-portal.css's own generic
      ".hcfb-location-card a" link rule -- class+element specificity beats
      ".hcfb-location-card__action--primary" alone, both !important) while
      the popup computed 800 (that link rule doesn't apply there, so the
      base ".hcfb-location-card__action" 800 survived unchallenged) -- the
      one real font-weight mismatch between contexts. Standardized to 800
      everywhere, matching the untouched base value.
   Every other property (font-size .84rem, padding .55rem .78rem, min-height
   40px, line-height 1.1, border-radius 8px, no underline) was ALREADY
   identical across all four contexts, so those are restated here only to
   keep this one rule the single source of truth going forward, not because
   they needed changing.

   Accessibility fix (final pre-commit audit): white text on this orange
   measured 2.38:1 (Axe, WCAG AA needs 4.5:1 for normal-size text -- this
   button's text is 13.44px/800 weight, too small/light-weight to qualify
   for the 3:1 large-text exception, and the task explicitly said not to
   rely on that exception anyway). Per Harry's instruction, the orange
   itself is the true global brand token and is NOT to be darkened/replaced
   -- instead the foreground becomes the approved HCFB navy
   (var(--wp--preset--color--hcfb-navy), #262760). Measured 5.71:1 on the
   resting state, comfortably clearing AA.

   Hover/active no longer use `filter: brightness()` (darkening) -- with a
   fixed dark-navy foreground, DARKENING the orange background shrinks the
   luminance gap between the two colors (background approaching navy's own
   low luminance) rather than growing it, measured down to ~4.6:1 (hover)
   and ~3.7:1 (active) when tried -- the opposite of what's needed.
   LIGHTENING the background instead grows that gap: hover #f9a03d measures
   6.57:1, active #fab04f measures 7.39:1, both comfortably clear of 4.5:1
   with real margin, while still reading as clear, distinct hover/active
   feedback (a lighter/highlighted state, not merely a hue shift). Focus-
   visible keeps a clearly visible ring (agency-portal.css's own already-
   approved outline treatment) so keyboard users never rely on the color
   change alone.

   Scoped to .hcfb-ffu only: the standalone [hcfb_food_finder] shortcode's
   own Get directions button (still the local orange, white text,
   unaffected by this fix) and the Mobile Distribution page keep their
   existing, separately-approved styling, completely untouched.

   Base-state color needs one extra qualifying class: agency-portal.css
   has its own .hcfb-location-card .hcfb-location-card__action--primary
   { color: #fff !important } (added to defeat .hcfb-location-card a's
   teal link color) -- same two-class specificity as a plain
   .hcfb-ffu .hcfb-location-card__action--primary rule, and agency-
   portal.css loads after this file, so it was winning the resting-state
   color back to white (verified live: computed color stayed rgb(255,
   255, 255) even though this file's source correctly said navy).
   Repeating .hcfb-location-card here (three classes) beats it outright
   regardless of load order, without touching the shared agency-portal.css
   rule the standalone shortcode still needs. */
.hcfb-ffu .hcfb-location-card .hcfb-location-card__action--primary {
	background: var(--wp--preset--color--hcfb-orange) !important;
	border-color: var(--wp--preset--color--hcfb-orange) !important;
	color: var(--wp--preset--color--hcfb-navy) !important;
	font-size: .84rem !important;
	font-weight: 800 !important;
	padding: .55rem .78rem !important;
	min-height: 40px !important;
	line-height: 1.1 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
}

.hcfb-ffu .hcfb-location-card__action--primary:hover,
.hcfb-ffu .hcfb-location-card__action--primary:focus-visible {
	background: #f9a03d !important;
	color: var(--wp--preset--color--hcfb-navy) !important;
}

.hcfb-ffu .hcfb-location-card__action--primary:active {
	background: #fab04f !important;
	color: var(--wp--preset--color--hcfb-navy) !important;
}

/* Result cards for the unified finder now reuse hcfb-agency-portal's own
   approved .hcfb-location-card / .hcfb-map-popup / .hcfb-location-card__action
   system directly (agency-portal.css, enqueued on this template) instead of
   the smaller, weaker .hcfb-ffc-card treatment this renderer used before --
   including its existing .is-selected styling (border/shadow/lift, no new
   color) for the card<->map selection state. This file only adds the one
   thing that system doesn't already have: a small "kind" badge distinguishing
   Pantry & Food Program from Mobile Distribution results, secondary to the
   result name -- shown on both cards and popups. */
.hcfb-ffu-card-kind {
	margin: 0 0 .2rem !important;
	font-size: .72rem !important;
	font-weight: 850 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
}

/* Accessibility fix (final pre-commit audit): the card's location-name
   heading moved from <h3> to <h2> in hcfb-find-food-unified.js's own
   renderCard() (this page has one <h1> and no <h2> before the cards, so
   <h3> skipped a level -- Axe heading-order). This rule copies
   agency-portal.css's own ".hcfb-location-card h3" properties verbatim
   onto ".hcfb-location-card h2" so the visual size/weight/color is
   unchanged, scoped to .hcfb-ffu only -- the standalone [hcfb_food_finder]
   shortcode's own cards still use <h3> via that shared rule, untouched. */
.hcfb-ffu .hcfb-location-card h2 {
	margin: 0 !important;
	color: var(--hcfb-navy) !important;
	font-size: 1.18rem !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: -.01em !important;
}

/* Card Visual Consistency Pass 1: both card kinds share the same category-
   label treatment now -- the approved `hcfb-green-text` token (theme.json;
   the same contrast-safe darkened green already used for small/bold label
   text on About/Impact, Food Insecurity, Partner, and the prominent-sections
   badges -- never the raw brand `hcfb-green`, which fails contrast at
   2.05:1/1.89:1 per docs/COLOR_USAGE_RULES.md). Previously pantry used navy
   and mobile also used navy (see the removed comment below) -- neither was
   actually green, which is what read as "two different card systems" to a
   visual review. No new color introduced. */
.hcfb-ffu-card-kind--pantry {
	color: var(--wp--preset--color--hcfb-green-text, #627425) !important;
}

/* Accessibility fix (final pre-commit audit): orange text on the card's
   white/light background measured 2.38:1 (Axe, WCAG AA needs 4.5:1) -- the
   same fail as the Get Directions button above, same reason (small, bold
   text, not eligible for the large-text exception). Card Visual Consistency
   Pass 1 moves the label text to the same hcfb-green-text token the pantry
   label above now uses (already contrast-verified for this exact weight/
   size elsewhere in the theme), replacing the navy that Pass 1 was asked to
   unify away from -- retaining the thin orange underline accent below keeps
   this label recognizably associated with HCFB orange / Mobile
   Distributions without putting orange back into text that has to pass a
   contrast check. Meaning is still carried by the visible words ("Scheduled
   mobile distribution" / "Mobile food program"), never by the orange accent
   alone. */
.hcfb-ffu-card-kind--mobile {
	color: var(--wp--preset--color--hcfb-green-text, #627425) !important;
	padding-bottom: .15rem;
	border-bottom: 2px solid var(--wp--preset--color--hcfb-orange);
}

/* Card Visual Consistency Pass 1: Scheduled Mobile Distribution's top-right
   badge, reusing agency-portal.css's own .hcfb-location-card__status base
   shape (pill/border/size) so it sits in the exact same visual slot as the
   pantry/program Open Now badge -- these four new status values are unique
   to mobile events (derived from event date/time, never from Vivery's
   schedule statuses), so they're scoped here rather than added to the
   shared agency-portal.css used by unrelated Agency Portal features. Colors
   deliberately reuse the SAME existing meanings the pantry badge already
   established rather than inventing a new palette: in_progress = the exact
   open_now green, today = the exact opens_later amber (something to note,
   not urgent), tomorrow/upcoming = the exact closed_today neutral gray
   (informational). */
.hcfb-location-card__status--in_progress {
	border-color: #99d5af;
	background: #eaf8ef;
	color: #176a38;
}

.hcfb-location-card__status--today {
	border-color: #f2cc8b;
	background: #fff7e8;
	color: #85520b;
}

.hcfb-location-card__status--tomorrow,
.hcfb-location-card__status--upcoming {
	border-color: #d5dce2;
	background: #f4f6f8;
	color: #536170;
}

/* Multi-Service Location Card Pass: compact, non-interactive chips answering
   "what kinds of help can I get here" -- a different question from the
   green category label above it ("what kind of result is this"). Only
   rendered by renderCard() when a location has more than one applicable
   category (Harry's preference B, confirmed against the actual staging
   data: the large majority of pantry locations are single-category, so a
   chip on every card read as redundant/repetitive). Deliberately smaller
   and flatter than .hcfb-ffu-legend-item's clickable filter buttons (no
   border/hover/focus states -- these are informational, not controls) but
   reuses that exact same .hcfb-ffu-legend-swatch icon+color system, so a
   chip's color always matches its own quick-filter button and map marker. */
.hcfb-location-card__services {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .1rem 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hcfb-ffu-service-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0 !important;
	padding: .18rem .55rem .18rem .4rem !important;
	border: 0 !important;
	border-radius: 999px;
	background: var(--hcfb-surface-alt, #f4f6f8);
	color: var(--hcfb-navy);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
}

/* Multi-Service Map Marker Pass: inside the Leaflet popup specifically
   (never the card, which has plenty of its own width), cap the chip row's
   width so two chips wrap onto their own lines rather than sitting side by
   side and becoming the single widest line of popup content -- Leaflet
   sizes a popup to its widest content line, and a pre-existing minor popup
   overflow at 320px viewports (present even for a single-service popup
   with zero chips, confirmed before this pass) would otherwise grow
   further once chips are added. This does not touch Leaflet's own
   minWidth/maxWidth JS config, nor the card's identical chip markup. */
.hcfb-map-popup .hcfb-location-card__services {
	max-width: 210px;
}

/* Compact program list with an optional short access/enrollment note per
   program -- deliberately simpler than agency-portal.css's own
   .hcfb-program-list (built for that shortcode's fuller schedule-disclosure
   cards) so this stays a quiet, scannable line instead of another wall of
   detail. Access notes are short, factual sentences already composed in
   PROGRAM_TYPE_WHO_MAP (agency-portal.js) -- never additional claims. */
.hcfb-ffu-program-list {
	display: grid !important;
	gap: .4rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hcfb-ffu-program-list li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--hcfb-ink) !important;
	font-size: .88rem !important;
	font-weight: 700 !important;
}

.hcfb-ffu-access-note {
	display: block;
	margin-top: .1rem;
	color: var(--hcfb-muted, #5a5a66);
	font-size: .8rem;
	font-weight: 500;
}

.hcfb-ffu-legend-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.hcfb-ffu-legend-swatch svg {
	width: 9px;
	height: 9px;
	fill: #fff;
	transform: none;
}

.hcfb-ffu-legend-swatch--pantry {
	background: var(--wp--preset--color--hcfb-navy);
	border-radius: 3px;
}

.hcfb-ffu-legend-swatch--mobile {
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.hcfb-ffu-legend-swatch--mobile svg {
	transform: rotate(45deg);
}

.hcfb-ffu-legend-swatch--senior {
	background: var(--wp--preset--color--hcfb-green);
}

.hcfb-ffu-legend-swatch--senior svg {
	fill: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffu-legend-swatch--family {
	background: var(--hcfb-teal, #166b73);
}

.hcfb-ffu-legend-swatch--hotmeals {
	background: #a66a00;
}

/* ---------------------------------------------------------------------- */
/* 2. Combined "All food near me" map (unchanged, /find-food/near-me/)     */
/* ---------------------------------------------------------------------- */

body.hcfb-public-shell.hcfb-find-food-near-me-experience #hcfb-primary-content .wp-block-post-content {
	max-width: none;
	width: 100%;
}

.hcfb-ffc {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 100%;
}

.hcfb-ffc__intro .hcfb-ffc__eyebrow {
	margin: 0 0 .4rem;
	color: var(--wp--preset--color--hcfb-orange);
	font-size: .8rem;
	font-weight: 850;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.hcfb-ffc__intro h1 {
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc__summary {
	max-width: 62ch;
	color: var(--hcfb-muted, #5a5a66);
}

.hcfb-ffc__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 1rem;
	padding: 1.1rem;
	background: var(--wp--preset--color--hcfb-cream);
	border-radius: 14px;
}

.hcfb-ffc__field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-weight: 700;
	font-size: .88rem;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc__field-spacer {
	display: block;
	height: 1.2em;
}

.hcfb-ffc__control-wrap input,
.hcfb-ffc__control-wrap select {
	padding: .6rem .75rem;
	border: 1.5px solid var(--hcfb-border, #d8d3c6);
	border-radius: 8px;
	font: inherit;
	min-width: 12rem;
}

.hcfb-ffc__actions {
	display: flex;
	gap: .6rem;
}

.hcfb-ffc-button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .65rem 1.1rem;
	border-radius: 8px;
	border: 2px solid var(--wp--preset--color--hcfb-navy);
	font-weight: 800;
	cursor: pointer;
}

.hcfb-ffc-button--primary {
	color: #fff;
	background: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc-button--secondary,
.hcfb-ffc-button--geolocation {
	color: var(--wp--preset--color--hcfb-navy);
	background: #fff;
}

.hcfb-ffc-status {
	margin: 0;
	color: var(--hcfb-muted, #5a5a66);
	font-weight: 600;
}

.hcfb-ffc-status--location:empty {
	display: none;
}

.hcfb-ffc__summary-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hcfb-ffc__view-toggle {
	display: inline-flex;
	border: 2px solid var(--wp--preset--color--hcfb-navy);
	border-radius: 999px;
	overflow: hidden;
}

.hcfb-ffc-view-button {
	padding: .5rem 1.1rem;
	color: var(--wp--preset--color--hcfb-navy);
	background: #fff;
	border: 0;
	font-weight: 800;
	cursor: pointer;
}

.hcfb-ffc-view-button.is-active {
	color: #fff;
	background: var(--wp--preset--color--hcfb-navy);
}

/* Accessible legend: text label + shape-distinct swatch, never color alone. */
.hcfb-ffc__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	padding: .75rem 1rem;
	background: #fff;
	border: 1.5px solid var(--hcfb-border, #d8d3c6);
	border-radius: 10px;
}

.hcfb-ffc__legend-label {
	margin: 0;
	font-weight: 850;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc__legend-item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc__legend-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.hcfb-ffc__legend-swatch--pantry {
	background: var(--wp--preset--color--hcfb-navy);
	border-radius: 4px;
}

.hcfb-ffc__legend-swatch--mobile {
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.hcfb-ffc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.hcfb-ffc__panel {
	background: #fff;
	border: 1.5px solid var(--hcfb-border, #d8d3c6);
	border-radius: 14px;
	overflow: hidden;
}

.hcfb-ffc__map {
	width: 100%;
	height: 560px;
}

.hcfb-ffc__results {
	max-height: 560px;
	overflow-y: auto;
	padding: 1rem;
	display: grid;
	gap: .85rem;
}

.hcfb-ffc-card {
	padding: .9rem;
	border: 1.5px solid var(--hcfb-border, #d8d3c6);
	border-radius: 10px;
}

.hcfb-ffc-card__kind {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .4rem;
	font-size: .72rem;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hcfb-ffc-card__kind--pantry { color: var(--wp--preset--color--hcfb-navy); }
.hcfb-ffc-card__kind--mobile { color: var(--wp--preset--color--hcfb-orange); }

.hcfb-ffc-card__kind-icon {
	display: inline-block;
	width: 12px;
	height: 12px;
}

.hcfb-ffc-card__kind--pantry .hcfb-ffc-card__kind-icon {
	background: var(--wp--preset--color--hcfb-navy);
	border-radius: 3px;
}

.hcfb-ffc-card__kind--mobile .hcfb-ffc-card__kind-icon {
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.hcfb-ffc-card h3 {
	margin: 0 0 .3rem;
	color: var(--wp--preset--color--hcfb-navy);
	font-size: 1.05rem;
}

.hcfb-ffc-card p {
	margin: 0 0 .3rem;
	color: var(--hcfb-muted, #5a5a66);
}

.hcfb-ffc-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .4rem;
}

.hcfb-ffc-card__action {
	display: inline-flex;
	color: #fff !important;
	background: var(--wp--preset--color--hcfb-orange);
	padding: .5rem .8rem;
	border-radius: 8px;
	font-weight: 800;
	text-decoration: none !important;
}

/* Transit directions: secondary action -- outline, not filled, so the
   primary Get directions action keeps visual priority (per this packet's
   action-hierarchy instruction). Same "Transit directions" text label
   everywhere it appears; never icon-only. */
.hcfb-ffc-card__action--secondary,
.hcfb-ffc-map-popup__button--secondary {
	color: var(--wp--preset--color--hcfb-navy) !important;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--hcfb-navy);
}

/* Leaflet map pin shapes -- shape AND color differ, never color alone.
   position: relative added by Multi-Service Map Marker Pass so the "+1"
   badge below can anchor to this wrapper -- purely additive, changes
   nothing about the existing pantry/mobile pin layout itself. */
.hcfb-ffc-map-pin-wrap { position: relative; background: transparent; border: 0; }

.hcfb-ffc-map-pin--pantry {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--wp--preset--color--hcfb-navy);
	border: 3px solid #fff;
	border-radius: 6px;
	box-shadow: 0 5px 13px rgba(0, 0, 0, .28);
}

.hcfb-ffc-map-pin--mobile {
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
	background: var(--wp--preset--color--hcfb-orange);
	border: 4px solid #fff;
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 5px 13px rgba(0, 0, 0, .28);
	transform: rotate(-45deg);
}

.hcfb-ffc-map-pin--mobile .hcfb-ffc-map-pin__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(45deg);
}

.hcfb-ffc-map-pin__icon svg {
	width: 14px;
	height: 14px;
	fill: #fff;
}

/* Use My Location Map Experience: the "you are here" marker. Deliberately
   a plain circle, not a pin/teardrop shape -- never confusable with any
   category or Mobile marker (all of which are pins or the orange
   teardrop). Color is a plain "device location" blue used nowhere else on
   this map, deliberately NOT any existing HCFB category color -- every
   other color in the marker system (navy, green, teal, brown, orange) is
   already a specific category's meaning, and teal in particular is also
   Children & families' own pin color, so reusing any of them here would
   read as "this is that category," not "this is you." A soft static halo
   (box-shadow, no animation/motion) signals "this is you, approximately"
   without implying precise GPS accuracy. */
.hcfb-ffc-user-location-marker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.hcfb-ffc-user-location-marker__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #1a73e8;
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px rgba(26, 115, 232, .25), 0 2px 6px rgba(0, 0, 0, .35);
}

/* Multi-Service Map Marker Pass: the "+1" badge signaling a second
   applicable Find Food category at this same physical location. Sits as a
   sibling of the pin span (never a child of the rotated mobile teardrop,
   which this is never applied to anyway -- categoryMarkerIcon() only ever
   builds this markup for a non-mobile category). Small enough not to
   noticeably enlarge the 30px marker footprint at typical map zoom, but
   the real "+1" text (never a bare dot) is still legible at that size --
   white border separates it from the pin itself and from any adjacent
   overlapping marker at dense zoom levels. Navy, deliberately NOT
   hcfb-orange: orange already means "Mobile distributions" everywhere else
   on this same map/legend, and a pantry pin can never actually have a
   mobile chip (suppressPublicViveryMobilePrograms() upstream), so an orange
   badge here would misleadingly suggest a mobile connection that isn't
   real. Navy is this page's neutral/general-UI accent, tied to no single
   category. Always paired with real text on the marker's own
   screen-reader label plus the full category list in the popup -- never
   the only way this fact is communicated. */
.hcfb-ffc-map-pin__multi-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 2px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--wp--preset--color--hcfb-navy);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Approved five-category program marker system. Shape stays the same
   rounded square already used for pantry-kind results (only Mobile
   distributions keeps its own distinct teardrop shape/orientation above) --
   shape AND icon AND color all differ per category, never color alone.
   Colors: navy/orange are theme.json's own global brand tokens
   (--wp--preset--color--hcfb-navy #262760 / --hcfb-orange #f78d22, already
   used above); teal reuses the exact hex hcfb-agency-portal's card system
   already established for this exact Find Food interface (--hcfb-teal
   #166b73, agency-portal.css); warm gold has no existing brand/theme.json
   token (only "Green" and "Orange" are the two brand colors in the 2-page
   guide; the theme's own hcfb-dev-notice #fff3cd is explicitly documented as
   "not a brand color") so this is a new, accessible, harmonious value
   (#a66a00 -- picked for >=3:1 contrast with a white icon: 4.49:1 measured).
   Senior uses the brand green fill (--wp--preset--color--hcfb-green
   #a2c13d) but a NAVY icon, not white: docs/COLOR_USAGE_RULES.md's own
   measured contrast table documents white-on-green at 2.05:1 (fails even
   large-text 3:1) and navy-on-green at 6.64:1 (passes), and "hcfb-green
   remains the only green used for fills, icons" with navy as the paired
   foreground -- this marker follows that same already-established rule
   rather than shipping a white icon that would nearly disappear. */
.hcfb-ffc-map-pin--senior {
	background: var(--wp--preset--color--hcfb-green);
}

.hcfb-ffc-map-pin--senior .hcfb-ffc-map-pin__icon svg {
	fill: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc-map-pin--family {
	background: var(--hcfb-teal, #166b73);
}

.hcfb-ffc-map-pin--hotmeals {
	background: #a66a00;
}

.hcfb-ffc-map-popup h3 {
	margin: 0 0 .3rem;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-ffc-map-popup__kind {
	margin: 0 0 .3rem;
	font-size: .7rem;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hcfb-orange);
}

.hcfb-ffc-map-popup__button {
	display: inline-flex;
	margin-top: .5rem;
	padding: .5rem .75rem;
	color: #fff !important;
	background: var(--wp--preset--color--hcfb-navy);
	border-radius: 8px;
	text-decoration: none !important;
	font-weight: 850;
}

/* ---------------------------------------------------------------------- */
/* Responsive: stack map/list, no horizontal overflow at 390px             */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.hcfb-ffc__layout {
		grid-template-columns: 1fr;
	}
	.hcfb-ffc__map {
		height: 380px;
	}
	.hcfb-ffc__results {
		max-height: none;
	}
}

@media (max-width: 600px) {
	.hcfb-ffc__controls {
		flex-direction: column;
		align-items: stretch;
	}
	.hcfb-ffc__control-wrap input,
	.hcfb-ffc__control-wrap select {
		min-width: 0;
		width: 100%;
	}
	.hcfb-ffc__actions {
		flex-direction: column;
	}
	.hcfb-ffc-button {
		justify-content: center;
	}
}