/**
 * BikeFVG — trattamento cromatico globale delle basemap
 * v0.1 — introdotto con tema 0.6.39
 *
 * SCOPO
 * Uniformare tutte le mappe cartografiche del frontend (Waymark/Leaflet e,
 * se introdotte in futuro, MapLibre/Mapbox) con un tono leggermente più caldo,
 * lasciando INALTERATI tracce, marker, POI, controlli e overlay BikeFVG.
 *
 * I valori effettivi vengono sovrascritti dal pannello
 * Itinerari → Mappe e icone. Le variabili qui sotto sono solo fallback.
 */
:root {
	--bikefvg-map-basemap-filter:
		sepia(.10)
		saturate(.78)
		hue-rotate(-8deg)
		brightness(1.04)
		contrast(.96);
}

/*
 * Waymark usa Leaflet. Il filtro viene applicato soltanto al pane dei tile
 * raster: la traccia GPX, i marker A/B, i POI e i controlli restano quindi
 * nei colori originali e mantengono il contrasto progettato da BikeFVG.
 */
.leaflet-container .leaflet-tile-pane {
	filter: var(--bikefvg-map-basemap-filter);
}

/* Compatibilità preventiva con eventuali basemap vettoriali future. */
.maplibregl-map .maplibregl-canvas,
.mapboxgl-map .mapboxgl-canvas {
	filter: var(--bikefvg-map-basemap-filter);
}

/* Stampa: niente correzione cromatica aggiuntiva. */
@media print {
	.leaflet-container .leaflet-tile-pane,
	.maplibregl-map .maplibregl-canvas,
	.mapboxgl-map .mapboxgl-canvas {
		filter: none;
	}
}

/* -------------------------------------------------------------------------
 * Waymark — sistema POI BikeFVG
 * -------------------------------------------------------------------------
 * I valori effettivi vengono generati dal pannello Itinerari → Mappe e icone.
 * Il JavaScript globale li applica anche ai Marker Type Waymark manuali; le
 * icone servizi automatiche sono invece gestite direttamente da BikeFVG.
 */
