/**
 * Mappa — [mappa]
 *
 * Prefisso kb-mappa-. Non condivide niente con le altre animazioni.
 *
 * I colori della mappa vera e propria NON stanno qui: sono nello stile
 * MapLibre dentro mappa.js, perche' li' non sono decorazione ma dati, un
 * colore per strato del vettoriale. Qui stanno solo i colori del contorno:
 * scheda, segnaposto, pulsanti. I due gruppi usano gli stessi valori e vanno
 * cambiati insieme; il JS legge i propri da queste variabili, cosi' il
 * posto in cui metterci mano resta uno solo.
 */

.kb-mappa {

	/* --- Palette ------------------------------------------------------
	 * Tarata sul riferimento Figma, non sullo stile di partenza.
	 *
	 * Lo stile e' "dark" di OpenFreeMap preso verbatim, ma i suoi colori
	 * erano tutti fra L=1 e L=33: quasi nero. Qui vengono rialzati, e
	 * soprattutto viene INVERTITA la tecnica delle strade. In "dark" il
	 * bordo e' chiaro e la carreggiata scura; nel riferimento le strade
	 * sono linee chiare su fondo scuro, quindi i due colori si scambiano.
	 *
	 * L'altra correzione rispetto al mio tentativo precedente: le
	 * etichette sono l'elemento PIU' luminoso e le strade stanno molto
	 * sotto. Avevo messo le strade a #A8A8A8 (4.86:1), quasi alla pari
	 * con le etichette, ed era per questo che sembravano troppo chiare.
	 *
	 * Un limite da conoscere prima di ritoccare: su un terreno #393939
	 * niente di piu' scuro puo' arrivare a 3:1, nemmeno il nero puro, che
	 * si ferma a 1.82:1. La soglia vale per cio' che sta SOPRA il terreno.
	 */

	/* Riempimenti: dal terreno in giu'. */
	--kb-mappa-terreno: #393939;
	--kb-mappa-verde: #2F2F2F;          /* 1.16:1 sul terreno */
	--kb-mappa-acqua: #2B2B2B;          /* 1.23:1: il Po e' la cosa piu' scura */
	--kb-mappa-edifici: #3F3F3F;        /* 1.10:1: appena percepibili, come nel riferimento */

	/* Inchiostro: dal terreno in su.
	 * strade-bordo e' il contorno sotto la carreggiata: a #333333 da' un
	 * soffio di stacco senza disegnare una seconda linea. */
	--kb-mappa-strade-bordo: #333333;
	--kb-mappa-strade-primo: #838383;        /* 3.05:1 sul terreno */
	--kb-mappa-strade-secondarie: #636363;   /* 1.92:1 */
	--kb-mappa-strade-fondo: #4E4E4E;        /* 1.39:1: smorzate, non sparite */
	--kb-mappa-ferrovia: #454545;            /* 1.20:1 */
	--kb-mappa-confini: #4A4A4A;

	/* Testo: sopra tutto, e con un margine netto sulle strade (2.27:1),
	   perche' nel riferimento e' il testo l'elemento piu' luminoso. */
	--kb-mappa-etichette: #C8C8C8;      /* 6.90:1 sul terreno */
	--kb-mappa-etichette-alone: #1F1F1F; /* 9.85:1 sotto il testo */

	/* --- Segnaposto e scheda ----------------------------------------- */
	--kb-mappa-segnaposto: #C94E2C;
	--kb-mappa-testo: #EDEDED;
	--kb-mappa-scheda-sfondo: #1F1F1F;
	--kb-mappa-scheda-bordo: rgba(255, 255, 255, 0.09);

	/* --- Misure ------------------------------------------------------- */
	--kb-mappa-altezza: 480px;
	--kb-mappa-raggio: 0;
	--kb-mappa-scheda-spazio: 20px;

	position: relative;
	width: 100%;
	height: var(--kb-mappa-altezza);
	overflow: hidden;
	border-radius: var(--kb-mappa-raggio);

	/*
	 * ------------------------------------------------------------------
	 * QUESTA RIGA NON SERVE ALLA MAPPA: SERVE ALL'ETICHETTA LATERALE.
	 * Toglierla non rompe niente qui dentro, rompe un ALTRO componente, e
	 * lo rompe in silenzio. E' il motivo di questo commento lungo.
	 * ------------------------------------------------------------------
	 *
	 * COSA FA
	 *
	 * isolation: isolate crea un contesto di impilamento su .kb-mappa.
	 * Tutto quello che sta dentro la mappa - canvas, controlli, segnaposto,
	 * scheda dell'indirizzo, avvisi di MapLibre - smette di competere con il
	 * resto della pagina e compete solo dentro questo riquadro. Il riquadro
	 * poi si impila nella pagina come un blocco solo, al proprio livello,
	 * che qui e' quello naturale del flusso.
	 *
	 * PERCHE'
	 *
	 * Il foglio di MapLibre, in vendor/, dichiara
	 *
	 *     .maplibregl-cooperative-gesture-screen { z-index: 99999 }
	 *
	 * che e' il velo scuro con scritto "usa ctrl per ingrandire", acceso a
	 * ogni rotellata sopra la mappa - e cooperativeGestures e' acceso
	 * apposta, in mappa.js, perche' senza la rotella nuda scorre la pagina.
	 *
	 * Quel 99999 vuol dire "sopra tutto quello che sta NELLA MAPPA", ed e'
	 * giusto. Ma senza un contesto di impilamento non c'e' nessun confine
	 * che dia a quel "nella mappa" un significato: il velo finiva a
	 * competere con la pagina intera, dove 99999 e' quanto il banner dei
	 * cookie. Copriva l'etichetta laterale - che sta a 90 - a ogni
	 * scorrimento sopra la mappa, e la mappa e' in home.
	 *
	 * La cura non e' alzare l'etichetta: a 100000 un fregio decorativo
	 * starebbe sopra al banner dei cookie e sopra a un avviso che serve
	 * all'utente. La cura e' dare un confine al 99999, ed e' questa riga.
	 *
	 * COSA NON CONFINA
	 *
	 * Niente di piu' di quanto confinasse gia' overflow: hidden qui sopra.
	 * Quello impedisce da sempre a qualunque cosa della mappa di essere
	 * DISEGNATA fuori dal riquadro; questa riga cambia solo CHI VINCE dove
	 * i riquadri si sovrappongono. Le uniche cose che si sovrappongono alla
	 * mappa vengono da fuori - etichetta, header, banner dei cookie,
	 * preloader - e devono stare sopra tutte quante.
	 *
	 * Verificato che non ci sia niente, qui dentro, che debba uscire:
	 * mappa.js registra solo NavigationControl e un Marker, e nessun Popup;
	 * l'altro z-index alto del foglio di MapLibre e' .maplibregl-pseudo-
	 * fullscreen, che senza FullscreenControl non viene mai usato; la
	 * scheda dell'indirizzo sta a 2 e le serve solo stare sopra al canvas,
	 * che e' dentro questo stesso riquadro. I suggerimenti dei pulsanti
	 * sono attributi title, cioe' finestrelle del browser: non passano
	 * dall'impilamento della pagina e questa riga non le tocca.
	 */
	isolation: isolate;

	/*
	 * Lo sfondo e' il colore del terreno: finche' le tessere non sono
	 * arrivate non si vede un rettangolo bianco ma qualcosa che somiglia
	 * gia' alla mappa.
	 */
	background: var(--kb-mappa-terreno);
}

