/**
 * ABIO presence map ([abio_presence_map]).
 * Every selector is scoped under .abio-map.
 */

.abio-map {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Screen-reader summary: own copy so the map does not depend on abio-news.css. */
.abio-map .abio-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Overflow visible so a lifted country and its shadow are not clipped at the edges. */
.abio-map .abio-map__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.abio-map .abio-map__art {
	pointer-events: none;
}

/* Inert neighbouring countries */
.abio-map .abio-map__land {
	fill: #D9D9D9;
	stroke: #fff;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Active countries */
.abio-map .abio-map__shape {
	fill: #006780;
	stroke: #fff;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Asset dots: fill comes from the data array (fill attribute), not from CSS. */
.abio-map .abio-map__dot {
	stroke: #fff;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/*
 * Interaction (art layer). Raising is JS-driven for mouse pointers and keyboard focus only.
 * The transition on the target state applies: rising = .is-raised (280ms, soft settle),
 * falling = base (200ms ease-in-out), pressing = .is-pressed (90ms).
 * Dots sit inside the country group, so the group's transform moves them in lockstep.
 */
.abio-map .abio-map__country {
	transition: transform 200ms ease-in-out;
}

.abio-map .abio-map__shape {
	transition: fill 200ms ease-in-out;
}

/* Pair seam: the shared border stroked in the fill colour (clipped to the pair) so two countries read as one shape. */
.abio-map .abio-map__seam {
	fill: none;
	stroke: #006780;
	stroke-width: 4;
	stroke-linejoin: round;
	pointer-events: none;
	transition: stroke 200ms ease-in-out;
}

.abio-map .abio-map__country.is-raised .abio-map__seam {
	stroke: #00738F;
	transition: stroke 280ms ease;
}

/* Shadow: blurred silhouette (shadow-only SVG filter) whose opacity fades in and out. */
.abio-map .abio-map__shadow {
	opacity: 0;
	transition: opacity 200ms ease-in-out;
}

.abio-map .abio-map__country.is-raised {
	transform: translateY(-8px);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abio-map .abio-map__country.is-raised .abio-map__shape {
	fill: #00738F;
	transition: fill 280ms ease;
}

.abio-map .abio-map__country.is-raised .abio-map__shadow {
	opacity: 1;
	transition: opacity 280ms ease;
}

/* Declared after .is-raised with equal specificity so a press wins when both are set. */
.abio-map .abio-map__country.is-pressed {
	transform: translateY(-3px);
	transition: transform 90ms ease-out;
}

/* Link layer: transparent hit shapes, never moved by hover. */
.abio-map .abio-map__link {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.abio-map .abio-map__link:focus:not(:focus-visible) {
	outline: none;
}

.abio-map .abio-map__hit,
.abio-map .abio-map__hit-dot {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

.abio-map .abio-map__hit {
	transition: transform 200ms ease-in-out;
}

/* Keyboard focus ring follows the lifted art (works without JS). */
.abio-map .abio-map__link:focus-visible .abio-map__hit {
	stroke: #1E3C40;
	stroke-width: 3;
	vector-effect: non-scaling-stroke;
	transform: translateY(-8px);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.abio-map .abio-map__land {
	cursor: default;
}

/* Legend (below the map). Two-class selectors beat the Customizer li rules. */
/* 2×2 grid: two content-width columns, centred under the map. */
.abio-map .abio-map__legend {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	justify-content: center;
	gap: 12px 40px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.abio-map .abio-map__legend li.abio-map__legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	line-height: 24px;
	font-size: 16px;
	color: #2e2e2e;
	list-style: none;
}

.abio-map .abio-map__swatch {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.abio-map .abio-map__swatch--market {
	background-color: #006780;
	border-radius: 3px;
}

.abio-map .abio-map__swatch--dot {
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	/* No movement; tint and shadow still change, instantly. */
	.abio-map .abio-map__country,
	.abio-map .abio-map__country.is-raised,
	.abio-map .abio-map__country.is-pressed,
	.abio-map .abio-map__link:focus-visible .abio-map__hit {
		transition: none;
		transform: none;
	}

	.abio-map .abio-map__shape,
	.abio-map .abio-map__shadow,
	.abio-map .abio-map__seam,
	.abio-map .abio-map__country.is-raised .abio-map__shape,
	.abio-map .abio-map__country.is-raised .abio-map__shadow,
	.abio-map .abio-map__country.is-raised .abio-map__seam {
		transition: none;
	}
}

@media only screen and (max-width: 767px) {
	.abio-map {
		padding: 0 20px;
	}

	.abio-map .abio-map__legend {
		gap: 8px 24px;
	}
}

/* Narrow phones: the two columns no longer fit, so stack into one centred column. */
@media only screen and (max-width: 480px) {
	.abio-map .abio-map__legend {
		grid-template-columns: max-content;
		gap: 8px;
	}
}