/* Festival Core — venue map. */
.fp-map {
	position: relative;
	min-height: 320px;
	height: 100%;
	border-radius: var(--r-m, 12px);
	overflow: hidden;
	background: var(--c-wash, #f2f5f3);
	isolation: isolate;
}

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

.fp-map:not(.is-loaded) .fp-map__canvas {
	visibility: hidden;
}

.fp-map__placeholder {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 320px;
	height: 100%;
	padding: 24px;
	text-align: center;
	/* Stylised street grid so the placeholder reads as "a map" without loading one. */
	background-color: var(--c-wash, #f2f5f3);
	background-image:
		linear-gradient(90deg, rgb(4 106 56 / 7%) 2px, transparent 2px),
		linear-gradient(0deg, rgb(4 106 56 / 7%) 2px, transparent 2px),
		linear-gradient(35deg, transparent 48%, rgb(4 106 56 / 12%) 48%, rgb(4 106 56 / 12%) 52%, transparent 52%);
	background-size: 44px 44px, 44px 44px, 100% 100%;
}

.fp-map__placeholder[hidden] {
	display: none;
}

.fp-map__pin,
.fp-map__marker span {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50% 50% 50% 0;
	background: var(--c-red, #da291c);
	box-shadow: 0 0 0 3px #fff, 0 6px 14px rgb(20 32 26 / 30%);
	transform: rotate(-45deg);
	position: relative;
}

.fp-map__pin::after,
.fp-map__marker span::after {
	content: "";
	position: absolute;
	inset: 11px;
	border-radius: 50%;
	background: var(--c-yellow, #ffd100);
}

.fp-map__pin {
	margin-bottom: 10px;
}

.fp-map__venue {
	margin: 0;
	font-family: var(--f-display, inherit);
	font-size: 1.25rem;
	font-weight: 800;
}

.fp-map__address {
	margin: 0;
	color: var(--c-muted, #4b5751);
}

.fp-map__load {
	margin-top: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--c-green, #046a38);
	border-radius: 999px;
	background: var(--c-green, #046a38);
	color: #fff;
	font: 600 1rem/1 var(--f-body, inherit);
	cursor: pointer;
}

.fp-map__load:hover {
	background: var(--c-green-dark, #034d29);
	border-color: var(--c-green-dark, #034d29);
}

.fp-map__note {
	max-width: 36ch;
	margin: 6px 0 0;
	color: var(--c-muted, #4b5751);
	font-size: 0.8125rem;
}

/* Leaflet overrides to match the site. */
.fp-map__marker {
	background: none;
	border: 0;
}

.fp-map .leaflet-popup-content-wrapper {
	border-radius: 10px;
	font-family: var(--f-body, inherit);
}

.fp-map .leaflet-popup-content a {
	color: var(--c-green, #046a38);
	font-weight: 600;
}

.fp-map .leaflet-container:focus-visible {
	outline: 3px solid var(--c-green, #046a38);
	outline-offset: -3px;
}