/* Mappa degli eventi — Leaflet.
   ------------------------------------------------------------------
   Regole copiate dal blocco <style> che l'originale stampa nella home
   (research/html/home.html, subito dopo il div #ph-map-1). Valori identici,
   nessuna reinterpretazione: l'ombra è `0 4px 20px rgba(0,0,0,.12)`, il viola
   del bottone `#7d4b9e` e il suo hover `#5e3577`, la transizione `.2s`.

   Il foglio arriva dopo leaflet.css e MarkerCluster*.css (dipendenze dichiarate
   in inc/mappa-eventi.php), quindi non serve alcun !important per vincere: solo
   `color: #fff !important` e `text-decoration: none !important` restano, perché
   erano già così nell'originale e servono a battere le regole del tema sui link.
   ------------------------------------------------------------------ */

.ph-event-map {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

.ph-map-popup {
	font-family: inherit;
	min-width: 210px;
	max-width: 290px;
	line-height: 1.55;
}

.ph-map-popup h4 {
	/* Dal blocco <style> dell'originale. */
	margin: 0 0 5px;
	font-size: 15px;
	color: #1a1a1a;
	/* Dalla cascata dell'originale: il kit Elementor
	   (uploads__elementor__css__post-6.css: `h4 { font-family:"Poppins"; font-weight:600 }`)
	   e il reset di hello-elementor (`h1..h6 { line-height:1.2 }`). Qui vanno scritti,
	   perché il tema dà agli heading line-height 1.25 — la sola cifra che divergeva. */
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

.ph-map-popup .ph-pop-date {
	display: block;
	color: #888;
	font-size: 12px;
	margin-bottom: 3px;
}

.ph-map-popup .ph-pop-venue {
	display: block;
	font-size: 13px;
	color: #555;
	margin-bottom: 10px;
}

.ph-map-popup a.ph-pop-btn {
	display: inline-block;
	background: #7d4b9e;
	color: #fff !important;
	padding: 5px 14px;
	border-radius: 20px;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 600;
	transition: background .2s;
}

.ph-map-popup a.ph-pop-btn:hover {
	background: #5e3577;
}


/* Il pin: `L.divIcon` con SVG inline, quindi nessun background da caricare.
   La classe è vuota nell'originale (`className: ''`), Leaflet aggiunge solo
   `leaflet-div-icon`, che ha un bordo bianco e uno sfondo suoi: vanno via,
   altrimenti attorno al pin comparirebbe un quadratino. */
.leaflet-div-icon {
	background: transparent;
	border: 0;
}

/* Il badge del cluster non ha CSS qui: è costruito in JS con lo style inline
   dell'originale (cerchio #7d4b9e da 36px, bordo bianco 2px, ombra
   0 2px 6px rgba(0,0,0,.3)) e il suo divIcon ha `className: ''`, quindi le classi
   di MarkerCluster.Default.css non lo raggiungono — come sull'originale. */

/* Il velo di gesture-handling ("usa due dita per spostare la mappa") eredita
   Roboto dal CSS della libreria: sull'originale era così. Si allinea al raggio
   del contenitore, così l'overlay non esce dagli angoli arrotondati. */
.ph-event-map.leaflet-container:after {
	border-radius: 12px;
}

/* L'attribuzione di OpenStreetMap: obbligatoria per licenza, e sull'originale
   sta nell'angolo in basso a destra con lo stile di default di Leaflet. */
.ph-event-map .leaflet-control-attribution {
	font-size: 11px;
}