/**
 * Shop locator maps.
 *
 * The map is an enhancement: every address, opening time, phone number and
 * email beside it is also present as text, so nothing depends on it.
 */

[data-vd-shop-map] {
	width: 100%;
	min-height: clamp(320px, 38vw, 480px);
	border-radius: var(--at-radius--xs);
	z-index: 0;
}

/* The locator on Visit Us stands beside a taller column, so it is allowed more room. */
[data-vd-shop-map][data-fit="all"] {
	height: 100%;
	min-height: clamp(360px, 44vw, 620px);
}

/* Mute the standard OSM tiles so they sit with the brand palette. */
[data-vd-shop-map] .leaflet-tile {
	filter: grayscale(0.9) sepia(0.25) brightness(1.05) contrast(0.92);
}

[data-vd-shop-map] .leaflet-popup-content {
	font-size: var(--at-text--xs);
	line-height: 1.5;
}

[data-vd-shop-map] .leaflet-control-attribution {
	font-size: 10px;
}

.vd-shop-map__reset a {
	width: auto;
	padding: 0 0.6em;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Shop names double as map controls, so they need to look and behave like controls. */
.vd-shop-title {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 160ms ease;
}

.vd-shop-title:hover,
.vd-shop-title:focus-visible {
	text-decoration-color: currentColor;
}

.vd-shop-title:focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.vd-shop-title {
		transition: none;
	}
}