/*
 * Ruhler Community Resource Directory -- public stylesheet.
 *
 * Enqueued only where it is needed (see
 * CommunityResourceDirectory\Presentation\Assets): on an individual
 * location page, and on a page/post containing the
 * [crd_locator_finder] shortcode. Every selector here is scoped under
 * .crd-locator-finder or .crd-locator-single, both collision-resistant,
 * plugin-specific class names, so nothing here can leak into the
 * surrounding theme, other plugins' markup, or ordinary posts/pages.
 *
 * Custom properties are declared on the two root wrapper classes (not
 * globally on :root) so they never leak either. Colors that aren't
 * carrying a specific status meaning use CSS system colors/currentColor
 * as neutral fallbacks -- these already track the surrounding theme's
 * (and the visitor's OS/browser) light or dark mode automatically,
 * without assuming any particular theme's own custom properties exist.
 * No external fonts, frameworks, or icon libraries are loaded.
 *
 * Token names below follow docs/PRODUCT_DESIGN_SYSTEM.md §§4-6. Every
 * value here is the exact value already in use before the token
 * refactor -- this file introduces names, it does not change any
 * rendered value.
 */

.crd-locator-finder,
.crd-locator-single {
	/* Structural colors (design system §4.3) */
	--crd-text: inherit;
	--crd-text-muted: currentColor;
	--crd-border: color-mix(in srgb, currentColor 20%, transparent);
	--crd-finder-surface: transparent;
	--crd-card-surface: var(--crd-surface-color);
	--crd-surface-muted: color-mix(in srgb, currentColor 5%, transparent);
	--crd-selection-accent: var(--crd-focus-ring);
	--crd-focus-ring: currentColor;
	--crd-control-surface: Canvas;
	--crd-control-text: CanvasText;
	--crd-primary-surface: CanvasText;
	--crd-primary-text: Canvas;

	/* Status colors (design system §4.1) */
	--crd-status-open: color-mix(in srgb, currentColor 70%, #1a7f37);
	--crd-status-opens-later: color-mix(in srgb, currentColor 70%, #9a6700);
	--crd-status-closed: color-mix(in srgb, currentColor 70%, #b42318);
	--crd-status-unavailable: color-mix(in srgb, currentColor 85%, #57606a);

	/* Spacing scale (design system §5) */
	--crd-space-1: 0.25rem;
	--crd-space-2: 0.5rem;
	--crd-space-3: 0.75rem;
	--crd-space-4: 1rem;
	--crd-space-5: 1.5rem;
	--crd-space-6: 2rem;
	--crd-space-8: 3rem;

	/* Borders, radii (design system §6) */
	--crd-radius-sm: 0.25rem;
	--crd-radius-md: 0.5rem;
	--crd-radius-pill: 999px;
	--crd-border-width: 1px;
	--crd-border-width-emphasis: 2px;
	--crd-focus-width: var(--crd-border-width-emphasis);
	--crd-focus-offset: 2px;
	--crd-control-min-size: 2.75rem;

	/* Theme-adaptive component surface and restrained state transitions */
	--crd-surface-color: color-mix(in srgb, currentColor 4%, transparent);
	--crd-transition-fast: 150ms ease-in-out;

	max-width: 60rem;
	margin: 0 auto;
	box-sizing: border-box;
	color: var(--crd-text);
}

.crd-locator-finder {
	/* Lets the integrated map/list results workspace (see
	   .crd-locator-finder__results below) respond to this component's
	   own rendered width, not the viewport -- correct in a narrow
	   sidebar or a multi-column theme layout the same as it is at any
	   viewport size, and correct independently for each shortcode
	   instance if more than one appears on a page. */
	container-type: inline-size;
	container-name: crd-locator-finder;
	background: var(--crd-finder-surface);
}

.crd-locator-single {
	max-width: 42rem;
	padding-block: var(--crd-space-4);
}

.crd-locator-finder *,
.crd-locator-finder *::before,
.crd-locator-finder *::after,
.crd-locator-single *,
.crd-locator-single *::before,
.crd-locator-single *::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
	.crd-locator-finder *,
	.crd-locator-single * {
		transition: none !important;
		animation: none !important;
	}
}

.crd-locator-finder a:focus-visible,
.crd-locator-single a:focus-visible,
.crd-locator-finder button:focus-visible,
.crd-locator-single button:focus-visible,
.crd-locator-finder input:focus-visible,
.crd-locator-single input:focus-visible,
.crd-locator-finder select:focus-visible,
.crd-locator-single select:focus-visible,
.crd-locator-finder summary:focus-visible,
.crd-locator-single summary:focus-visible {
	outline: var(--crd-focus-width) solid var(--crd-focus-ring);
	outline-offset: var(--crd-focus-offset);
}

.crd-locator-finder a,
.crd-locator-single a {
	text-underline-offset: 0.15em;
}

/* -- Shared: status text (never color alone) ---------------------------- */

.crd-locator-status {
	display: inline-flex;
	align-items: center;
	gap: var(--crd-space-1);
	font-weight: 600;
	margin-block: 0;
	line-height: 1.4;
}

.crd-locator-status svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.crd-locator-status--open_now { color: var(--crd-status-open); }
.crd-locator-status--closed_today { color: var(--crd-status-closed); }
.crd-locator-status--opens_later { color: var(--crd-status-opens-later); }
.crd-locator-status--hours_unavailable { color: var(--crd-status-unavailable); }

/* -- Shared: service-category badges ------------------------------------ */

.crd-locator-badge-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--crd-space-2);
}

.crd-locator-badge {
	display: inline-block;
	border: 1px solid var(--crd-border);
	border-radius: var(--crd-radius-pill);
	padding: var(--crd-space-1) var(--crd-space-2);
	font-size: 0.85em;
	line-height: 1.6;
	background: var(--crd-surface-color);
}

/* -- Shared: address ------------------------------------------------------ */

.crd-locator-address {
	display: flex;
	align-items: flex-start;
	gap: var(--crd-space-1);
	font-style: normal;
	line-height: 1.6;
}

.crd-locator-address svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	margin-top: 0.2em;
}

