/**
 * Routekiezer boven de Waymark-kaart. De radio's blijven in de DOM zonder
 * eigen weergave, zodat pijltjestoetsen en screenreaders het native
 * radiogroup-gedrag houden; de gekozen knop is neutraal donker omdat de
 * routekleuren al in de stippen zitten.
 */
.opw-route-switcher {
	--opw-route-switcher-chosen: var(--wp--preset--color--gray-900, #363537);
	--opw-route-switcher-border: var(--wp--preset--color--gray-300, #c5c5c6);

	border: 0;
	margin: 16px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Zichtbaar voor screenreaders, niet in beeld. */
.opw-route-switcher__legend {
		position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.opw-route-switcher__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.opw-route-switcher__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--opw-route-switcher-border);
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.opw-route-switcher__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.opw-route-switcher__input:checked + .opw-route-switcher__option {
	background: var(--opw-route-switcher-chosen);
	border-color: var(--opw-route-switcher-chosen);
	color: #fff;
}

.opw-route-switcher__input:focus-visible + .opw-route-switcher__option {
	outline: 2px solid var(--opw-route-switcher-chosen);
	outline-offset: 2px;
}

@media (hover: hover) {
	.opw-route-switcher__option:hover {
		border-color: var(--opw-route-switcher-chosen);
	}
}

/* Waymark kapt de popup-omschrijving af; de boekjesteksten hebben ruimte nodig. */
.waymark-shortcode .waymark-map-container.waymark-is-viewer ul.waymark-info li.waymark-info-description {
	max-height: 220px;
	overscroll-behavior: contain;
}

/* Waymark's popup-links naar de niet-publieke route-post en collection;
   route-switcher.js verwijdert ze, dit is het vangnet voor een vroege popup. */
.waymark-description-link {
	display: none;
}

/* Waymark's hardcoded type-label ("[Stap voor stap 1]") in de hover. */
.waymark-type-label {
	display: none;
}

/* De startmarkering is 1,4× vergroot (route-switcher.js zet iconSize op 22px);
   de vlag schaalt mee met Waymark's 10px voor "small". Extra shape-class in de
   selector wint van Waymark's eigen size-regel, ongeacht laadvolgorde. */
.waymark-marker.waymark-marker-marker.opw-marker-start .waymark-icon-icon::before {
	font-size: 14px;
}