/* Homepage facilities map.
 *
 * The map itself is a flat SVG used as the cover's background image, so its
 * dots are not DOM nodes. cmp-interactive.js overlays one transparent button
 * per dot, positioned from the SVG's own pin coordinates, and swaps the
 * .cmp-map-card copy on click. Styles below dress those overlay buttons; the
 * card is left to its block markup.
 */

.cmp-home-map {
	position: relative;
}

/* The section is full-bleed but the artwork is a fixed 1440x692 SVG, and core
 * covers letterbox with `cover` — so every viewport wider than 1440 scaled the
 * map up and sliced the top and bottom off (69px at 1728, 115px at 1920,
 * taking Washington and the Gulf coast with it). `contain` is a no-op at
 * exactly 1440, where the Figma frame is drawn, and above it simply widens the
 * dark margin the artboard already has either side of the map. Below 1440 the
 * map now scales down intact instead of being cropped side-to-side, which also
 * brings Oregon and both Massachusetts dots back at tablet widths.
 *
 * Set here rather than on the block because core's cover offers no `contain`
 * control; the block's own data-object-fit="cover" is left alone, so the editor
 * preview still shows the cropped framing.
 */
.cmp-home-map img.wp-block-cover__image-background {
	object-fit: contain;
}

.cmp-map-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

/* The card must stay above the hotspot layer. Its wrapper is a full-width
 * block though, so left solid it would swallow every click aimed at a dot
 * behind it — which is all five North Carolina dots. Only the card itself
 * takes pointer events; the rest of the row lets clicks through to the pins.
 */
.cmp-home-map .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.cmp-home-map .cmp-map-card {
	pointer-events: auto;
}

/* Sized to the dot itself (rx 6.94 in the SVG), not to a comfortable touch
 * target: the five North Carolina dots sit as little as 16px apart, so a
 * larger hotspot would swallow its neighbours. The hover label is what makes
 * a dot identifiable before you commit to the click.
 */
.cmp-map-pin {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	pointer-events: auto;
	cursor: pointer;
	appearance: none;
}

/* Ring drawn around the baked-in SVG dot. */
.cmp-map-pin::before {
	content: '';
	position: absolute;
	inset: -3px;
	border: 2px solid transparent;
	border-radius: 50%;
	transform: scale(0.6);
	transition: transform 180ms ease, border-color 180ms ease;
}

.cmp-map-pin:hover::before,
.cmp-map-pin:focus-visible::before,
.cmp-map-pin[aria-pressed='true']::before {
	border-color: #8eccff;
	transform: scale(1);
}

.cmp-map-pin:focus-visible {
	outline: 2px solid #8eccff;
	outline-offset: 2px;
}

/* Tooltip-ish label so a hovered dot names its facility before you click. */
.cmp-map-pin-label {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	border: 1px solid rgb(142 204 255 / 40%);
	border-radius: 4px;
	background: #112241;
	box-shadow: 0 2px 8px rgb(4 11 32 / 60%);
	color: #fff;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.cmp-map-pin:hover .cmp-map-pin-label,
.cmp-map-pin:focus-visible .cmp-map-pin-label {
	opacity: 1;
}

/* The default HQ copy runs to four lines and is the tallest state the card
 * takes (317x259 in Figma, node 33390:6172). Hold that height so selecting a
 * facility with a two-line address does not visibly shrink the card.
 */
.cmp-map-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 259px;
}

/* Card copy and logo are swapped in place; soften the change. */
.cmp-map-card p,
.cmp-map-card .cmp-map-logo {
	transition: opacity 150ms ease;
}

.cmp-map-card.is-swapping p,
.cmp-map-card.is-swapping .cmp-map-logo {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

	.cmp-map-pin::before,
	.cmp-map-pin-label,
	.cmp-map-card p,
	.cmp-map-card .cmp-map-logo {
		transition: none;
	}
}