/**
 * Senior Impact resource finder.
 *
 * EVERY rule in this file is scoped under `.si-map-app`, and that is load-
 * bearing, not tidiness. Two things on seniorimpact.com were overriding the
 * unscoped version of this stylesheet:
 *
 *   1. An older resource widget ships an inline <style id="si-resource-styles">
 *      that defines `.si-card`, `.si-card__addr`, `.si-card__phones` and more --
 *      the same class names this plugin uses. At equal specificity the later
 *      sheet wins, and it was winning, so the cards rendered with that widget's
 *      flat 10px box instead of anything below.
 *   2. The theme styles `.entry-content h4` as uppercase, weight 900, with
 *      0.14em letter-spacing and a 1.1 line-height -- so every resource name
 *      rendered as a cramped, shouty, all-caps heading.
 *
 * A single extra `.si-map-app` gives every rule here 2 classes, which beats
 * both `.si-card` (1 class) and `.entry-content h4` (1 class + 1 element)
 * outright, regardless of load order. If you add a rule to this file, scope it
 * the same way or it will silently lose.
 *
 * The theme also has to be actively fought on `text-transform`, `letter-spacing`
 * and `font-family`: where this file does not declare them, the theme's values
 * apply. That is why headings and buttons below restate all three.
 *
 * The audience is seniors and their caregivers, which makes several of the
 * choices below functional rather than cosmetic:
 *   - 1.0625rem/17px base, never smaller; sizes in rem so browser zoom works
 *   - 44px minimum hit area on every control (WCAG 2.5.5)
 *   - visible 3px focus ring, never removed
 *   - 4.5:1 contrast minimum on text, 3:1 on interactive borders
 *   - phone numbers are large tap targets, because for 2,447 of these
 *     resources the phone IS the service
 */

