/*
 * Dealer locator — Bold design language, self-contained.
 *
 * The plugin must survive theme changes (PLAN.md update-safety), so it uses
 * WordPress preset variables WITH literal fallbacks matching the Bold
 * palette (theme.json): primary #FBD64A, dark #131111, surface #F5F4F1,
 * contrast #33373D, border #E5E5E5. Breakpoint 905px per the site contract.
 */

.alloway-locator {
	--locator-primary: var(--wp--preset--color--primary, #fbd64a);
	--locator-dark: var(--wp--preset--color--dark, #131111);
	--locator-surface: var(--wp--preset--color--surface, #f5f4f1);
	--locator-contrast: var(--wp--preset--color--contrast, #33373d);
	--locator-border: var(--wp--preset--color--border, #e5e5e5);
}

.alloway-locator__search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 8px;
}

.alloway-locator__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.alloway-locator__field label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--locator-contrast);
}

.alloway-locator__field input,
.alloway-locator__field select {
	border: 2px solid var(--locator-dark);
	border-radius: 3px;
	padding: 10px 12px;
	font: inherit;
	min-width: 10ch;
	background: #fff;
	color: var(--locator-dark);
}

.alloway-locator__field input:focus-visible,
.alloway-locator__field select:focus-visible,
.alloway-locator__btn:focus-visible,
.alloway-locator__name:focus-visible {
	outline: 3px solid var(--locator-dark);
	outline-offset: 2px;
}

.alloway-locator__btn {
	border: 2px solid var(--locator-dark);
	border-radius: 3px;
	background: var(--locator-primary);
	color: var(--locator-dark);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 22px;
	cursor: pointer;
}

.alloway-locator__btn:hover {
	background: var(--wp--preset--color--primary-hover, #e4c806);
}

/* The geolocation button: secondary outline variant (one gold primary
   CTA per view), crosshair icon beside the label. It ships [hidden]
   and only locator.js reveals it when geolocation exists — the
   display rule must not override the hidden attribute, or no-JS and
   unsupported browsers see a dead button (review 2026-09-03 round 2
   finding 2). */
.alloway-locator__btn--geo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
}

.alloway-locator__btn--geo[hidden] {
	display: none;
}

.alloway-locator__btn--geo:hover {
	background: var(--locator-dark);
	color: var(--locator-primary);
}

.alloway-locator__btn--geo svg {
	width: 18px;
	height: 18px;
}

.alloway-locator__status {
	min-height: 1.5em;
	font-weight: 700;
	color: var(--locator-contrast);
	margin: 0 0 12px;
}

.alloway-locator__body {
	display: grid;
	grid-template-columns: minmax(280px, 380px) 1fr;
	gap: 24px;
	align-items: stretch;
}

.alloway-locator__map {
	min-height: 520px;
	border: 2px solid var(--locator-dark);
	border-radius: 3px;
	background: var(--locator-surface);

	/* Trap Leaflet's internal z-indexes (panes 400-700, controls 1000) in
	   their own stacking context so they can't outrank the sticky header
	   (z-index 200) and its mega menu. Without this the map floats OVER
	   the open Equipment dropdown. */
	isolation: isolate;
	z-index: 0;
}

.alloway-locator__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 520px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.alloway-locator__list:empty {
	display: none;
}

.alloway-locator__list:empty + .alloway-locator__map {
	grid-column: 1 / -1;
}

.alloway-locator__dealer {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	border: 1px solid var(--locator-border);
	border-left: 4px solid var(--locator-primary);
	border-radius: 3px;
	background: #fff;
	padding: 12px 14px;
}

.alloway-locator__name {
	grid-column: 1;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 800;
	color: var(--locator-dark);
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s;
}

.alloway-locator__name:hover {
	text-decoration-color: var(--locator-dark);
}

.alloway-locator__distance {
	grid-column: 2;
	grid-row: 1;
	font-weight: 700;
	color: var(--locator-contrast);
	white-space: nowrap;
}

.alloway-locator__address {
	grid-column: 1 / -1;
	color: var(--locator-contrast);
}

.alloway-locator__phone,
.alloway-locator__site {
	grid-column: 1 / -1;
	justify-self: start;
	color: var(--locator-dark);
	font-weight: 700;
}

.alloway-locator__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.alloway-locator__pager[hidden] {
	display: none;
}

.alloway-locator__page-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 2px solid var(--locator-dark);
	border-radius: 3px;
	background: #fff;
	color: var(--locator-dark);
	cursor: pointer;
}

.alloway-locator__page-btn svg {
	width: 20px;
	height: 20px;
}

.alloway-locator__page-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.alloway-locator__page-btn:focus-visible {
	outline: 3px solid var(--locator-dark);
	outline-offset: 2px;
}

.alloway-locator__page-label {
	font-weight: 700;
	color: var(--locator-contrast);
	min-width: 9ch;
	text-align: center;
}

.alloway-locator__popup {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.9375rem;
}

@media (max-width: 905px) {
	.alloway-locator__body {
		grid-template-columns: 1fr;
	}

	.alloway-locator__map {
		min-height: 380px;
		order: -1;
	}

	.alloway-locator__list {
		max-height: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alloway-locator__name {
		transition: none;
	}
}

/* The gold triangle dealer pin (epic 11). Its legibility shadow is
   BAKED into the PNG — a live drop-shadow filter here forced the GPU
   to re-composite 236 markers every scroll frame (mobile jank, Jack
   2026-09-13). Never reintroduce a filter on this class. */