/**
 * Sacrantica — stile mappa Leaflet
 * Palette e font come da linee guida brand:
 * - Titoli: "Baskerville URW", serif
 * - Corpo/UI: "Open Sans", sans-serif
 */

.sacrantica-map {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	background: #F2E6D1; /* colore di sfondo mappa, mentre le tile caricano */
	/* Con il dispositivo in modalità scura, alcuni browser (es. Chrome
	 * Android con "Tema scuro per i siti web") applicano un'inversione
	 * algoritmica ai contenuti che non dichiarano esplicitamente un tema:
	 * sopra al filtro duotone qui sotto (pensato per uno sfondo chiaro),
	 * il risultato diventa nero invece del bianco avorio voluto.
	 * color-scheme: light dice al browser che questo elemento è comunque
	 * pensato per un tema chiaro, disattivando l'inversione automatica. */
	color-scheme: light;
}

/* ---------- Effetto "carta" (opzione A: filtro CSS su tile reali) ----------
 * Rif. Anna Giambo — Aesop City Guides: colori ESATTI forniti dal
 * direttore creativo — sfondo #F2E6D1 (bianco avorio), vie #BB6F14
 * (ocra/terracotta) — non un'approssimazione via sepia/hue-rotate.
 * Tecnica "duotone": il filtro SVG #sacrantica-duotone (definito nel
 * markup, vedi map-widget.php) mappa il nero della tile CARTO dark_all
 * esattamente su #F2E6D1 e il bianco esattamente su #BB6F14
 * (feComponentTransfer type="table" — matematica precisa, non filtri
 * approssimati). Il brightness(3.6) applicato PRIMA del duotone serve a
 * "stirare" i grigi medi delle vie (che nella tile originale non sono
 * bianco puro) verso l'estremo chiaro, così risultano vicine a #BB6F14
 * invece che a un beige intermedio poco leggibile.
 * Il filtro agisce solo sul pannello delle tile (leaflet-tile-pane):
 * marker e popup restano nitidi e a piena saturazione, come previsto dal
 * wireframe del popover.
 */
/* NB: il duotone è ora calcolato in canvas da sacrantica-map.js
 * (DuotoneTileLayer): il filtro CSS/SVG qui sopra descritto non funziona
 * su WebKit/iOS. La matematica è la stessa. */

/* ---------- Marker a goccia (dal punto sulla "i" del logo) ---------- */
.sacrantica-marker {
	display: block;
	filter: drop-shadow(0 2px 4px rgba(47, 53, 36, 0.35));
	transition: transform 0.15s ease;
}

.sacrantica-marker:hover,
.sacrantica-marker.is-active {
	transform: scale(1.12);
}

/* ---------- Cluster (Leaflet.markercluster): pallino tondo in stile brand,
 * al posto del giallo/verde di default della libreria ---------- */
.sacrantica-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sacrantica-cluster__inner {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2F3524;
	border: 2px solid #F2E6D1;
	box-shadow: 0 2px 4px rgba(47, 53, 36, 0.35);
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #F2E6D1;
	transition: transform 0.15s ease;
}

.sacrantica-cluster:hover .sacrantica-cluster__inner {
	transform: scale(1.1);
}

/* ---------- Popup card (nuovo stile: immagine dominante + testo overlay) ---------- */
.leaflet-popup.sacrantica-popup .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: var(--sacrantica-card-raggio, 14px);
	overflow: hidden;
	background: transparent;
	box-shadow: 0 8px 24px rgba(47, 53, 36, 0.35);
}

.leaflet-popup.sacrantica-popup .leaflet-popup-content {
	margin: 0;
	width: 260px !important;
}

.leaflet-popup.sacrantica-popup .leaflet-popup-tip {
	background: #2F3524;
}

