/* Photo map. Colours come from the page's palette so the map follows the post. */
.wf-map {
	--wf-map-height: 420px;
	margin-block: var(--wp--preset--spacing--40, 2rem);
}

.wf-map__stage {
	position: relative;
	min-height: min(var(--wf-map-height), 70vh);
	overflow: hidden;
	background: var(--wp--preset--color--theme-5, #f2f2f2);
	border: 1px solid var(--wp--preset--color--theme-4, #ccc);
	border-radius: 12px;
}

.wf-map__stage[hidden],
.wf-map:not(.is-js) .wf-map__stage {
	display: none;
}

/* Until view.js has collapsed the list, hide its contents so nothing moves when it does. */
.wf-map.is-js:not(.is-ready) .wf-map__list ol {
	display: none;
}

.wf-map__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.wf-map__gate {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: min(var(--wf-map-height), 70vh);
	padding: 1.5rem;
	text-align: center;
	color: var(--wp--preset--color--theme-6, #000);
}

.wf-map__gate[hidden] {
	display: none;
}

.wf-map__gate-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--besley, serif);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	font-weight: 600;
}

.wf-map__note {
	max-width: 34rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--theme-2, #333);
}

.wf-map__forget {
	/* Outside the map frame on purpose: nothing may cover the tile attribution. */
	display: block;
	margin: 0.5rem 0 0;
	padding: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--theme-2, #333);
	background: none;
	border: 0;
	text-decoration: underline dotted;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.wf-map__forget[hidden] {
	display: none;
}

.wf-map__list {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.wf-map__list summary {
	cursor: pointer;
	font-weight: 600;
}

.wf-map__list ol {
	display: grid;
	gap: 0.6rem;
	margin: 0.75rem 0 0;
	padding-left: 1.4rem;
}

.wf-map__list li {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.9rem;
	row-gap: 0.1rem;
}

.wf-map__place {
	font-weight: 600;
}

.wf-map__coords {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--theme-2, #333);
}

.wf-map-empty {
	padding: 1rem;
	border: 1px dashed currentColor;
	border-radius: 8px;
}

/* Pins */
.wf-pin {
	background: none;
	border: 0;
}

.wf-pin svg {
	display: block;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

.wf-pin path {
	fill: var(--wp--preset--color--theme-3, #3355ff);
	stroke: var(--wp--preset--color--theme-1, #fff);
	stroke-width: 2;
}

.wf-pin text {
	fill: var(--wp--preset--color--theme-1, #fff);
	font: 700 13px/1 var(--wp--preset--font-family--manrope, sans-serif);
}

.wf-pin:focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-6, #000);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Leaflet chrome in the page's colours (loaded after leaflet.css by specificity). */
.wf-map .leaflet-container {
	font-family: inherit;
	background: var(--wp--preset--color--theme-5, #ddd);
}

.wf-map .leaflet-popup-content-wrapper,
.wf-map .leaflet-popup-tip {
	background: var(--wp--preset--color--theme-1, #fff);
	color: var(--wp--preset--color--theme-6, #000);
}

.wf-map .leaflet-popup-content {
	margin: 10px 12px;
}

.wf-map .leaflet-popup-content a {
	color: var(--wp--preset--color--theme-3, #3355ff);
}

.wf-map .leaflet-bar a,
.wf-map .leaflet-bar a:hover {
	background-color: var(--wp--preset--color--theme-1, #fff);
	color: var(--wp--preset--color--theme-6, #000);
	border-bottom-color: var(--wp--preset--color--theme-4, #ccc);
}

.wf-map .leaflet-control-attribution {
	background: color-mix(in srgb, var(--wp--preset--color--theme-1, #fff) 85%, transparent);
	color: var(--wp--preset--color--theme-2, #333);
}

.wf-map .leaflet-control-attribution a {
	color: inherit;
}

.wf-popup {
	display: grid;
	gap: 0.35rem;
	min-width: 180px;
}

.wf-popup img {
	display: block;
	width: 100%;
	/* Reserve the photo's space before it loads, or the popup grows after Leaflet has
	   already positioned it and ends up clipped by the map frame. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
}

.wf-popup__title {
	margin: 0;
	font-weight: 600;
}

/* World map (scope "all"): pins carry their post's accent, a dot instead of a number. */
.wf-pin circle {
	fill: var(--wp--preset--color--theme-1, #fff);
}

.wf-popup__place {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.8;
}

.wf-popup__title a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--theme-3, #3355ff);
	text-decoration-thickness: 2px;
}

.wf-map__label {
	color: var(--wp--preset--color--theme-2, #333);
}

/* Clusters (Leaflet.markercluster) in the page's colours. */
.wf-map .marker-cluster-small,
.wf-map .marker-cluster-medium,
.wf-map .marker-cluster-large {
	background-color: color-mix(in srgb, var(--wp--preset--color--theme-3, #3355ff) 35%, transparent);
}

.wf-map .marker-cluster-small div,
.wf-map .marker-cluster-medium div,
.wf-map .marker-cluster-large div {
	background-color: var(--wp--preset--color--theme-3, #3355ff);
	color: var(--wp--preset--color--theme-1, #fff);
	font: 700 12px/1 var(--wp--preset--font-family--manrope, sans-serif);
}

/* Target size: standalone controls reach 24 px. */
.wf-map__list summary {
	padding-block: 0.4rem;
}

.wf-map__list li a,
.wf-popup a {
	display: inline-block;
	padding-block: 0.3rem;
}

.wf-map__forget {
	padding-block: 0.35rem;
}

.wf-popup__photo {
	justify-self: start;
	min-height: 32px;
	padding: 0.2rem 0.75rem;
	font: inherit;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--wp--preset--color--theme-1, #fff);
	background: var(--wp--preset--color--theme-3, #3355ff);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.wf-popup__photo:focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-6, #000);
	outline-offset: 2px;
}