.si-map-app {
	/* Type. The site's own heading face is Montserrat, but it is only loaded at
	   400 and 700 -- asking for 600 gets a synthesised faux-bold. So headings
	   use Montserrat at 700 for brand continuity, and everything else uses the
	   platform UI face, which has real weights at every step. Without this the
	   whole widget inherits the theme's bare `sans-serif`, i.e. Arial. */
	--si-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	--si-font-head: "Montserrat", var(--si-font);

	/* Ink. Every value below clears 4.5:1 on white. */
	--si-ink: #16202c;
	--si-ink-soft: #55606e;
	--si-ink-muted: #5c6673;

	/* Lines. --si-line is for interactive boundaries and clears 3:1 (WCAG
	   1.4.11); the softer two are decorative only. */
	--si-line: #6e7784;
	--si-line-mid: #c6ccd4;
	--si-line-soft: #e3e7ec;

	/* Surfaces. */
	--si-bg: #ffffff;
	--si-bg-soft: #f7f8fa;
	--si-bg-sunken: #eef1f5;

	/* Brand ramp. */
	--si-accent: #14507a;
	--si-accent-dark: #0d3452;
	--si-accent-tint: #e8eff6;
	--si-accent-tint-strong: #d6e3ef;

	--si-focus: #b34700;
	--si-warn-bg: #fdf3e2;
	--si-warn-line: #9a6700;
	--si-warn-ink: #7a4f00;

	/* Material-ish radius scale. */
	--si-radius-sm: 8px;
	--si-radius: 12px;
	--si-radius-lg: 16px;
	--si-radius-pill: 999px;

	/* Elevation. Two-layer shadows: a tight contact shadow plus a wide soft
	   one, which is what stops these reading as flat grey boxes. */
	--si-e1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
	--si-e2: 0 2px 4px -1px rgba(16, 24, 40, 0.06), 0 4px 10px -2px rgba(16, 24, 40, 0.10);
	--si-e3: 0 6px 12px -4px rgba(16, 24, 40, 0.08), 0 16px 28px -8px rgba(16, 24, 40, 0.14);

	--si-map-height: 640px;

	/* Offset for the sticky filter panel on desktop. Raise this if the theme
	   has a fixed header the panel would slide underneath. */
	--si-sticky-top: 1.5rem;

	/* ---- full-bleed mode (>= 900px) ------------------------------------- */

	/* Height of the whole app when the map is the page background. The
	   shortcode's container is expected to be full width; this is the one knob
	   for height. Set it to calc(100vh - 90px) when the theme puts a header
	   above the container, the same way --si-sticky-top handles a fixed one. */
	--si-app-height: 100vh;

	/* Inset of the floating column from the map's edges. */
	--si-float-gap: 1.25rem;

	/* Width of the single floating column that holds the search and the
	   results. Everything lives in one column so the map stays visible. */
	--si-panel-w: 24rem;

	/* Pixels of the map's left edge currently covered by the floating panels.
	   Written by si-map.js, and read here to keep on-map controls clear of
	   them. Declared as 0px so the calc() still resolves before the script
	   runs, or if it never does. */
	--si-overlay-inset: 0px;

	box-sizing: border-box;
	color: var(--si-ink);
	background: var(--si-bg);
	font-family: var(--si-font);
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.si-map-app *,
.si-map-app *::before,
.si-map-app *::after {
	box-sizing: inherit;
}

.si-map-app [hidden] {
	display: none !important;
}

/* A single, unmistakable focus style. Never remove this: for a keyboard-only
   user it is the entire sense of place. */
.si-map-app :focus-visible {
	outline: 3px solid var(--si-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ layout */

.si-map-app .si-app-body {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}



/* ------------------------------------------------ search row + advanced ---- */

/* The keyword box and the options toggle share a line. */
.si-map-app .si-search-row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.si-map-app .si-search-row .si-q {
	flex: 1 1 auto;
	min-width: 0;
}

/* Square-ish icon button. 48px to match the form fields beside it, which also
   clears the 44px minimum. The label is visible above 380px and drops to
   icon-only on the narrowest phones, where the row would otherwise wrap. */
.si-map-app .si-adv-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 48px;
	padding: 0 0.85rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--si-accent-dark);
	background: var(--si-bg);
	border: 1.5px solid var(--si-line);
	border-radius: var(--si-radius);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.si-map-app .si-adv-toggle:hover {
	background: var(--si-accent-tint);
	border-color: var(--si-accent);
}

/* Pressed-in look while the panel is open, so the toggle reads as a state and
   not as a button that did nothing. */
.si-map-app .si-adv-toggle[aria-expanded='true'] {
	background: var(--si-accent);
	border-color: var(--si-accent);
	color: #fff;
}

.si-map-app .si-adv-toggle__icon {
	flex: 0 0 auto;
	display: block;
}

.si-map-app .si-advanced {
	margin-bottom: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--si-line-soft);
}

/* The last field inside carries the form's own bottom spacing already. */
.si-map-app .si-advanced > .si-field:last-child {
	margin-bottom: 0;
}

/* On a phone the toggle tightens up rather than the label disappearing, so the
   keyword box keeps a usable width without the control becoming a mystery
   icon. The hit area stays 48px tall throughout. */
@media (max-width: 480px) {
	.si-map-app .si-adv-toggle {
		gap: 0.3rem;
		padding: 0 0.6rem;
		font-size: 0.875rem;
	}

	.si-map-app .si-adv-toggle__icon {
		width: 20px;
		height: 20px;
	}
}

/* The keyword box shrinks to make room, so the label survives all the way down
   to a 375px phone -- worth keeping, because an unlabelled icon is exactly the
   kind of control this audience has to guess at. It only drops below 340px,
   where the input would be too narrow to type in, and the button then holds a
   48px square so it is still a full-size target. */
@media (max-width: 339px) {
	.si-map-app .si-adv-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.si-map-app .si-adv-toggle {
		min-width: 48px;
		padding: 0 0.6rem;
	}
}

/* ------------------------------------------------------- search summary ---- */

/* Shown in place of the form once a search has run: the area and the applied
   filters as plain text, plus the way back into the form. */
.si-map-app .si-summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--si-bg);
	border: 1px solid var(--si-line-soft);
	border-radius: var(--si-radius-lg);
	padding: 0.875rem 1rem;
}

.si-map-app .si-summary__text {
	margin: 0;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--si-ink);
}

.si-map-app .si-summary__area {
	font-weight: 700;
}

/* Applied filters read as a quiet second line under the area. */
.si-map-app .si-summary__filters {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9375rem;
	color: var(--si-ink-soft);
}

.si-map-app .si-summary__edit {
	flex: 0 0 auto;
}

/* Collapsing swaps the form for the summary using the `hidden` attribute, the
   way every other conditional block in this file does -- si-map.js sets both in
   one place. `.si-collapsed` goes on the root as a styling and testing hook
   only; deliberately no display rules hang off it, so there is never a second
   source of truth fighting `hidden`.

   `.si-editing` is the one that does carry a rule: after "Change search" the
   form is open again and the results on screen belong to the previous search,
   so they come off until a new one runs. Without this the reader would be
   composing a new search directly on top of the answer to the old one, and the
   panel would not be the size it was when the page loaded. */
.si-map-app.si-editing .si-results {
	display: none;
}

