/* ==========================================================================
   OSM Map — component styles
   BEM block: osm-map | osm-popup
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties (design tokens)
   Defined on the block element so they're available to all descendants
   and can be overridden per-instance via inline style on .osm-map.
   -------------------------------------------------------------------------- */

.osm-map {
	/* Layout */
	--osm-map-height: 500px;       /* overridden per shortcode instance via inline style */
	--osm-map-border-color: #ddd;
	--osm-map-bg: #f8f9fa;

	/* Accent — overridden per shortcode instance via inline style.
	   Drives marker defaults, popup info boxes and cluster colours. */
	--osm-accent-color: #d35400;

	/* Popup chrome */
	--osm-popup-bg: #323334;
	--osm-popup-text: #fff;
	--osm-popup-subtext: #aaa;
	--osm-popup-radius: 16px;
	--osm-popup-min-width: 180px;
	--osm-popup-max-width: 240px;
	--osm-popup-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

	/* Info box inside popup — derived from accent colour so one variable
	   controls the base, hover and active states automatically. */
	--osm-infobox-bg:        var(--osm-accent-color);
	--osm-infobox-bg-hover:  color-mix(in srgb, var(--osm-accent-color) 80%, #000);
	--osm-infobox-bg-active: color-mix(in srgb, var(--osm-accent-color) 60%, #000);
	--osm-infobox-radius: 6px;
	--osm-infobox-divider: rgba(255, 255, 255, 0.3);

	/* Status messages */
	--osm-status-color: #666;
	--osm-status-font-size: 0.875rem;
	--osm-error-color: #c0392b;
}

/* --------------------------------------------------------------------------
   Block: osm-map
   -------------------------------------------------------------------------- */

.osm-map {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Element: osm-map__canvas
   The DOM node Leaflet mounts onto.
   -------------------------------------------------------------------------- */

.osm-map__canvas {
	width: 100%;
	height: var(--osm-map-height);
	overflow: hidden;
	border: 1px solid var(--osm-map-border-color);
	background-color: var(--osm-map-bg);
}

/* --------------------------------------------------------------------------
   Element: osm-map__loading
   -------------------------------------------------------------------------- */

.osm-map__loading {
	margin: 0;
	padding: 12px;
	text-align: center;
	font-size: var(--osm-status-font-size);
	color: var(--osm-status-color);
}

.osm-map__loading[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Element: osm-map__error
   -------------------------------------------------------------------------- */

.osm-map__error {
	margin: 0;
	padding: 12px;
	text-align: center;
	font-size: var(--osm-status-font-size);
	color: var(--osm-error-color);
}

.osm-map__error[hidden] {
	display: none;
}

/* ==========================================================================
   Leaflet popup overrides
   ========================================================================== */

.leaflet-popup-content-wrapper {
	background-color: var(--osm-popup-bg) !important;
	color: var(--osm-popup-text) !important;
	border-radius: var(--osm-popup-radius) !important;
	padding: 8px 0 !important;
	text-align: center;
	box-shadow: var(--osm-popup-shadow);
}

.leaflet-popup-tip {
	background-color: var(--osm-popup-bg) !important;
}

.leaflet-popup-content {
	margin: 28px 20px !important;
	width: auto !important;
	min-width: var(--osm-popup-min-width);
	max-width: var(--osm-popup-max-width);
}

.leaflet-popup-close-button {
	display: none;
}

/* ==========================================================================
   Block: osm-popup
   BEM elements for the HTML we inject into each Leaflet popup.
   ========================================================================== */

.osm-popup__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.osm-popup__subtitle {
	display: block;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--osm-popup-subtext);
	margin-bottom: 14px;
}

.osm-popup__info-box {
    display: block;
    padding: 10px;
    border-radius: var(--osm-infobox-radius);
    font-size: 0.8125rem;
}

.osm-popup__website {
    display: block;
    padding: 7px 10px 9px;
    background-color: var(--osm-accent-color);
    color: var(--osm-popup-text) !important;
    border-radius: var(--osm-infobox-radius);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.osm-popup__website:hover,
.osm-popup__website:focus {
    background-color: color-mix(in srgb, var(--osm-accent-color) 80%, #000);
}

/* ==========================================================================
   Leaflet marker
   ========================================================================== */

.leaflet-marker-icon {
	cursor: pointer;
}

/* ==========================================================================
   Leaflet MarkerCluster overrides
   ========================================================================== */

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background-color: var(--osm-accent-color);
	color: #fff;
	font-weight: 700;
}

.marker-cluster-small {
	background-color: color-mix(in srgb, var(--osm-accent-color) 30%, transparent);
}

.marker-cluster-medium {
	background-color: color-mix(in srgb, var(--osm-accent-color) 50%, transparent);
}

.marker-cluster-large {
	background-color: color-mix(in srgb, var(--osm-accent-color) 70%, transparent);
}