/**
 * Service Area Map (V4 / Atomic) widget styles.
 *
 * Kept in a plain stylesheet (not atomic base styles) so the editor shows no
 * default values on the widget. Geometry and type are fixed here. Colours read
 * the site's context tokens (--accent, --on-accent, --accent-alt, --surface,
 * --text-color …) so the map re-skins inside invert sections with no extra CSS,
 * and every colour can be overridden per site through a handful of hooks set
 * on the widget (or on a class applied to it) as plain custom properties:
 *   --scw-sa-ring-color      rings + centre marker ring
 *   --scw-sa-disc-color      outer disc fill (mixed with --surface-alpha)
 *   --scw-sa-chip-bg / --scw-sa-chip-color          town chips
 *   --scw-sa-chip-alt-bg / --scw-sa-chip-alt-color  every second chip
 * Positions arrive as percentages in --scw-sa-x / --scw-sa-y (chips) and
 * --scw-sa-f (ring fraction).
 */

.scw-sa {
	position: relative;
	width: 100%;
	container-type: inline-size;
}

.scw-sa__map {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

/* Rings: outermost is the filled disc, inner ones are hairlines. The template
   sets --scw-sa-f (fraction of the outer radius) inline on each ring. */
.scw-sa__ring {
	border-color: var(--scw-sa-ring-color, var(--accent, var(--color-primary-brand-2)));
	position: absolute;
	inset-block-start: calc(50% - var(--scw-sa-f) * 50%);
	inset-inline-start: calc(50% - var(--scw-sa-f) * 50%);
	width: calc(var(--scw-sa-f) * 100%);
	aspect-ratio: 1 / 1;
	border-width: var(--border-s);
	border-style: solid;
	border-radius: 999px;
	box-sizing: border-box;
}

/* Outer disc: a glass surface when the kit sets the material knobs, an opaque
   surface otherwise. */
.scw-sa__ring--outer {
	background-color: color-mix(in srgb, var(--scw-sa-disc-color, var(--surface, var(--color-white))) var(--surface-alpha, 100%), transparent);
	background-image: var(--surface-highlight, none);
	backdrop-filter: var(--surface-backdrop, none);
	border-color: var(--color-surface-edge, var(--surface-border, var(--color-primary-light-3)));
	box-shadow: var(--box-shadow-h) var(--box-shadow-v-light) var(--box-shadow-b-light) var(--box-shadow-s) var(--color-box-shadow-light);
}

/* Ring labels sit on the top edge of their ring. */
.scw-sa__ring-label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	padding: 0.15em 0.6em;
	background-color: var(--surface, var(--color-white));
	border-width: var(--border-s);
	border-style: solid;
	border-color: var(--surface-border, var(--color-primary-light-3));
	border-radius: 999px;
	color: var(--text-color, var(--color-primary-dark-1));
	font-family: var(--eyebrows);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.scw-sa__ring-label:empty {
	display: none;
}

/* Centre marker. */
.scw-sa__marker {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	width: 18%;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-width: var(--border-s);
	border-style: solid;
	border-color: var(--scw-sa-ring-color, var(--accent, var(--color-primary-brand-2)));
	border-radius: 999px;
	box-sizing: border-box;
}

.scw-sa__marker-dot {
	width: 0.875rem;
	aspect-ratio: 1 / 1;
	border-radius: 999px;
	background-color: var(--color-star);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-star) 25%, transparent);
}

.scw-sa__marker-label {
	color: var(--text-color, var(--color-primary-dark-1));
	font-family: var(--eyebrows);
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Town chips. */
.scw-sa__chip {
	position: absolute;
	inset-inline-start: calc(var(--scw-sa-x, 50) * 1%);
	inset-block-start: calc(var(--scw-sa-y, 50) * 1%);
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: max-content;
	max-width: 40%;
	padding: 0.15em var(--badge-padding-horizontal);
	border: var(--border-s) solid transparent; /* reserves the space the dashed is-beyond border uses, so all chips share one size */
	border-radius: 999px;
	background-color: var(--scw-sa-chip-bg, var(--accent, var(--color-primary-brand-1)));
	color: var(--scw-sa-chip-color, var(--on-accent, var(--color-primary-light-1)));
	box-shadow: var(--box-shadow-h) var(--box-shadow-v-light) var(--box-shadow-b-light) var(--box-shadow-s) var(--color-box-shadow-light);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	transition: inset var(--transitions) ease-in-out;
}

/* Every second chip takes the other palette. Sites with a dark on-text for
   that palette override --scw-sa-chip-alt-color. */
.scw-sa__chip:nth-child(even) {
	background-color: var(--scw-sa-chip-alt-bg, var(--accent-alt, var(--color-secondary-brand-1)));
	color: var(--scw-sa-chip-alt-color, var(--on-accent-alt, var(--color-secondary-light-1)));
}

/* Towns beyond the outer ring: outlined instead of filled. */
.scw-sa__chip.is-beyond {
	border-style: dashed;
	border-color: var(--scw-sa-chip-bg, var(--accent, var(--color-primary-brand-1)));
	background-color: var(--surface, var(--color-white));
	color: var(--scw-sa-chip-bg, var(--accent, var(--color-primary-brand-1)));
}

.scw-sa__chip.is-beyond:nth-child(even) {
	border-color: var(--scw-sa-chip-alt-bg, var(--accent-alt, var(--color-secondary-brand-1)));
	color: var(--scw-sa-chip-alt-bg, var(--accent-alt, var(--color-secondary-brand-1)));
}

.scw-sa__chip.is-unplaced {
	visibility: hidden;
}

.scw-sa__chip-distance {
	font-size: max(0.75em, 12px);
	opacity: 0.75;
}

.scw-sa__chip-distance:empty {
	display: none;
}

/* "Large screens only" distance mode: hide the km line at tablet width and below. */
@media (max-width: 1024px) {
	.scw-sa--distance-large .scw-sa__chip-distance {
		display: none;
	}
}

/* Accessible list of towns + distances (visually hidden). */
.scw-sa__list {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Small maps: tighter chips and labels. */
@container (max-width: 420px) {
	.scw-sa__chip {
		font-size: 0.75em;
		padding: 0.15em calc(var(--badge-padding-horizontal) * 0.75);
	}

	.scw-sa__ring-label,
	.scw-sa__marker-label {
		font-size: max(0.75em, 12px);
	}
}

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