/* Tower map. Colours follow the active theme's palette, with sensible fallbacks. */
.tower-map {
	--brc-accent: var(--wp--preset--color--primary, #7a1f2b);
	--brc-ink: var(--wp--preset--color--contrast, #1f1a17);
	margin-block: 1.5rem;
}

.tower-map__canvas {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #e8e4dc;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
	z-index: 0;
}

.tower-map__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: end;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
}

.tower-map__filters[hidden] {
	display: none;
}

.tower-map__filters label {
	display: grid;
	gap: 0.25rem;
	font-weight: 600;
}

.tower-map__filters input,
.tower-map__filters select {
	font: inherit;
	font-weight: 400;
	padding: 0.45rem 0.6rem;
	border: 1px solid rgb(0 0 0 / 0.25);
	border-radius: 6px;
	background: #fff;
	min-width: 9rem;
}

.tower-map__count {
	margin-left: auto;
	color: rgb(0 0 0 / 0.6);
	padding-bottom: 0.5rem;
}

.tower-pin {
	background: none;
	border: 0;
	line-height: 0;
}

.tower-pin svg {
	display: block;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
	transition: transform 0.12s ease;
	transform-origin: 50% 100%;
}

.tower-pin:hover svg {
	transform: scale(1.15);
}

.tower-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	font-size: 0.875rem;
	color: rgb(0 0 0 / 0.7);
}

.tower-map__legend li {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}

.tower-map__legend svg {
	width: 18px;
	height: 21px;
}

.leaflet-popup-content {
	margin: 0.75rem 1rem;
	font: 0.9375rem/1.4 var(--wp--preset--font-family--body, system-ui, sans-serif);
}

.tower-popup__title {
	display: block;
	font-size: 1rem;
}

.tower-popup__title a {
	color: var(--brc-accent);
}

.tower-popup__meta {
	display: block;
	margin-top: 0.2rem;
	color: rgb(0 0 0 / 0.65);
}

.tower-directions {
	margin-top: 0.5rem;
}

.gm-style .tower-popup {
	padding: 0.15rem 0.25rem 0.25rem;
	font: 0.9375rem/1.4 var(--wp--preset--font-family--body, system-ui, sans-serif);
}

/* Nearest towers to a searched postcode. */
.tower-map__nearest {
	margin: -0.25rem 0 0.75rem;
	font-size: 0.9375rem;
}

.tower-map__nearest[hidden] {
	display: none;
}

.tower-map__nearest ol {
	margin: 0;
	padding-left: 1.4rem;
	columns: 2 20rem;
	column-gap: 2rem;
}

.tower-map__nearest li {
	break-inside: avoid;
	padding: 0.15rem 0;
}

.tower-map__nearest li span {
	color: rgb(0 0 0 / 0.6);
	font-size: 0.875rem;
	white-space: nowrap;
}

/* Neighbouring association labels (e.g. "See Surrey Association"), centred on their point.
   Styled like a map annotation rather than a button: muted italic text with a white halo. */
.tower-map__label {
	position: absolute;
	background: none;
	border: 0;
}

.tower-map__label a {
	display: block;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	color: rgb(0 0 0 / 0.62);
	font: italic 500 0.8125rem/1.2 var(--wp--preset--font-family--body, system-ui, sans-serif);
	letter-spacing: 0.01em;
	text-decoration: none;
	text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff;
}

/* Phones: two lines, and grow leftwards from the point so it doesn't run off the map's right edge. */
@media (max-width: 600px) {
	.tower-map__label a {
		width: max-content;
		max-width: 6.5rem;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		text-align: center;
		transform: translate(-85%, -50%);
	}
}

.tower-map__label a:hover,
.tower-map__label a:focus-visible {
	color: var(--brc-accent);
	text-decoration: underline;
}