/* -- Shared: Call / Visit website actions ------------------------------- */

.crd-locator-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--crd-space-2);
	margin-block: var(--crd-space-2);
}

.crd-locator-action {
	display: inline-flex;
	align-items: center;
	gap: var(--crd-space-1);
	border: 1px solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	padding: var(--crd-space-2) var(--crd-space-4);
	text-decoration: none;
	max-width: 100%;
	min-block-size: var(--crd-control-min-size);
	line-height: 1.35;
	word-break: normal;
	transition: background-color var(--crd-transition-fast), border-color var(--crd-transition-fast);
}

.crd-locator-action--phone .crd-locator-action__value {
	white-space: nowrap;
	unicode-bidi: isolate;
}

.crd-locator-action svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

.crd-locator-action:hover,
.crd-locator-action:focus-visible {
	background: var(--crd-surface-color);
}

/* -- Shared: weekly hours ------------------------------------------------- */

.crd-locator-hours-list {
	display: grid;
	grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
	column-gap: var(--crd-space-5);
	margin: 0;
}

.crd-locator-hours-list dt {
	font-weight: 600;
	padding-block: var(--crd-space-2);
	border-block-end: var(--crd-border-width) solid var(--crd-border);
}

.crd-locator-hours-list dd {
	margin: 0;
	padding-block: var(--crd-space-2);
	border-block-end: var(--crd-border-width) solid var(--crd-border);
}

.crd-locator-hours-empty {
	margin: 0;
	padding: var(--crd-space-4);
	border-radius: var(--crd-radius-sm);
	background: var(--crd-surface-muted);
}

/* -- Shared: schedule-exceptions notice ---------------------------------- */

.crd-locator-exceptions {
	border: 1px solid var(--crd-border);
	border-left-width: 4px;
	border-radius: var(--crd-radius-md);
	padding: var(--crd-space-3) var(--crd-space-4);
	background: var(--crd-surface-color);
}

.crd-locator-exceptions-list {
	list-style: none;
	margin: var(--crd-space-2) 0 0;
	padding: 0;
	display: grid;
	gap: var(--crd-space-2);
}

/* -- Shared: card / surface -------------------------------------------------- */