.sacrantica-card {
	position: relative;
	width: 100%;
	height: 320px;
	background-size: cover;
	background-position: center;
	/* Sfondo = colore della tipologia del luogo (lo stesso del pin sulla
	 * mappa, campo ACF "colore_marker" sulla tassonomia): impostato inline
	 * da JS per ogni popup via --sacrantica-tipo-colore (vedi
	 * sacrantica-map.js, creaPopupHTML). Visibile ai bordi/dietro
	 * l'immagine e nei luoghi senza immagine. Rif. Anna Giambo: il popover
	 * "assume il colore della tipologia di luogo".
	 */
	background-color: var(--sacrantica-tipo-colore, #2F3524);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Filtro colore sopra l'immagine, stesso colore del pin/tipologia: rende
 * visivamente riconoscibile la categoria del luogo già dal popover, non
 * solo dal colore del marker. mix-blend-mode: multiply invece di un
 * overlay a tinta piatta, per non "lavare" la foto — il colore tinge le
 * zone chiare/medie e lascia leggibili le ombre. Sta SOPRA l'immagine
 * (che è lo sfondo di .sacrantica-card) ma SOTTO il testo: per questo sia
 * qui che su .sacrantica-card__overlay serve uno z-index esplicito,
 * altrimenti un elemento posizionato (come questo, position:absolute)
 * finirebbe sempre sopra un elemento non posizionato come l'overlay di
 * testo, indipendentemente dall'ordine nel markup.
 */
.sacrantica-card__tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: var(--sacrantica-tipo-colore, transparent);
	opacity: var(--sacrantica-tipo-opacita, 0.4);
	mix-blend-mode: multiply;
}

/*
 * Colori/raggio personalizzabili da Elementor (vedi class-map-widget.php):
 * ogni proprietà usa una custom property CSS con fallback al valore di
 * default del wireframe, impostata come inline style su #sacrantica-map
 * dal PHP quando l'utente personalizza un valore nel pannello — se non
 * personalizzato, il fallback qui sotto si applica automaticamente.
 *
 * NOTA: colore dichiarato ESPLICITAMENTE su ogni elemento di testo
 * (titolo, sottotitolo, bottone), non solo ereditato dal genitore
 * .sacrantica-card__overlay: un colore ereditato ha la priorità più
 * bassa possibile nella cascata CSS e viene sovrascritto da QUALSIASI
 * regola del tema/Elementor che tocchi h3/a (es. "h3 { color: ... }"),
 * anche con specificità più bassa — è quello che causava il titolo in
 * ocra e il bottone "Scopri" in blu invece che in avorio come da
 * wireframe. L'!important blinda il componente da ulteriori conflitti:
 * è una card di design fisso, non deve ereditare la tipografia globale
 * del sito.
 */
.sacrantica-card__overlay {
	position: relative;
	z-index: 2; /* sopra .sacrantica-card__tint (z-index 1) */
	width: 100%;
	padding: 16px;
	background: linear-gradient(to top, var(--sacrantica-overlay-colore, rgba(47, 53, 36, 0.92)) 10%, rgba(47, 53, 36, 0) 100%) !important;
}

.sacrantica-card__title {
	font-family: "Baskerville URW", Georgia, serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--sacrantica-titolo-colore, #F2E6D1) !important;
}

.sacrantica-card__subtitle {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	opacity: 0.85;
	margin: 0 0 1.3em;
	color: var(--sacrantica-sottotitolo-colore, #F2E6D1) !important;
}

.sacrantica-card__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sacrantica-card__button {
	display: inline-block;
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 8px 16px;
	text-decoration: none;
	transition: background 0.15s ease;
	color: var(--sacrantica-bottone-testo-colore, #F2E6D1) !important;
	background: var(--sacrantica-bottone-sfondo-colore, rgba(242, 230, 209, 0.2)) !important;
	border: none !important;
}

.sacrantica-card__button:hover {
	background: var(--sacrantica-bottone-sfondo-hover-colore, rgba(242, 230, 209, 0.5)) !important;
	color: var(--sacrantica-bottone-testo-colore, #F2E6D1) !important;
}

/* "Raggiungi": azione secondaria accanto a "Scopri" — solo contorno, per
 * non competere con il pulsante principale (stessa gerarchia visiva di
 * CTA/link-secondario nella pagina di dettaglio). */
.sacrantica-card__button--secondario {
	background: transparent !important;
	border: 1px solid var(--sacrantica-bottone-testo-colore, #F2E6D1) !important;
}

.sacrantica-card__button--secondario:hover {
	background: var(--sacrantica-bottone-sfondo-hover-colore, rgba(242, 230, 209, 0.5)) !important;
}