/**
 * ACP Map - frontend styles.
 *
 * Colors arrive as custom properties on the .acp-map wrapper, set inline by the
 * renderer, so this stylesheet is identical for every map on the site.
 */

.acp-map {
	--acp-map-bg: #22333b;
	--acp-map-state: #e0a63c;
	--acp-map-state-highlight: #4e9d7c;
	--acp-map-stroke: #22333b;
	--acp-map-label: #ffffff;
	--acp-map-marker: #1d2f38;
	--acp-map-marker-stroke: #ffffff;
	--acp-map-marker-hover: #ffffff;
	--acp-map-tooltip-bg: #12232b;
	--acp-map-tooltip-text: #ffffff;
	--acp-map-label-size: 11px;
	--acp-map-marker-size: 18;
	--acp-map-max-width: 1000px;

	position: relative;
	max-width: var(--acp-map-max-width);
	margin-inline: auto;
}

.acp-map__canvas {
	background: var(--acp-map-bg);
}

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

/* States */

.acp-map__state {
	fill: var(--acp-map-state);
	stroke: var(--acp-map-stroke);
	stroke-width: 1.1;
	stroke-linejoin: round;
}

.acp-map__state.is-highlighted {
	fill: var(--acp-map-state-highlight);
}

/* State labels */

.acp-map__label {
	fill: var(--acp-map-label);
	font-family: inherit;
	font-size: var(--acp-map-label-size);
	font-weight: 700;
	dominant-baseline: middle;
	paint-order: stroke;
	pointer-events: none;
	user-select: none;
}

.acp-map__leader {
	stroke: var(--acp-map-label);
	stroke-width: 0.8;
	opacity: 0.55;
}

/* Markers */

.acp-map__marker {
	cursor: pointer;
	outline: none;
}

.acp-map__marker-hit {
	fill: transparent;
	stroke: none;
}

.acp-map__marker-body {
	fill: var(--acp-map-marker);
	stroke: var(--acp-map-marker-stroke);
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
}

.acp-map__marker-dot {
	fill: var(--acp-map-marker-stroke);
	stroke: none;
}

.acp-map__marker-shape {
	transition: transform 0.15s ease-out;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.acp-map--pin .acp-map__marker-shape {
	/* The tip of the pin is the anchor, so grow away from the bottom edge. */
	transform-origin: 50% 100%;
}

.acp-map__marker:hover .acp-map__marker-shape,
.acp-map__marker:focus-visible .acp-map__marker-shape {
	transform: scale(1.2);
}

.acp-map__marker:hover .acp-map__marker-body,
.acp-map__marker:focus-visible .acp-map__marker-body {
	fill: var(--acp-map-marker-hover);
	stroke: var(--acp-map-marker);
}

.acp-map__marker:hover .acp-map__marker-dot,
.acp-map__marker:focus-visible .acp-map__marker-dot {
	fill: var(--acp-map-marker);
}

.acp-map__marker:focus-visible .acp-map__marker-body {
	stroke-width: 2.4;
}

/* Tooltip */

.acp-map__tooltip {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	padding: 0.35em 0.6em;
	border-radius: 3px;
	background: var(--acp-map-tooltip-bg);
	color: var(--acp-map-tooltip-text);
	font-size: 0.8125rem;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, -100%);
	opacity: 0;
	transition: opacity 0.12s ease-out;
}

.acp-map__tooltip.is-visible {
	opacity: 1;
}

.acp-map__tooltip[hidden] {
	display: none;
}

/* On narrow screens the state abbreviations are too small to read, so drop
   them and leave the markers. */

@media (max-width: 600px) {
	.acp-map__labels,
	.acp-map__leaders {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acp-map__marker-shape,
	.acp-map__tooltip {
		transition: none;
	}
}