.crd-locator-surface {
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	padding: var(--crd-space-5);
	background: var(--crd-surface-color);
}

/* =========================================================================
   Individual location page (.crd-locator-single)
   ========================================================================= */

.crd-locator-single__back-link {
	display: inline-block;
	margin-bottom: var(--crd-space-4);
}

.crd-locator-single__name {
	margin-top: 0;
}

.crd-locator-single__section {
	margin-block: var(--crd-space-5);
}

.crd-locator-single__section h2 {
	margin-block: 0 var(--crd-space-4);
}

.crd-locator-single__summary {
	display: grid;
	gap: var(--crd-space-5);
}

@media (min-width: 640px) {
	.crd-locator-single__summary {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.crd-locator-single .crd-locator-hours-list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.crd-locator-single .crd-locator-hours-list dt {
		padding-block-end: 0;
		border-block-end: 0;
	}

	.crd-locator-single .crd-locator-hours-list dd {
		padding-block-start: 0;
		padding-block-end: var(--crd-space-3);
	}
}

/* =========================================================================
   Public directory list (.crd-locator-finder)
   ========================================================================= */

.crd-locator-finder__heading {
	margin-top: 0;
}

.crd-locator-finder__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--crd-space-4) var(--crd-space-5);
	align-items: flex-start;
	margin-bottom: var(--crd-space-5);
	padding: var(--crd-space-5);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	background: var(--crd-surface-muted);
}

/* Primary group: search is the toolbar's main action, given the most
   width and first position (design system §10). A single full-width
   child (the search field, label+input+button together) so its own
   height is driven only by that field's content, not stray wrapping. */
.crd-locator-finder__controls-primary {
	display: flex;
	flex: 2 1 20rem;
}

/* Secondary group: service filter, Open Now, and Clear filters read as
   one visually secondary cluster next to the primary search group --
   a grouping change only, per design system §10. */
.crd-locator-finder__controls-secondary {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr) auto auto;
	align-items: flex-end;
	gap: var(--crd-space-3);
	flex: 1 1 20rem;
}

.crd-locator-finder__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.crd-locator-finder__field--search {
	width: 100%;
}

/* Search input and its submit button share one row and one comfortable
   height: default flex stretch makes the button match the input's
   height exactly, rather than the browser's own, shorter default
   button sizing. */
.crd-locator-finder__search-row {
	display: flex;
	align-items: stretch;
	gap: var(--crd-space-2);
}

.crd-locator-finder__field label {
	font-weight: 600;
	font-size: 0.9em;
}

.crd-locator-finder__field select {
	min-block-size: var(--crd-control-min-size);
	padding: var(--crd-space-2) var(--crd-space-3);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-sm);
	background: var(--crd-control-surface);
	color: var(--crd-control-text);
	font: inherit;
	width: 100%;
}

.crd-locator-finder__select-wrap {
	position: relative;
	color: var(--crd-control-text);
}

.crd-locator-finder__select-wrap::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--crd-space-3);
	inline-size: 0.65em;
	block-size: 0.4em;
	background: currentColor;
	clip-path: polygon(0 0, 50% 65%, 100% 0, 100% 35%, 50% 100%, 0 35%);
	transform: translateY(-50%);
	pointer-events: none;
}

.crd-locator-finder__service-filter {
	appearance: none;
	padding-inline-end: calc(var(--crd-space-6) + var(--crd-space-1));
}

.crd-locator-finder__search-input {
	min-block-size: var(--crd-control-min-size);
	padding: var(--crd-space-2) var(--crd-space-3);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-sm);
	background: var(--crd-control-surface);
	color: var(--crd-control-text);
	font: inherit;
	flex: 1 1 0%;
	min-width: 6rem;
}

/* Its own rule (not a change to the shared .crd-locator-action links
   used elsewhere for Call/Visit website) so the search button never
   grows/shrinks, never wraps its label, and matches the input's own
   font -- native <button> elements don't inherit font by default the
   way <a> elements already do. */