.kb-mappa__tela {
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------------ */
/* Scheda con l'indirizzo                                              */
/* ------------------------------------------------------------------ */

/*
 * SEMPRE visibile. Non e' un ripiego che si toglie quando la mappa parte:
 * e' l'elemento di contenuto, ed e' anche quello che leggono i motori di
 * ricerca e gli screen reader. Che regga da sola anche quando la mappa non
 * parte e' una conseguenza, non il suo scopo.
 *
 * Per questo non c'e' nessun fumetto sul segnaposto: mostrerebbe le stesse
 * due righe a mezzo centimetro di distanza.
 */
.kb-mappa__scheda {
	position: absolute;
	inset: auto auto var(--kb-mappa-scheda-spazio) var(--kb-mappa-scheda-spazio);
	z-index: 2;
	max-width: min(320px, calc(100% - 2 * var(--kb-mappa-scheda-spazio)));
	padding: 18px 22px;
	background: var(--kb-mappa-scheda-sfondo);
	border: 1px solid var(--kb-mappa-scheda-bordo);
	color: var(--kb-mappa-testo);
	line-height: 1.4;
}

.kb-mappa__indirizzo {
	margin: 0 0 12px;
}

.kb-mappa__riga {
	display: block;
}

/* La prima riga porta il nome del luogo, la seconda la qualifica. */
.kb-mappa__riga:first-child {
	font-weight: 600;
	letter-spacing: 0.01em;
}

.kb-mappa__riga + .kb-mappa__riga {
	margin-top: 2px;
	opacity: 0.72;
}

.kb-mappa__indicazioni {
	display: inline-block;
	color: var(--kb-mappa-segnaposto);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.kb-mappa__indicazioni:hover,
.kb-mappa__indicazioni:focus-visible {
	text-decoration-thickness: 2px;
}

/* Su schermi stretti la scheda occupa la larghezza piena in basso:
   a 320px fissi coprirebbe meta' della mappa. */
@media (max-width: 600px) {
	.kb-mappa__scheda {
		inset: auto 0 0 0;
		max-width: none;
		border-width: 1px 0 0;
	}
}

/* ------------------------------------------------------------------ */
/* Segnaposto                                                           */
/* ------------------------------------------------------------------ */

.kb-mappa__segnaposto {
	display: block;
	width: 34px;
	height: 46px;
	cursor: pointer;
	color: var(--kb-mappa-segnaposto);
}

/* Il segnaposto e' un SVG inline: il colore arriva da currentColor. */
.kb-mappa__segnaposto svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------ */
/* Comandi                                                              */
/* ------------------------------------------------------------------ */

/*
 * I pulsanti + e - funzionano SEMPRE, anche quando la rotella e'
 * disattivata: sono la via di zoom che non richiede di sapere che esiste
 * il tasto Ctrl.
 */
.kb-mappa .maplibregl-ctrl-group {
	background: var(--kb-mappa-scheda-sfondo);
	border: 1px solid var(--kb-mappa-scheda-bordo);
	box-shadow: none;
}

.kb-mappa .maplibregl-ctrl-group button + button {
	border-top-color: var(--kb-mappa-scheda-bordo);
}

.kb-mappa .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	filter: invert(1);
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Attribuzione                                                         */
/* ------------------------------------------------------------------ */

/*
 * Obbligatoria e non rimovibile: i dati sono OpenStreetMap. Le linee guida
 * della OSM Foundation chiedono il credito a "OpenStreetMap" in un angolo
 * della mappa, con un modo per raggiungere licenza e origine dei dati, e
 * ammettono esplicitamente che stia dietro un pulsante (i).
 *
 * A chiuderla e' il JavaScript: MapLibre la fa nascere APERTA anche con
 * compact: true. Qui si veste lo stato chiuso, che e' quello che si vede
 * quasi sempre, e lo stato aperto, che si vede solo dopo un click.
 */

/* Chiusa: solo la (i), nessuna barra. */
.kb-mappa .maplibregl-ctrl-attrib.maplibregl-compact {
	min-height: 0;
	margin: 8px;
	padding: 0;
	background: none;
	border-radius: 11px;
	box-shadow: none;
}

/* Aperta dopo il click: un fondo appena percepibile dietro al testo. */
.kb-mappa .maplibregl-ctrl-attrib.maplibregl-compact-show {
	padding: 3px 26px 3px 10px;
	background: rgba(0, 0, 0, 0.55);
}

.kb-mappa .maplibregl-ctrl-attrib {
	font-size: 10px;
	line-height: 1.5;
}

.kb-mappa .maplibregl-ctrl-attrib,
.kb-mappa .maplibregl-ctrl-attrib a {
	color: rgba(255, 255, 255, 0.5);
}

.kb-mappa .maplibregl-ctrl-attrib a:hover,
.kb-mappa .maplibregl-ctrl-attrib a:focus-visible {
	color: rgba(255, 255, 255, 0.85);
}

/*
 * Il pulsante (i). Si attenua ma non si rimpicciolisce: resta un bersaglio
 * da toccare col dito, ed e' l'unica strada per arrivare alla licenza.
 */
.kb-mappa .maplibregl-ctrl-attrib-button {
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	opacity: 0.55;
}

.kb-mappa .maplibregl-ctrl-attrib-button:hover,
.kb-mappa .maplibregl-ctrl-attrib-button:focus-visible {
	opacity: 1;
}

/*
 * Il messaggio "usa Ctrl + rotella per ingrandire" di cooperativeGestures.
 * MapLibre lo mostra da solo: qui si veste soltanto.
 */
.kb-mappa .maplibregl-cooperative-gesture-screen {
	background: rgba(0, 0, 0, 0.7);
	color: var(--kb-mappa-testo);
	font-size: 15px;
}