/* 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);

	/*
	 * Leaflet dispone le tessere in un piano più largo del contenitore e conta che sia
	 * il contenitore a ritagliarle. Il markup dichiara gli angoli arrotondati ma non il
	 * ritaglio, quindi le tessere sporgevano a destra: nella colonna laterale del blog
	 * producevano 25px di scorrimento orizzontale su schermi da 768px.
	 */
	overflow: hidden;
}

.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;
}


/* --------------------------------------------------------------------------
   Il fermo-immagine che copre la mappa finché nessuno la apre.

   Le tessere di OpenStreetMap sono l'unica richiesta a un terzo che questo sito
   faccia da solo, e partivano al primo caricamento di ogni pagina in cui la
   mappa compare. Qui al loro posto c'è un pannello del tema: testo e un SVG in
   linea, zero richieste. Il perché sta in template-parts/mappa-eventi.php.

   Il pannello ha lo stesso raggio e la stessa ombra della mappa, così alla
   pressione del pulsante lo scambio non fa saltare il layout.
   -------------------------------------------------------------------------- */

.ph-event-map[hidden] {
  display: none;
}

.ph-mappa-scudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 24px;
  background-image: linear-gradient(160deg, var(--ph-surface) 0%, var(--ph-primary-pale) 100%);
  border: 1px solid var(--ph-border-card);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  text-align: center;
}

/* `display:flex` è una regola d'autore e batte l'`[hidden]{display:none}` del
   browser: quando il JS nasconde il pannello va detto qui. */
.ph-mappa-scudo[hidden] {
  display: none;
}

.ph-mappa-scudo__segno {
  flex: none;
  color: var(--ph-primary);
}

.ph-mappa-scudo__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 20px;
  font-weight: var(--ph-heading-weight);
  line-height: var(--ph-leading-heading);
  color: var(--ph-primary);
}

.ph-mappa-scudo__nota {
  max-width: 46ch;
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: var(--ph-body-weight);
  line-height: 1.5;
  /* Testo, non metadato: è la frase su cui il visitatore decide se aprire la mappa.
     `--ph-text-muted` (#777) sul fondo chiaro del pannello sta a 3,4:1, sotto la
     soglia AA per un corpo da 13px; `--ph-text` (#3f3f3f) sta a 7,5:1. */
  color: var(--ph-text);
}

/* Il pulsante è già `.btn.btn--gradient`: qui solo l'imbottitura, perché il
   `.btn` del tema nasce per una colonna stretta (padding 11px 10px). */
.ph-mappa-scudo__pulsante {
  padding-inline: 22px;
}

/* La colonna del blog: 260px di altezza e un quarto di pagina di larghezza.
   Il pittogramma lì non si stampa (lo decide il template) e il resto rimpicciolisce. */
.ph-mappa-scudo--compatta {
  gap: 10px;
  padding: 16px;
}

.ph-mappa-scudo--compatta .ph-mappa-scudo__titolo {
  font-size: 16px;
}

.ph-mappa-scudo--compatta .ph-mappa-scudo__nota {
  font-size: 12px;
}

/* Stesso raggio della mappa nella colonna del blog (blog.css, .blog-mappa). */
.blog-mappa .ph-mappa-scudo {
  border-radius: 14px;
}

@media (max-width: 767px) {
  .ph-mappa-scudo {
    padding: 18px;
  }

  .ph-mappa-scudo__titolo {
    font-size: 18px;
  }
}