.crd-locator-finder__search-submit {
	flex: 0 0 auto;
	min-block-size: var(--crd-control-min-size);
	padding: var(--crd-space-2) var(--crd-space-5);
	border: var(--crd-border-width) solid var(--crd-primary-surface);
	border-radius: var(--crd-radius-sm);
	background: var(--crd-primary-surface);
	color: var(--crd-primary-text);
	font: inherit;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--crd-transition-fast);
}

.crd-locator-finder__search-submit:hover {
	opacity: 0.85;
}

.crd-locator-finder__field--checkbox {
	flex-direction: row;
	align-items: center;
	gap: var(--crd-space-2);
}

/* A fixed-service instance's smallest-appropriate-treatment
   replacement for the visitor-facing dropdown (design system §9-10):
   plain text, not a control, so nothing about it looks selectable or
   changeable. */
.crd-locator-finder__field--fixed-service {
	justify-content: flex-end;
}

.crd-locator-finder__fixed-service {
	font-weight: 600;
	font-size: 0.9em;
}

.crd-locator-finder__field--checkbox label {
	display: flex;
	align-items: center;
	gap: var(--crd-space-2);
	min-block-size: var(--crd-control-min-size);
	padding-inline: var(--crd-space-3);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-sm);
	background: var(--crd-control-surface);
	color: var(--crd-control-text);
	font-weight: 600;
	font-size: 0.9em;
}

.crd-locator-finder__open-now-checkbox {
	inline-size: 1.1em;
	block-size: 1.1em;
	margin: 0;
	flex: 0 0 auto;
}

/* "Clear filters" as a small button-styled control (design system §9's
   one public button-like family), not a bare link. */
.crd-locator-finder__clear-filters {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	justify-self: start;
	flex: 0 0 auto;
	max-width: 100%;
	padding: var(--crd-space-1) var(--crd-space-3);
	border: 1px solid var(--crd-border);
	border-radius: var(--crd-radius-pill);
	background: Canvas;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	min-block-size: var(--crd-control-min-size);
	text-align: center;
	white-space: nowrap;
	transition: background-color var(--crd-transition-fast);
}

.crd-locator-finder__clear-filters:hover,
.crd-locator-finder__clear-filters:focus-visible {
	background: var(--crd-surface-color);
}

/* A clean secondary action row below the bordered filter panel. The
   wrapper remains for progressive enhancement and live status updates,
   but deliberately adds no second panel treatment of its own. */
.crd-locator-finder__near-me {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--crd-space-3);
	max-width: 100%;
	margin-bottom: var(--crd-space-4);
	padding: 0;
	border: 0;
	background: transparent;
}

/* Author CSS always outranks the UA stylesheet's own `[hidden]` rule
   at equal specificity, so the `display: flex` above would otherwise
   keep rendering this wrapper
   despite the `hidden` attribute assets/js/near-me.js controls it
   with -- see templates/finder-list.php's progressive-enhancement
   contract comment. */
.crd-locator-finder__near-me[hidden] {
	display: none;
}

.crd-locator-finder__near-me-button,
.crd-locator-finder__near-me-restore {
	cursor: pointer;
	padding: var(--crd-space-2) var(--crd-space-4);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-pill);
	/* Design system §9's one public button family: a filled pill,
	   subtly tinted (not a bare outline) so it reads as a real control
	   without introducing a hardcoded color -- color-mix against
	   currentColor keeps it theme-adaptive in both light and dark
	   contexts, exactly like this file's other structural colors. */
	background: color-mix(in srgb, currentColor 8%, Canvas);
	color: inherit;
	font: inherit;
	font-weight: 600;
	transition: background-color var(--crd-transition-fast), color var(--crd-transition-fast);
}

.crd-locator-finder__near-me-button:hover,
.crd-locator-finder__near-me-restore:hover {
	background: color-mix(in srgb, currentColor 14%, Canvas);
}

.crd-locator-finder__near-me-status {
	font-size: 0.9em;
	margin: 0;
	color: var(--crd-text-muted);
	/* No flex-basis: a percentage flex-basis makes an inline-flex
	   container's own shrink-to-fit width calculation assume this item
	   alone needs the container's full available width (confirmed in
	   both Chromium and WebKit), reproducing the exact full-width
	   "empty panel" look this component exists to avoid the moment
	   status text becomes non-empty. A plain flex item wraps onto its
	   own line naturally via flex-wrap once it and the buttons no
	   longer fit one line, without that intrinsic-sizing pitfall. */
	min-width: 12rem;
}