/* ----------------------------------------------------------------- filters */

.si-map-app .si-filters {
	background: var(--si-bg);
	border: 1px solid var(--si-line-soft);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-e1);
	padding: 1.25rem;
	margin: 0;
}

.si-map-app .si-filters__title {
	margin: 0 0 0.875rem;
	font-family: var(--si-font-head);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--si-ink);
}

.si-map-app .si-field {
	margin-bottom: 0.875rem;
	border: 0;
	padding: 0;
}

.si-map-app .si-field > label,
.si-map-app .si-field legend,
.si-map-app .si-cats__head h3,
.si-map-app .si-inline label {
	display: block;
	font-family: var(--si-font);
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 1rem;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: var(--si-ink);
}

.si-map-app .si-cats__head h3 {
	margin: 0;
	font-size: 1rem;
}

/* Material outlined fields: a real, visible boundary at rest, and a doubled
   accent boundary on focus so the active field is obvious at a glance. */
.si-map-app select,
.si-map-app input[type='search'],
.si-map-app input[type='text'] {
	width: 100%;
	min-height: 48px;
	padding: 0.5rem 0.85rem;
	font: inherit;
	font-size: 1.0625rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--si-ink);
	background: var(--si-bg);
	border: 1.5px solid var(--si-line);
	border-radius: var(--si-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.si-map-app select:hover,
.si-map-app input[type='search']:hover,
.si-map-app input[type='text']:hover {
	border-color: var(--si-ink-soft);
}

.si-map-app select:focus,
.si-map-app input[type='search']:focus,
.si-map-app input[type='text']:focus {
	border-color: var(--si-accent);
	box-shadow: 0 0 0 3px var(--si-accent-tint);
}

.si-map-app input::placeholder {
	color: var(--si-ink-muted);
	opacity: 1;
}

/* Native selects render very differently across platforms and look dated on
   Windows. Replacing the arrow keeps the two dropdowns consistent with the
   rest of the panel. The element stays a real <select>, so keyboard and
   screen-reader behaviour is untouched. */
.si-map-app select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2355606e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 20px 20px;
}

/* Windows high-contrast mode hides background images, which would leave the
   select with no visible affordance. Give the native arrow back there. */
@media (forced-colors: active) {
	.si-map-app select {
		appearance: auto;
		-webkit-appearance: auto;
		-moz-appearance: auto;
		padding-right: 0.85rem;
		background-image: none;
	}
}

.si-map-app .si-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.si-map-app .si-inline > span {
	flex: 1 1 8rem;
}

/* "Type of care or service" and "Clear selection" together are wider than a
   22rem sidebar. Wrapping lets the button drop to its own line instead of both
   of them breaking mid-phrase. */
.si-map-app .si-cats__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	margin-bottom: 0.4rem;
}

.si-map-app .si-cats__head h3 {
	flex: 1 1 auto;
}

/* Slightly smaller than a standalone text button so it shares a line with the
   heading instead of claiming a 44px row of its own. Still a 44px target. */
.si-map-app .si-cats__head .si-link {
	flex: 0 0 auto;
	margin-left: auto;
	margin-right: -0.35rem;
	padding: 0.3rem 0.35rem;
	font-size: 0.9375rem;
}

/* Category list. A sunken tonal surface rather than an outlined box -- it
   reads as a distinct region without adding another hard rectangle. On desktop
   the height comes from the flex rule above; this cap is what mobile and any
   browser without the flex path fall back to. */
.si-map-app .si-cats {
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--si-line-soft);
	border-radius: var(--si-radius);
	background: var(--si-bg-soft);
	padding: 0.25rem;
}

.si-map-app .si-catgroup + .si-catgroup {
	border-top: 1px solid var(--si-line-soft);
}

