/* ============================================================
   Service Map section (service_map)
   Loaded only where the section appears (inc/map-setup.php).

   Desktop (>=1024px): left intro column + interactive US SVG.
   Below that: the map is hidden and the state list becomes the
   interface. Colours use the theme tokens; the sky-blue map
   palette is local to this section.
   ============================================================ */
.cx-map {
	--map-fill: #dbe6ff;          /* inactive states */
	--map-fill-active: #c3d6ff;   /* states we serve */
	--map-fill-hover: #9cbcff;    /* hovered state */
	--map-stroke: #ffffff;
	--map-dot: var(--cx-green);
	--map-pin: var(--cx-navy);
	--map-accent: var(--cx-green);
	background: var(--cx-white);
	color: var(--cx-ink);
}

.cx-map__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.cx-map__heading {
	font-family: var(--cx-font-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.cx-map__subtext {
	max-width: 42ch;
	margin: 0 0 1.5rem;
	color: color-mix(in srgb, currentColor 65%, transparent);
	line-height: 1.55;
}

.cx-map__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	color: var(--map-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

.cx-map__cta svg { transition: transform 0.25s ease; }
.cx-map__cta:hover svg { transform: translateX(3px); }

/* ---- Search box: the primary way to reach a state page ---- */
.cx-map__search {
	position: relative;
	margin-top: 2rem;
	max-width: 26rem;
}

.cx-map__search-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: var(--cx-radius-sm);
	background: var(--cx-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cx-map__search-field:focus-within {
	border-color: var(--map-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--map-accent) 15%, transparent);
}

.cx-map__search-icon {
	flex: 0 0 auto;
	color: color-mix(in srgb, currentColor 50%, transparent);
}

.cx-map__search-input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	color: inherit;
}

.cx-map__results {
	position: absolute;
	z-index: 6;
	left: 0;
	right: 0;
	margin: 0.4rem 0 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--cx-white);
	border: 1px solid color-mix(in srgb, var(--cx-ink) 10%, transparent);
	border-radius: var(--cx-radius-sm);
	box-shadow: 0 12px 30px rgba(18, 35, 61, 0.14);
	max-height: 20rem;
	overflow-y: auto;
}

.cx-map__result a {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.65rem 0.8rem;
	border-radius: calc(var(--cx-radius-sm) - 4px);
	color: inherit;
	text-decoration: none;
}

.cx-map__result.is-active a,
.cx-map__result a:hover {
	background: color-mix(in srgb, var(--map-accent) 8%, transparent);
}

.cx-map__result-name { font-weight: 600; }

.cx-map__result-tags {
	font-size: 0.8rem;
	color: color-mix(in srgb, currentColor 55%, transparent);
}

/* The raw fallback list is the JS data source and the no-JS interface.
   When JS runs, the search box is the interface, so hide the raw list. */
.cx-map__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cx-map__list-item a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: var(--cx-radius-sm);
	color: inherit;
	text-decoration: none;
}

.cx-map__list-name { font-weight: 600; }
.cx-map__list-tags { font-size: 0.8rem; color: color-mix(in srgb, currentColor 55%, transparent); }

/* Progressive enhancement: once JS marks the section enhanced, hide the raw
   fallback list — the search box replaces it. */
.cx-map.is-enhanced .cx-map__list { display: none; }

/* Screen-reader-only label helper (if the theme lacks one). */
.cx-map .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---- The map stage: visible at all sizes. On mobile it's a static
   coverage visual (highlighted served states, no interaction); on desktop
   it becomes interactive with hover popups (rules further down). ---- */
.cx-map__stage { display: block; position: relative; }

.cx-map__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.cx-map__state {
	fill: var(--map-fill);
	stroke: var(--map-stroke);
	stroke-width: 1;
	stroke-linejoin: round;
}

.cx-map__state.is-active {
	fill: var(--map-fill-active);
	cursor: pointer;
	transition: fill 0.2s ease;
}

.cx-map__state.is-active:focus-visible {
	outline: 2px solid var(--map-accent);
	outline-offset: 2px;
}

.cx-map__state.is-active.is-hover { fill: var(--map-fill-hover); }

.cx-map__dot {
	fill: var(--map-dot);
	stroke: var(--cx-white);
	stroke-width: 1.5;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

/* On hover the dot hides and the pin takes its place. */
.cx-map__dot.is-hover { opacity: 0; }

/* Location pin: hidden by default, revealed on the hovered state. Its tip is
   at the group origin (the dot's point); it scales up from the tip. */
.cx-map__pin {
	pointer-events: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: bottom center;
	transition: opacity 0.18s ease;
}

.cx-map__pin.is-hover { opacity: 1; }

.cx-map__pin-body {
	fill: var(--map-pin);
	stroke: var(--cx-white);
	stroke-width: 1;
}

.cx-map__pin-hole { fill: var(--cx-white); }

/* ---- Pinned popup ---- */
.cx-map__popup {
	position: absolute;
	z-index: 5;
	min-width: 12rem;
	max-width: 15rem;
	padding: 0.9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--cx-white);
	border: 1px solid color-mix(in srgb, var(--cx-ink) 10%, transparent);
	border-radius: var(--cx-radius-sm);
	box-shadow: 0 12px 30px rgba(18, 35, 61, 0.14);
	color: var(--cx-ink);
	text-decoration: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.cx-map__popup.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.cx-map__popup-name {
	font-family: var(--cx-font-display);
	font-weight: 700;
	font-size: 1rem;
}

.cx-map__popup-tags {
	font-size: 0.8rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--cx-ink) 55%, transparent);
}

.cx-map__popup-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--map-accent);
}

/* ---- Desktop: show the map, arrange two columns, hide the list ---- */
@media (min-width: 1024px) {
	.cx-map__grid { grid-template-columns: minmax(18rem, 0.85fr) 1.15fr; }
}

/* The interactive state fill/cursor and the popup only apply where hover
   exists; on touch the map stays a plain visual. */
@media (max-width: 1023.98px), (hover: none) {
	.cx-map__state.is-active { cursor: default; }
	.cx-map__popup { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cx-map__popup,
	.cx-map__cta svg,
	.cx-map__state.is-active,
	.cx-map__dot {
		transition: none;
	}
}