.crd-locator-finder__near-me-status:empty {
	display: none;
}

.crd-locator-finder__distance {
	font-weight: 600;
	margin-block: 0;
}

.crd-locator-finder__count {
	font-weight: 600;
	margin-block: 0 var(--crd-space-4);
}

/* Container-aware, not viewport-based: auto-fit measures the grid's own
   available width (whatever that is in the active theme/context), so
   the column count already adapts without a media query. minmax(min(100%,
   20rem), 1fr) both sets a readable minimum card width and guarantees
   that minimum can never exceed the container itself, so a single
   column never overflows a narrower-than-20rem context (see the mobile
   width acceptance check). At this component's own ~60rem cap (see the
   shared root above), that minimum yields two columns rather than the
   previous three-narrow-plus-one-orphan result; a genuinely wider
   container will still open up a third column and beyond on its own. */
.crd-locator-finder__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--crd-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	align-items: start;
}

.crd-locator-finder__card {
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	padding: var(--crd-space-5);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--crd-space-3);
	overflow-wrap: break-word;
	word-break: normal;
	background: var(--crd-card-surface);
}

/* Keep finder contact facts as separate, full-width rows in source
   order. Explicitly neutralizing floats/positioning protects this
   compact card layout from broad theme rules at narrow widths and high
   zoom, while min-inline-size lets long address and phone content wrap
   rather than collide or clip. This is finder-scoped: the approved
   individual-location layout is unchanged. */
.crd-locator-finder__card > .crd-locator-address,
.crd-locator-finder__card > .crd-locator-actions {
	position: static;
	float: none;
	clear: both;
	inline-size: 100%;
	min-inline-size: 0;
}

.crd-locator-finder__card .crd-locator-address__lines {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.crd-locator-finder__card .crd-locator-action--phone .crd-locator-action__value {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Selected card/marker relationship (design system §12; map is enabled
   only when a location has coordinates, see the selected-indicator
   span's own render condition in templates/finder-list.php): a
   border-width change plus the visible, persistent "Selected on map"
   text/icon cue below -- never color alone, and never lost once the
   pointer or keyboard focus moves elsewhere, matching
   .crd-locator-finder__marker--selected's own non-color-only treatment
   on the map side. */
.crd-locator-finder__item--selected .crd-locator-finder__card {
	border-width: var(--crd-border-width-emphasis);
	border-color: var(--crd-selection-accent);
	background: var(--crd-surface-muted);
}

.crd-locator-finder__name {
	margin-top: 0;
	margin-bottom: 0;
}

.crd-locator-finder__name-link {
	color: inherit;
	text-decoration-thickness: var(--crd-border-width);
	text-underline-offset: 0.18em;
}

.crd-locator-finder__selected-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--crd-space-1);
	font-size: 0.875em;
	font-weight: 600;
	margin: 0;
}

.crd-locator-finder__selected-indicator svg {
	width: 1em;
	height: 1em;
}

.crd-locator-finder__description {
	margin-block: var(--crd-space-2);
}

.crd-locator-finder__services-label {
	font-weight: 600;
}

/* Extra separation (on top of the card's own default gap) marks the
   two remaining boundaries the visual review called weak: services are
   a distinct "categorization" concern from the contact facts above
   them, and Hours reads as the card's closing, expandable section.
   Scoped to the finder card specifically so the single-location page's
   own (differently laid out) use of these same shared classes is
   unaffected. */
.crd-locator-finder__card .crd-locator-badge-list {
	margin-top: var(--crd-space-3);
}

.crd-locator-finder__schedule {
	margin-top: var(--crd-space-2);
	padding-top: var(--crd-space-3);
	border-block-start: var(--crd-border-width) solid var(--crd-border);
}

.crd-locator-finder__schedule summary {
	cursor: pointer;
	font-weight: 600;
	padding-block: var(--crd-space-1);
}

.crd-locator-finder__schedule[open] summary {
	margin-bottom: var(--crd-space-2);
}

/* Design system §11: icon-paired, level-0 container using
   --crd-surface-muted -- the same visual language already established
   for the map's own failure fallback (.crd-locator-finder__map-fallback
   below) -- for all three empty/failure states this class covers
   (nothing published, filtered to zero, and the new provider-failure
   state), so an intentional state reads as intentional instead of a
   placeholder dashed box. */
.crd-locator-finder__empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--crd-space-2);
	padding: var(--crd-space-5);
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	background: var(--crd-surface-muted);
	text-align: center;
	font-size: 1.05em;
}