.si-map-app .si-catgroup__toggle {
	display: flex;
	align-items: center;
	/* Deliberately wide: the chevron needs to read as a separate control cue,
	   not as a character stuck to the front of the heading. */
	gap: 0.85rem;
	width: 100%;
	min-height: 46px;
	padding: 0.4rem 0.6rem;
	font: inherit;
	font-family: var(--si-font);
	font-weight: 600;
	line-height: 1.3;
	/* The theme sets every <button> to uppercase, 0.047em tracking, white. */
	text-transform: none;
	letter-spacing: normal;
	text-align: left;
	color: var(--si-ink);
	background: none;
	border: 0;
	border-radius: var(--si-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Material state layer. */
.si-map-app .si-catgroup__toggle:hover {
	background-color: var(--si-accent-tint);
}

.si-map-app .si-catgroup__toggle[aria-expanded='true'] {
	background-color: var(--si-bg-sunken);
}

.si-map-app .si-catgroup__toggle::before {
	content: '';
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.15rem;
	border-right: 2px solid var(--si-ink-soft);
	border-bottom: 2px solid var(--si-ink-soft);
	transform: rotate(-45deg);
	transition: transform 0.18s ease;
}

.si-map-app .si-catgroup__toggle[aria-expanded='true']::before {
	transform: rotate(45deg);
}

/* Count pill: quiet at rest, still legible. */
.si-map-app .si-catgroup__count {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 0.1rem 0.5rem;
	border-radius: var(--si-radius-pill);
	background: var(--si-bg-sunken);
	font-weight: 600;
	color: var(--si-ink-soft);
	font-size: 0.9375rem;
}

.si-map-app .si-catgroup__toggle:hover .si-catgroup__count,
.si-map-app .si-catgroup__toggle[aria-expanded='true'] .si-catgroup__count {
	background: var(--si-bg);
}

/* Indented to line up under the group title, not under its chevron. */
.si-map-app .si-catgroup__items {
	margin: 0 0 0.4rem;
	padding: 0 0.35rem 0 1.6rem;
	list-style: none;
}

.si-map-app .si-cat {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 44px;
	padding: 0.3rem 0.4rem;
	border-radius: var(--si-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.si-map-app .si-cat:hover {
	background-color: var(--si-accent-tint);
}

.si-map-app .si-cat input {
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0.2rem 0 0;
	accent-color: var(--si-accent);
	cursor: pointer;
}

.si-map-app .si-cat__name {
	flex: 1 1 auto;
}

.si-map-app .si-cat__count {
	color: var(--si-ink-muted);
	font-size: 0.9375rem;
	white-space: nowrap;
	padding-top: 0.05rem;
}

.si-map-app .si-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--si-line-soft);
}

.si-map-app .si-filters__actions .si-btn {
	flex: 1 1 auto;
}

/* ----------------------------------------------------------------- buttons */

.si-map-app .si-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	min-width: 48px;
	padding: 0.6rem 1.35rem;
	font: inherit;
	font-family: var(--si-font);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-accent-dark);
	background: var(--si-bg);
	/* --si-line, not a softer grey: the boundary of a control has to clear 3:1
	   against its background (WCAG 1.4.11), and a fashionable hairline does
	   not. */
	border: 1.5px solid var(--si-line);
	border-radius: var(--si-radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.06s ease;
}

.si-map-app .si-btn:hover {
	background: var(--si-accent-tint);
	border-color: var(--si-accent);
	color: var(--si-accent-dark);
}

.si-map-app .si-btn:active {
	transform: translateY(1px);
}

.si-map-app .si-btn--primary {
	color: #fff;
	background: var(--si-accent);
	border-color: var(--si-accent);
	box-shadow: var(--si-e1);
}

.si-map-app .si-btn--primary:hover {
	color: #fff;
	background: var(--si-accent-dark);
	border-color: var(--si-accent-dark);
	box-shadow: var(--si-e2);
}

/* Tighter than a primary action but still a 44px target -- the padding comes
   down, the hit area does not. Used by "Change search" in the summary, which
   has to sit on one line beside the text it belongs to. */
.si-map-app .si-btn--small {
	min-height: 44px;
	padding: 0 0.9rem;
	font-size: 0.9375rem;
}

.si-map-app .si-link {
	font: inherit;
	font-family: var(--si-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-accent-dark);
	background: none;
	border: 0;
	padding: 0.35rem 0.5rem;
	margin-right: -0.5rem;
	min-height: 44px;
	border-radius: var(--si-radius-pill);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.si-map-app .si-link:hover {
	background: var(--si-accent-tint);
	color: var(--si-accent-dark);
}

/* --------------------------------------------------------------- map + list */

/* The overlay column holding the search and the results. Below 900px this is
   just a stack in normal flow; the full-bleed block at the end of the file
   lifts it over the map. (It replaced .si-results-pane, which wrapped the map
   together with the results and no longer exists.) */
.si-map-app .si-overlay {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

.si-map-app .si-map-wrap {
	position: relative;
}

.si-map-app .si-map {
	height: var(--si-map-height);
	min-height: 320px;
	/* "Show on map" scrolls the map into view. Without this it lands flush
	   against the top of the window, and underneath a fixed theme header.
	   Reuses --si-sticky-top, which is already the "how much chrome is pinned
	   to the top of this site" knob. */
	scroll-margin-top: var(--si-sticky-top);
	border: 1px solid var(--si-line-soft);
	border-radius: var(--si-radius-lg);
	box-shadow: var(--si-e2);
	background: var(--si-bg-sunken);
}

/* ---- zoom control -------------------------------------------------------
   Moved to the bottom right in si-map.js, because Leaflet's default top-left
   position is underneath the floating filter panel.

   Leaflet ships these at 26px, or 30px on a touch device. This widget's stated
   floor is a 44px hit area on every control (WCAG 2.5.5), and a pair of 26px
   squares is exactly the kind of target the audience here struggles with, so
   they are sized up to match everything else. These rules beat Leaflet's own
   because .si-map-app adds a class and si-map.css loads after leaflet.css. */

.si-map-app .leaflet-control-zoom {
	border: 0;
	border-radius: var(--si-radius);
	box-shadow: var(--si-e3);
	overflow: hidden;
}

.si-map-app .leaflet-control-zoom a {
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--si-ink);
	background: var(--si-bg);
	border: 0;
	border-radius: 0;
}

.si-map-app .leaflet-control-zoom a + a {
	border-top: 1px solid var(--si-line-soft);
}

.si-map-app .leaflet-control-zoom a:hover {
	background: var(--si-accent-tint);
	color: var(--si-accent-dark);
}

/* Leaflet suppresses the outline on its controls; put it back. */
.si-map-app .leaflet-control-zoom a:focus-visible {
	outline: 3px solid var(--si-focus);
	outline-offset: -3px;
	z-index: 1;
}

/* Panning does not silently rewrite the results. Content changing underneath
   someone mid-drag is disorienting, and worse with a screen reader, so moving
   the map offers this button instead. Floats above the map as an elevated
   pill, the way Material treats an on-surface action. */
/* Centred on the part of the map you can actually see. --si-overlay-inset is
   how many pixels of the left edge the floating panels are covering, written
   by si-map.js; half of it shifts this to the middle of the remainder. It is
   0px when nothing floats, which is every width below 900px. */
.si-map-app .si-search-area {
	position: absolute;
	left: calc(50% + (var(--si-overlay-inset, 0px) / 2));
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 500;
	background: var(--si-bg);
	box-shadow: var(--si-e3);
}

.si-map-app .si-search-area:hover {
	background: var(--si-bg);
	border-color: var(--si-accent);
	transform: translateX(-50%);
}

.si-map-app .si-search-area:active {
	transform: translateX(-50%) translateY(1px);
}

/* The results gate. Until the user narrows past a bare Area selection the list
   is not shown -- only the status line, which reports what is on the map and
   says how to get a list. Applies at every width: this is about what has been
   asked for, not about how wide the window is.

   The status line itself is never hidden. It is the aria-live region that
   announces result counts, and someone using a screen reader needs to hear the
   count whether or not the list is on screen. */
.si-map-app:not(.si-has-list) .si-list-block,
.si-map-app:not(.si-has-list) .si-more {
	display: none !important;
}

/* Result summary. Quiet by default; becomes a full notice when the JS toggles
   .si-notice on for an error or an empty result. */
.si-map-app .si-status {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--si-ink-soft);
}

.si-map-app .si-status.si-notice {
	color: var(--si-ink);
}

.si-map-app .si-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	/* Explicit, not the implicit auto track: the cards are inline-size query
	   containers and contribute no intrinsic width, so an auto track would
	   collapse them. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.625rem;
}

.si-map-app .si-list-block + .si-list-block {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--si-line-soft);
}

.si-map-app .si-list-heading {
	margin: 0 0 0.2rem;
	font-family: var(--si-font-head);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--si-ink);
}

.si-map-app .si-list-note {
	margin: 0 0 0.85rem;
	color: var(--si-ink-soft);
	font-size: 1rem;
}

/* The same class is also appended as an <li> inside a list to say "showing 25
   of 302", where it must not look like a card. */
.si-map-app .si-list > .si-list-note {
	margin: 0.25rem 0 0;
	padding: 0.25rem 0.15rem;
	font-size: 0.9375rem;
	color: var(--si-ink-muted);
}

/* ------------------------------------------------------------------ cards */

.si-map-app .si-card {
	position: relative;
	/* Makes the card a query container so the category tag can respond to the
	   card's own width. Safe only because .si-list pins its track to
	   minmax(0, 1fr): with inline-size containment the card contributes no
	   intrinsic width, so a content-sized track would collapse. */
	container-type: inline-size;
	border: 1px solid var(--si-line-soft);
	border-radius: var(--si-radius-lg);
	padding: 0.9rem 1.1rem 0.85rem;
	background: var(--si-bg);
	box-shadow: var(--si-e1);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.si-map-app .si-card:hover {
	border-color: var(--si-line-mid);
	box-shadow: var(--si-e2);
}

/* The accent bar is reserved for the card the map is currently pointing at.
   On every card it was noise; on one card it is an answer.

   Drawn as an inset shadow, not a positioned pseudo-element. A 4px-wide box
   cannot reproduce a 16px corner -- the radius gets clamped to half its width
   and the bar renders as a lozenge that bulges past the card's curve. An inset
   shadow is clipped by the element's own border-radius, so it follows the
   corner exactly however the radius later changes. */
.si-map-app .si-card:target,
.si-map-app .si-card.is-active {
	border-color: var(--si-focus);
	background: #fffaf5;
	box-shadow: inset 4px 0 0 var(--si-focus), var(--si-e2);
}

/* The theme renders .entry-content h4 as uppercase weight-900 with 0.14em
   tracking and a 1.105 line-height. All five properties are restated here. */
.si-map-app .si-card__name {
	margin: 0 0 0.1rem;
	font-family: var(--si-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--si-ink);
}

.si-map-app .si-card__division {
	margin: 0 0 0.25rem;
	color: var(--si-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* The category is metadata, not an action. As a blue pill it read as a sibling
   of the phone button; it is now a grey, square-cornered tag, so shape AND
   colour separate it from anything tappable. */
.si-map-app .si-card__cat {
	display: inline-block;
	margin: 0.1rem 0 0.4rem;
	padding: 0.15rem 0.55rem;
	border-radius: var(--si-radius-sm);
	background: var(--si-bg-sunken);
	color: var(--si-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.si-map-app .si-card > p:has(> .si-badge) {
	display: inline-block;
	margin: 0.1rem 0 0.4rem;
}

/* Parked in the card's top-right corner. Taken out of flow, so the name and
   division need a gutter reserved or a long resource name runs underneath it.

   Keyed to the CARD's width, not the window's. The card is as wide as the
   results column, which depends on the sidebar and the theme's content width,
   so a viewport media query guesses at the wrong number. Below this the card
   cannot spare the gutter and the tag stays in the normal flow -- which is
   also what a browser without container queries or :has() gets.

   NOTE: a container query measures the container's CONTENT box, not its border
   box. This card carries 2.2rem of horizontal padding plus 2px of border, so a
   453px-wide card queries as 415.8px. Set at 26rem this rule silently did
   nothing, missing by 0.2px. Every threshold here is the visible card width
   minus roughly 37px. */
@container (min-width: 24rem) {
	.si-map-app .si-card__cat {
		position: absolute;
		top: 0.85rem;
		right: 1.1rem;
		max-width: 10rem;
		margin: 0;
		/* Ragged edge on the left, flush against the card's right edge. A
		   wrapped two-line category then reads as one block instead of two
		   lines drifting away from the corner it is anchored to. */
		text-align: right;
	}

	.si-map-app .si-card:has(> .si-card__cat) .si-card__name,
	.si-map-app .si-card:has(> .si-card__cat) .si-card__division {
		padding-right: 11rem;
	}
}

/* A wide card can afford a wider tag, which keeps the long category names off
   a third line. 40rem of content box is roughly a 677px card. */
@container (min-width: 40rem) {
	.si-map-app .si-card__cat {
		max-width: 14rem;
	}

	.si-map-app .si-card:has(> .si-card__cat) .si-card__name,
	.si-map-app .si-card:has(> .si-card__cat) .si-card__division {
		padding-right: 15rem;
	}
}

.si-map-app .si-card__addr {
	display: block;
	margin: 0 0 0.5rem;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--si-ink-soft);
}

.si-map-app .si-card__dist {
	font-weight: 700;
	color: var(--si-accent-dark);
	white-space: nowrap;
}

/* Phone numbers get to be large and obvious: for the 2,447 resources with no
   address, calling is the entire interaction. Rendering them as filled tonal
   chips makes the 44px tap target look deliberate instead of merely tall. */
.si-map-app .si-card__phones {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.3rem;
}

.si-map-app .si-card__phones li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
	margin: 0;
}

.si-map-app .si-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.2rem 0.95rem;
	border-radius: var(--si-radius-pill);
	background: var(--si-accent-tint);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--si-accent-dark);
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.si-map-app a.si-phone:hover {
	background: var(--si-accent-tint-strong);
	color: var(--si-accent-dark);
	box-shadow: var(--si-e1);
}

/* A non-dialable vanity number ("1-888-AARP-NOW") is a <span>, not a link. It
   must not look pressable. */
.si-map-app span.si-phone {
	background: var(--si-bg-sunken);
	color: var(--si-ink);
	font-weight: 600;
}

.si-map-app .si-phone__label,
.si-map-app .si-phone__ext {
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--si-ink-soft);
}

/* Actions sit below a hairline as outlined pills rather than a row of
   underlined text. The pill boundary, not colour alone, is what marks them as
   interactive, and each one is a 44px target. */
.si-map-app .si-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.75rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--si-line-soft);
}

