/* OVAstudio — ova-map.css
 *
 * Styles for the Leaflet map block. Kept minimal and monochrome to match the
 * theme; tweak the marker and control colours to taste.
 */

.ova-map-block {
	margin-block: var(--space-4, 2rem);
}

/* The map needs an explicit height (set inline by render.php). This is a
   safety fallback so the container never collapses to 0px. */
.ova-map {
	width: 100%;
	min-height: 280px;
	background: #f4f4f2;
	/* Own stacking context so Leaflet's internal z-indexes (its zoom control is
	   z-index 1000) stay trapped inside the map and can't render over the
	   sticky .site-header (z-index 100). */
	position: relative;
	z-index: 0;
}

/* The theme's global reset (img { max-width: 100%; height: auto }) can fight
   Leaflet's fixed-size tiles. Leaflet guards most of these, but unset it here
   too so tile and marker geometry is never constrained. */
.ova-map img {
	max-width: none;
	max-height: none;
}

/* Monochrome option: desaturate just the tile imagery, leaving the marker,
   controls and attribution in full contrast. */
.ova-map--grayscale .leaflet-tile-pane {
	filter: grayscale(100%);
}

/* Custom marker — a hollow black ring matching the site's custom cursor
   (.ova-cursor: 28px circle, 4px black border, transparent fill). */
.ova-marker {
	width: 28px;
	height: 28px;
	border: 4px solid #000;
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
}

/* Pare back Leaflet's default chrome to suit a minimal design. */
.ova-map .leaflet-control-zoom a {
	border-radius: 0;
	color: #000;
}
.ova-map .leaflet-popup-content-wrapper {
	border-radius: 2px;
}
.ova-map .leaflet-popup-content {
	font-size: 14px;
	line-height: 1.5;
}