.crd-locator-finder__empty-state svg {
	width: 1.5rem;
	height: 1.5rem;
}

.crd-locator-finder [hidden] {
	display: none !important;
}

/* Visible-on-focus skip link, offered only when there is a map to skip
   (see its render condition in templates/finder-list.php) -- the
   standard clip-based hidden-but-focusable pattern, never `display:
   none`/`visibility: hidden`, which would remove it from the tab order
   entirely instead of merely hiding it visually until reached. */
.crd-locator-finder__skip-map {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.crd-locator-finder__skip-map:focus {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 0 var(--crd-space-3);
	padding: var(--crd-space-2) var(--crd-space-4);
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--crd-surface-color);
	color: inherit;
	border: var(--crd-border-width) solid var(--crd-border);
	border-radius: var(--crd-radius-sm);
}

/* -- Integrated map/list results workspace (map enabled only; see
      templates/finder-list.php's $map_enabled branch) -----------------
   One flex container, no border/background of its own (avoiding nested
   panel chrome -- the map and each card already carry their own
   border), so the map and list read as two halves of one results area
   rather than two unrelated boxes. Map-panel precedes list-panel in
   document order (per docs/MAP_AND_DISCOVERY_ARCHITECTURE.md's
   list-is-canonical principle, the list itself is unaffected -- this
   only changes where the *map* sits relative to it), so visual order,
   DOM order, and keyboard tab order all agree once the container query
   below places them side by side; stacked (the default, narrow-width
   case), that same order simply reads top to bottom. */
.crd-locator-finder__results {
	display: flex;
	flex-direction: column;
	gap: var(--crd-space-5);
	margin-bottom: var(--crd-space-5);
}

.crd-locator-finder__map-panel {
	display: flex;
	flex-direction: column;
	gap: var(--crd-space-2);
}

.crd-locator-finder__map-heading {
	margin: 0;
	font-size: 1em;
}

.crd-locator-finder__map-context {
	margin: 0;
	font-size: 0.875em;
	color: var(--crd-text-muted);
}

.crd-locator-finder__list-panel {
	/* Without this, a flex item's default min-width: auto can keep it
	   from ever shrinking below its content's own intrinsic width (long
	   card text/URLs), which would fight the side-by-side layout below
	   instead of letting the card grid reflow to the narrower column. */
	min-width: 0;
}

/* Side by side once this component itself (not the viewport) is wide
   enough for both halves to be genuinely useful -- correct inside a
   narrow theme sidebar or multi-column layout the same as at any
   viewport width. Map on the left, list on the right, matching DOM
   order exactly (no `order` property is used, so keyboard/visual/DOM
   order can never disagree). */
@container crd-locator-finder (min-width: 40rem) {
	.crd-locator-finder__results {
		flex-direction: row;
		align-items: flex-start;
	}

	.crd-locator-finder__map-panel {
		flex: 1 1 44%;
		/* Sticky, not fixed: this keeps the map connected to whichever
		   cards are currently in view instead of scrolling out of sight
		   after the first card, while still stopping naturally at the
		   end of .crd-locator-finder__results (a sticky element cannot
		   escape its containing block, so it can never drift over the
		   footer -- it simply stops being "stuck" once the results
		   workspace itself scrolls past). `top` offsets by
		   --wp-admin--admin-bar--height, the custom property WordPress
		   core itself sets on <html> only while the admin toolbar is
		   shown (and already uses for its own `scroll-padding-top`) --
		   0px when logged out or the bar is hidden, so the map is never
		   hidden behind it either way, with a small extra gap for
		   breathing room. Narrow/stacked widths never opt into this
		   rule at all (see the plain, non-sticky declaration above),
		   matching the approved mobile layout exactly. */
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--crd-space-3));
	}

	.crd-locator-finder__list-panel {
		flex: 1 1 56%;
	}

	/* One readable column on the (now narrower) list side, rather than
	   the standalone, map-disabled grid's own auto-fit multi-column
	   behavior -- scoped to this container only, so the map-disabled
	   directory view is completely unaffected. */
	.crd-locator-finder__list-panel .crd-locator-finder__list {
		grid-template-columns: 1fr;
	}
}