.si-map-app .si-card__links a,
.si-map-app .si-card__links button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0.95rem;
	font-family: var(--si-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-accent-dark);
	background: var(--si-bg);
	border: 1.5px solid var(--si-line);
	border-radius: var(--si-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.si-map-app .si-card__links a:hover,
.si-map-app .si-card__links button:hover {
	background: var(--si-accent-tint);
	border-color: var(--si-accent);
	color: var(--si-accent-dark);
	text-decoration: none;
}

/* A card with no phones puts the hairline straight under the address, which
   reads as a stray line. */
.si-map-app .si-card__addr:last-child,
.si-map-app .si-card__phones:last-child {
	margin-bottom: 0;
}

.si-map-app .si-badge {
	display: inline-block;
	padding: 0.15rem 0.65rem;
	border-radius: var(--si-radius-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	background: var(--si-warn-bg);
	color: var(--si-warn-ink);
	border: 1px solid var(--si-warn-line);
	cursor: help;
}

.si-map-app .si-notice {
	padding: 0.9rem 1.1rem;
	border-radius: var(--si-radius);
	border: 1px solid var(--si-line-mid);
	background: var(--si-bg-soft);
	margin: 0 0 1rem;
}

.si-map-app .si-notice--warn {
	background: var(--si-warn-bg);
	border-color: var(--si-warn-line);
	color: var(--si-ink);
}

/* Tonal "load more" -- present but subordinate to Search. Keeps the outlined
   button's border so the control boundary still clears 3:1. */
.si-map-app .si-more {
	margin-top: 1rem;
	width: 100%;
	background: var(--si-accent-tint);
}

.si-map-app .si-more:hover {
	background: var(--si-accent-tint-strong);
}

/* --------------------------------------------------------------- map bits */

/* Approximate locations render as a translucent disc rather than a pin,
   because a pin would assert a street address the data does not support. */
.si-map-app .si-approx-marker {
	background: rgba(179, 71, 0, 0.28);
	border: 2px solid #b34700;
	border-radius: 50%;
}

.si-map-app .si-popup h4 {
	margin: 0 0 0.3rem;
	font-family: var(--si-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: var(--si-ink);
}

.si-map-app .si-popup p {
	margin: 0 0 0.35rem;
	color: var(--si-ink-soft);
}

.si-map-app .si-popup p:last-child {
	margin-bottom: 0;
}

.si-map-app .si-popup a {
	color: var(--si-accent-dark);
	font-weight: 700;
}

.si-map-app .leaflet-container {
	font-family: var(--si-font);
	font-size: 1rem;
}

/* Leaflet's own chrome, brought in line with the rest of the panel. */
.si-map-app .leaflet-popup-content-wrapper {
	border-radius: var(--si-radius-sm);
	box-shadow: var(--si-e3);
}

.si-map-app .leaflet-bar {
	border: 0;
	border-radius: var(--si-radius-sm);
	box-shadow: var(--si-e2);
}

.si-map-app .leaflet-control-zoom a {
	text-transform: none;
	letter-spacing: normal;
	color: var(--si-ink);
	background: var(--si-bg);
}

/* The + and - are two stacked buttons in one bar. Rounding all four corners of
   each -- which is what a single border-radius here does -- makes them read as
   two separate chips with a seam between them. Only the outer corners of the
   stack get the curve: the top button rounds its top, the bottom button rounds
   its bottom, and the edges where they meet stay square so they connect. */
.si-map-app .leaflet-bar a:first-child {
	border-radius: var(--si-radius-sm) var(--si-radius-sm) 0 0;
}

.si-map-app .leaflet-bar a:last-child {
	border-radius: 0 0 var(--si-radius-sm) var(--si-radius-sm);
}

.si-map-app .leaflet-bar a:only-child {
	border-radius: var(--si-radius-sm);
}

/* ---------------------------------------------------- motion and contrast */

/* ------------------------------------------------------- full-bleed desktop */

/* The map becomes the background of the whole app and the panels float on top
   of it, Google-Maps style. Only the positioning changes -- the document order
   is untouched, so a screen reader and a keyboard user still meet the filters
   and then the results list, and the map keeps its aria-hidden. Nothing became
   reachable only by using the map.

   The container this shortcode sits in is expected to be full width; the app
   supplies its own height via --si-app-height. */
@media (min-width: 900px) {
	.si-map-app {
		position: relative;
		height: var(--si-app-height);
		overflow: hidden;
		border-radius: 0;
	}

	.si-map-app .si-app-body {
		display: block;
		height: 100%;
		gap: 0;
	}

	/* The map fills the app and sits beneath everything else. */
	.si-map-app .si-map-wrap {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.si-map-app .si-map {
		height: 100%;
		min-height: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* ONE floating column, not two. Search sits on top, results beneath it, and
	   the column is capped to the app height so it can never outgrow the
	   viewport -- the bug the old sticky rules were written to fix.

	   Filters take their natural height but may shrink and scroll; the results
	   absorb whatever is left. That way a long result list scrolls inside the
	   column instead of pushing the search box off the top. */
	.si-map-app .si-overlay {
		position: absolute;
		top: var(--si-float-gap);
		left: var(--si-float-gap);
		z-index: 2;
		width: var(--si-panel-w);
		max-height: calc(var(--si-app-height) - (var(--si-float-gap) * 2));
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		pointer-events: none;
	}

	/* The column itself is click-through so the map can be dragged in the gaps
	   between its panels; the panels themselves are not. */
	.si-map-app .si-overlay > * {
		pointer-events: auto;
	}

	.si-map-app .si-filters {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: var(--si-e3);
	}

	.si-map-app .si-summary {
		flex: 0 0 auto;
		box-shadow: var(--si-e3);
	}

	.si-map-app .si-results {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--si-bg);
		border: 1px solid var(--si-line-soft);
		border-radius: var(--si-radius-lg);
		box-shadow: var(--si-e3);
		padding: 1.25rem;
	}

	/* Browse state: no narrowing filter yet, so the results panel is just the
	   status line and should not claim a full column's height. */
	.si-map-app:not(.si-has-list) .si-results {
		flex: 0 0 auto;
	}

	.si-map-app:not(.si-has-list) .si-status {
		margin: 0;
	}

	/* Line the on-map controls up with the floating column's inset instead of
	   Leaflet's default 10px, so the corners read as one grid. */
	.si-map-app .leaflet-bottom.leaflet-right > * {
		margin-right: var(--si-float-gap);
		margin-bottom: var(--si-float-gap);
	}
}

/* Below 900px nothing floats. The layout stays the stacked one that already
   works: filters, then map, then results, all in normal document flow. A
   floating panel at phone width would cover the map completely. */
@media (max-width: 899px) {
	.si-map-app .si-app-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.si-map-app *,
	.si-map-app *::before {
		transition: none !important;
		animation: none !important;
	}

	.si-map-app .si-btn:active {
		transform: none;
	}

	.si-map-app .si-search-area,
	.si-map-app .si-search-area:hover,
	.si-map-app .si-search-area:active {
		transform: translateX(-50%);
	}
}

@media (prefers-contrast: more) {
	.si-map-app {
		--si-line-soft: #595959;
		--si-line-mid: #3f4650;
		--si-ink-soft: #333333;
		--si-ink-muted: #333333;
	}

	.si-map-app .si-card,
	.si-map-app .si-filters,
	.si-map-app .si-map {
		box-shadow: none;
	}

	/* Dropping elevation must not also drop the active card's accent bar --
	   it now lives in the same property. */
	.si-map-app .si-card:target,
	.si-map-app .si-card.is-active {
		box-shadow: inset 4px 0 0 var(--si-focus);
	}
}

@media print {
	.si-map-app .si-map-wrap,
	.si-map-app .si-filters__actions,
	.si-map-app .si-more,
	.si-map-app .si-search-area {
		display: none !important;
	}

	/* Undo full-bleed mode. Without this the app is clipped to one viewport
	   height and the floating results panel is positioned out of the flow, so
	   a print run produces a single cropped page. */
	.si-map-app {
		position: static;
		height: auto;
		overflow: visible;
	}

	.si-map-app .si-app-body,
	.si-map-app .si-overlay {
		display: block;
		height: auto;
	}

	.si-map-app .si-overlay,
	.si-map-app .si-filters,
	.si-map-app .si-results {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		overflow: visible;
		box-shadow: none;
	}

	.si-map-app .si-card {
		break-inside: avoid;
		box-shadow: none;
		border-color: #999;
	}

	.si-map-app .si-phone {
		background: none;
		padding: 0;
		min-height: 0;
	}
}