:root {
	--bikefvg-map-poi-shape: circle;
	--bikefvg-map-poi-size: medium;
	--bikefvg-map-poi-radius: 999px;
	--bikefvg-map-service-radius: 7px;
	--bikefvg-map-poi-border-width: 2px;
	--bikefvg-map-poi-border-color: var(--wp--preset--color--paper, #f6f1ea);
	--bikefvg-map-poi-shadow: 0 2px 7px color-mix(in srgb, var(--wp--preset--color--ink, #1e2420) 24%, transparent);
}

/*
 * I marker Waymark manuali rappresentano i POI del percorso e, di default,
 * diventano tondi. I Servizi automatici usano invece una geometria separata. Non imponiamo il colore di fondo: resta quello
 * del Marker Type e può quindi comunicare categorie/stati diversi.
 */
.waymark-map .waymark-marker-rectangle .waymark-marker-background,
.waymark-container .waymark-marker-rectangle .waymark-marker-background {
	box-sizing: border-box !important;
	border: var(--bikefvg-map-poi-border-width) solid var(--bikefvg-map-poi-border-color) !important;
	border-radius: var(--bikefvg-map-poi-radius) !important;
	box-shadow: var(--bikefvg-map-poi-shadow) !important;
}

/* Se in futuro si passa a circle da una sola variabile, mantiene lo stesso
 * linguaggio di bordo/ombra senza bisogno di riscrivere il componente. */
.waymark-map .waymark-marker-circle .waymark-marker-background,
.waymark-container .waymark-marker-circle .waymark-marker-background {
	box-sizing: border-box !important;
	border: var(--bikefvg-map-poi-border-width) solid var(--bikefvg-map-poi-border-color) !important;
	border-radius: 50% !important;
	box-shadow: var(--bikefvg-map-poi-shadow) !important;
}

/* Icone compatte: funzionano con Font Awesome/Ionicons, testo, emoji e HTML. */
.waymark-map .waymark-marker .waymark-marker-icon,
.waymark-container .waymark-marker .waymark-marker-icon {
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-weight: 700;
}

.waymark-map .waymark-marker .waymark-icon-text,
.waymark-container .waymark-marker .waymark-icon-text {
	font-size: 14px !important;
	line-height: 1 !important;
}

.waymark-map .waymark-marker .waymark-icon-icon::before,
.waymark-container .waymark-marker .waymark-icon-icon::before {
	font-size: 15px !important;
}

.waymark-map .waymark-marker .waymark-icon-html img,
.waymark-container .waymark-marker .waymark-icon-html img {
	max-width: 17px !important;
	max-height: 17px !important;
	object-fit: contain;
}

/* La lieve variazione di profondità aiuta il POI a staccarsi dalla basemap
 * calda senza introdurre animazioni decorative. */
@media (hover: hover) and (pointer: fine) {
	.leaflet-marker-icon:hover .waymark-marker-rectangle .waymark-marker-background,
	.leaflet-marker-icon:hover .waymark-marker-circle .waymark-marker-background {
		box-shadow: 0 3px 10px color-mix(in srgb, var(--wp--preset--color--ink, #1e2420) 30%, transparent) !important;
	}
}

/* -------------------------------------------------------------------------
 * Marker automatici Servizi e luoghi
 * -------------------------------------------------------------------------
 * Questi marker vengono aggiunti dal tema sopra la mappa Waymark/Leaflet.
 * Forma e dimensioni arrivano da Itinerari → Mappe e icone; colori e segno
 * possono essere differenti per ciascuna macro-categoria.
 */
.bikefvg-map-service-marker {
	background: transparent !important;
	border: 0 !important;
}

.bikefvg-map-service-marker__shell {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--bikefvg-marker-bg, var(--wp--preset--color--ink, #1e2420));
	color: var(--bikefvg-marker-fg, var(--wp--preset--color--paper, #f6f1ea));
	border: var(--bikefvg-marker-border-width, 2px) solid var(--bikefvg-marker-border-color, #f6f1ea);
	border-radius: var(--bikefvg-marker-radius, 7px);
	box-shadow: var(--bikefvg-marker-shadow, 0 2px 7px rgba(30,36,32,.24));
}

.bikefvg-map-service-marker__icon,
.bikefvg-map-service-marker__shell svg,
.bikefvg-map-service-marker__shell img {
	display: block;
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.bikefvg-map-service-marker.is-clustered {
	overflow: visible !important;
}

.bikefvg-map-service-marker__count {
	position: absolute;
	right: -6px;
	bottom: -5px;
	z-index: 3;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-width: 19px;
	height: 19px;
	padding: 0 3px;
	border: 2px solid var(--wp--preset--color--paper, #f6f1ea);
	border-radius: 999px;
	background: var(--wp--preset--color--ink, #1e2420);
	color: var(--wp--preset--color--paper, #f6f1ea);
	font: 800 9px/1 var(--wp--preset--font-family--body, Inter, sans-serif);
	box-shadow: 0 1px 4px rgba(30,36,32,.24);
}

.bikefvg-map-service-marker__shell--compact {
	width: 26px !important;
	height: 26px !important;
}

.bikefvg-map-service-popup {
	min-width: 180px;
	max-width: 250px;
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
}

.bikefvg-map-service-popup strong,
.bikefvg-map-service-popup span,
.bikefvg-map-service-popup a {
	display: block;
}

.bikefvg-map-service-popup strong {
	margin-bottom: .25rem;
	font-size: .95rem;
}

.bikefvg-map-service-popup span {
	margin-top: .15rem;
	color: var(--wp--preset--color--ink-secondary, #47564d);
	font-size: .78rem;
}

.bikefvg-map-service-popup a {
	margin-top: .55rem;
	font-weight: 700;
	text-underline-offset: .15em;
}

.bikefvg-map-service-popup__route-title {
	margin-bottom: .3rem !important;
	font-size: .98rem !important;
}

.bikefvg-map-service-popup__intro {
	margin: 0 0 .45rem !important;
	color: var(--wp--preset--color--ink-secondary, #47564d);
}

.bikefvg-map-service-popup__item + .bikefvg-map-service-popup__item {
	margin-top: .65rem;
	padding-top: .65rem;
	border-top: 1px solid var(--wp--preset--color--divider, #d6cec4);
}

/* -------------------------------------------------------------------------
 * POI editoriali Waymark → rendering BikeFVG
 * -------------------------------------------------------------------------
 * I Point salvati in Waymark mantengono il loro Type nel GeoJSON. Quando il
 * Type corrisponde al vocabolario canonico BikeFVG, il frontend sostituisce
 * soltanto il divIcon Leaflet: i dati e i popup Waymark restano invariati.
 */
.bikefvg-map-route-poi {
	background: transparent !important;
	border: 0 !important;
}

/* Tutti i POI convertiti dal tema usano lo stesso bounding box. Leaflet
 * riceve la stessa misura anche via iconSize; questa regola impedisce che
 * classi Waymark o dimensioni intrinseche di SVG/PNG alterino la resa. */
.bikefvg-map-route-poi,
.bikefvg-map-route-poi__shell {
	box-sizing: border-box;
}

.bikefvg-map-route-poi__shell {
	min-width: var(--bikefvg-poi-size, 34px);
	min-height: var(--bikefvg-poi-size, 34px);
	max-width: var(--bikefvg-poi-size, 34px);
	max-height: var(--bikefvg-poi-size, 34px);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--bikefvg-poi-bg, var(--wp--preset--color--accent, #1c6b7a));
	color: var(--bikefvg-poi-fg, var(--wp--preset--color--paper, #f6f1ea));
	border: var(--bikefvg-poi-border-width, 2px) solid var(--bikefvg-poi-border-color, #f6f1ea);
	border-radius: var(--bikefvg-poi-radius, 999px);
	box-shadow: var(--bikefvg-poi-shadow, 0 2px 7px rgba(30,36,32,.24));
}

.bikefvg-map-route-poi__shell svg,
.bikefvg-map-route-poi__shell img,
.bikefvg-map-route-poi__icon {
	display: block;
	width: 58%;
	height: 58%;
	object-fit: contain;
}