/* -- Optional map (only rendered when an administrator has enabled and
      configured a tile provider; see Admin\MapSettings) --------------- */

.crd-locator-finder__map {
	/* No margin-top: this now sits inside .crd-locator-finder__map-panel,
	   below the "Map view" heading and context text, spaced by that
	   panel's own `gap` -- an extra top margin here would double up with
	   it. */
	height: 24rem;
	max-width: 100%;
	border: 1px solid var(--crd-border);
	border-radius: var(--crd-radius-md);
	background: var(--crd-surface-color);
	position: relative;
	overflow: hidden;
	/* Narrow-screen overflow fix (Beacon Packet 5's known-defect scope):
	   Leaflet's own internal zoom-animation proxy element (`.leaflet-proxy`,
	   appended inside this container by Leaflet itself) is a legitimate,
	   by-design part of every Leaflet map -- at rest it always carries a
	   CSS transform scaled to the current zoom level (2^(zoom-1), so a
	   moderately zoomed-in map already means a four- or five-figure scale
	   factor), confirmed directly on this component in testing. `overflow:
	   hidden` above already clips it in most engines, but `contain: layout
	   paint` is the correct, purpose-built CSS primitive for this exact
	   case: it makes this component's own box an unconditional hard
	   clip/containing-block boundary for every descendant Leaflet creates
	   inside it, independent of engine-specific `overflow` edge cases at
	   extreme transform values, and without touching any ancestor -- scoped
	   to this one plugin-owned component only, never html/body/a theme
	   container. */
	contain: layout paint;
	/* Loading skeleton (design system §11): a quiet, static-by-default
	   diagonal pattern fills the container the instant it renders,
	   before Leaflet has initialized or any tile has painted over it --
	   a visible "this is loading" cue rather than a blank/empty box.
	   Real tile images are opaque, so this is naturally and fully
	   covered once tiles load; the failure-state fallback below also
	   paints its own opaque surface over it. The subtle shift version is
	   wrapped in prefers-reduced-motion: no-preference (design system
	   §14); reduced motion keeps the same pattern static instead of
	   moving. */
	background-image: repeating-linear-gradient(
		135deg,
		var(--crd-surface-muted) 0,
		var(--crd-surface-muted) 0.75rem,
		transparent 0.75rem,
		transparent 1.5rem
	);
	background-size: 4rem 4rem;
}

@media (prefers-reduced-motion: no-preference) {
	.crd-locator-finder__map {
		animation: crd-locator-map-loading-shift 2.4s linear infinite;
	}
}

@keyframes crd-locator-map-loading-shift {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 4rem 0;
	}
}

.crd-locator-finder__map-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--crd-space-2);
	text-align: center;
	padding: var(--crd-space-4);
	margin: 0;
	/* Matches the empty-state container treatment (design system §11):
	   an opaque muted surface, so this fully covers the loading pattern
	   above once a failure is confirmed, rather than layering failure
	   text over a still-visible "loading" background. */
	background: var(--crd-surface-muted);
}

.crd-locator-finder__map-fallback svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Selected marker (the map-side half of the card/marker relationship
   above): a size increase plus a soft glow, never color alone. Leaflet
   positions/stacks every marker via its own inline `style.transform`/
   `style.zIndex` (set directly on the element, so an external
   stylesheet's `transform`/`z-index` would simply be overridden by it,
   design-system `!important` ban notwithstanding) -- `scale` is a
   distinct CSS property from `transform` precisely so this can compose
   with Leaflet's own positioning instead of fighting it. */
.crd-locator-finder__marker--selected {
	scale: 1.2;
	filter: drop-shadow(0 0 0.25rem var(--crd-selection-accent));
}

@media (prefers-reduced-motion: no-preference) {
	.crd-locator-finder__marker--selected {
		transition: scale var(--crd-transition-fast);
	}
}

@media (max-width: 480px) {
	.crd-locator-finder__controls {
		flex-direction: column;
		align-items: stretch;
	}

	/* flex: none resets the row-axis grow/shrink/basis set for the wide
	   desktop layout -- without it, the same values are reinterpreted
	   against the vertical axis once each container becomes a column,
	   stretching the primary group and the search field far taller than
	   their content. */
	.crd-locator-finder__controls-primary,
	.crd-locator-finder__controls-secondary {
		flex: none;
		flex-direction: column;
		align-items: stretch;
	}

	.crd-locator-finder__controls-secondary {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Search input and button stack as their own full-width controls
	   (matching the rest of the mobile toolbar) instead of sharing the
	   desktop's single row. */
	.crd-locator-finder__search-row {
		flex-direction: column;
		align-items: stretch;
	}

	.crd-locator-finder__search-submit {
		width: 100%;
	}

	.crd-locator-finder__clear-filters {
		align-self: flex-start;
		justify-self: start;
		justify-content: center;
	}

	.crd-locator-finder__map {
		height: 18rem;
	}
}

/* Reflow from the component's available width as well as the viewport.
   This is what keeps the toolbar usable in a narrow theme column and at
   browser zoom levels that reduce its effective inline size. */
@container crd-locator-finder (max-width: 44rem) {
	.crd-locator-finder__controls,
	.crd-locator-finder__controls-secondary,
	.crd-locator-finder__search-row {
		flex-direction: column;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.crd-locator-finder__controls-primary,
	.crd-locator-finder__controls-secondary {
		flex: none;
		width: 100%;
	}

	.crd-locator-finder__search-submit {
		width: 100%;
		justify-content: center;
	}

	.crd-locator-finder__clear-filters {
		align-self: flex-start;
		justify-self: start;
		width: auto;
		justify-content: center;
	}
}

@container crd-locator-finder (max-width: 26rem) {
	.crd-locator-finder .crd-locator-hours-list {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.crd-locator-finder .crd-locator-hours-list dt {
		padding-block-end: 0;
		border-block-end: 0;
	}
}

@media (forced-colors: active) {
	.crd-locator-finder,
	.crd-locator-single {
		--crd-border: CanvasText;
		--crd-focus-ring: Highlight;
		--crd-selection-accent: Highlight;
		--crd-status-open: CanvasText;
		--crd-status-opens-later: CanvasText;
		--crd-status-closed: CanvasText;
		--crd-status-unavailable: CanvasText;
	}

	.crd-locator-finder__select-wrap::after {
		content: none;
	}

	.crd-locator-finder__service-filter {
		appearance: auto;
		padding-inline-end: var(--crd-space-3);
	}
}

/* A wide-layout map needs real presence, not the same shallow strip the
   narrow, stacked layout uses -- 24rem next to a multi-card column read
   as a small preview image with a large empty gap beneath it once the
   map (sticky) stopped scrolling and the list (much taller) kept going.
   30rem gives it a substantial, primary-tool footprint on an ordinary
   desktop viewport while still comfortably fitting beside the card
   column. `min(...)` keeps the short-viewport safeguard from Packet 5's
   desktop integration: on a genuinely short viewport the second operand
   (driven by the real available height) becomes smaller than 30rem and
   wins instead, so the map shrinks rather than overflowing past the
   viewport, exactly as before -- only the normal-height baseline grew.
   Placed after (not inside) the base .crd-locator-finder__map rule
   above, deliberately: both selectors have equal specificity, and CSS
   resolves that by source order, so this override would otherwise be
   silently ignored regardless of whether the container condition
   matches. Narrow/stacked widths never enter this container query at
   all, so the approved mobile map height (18rem, in the existing
   @media (max-width: 480px) rule) is completely untouched. */
@container crd-locator-finder (min-width: 40rem) {
	.crd-locator-finder__map {
		height: min(30rem, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 8rem));
	}
}