/*
La cartina dei luoghi di VisitCaprarola.

SCOPO
Dare forma alla sola pagina /cartina-virtuale/, disegnata da
library/cartina.php al posto della scorciatoia [wpgmza] che il plugin spento
non interpreta piu'. Una mappa sola con dentro tutti i ventinove luoghi, e
sotto l'elenco completo degli stessi luoghi, che e' anche cio' che resta
quando il JavaScript non gira.

PERCHE QUESTO FOGLIO NON EREDITA NIENTE DAGLI ALTRI, a differenza di
vc-itinerario.css che eredita quasi tutto. La pagina della cartina passa da
page-cartina.php, che ha "<div class="container fullWidth" role="main">" e non
"<main id="main-visit">": tutti gli agganci di vc-archivi.css — il titolo con
la barretta ambra, l'introduzione, l'elenco vuoto — sono legati a quell'id e
qui non hanno bersaglio. Copiarli sarebbe stato piu' rapido; rifarli qui
significa non dipendere da un contenitore che questa pagina non ha. Cio' che si
riusa e' il VOCABOLARIO — i token di vc-tokens.css — non i selettori.

ORDINE DI CARICAMENTO
library/cartina.php accoda, e solo su questa pagina, leaflet.css e poi questo
foglio, con dipendenze dichiarate su vc-tokens, style.css, vc-mobile, vc-nav e
leaflet-css. L'accodamento e' agganciato a wp_enqueue_scripts con PRIORITA 5,
cioe' prima di quello di library/joints.php: e' cio' che lascia vc-a11y.css
ultimo della coda, come quel file prescrive. Questo foglio non ridichiara mai
un contorno di messa a fuoco, proprio per non litigare con lui.

IN QUESTO FILE NON C'E' NESSUN !important.

BREAKPOINT: quelli di Foundation 5 gia' in uso nel tema, small fino a 40em,
medium da 40.063em. Le media query non accettano var(), quindi i valori sono
scritti per esteso.
*/

/* ===============================================================
   0. Le variabili di questa pagina

   Dichiarate qui e non in vc-tokens.css: valgono per una pagina sola e
   metterle nel vocabolario comune vorrebbe dire farle scaricare a tutto il
   sito per usarle in un posto solo. Ogni var() qui sotto porta comunque il
   suo valore di riserva, cosi' il foglio regge anche se questa sezione
   sparisse.
   =============================================================== */

.vc-cartina {
	--vc-cartina-tappa: #11273d;   /* disco della tappa: 15.20:1 su bianco */
	--vc-cartina-luogo: #007095;   /* pallino dei luoghi fuori itinerario: 5.60:1 */
	--vc-cartina-segno-testo: #ffffff;
	--vc-cartina-bordo: #cecece;
	--vc-cartina-altezza: 62vh;
}

/* ===============================================================
   1. Il riquadro della mappa

   IL RIQUADRO NASCE CON hidden E LO TOGLIE IL JAVASCRIPT. La regola qui sotto
   non e' una ripetizione del comportamento di difetto del browser: e' una
   difesa. Basta una regola qualsiasi che dia "display: block" a un div
   discendente perche' [hidden] smetta di nascondere, e in quel caso chi non ha
   il JavaScript si troverebbe davanti il rettangolo grigio che tutto questo
   lavoro serve a evitare. (0,2,0) e' abbastanza per battere qualunque regola
   di elemento senza alzare la voce.
   =============================================================== */

.vc-cartina-riquadro[hidden] {
	display: none;
}

.vc-cartina-riquadro {
	margin: var(--vc-spazio-4, 1.875rem) 0;
}

/*
   ALTEZZA IN vh E NON IN PIXEL, con un minimo e un massimo. Questa pagina si
   guarda in cammino, su uno schermo alto e stretto: 62vh lascia sempre vedere
   che sotto la mappa la pagina continua, il che e' l'unico modo per far capire
   che c'e' un elenco. Il minimo impedisce che su un telefono in orizzontale la
   mappa si riduca a una fessura; il massimo impedisce che su un monitor da
   ufficio diventi un manifesto.
*/
.vc-cartina-mappa {
	position: relative;
	min-height: 320px;
	max-height: 720px;
	height: var(--vc-cartina-altezza, 62vh);
	border: 1px solid var(--vc-cartina-bordo, #cecece);
	border-radius: var(--vc-raggio-2, 6px);

	/* Leaflet disegna i riquadri fuori squadra durante lo zoom: senza questo
	   sborderebbero dagli angoli arrotondati. */
	overflow: hidden;

	/* Fondo neutro sotto i riquadri mentre arrivano: e' il colore della carta
	   di OpenStreetMap, cosi' il caricamento non lampeggia di bianco. */
	background-color: #e8e4dd;
}

.vc-cartina-legenda {
	margin: var(--vc-spazio-2, 0.9375rem) 0 0;
	font-size: 0.9375rem;
	line-height: var(--vc-interlinea, 1.5);
	color: var(--vc-colore-ardesia, #5e6b76); /* 5.47:1 su bianco, ricalcolato */
}

/*
   Il velo del tocco: compare solo su telefono e solo finche' la mappa non e'
   stata toccata. pointer-events a none e' cio' che lo rende innocuo — il tocco
   arriva alla mappa sotto, non a lui — e aria-hidden non serve perche' il
   testo che porta e' un'istruzione per il dito, non un'informazione: chi usa
   un lettore di schermo lavora sull'elenco, dove i pulsanti dicono da soli
   cosa fanno.
*/
.vc-cartina-velo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 500; /* i pannelli di Leaflet stanno fra 200 e 700 */
	margin: 0;
	padding: var(--vc-spazio-1, 0.46875rem) var(--vc-spazio-2, 0.9375rem);
	background-color: rgba(17, 39, 61, 0.85);
	color: #ffffff; /* 10.17:1 sul velo fuso con la carta di OSM */
	font-size: 0.875rem;
	text-align: center;
	pointer-events: none;
}

/* ===============================================================
   2. I due segnaposti

   TUTTA LA GERARCHIA STA QUI, e sta qui apposta: nessun luogo viene tolto
   dalla mappa, nessuno finisce dietro un filtro spento. I luoghi
   dell'itinerario sono dischi da 30px con dentro il numero della loro tappa;
   gli altri sono pallini da 16px. Grandezza, colore e numero fanno la
   differenza; la presenza no.

   IL COLORE NON E' L'UNICO SEGNO, ed e' il criterio 1.4.1 delle WCAG: fra i
   due cambiano anche la dimensione e la presenza del numero. Chi non
   distingue il blu scuro dall'azzurro vede comunque due cose diverse.
   =============================================================== */

.vc-cartina-segno span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--vc-raggio-pieno, 999px);
	box-sizing: border-box;
}

.vc-cartina-segno--tappa span {
	background-color: var(--vc-cartina-tappa, #11273d);
	border: 2px solid var(--vc-cartina-segno-testo, #ffffff);
	color: var(--vc-cartina-segno-testo, #ffffff); /* 15.20:1 sul disco */
	font-family: var(--vc-font-testo, sans-serif);
	font-size: 0.8125rem;
	font-weight: var(--vc-peso-grassetto, 700);
	line-height: 1;

	/* Il contorno bianco da solo sparisce sui riquadri chiari: l'ombra stacca
	   il disco dalla carta in ogni caso. */
	box-shadow: var(--vc-ombra-1, 0 1px 3px rgba(0, 0, 0, 0.12));
}

.vc-cartina-segno--luogo span {
	background-color: var(--vc-cartina-luogo, #007095);
	border: 2px solid var(--vc-cartina-segno-testo, #ffffff);
	box-shadow: var(--vc-ombra-1, 0 1px 3px rgba(0, 0, 0, 0.12));
}

/* La finestrella che si apre sul segnaposto. */
.vc-cartina-popup-nome {
	display: block;
	font-size: 1rem;
	font-weight: var(--vc-peso-medio, 600);
	line-height: var(--vc-interlinea-stretta, 1.25);
}

.vc-cartina-popup-tappa {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--vc-colore-ardesia, #5e6b76);
}

/* ===============================================================
   3. Il collegamento all'itinerario

   E' l'unico collegamento fra le due pagine da questo lato, e sta sopra
   l'elenco e non in fondo: chi arriva sulla cartina e scopre che esiste anche
   un percorso ordinato deve poterlo scoprire prima di aver scorso
   ventinove voci, non dopo.
   =============================================================== */

.vc-cartina-ponte {
	margin: var(--vc-spazio-3, 1.40625rem) 0;
}

.vc-cartina-ponte-link {
	display: inline-block;

	/* Il bersaglio tattile: 44px e' il criterio 2.5.5 delle WCAG, che questo
	   progetto ha scelto come obiettivo. */
	min-height: var(--vc-tocco-minimo, 44px);
	padding: 0.6875rem var(--vc-spazio-3, 1.40625rem);
	border-radius: var(--vc-raggio-1, 3px);
	background-color: var(--vc-colore-blu, #374a66);
	color: #ffffff; /* 9.00:1 su quel blu, ricalcolato */
	font-weight: var(--vc-peso-medio, 600);
	line-height: var(--vc-interlinea, 1.5);
	text-decoration: none;
}

/*
   Il colore del testo va riaffermato su :visited e su :hover, e non e'
   ridondanza: library/css/style.css riga 200 fissa "a, a:visited { color:
   #003882 }" per tutto il sito. Senza queste due righe, un visitatore che ha
   gia' aperto l'itinerario vedrebbe blu su blu, 1.24:1 — che e' esattamente
   la trappola in cui erano cadute le schede di /visitare/ prima della
   correzione registrata in vc-archivi.css.
*/
.vc-cartina-ponte-link:visited {
	color: #ffffff;
}

.vc-cartina-ponte-link:hover,
.vc-cartina-ponte-link:focus {
	background-color: var(--vc-colore-blu-scuro, #11273d);
	color: #ffffff; /* 15.20:1 */
	text-decoration: underline;
}

/* ===============================================================
   4. L'elenco: il titolo e le tappe

   L'ELENCO NON SI NASCONDE QUANDO LA MAPPA FUNZIONA. E' insieme tre cose: il
   ripiego per chi non ha il JavaScript, l'alternativa accessibile della mappa
   — che a segnaposti non si esplora da tastiera — e il solo posto in cui
   compaiono i luoghi di cui non conosciamo ancora la posizione. Nasconderlo
   avrebbe fatto sparire la terza.
   =============================================================== */

.vc-cartina-titolo {
	margin: var(--vc-spazio-6, 2.8125rem) 0 var(--vc-spazio-2, 0.9375rem);
	font-size: 1.5rem;
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-grassetto, 700);
	color: var(--vc-colore-blu-scuro, #11273d);
}

/* La barretta ambra corta sopra il titolo: e' il segno di sezione della
   homepage e degli archivi, ed e' cio' che fa riconoscere questa pagina come
   parte dello stesso sito. Decorativa, non porta informazione. */
.vc-cartina-titolo::before {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-bottom: 0.75rem;
	background-color: var(--vc-colore-ambra, #f39207);
	border-radius: var(--vc-raggio-1, 3px);
}

.vc-cartina-tappe {
	margin: 0;
	padding: 0;

	/* I numeri li stampa il PHP, non il contatore del browser: il contatore
	   direbbe 1..9 anche il giorno in cui una tappa fosse numerata (10). */
	list-style: none;
}

.vc-cartina-tappa {
	margin: 0 0 var(--vc-spazio-4, 1.875rem);
	padding: 0;
}

.vc-cartina-tappa-titolo {
	display: flex;
	align-items: center;
	gap: var(--vc-spazio-1, 0.46875rem);
	margin: 0 0 var(--vc-spazio-1, 0.46875rem);
	font-size: 1.125rem;
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-medio, 600);
	color: var(--vc-colore-blu-scuro, #11273d);
}

/*
   Il pallino del numero e' lo STESSO disco che si vede sulla mappa, stesse
   misure e stesso colore. E' cio' che permette di riconoscere a colpo d'occhio
   la voce dell'elenco nel segnaposto e viceversa, senza una legenda che lo
   spieghi a parole.
*/
.vc-cartina-tappa-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: var(--vc-raggio-pieno, 999px);
	background-color: var(--vc-cartina-tappa, #11273d);
	color: var(--vc-cartina-segno-testo, #ffffff); /* 15.20:1 */
	font-size: 0.8125rem;
	font-weight: var(--vc-peso-grassetto, 700);
	line-height: 1;
}

.vc-cartina-fuori {
	margin-top: var(--vc-spazio-6, 2.8125rem);
}

.vc-cartina-fuori-titolo {
	margin: 0 0 var(--vc-spazio-2, 0.9375rem);
	font-size: 1.125rem;
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-medio, 600);
	color: var(--vc-colore-blu-scuro, #11273d);
}

/* ===============================================================
   5. Le voci dei luoghi

   A DUE COLONNE DA 40.063em IN SU, a una sola sul telefono. Ventinove voci in
   colonna unica su un monitor sono una striscia lunghissima con mezzo schermo
   vuoto a destra; sul telefono due colonne di nomi lunghi come "Palazzo
   Riario, ex Castello degli Anguillara" si spezzerebbero su quattro righe
   ciascuna. columns e non grid: qui non c'e' nessun allineamento fra righe da
   mantenere, e columns non richiede di sapere quante voci ci sono.
   =============================================================== */

.vc-cartina-luoghi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-cartina-luogo {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--vc-spazio-1, 0.46875rem);
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--vc-colore-bordo-tenue, #eeeeee);
}

.vc-cartina-luogo-nome {
	/* Il bersaglio tattile su una riga di elenco si ottiene con l'altezza
	   della riga e non con un riquadro: il link resta in linea con la nota che
	   lo segue, e resta alto abbastanza per un dito. */
	display: inline-block;
	min-height: 1.75rem;
	line-height: var(--vc-interlinea-ampia, 1.7);
}

/*
   La nota dei luoghi senza posizione. Sta ACCANTO al nome, non al posto suo:
   il luogo resta un collegamento pieno alla sua scheda, che e' l'unica cosa
   che al visitatore interessa davvero. La nota spiega perche' quel nome non ha
   un segnaposto sulla mappa, e sparira' da sola il giorno in cui la
   coordinata verra' inserita nel pannello.
*/
.vc-cartina-avviso {
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--vc-colore-ardesia, #5e6b76); /* 5.47:1 su bianco */
}

/*
   Il pulsante "Mostra sulla mappa" lo aggiunge library/js/vc-cartina.js, mai
   il PHP: quando il JavaScript non gira non deve esistere affatto. Sta in
   fondo alla riga e resta discreto, perche' il collegamento alla scheda e'
   l'azione principale e questo e' l'aiuto.
*/
.vc-cartina-mostra {
	margin-left: auto;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--vc-cartina-bordo, #cecece);
	border-radius: var(--vc-raggio-1, 3px);
	background-color: transparent;
	color: var(--vc-colore-blu-acceso, #007095); /* 5.60:1 su bianco */
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: var(--vc-interlinea, 1.5);
	cursor: pointer;
}

.vc-cartina-mostra:hover,
.vc-cartina-mostra:focus {
	border-color: var(--vc-colore-blu, #374a66);
	background-color: var(--vc-colore-blu, #374a66);
	color: #ffffff; /* 9.00:1 */
}

.vc-cartina-vuoto {
	margin: 0;
	color: var(--vc-colore-ardesia, #5e6b76);
	font-style: italic;
}

@media only screen and (min-width: 40.063em) {

	.vc-cartina-luoghi {
		columns: 2;
		column-gap: var(--vc-spazio-4, 1.875rem);
	}

	/* Senza questa, una voce puo' essere spezzata a meta' fra la prima e la
	   seconda colonna: il nome in fondo a sinistra e il pulsante in cima a
	   destra. break-inside e' la proprieta' standard, page-break-inside la
	   forma vecchia che alcuni browser capiscono ancora. */
	.vc-cartina-luogo {
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

/* ===============================================================
   6. Quando la pagina si stampa

   Una cartina virtuale stampata su carta e' una lista di nomi: i riquadri di
   OpenStreetMap non escono dalle stampanti in modo utile e il pulsante che
   muove la mappa su carta non fa niente. Restano i nomi, i numeri delle tappe
   e la struttura del percorso, che sono l'informazione.
   =============================================================== */

@media print {

	.vc-cartina-riquadro,
	.vc-cartina-mostra {
		display: none;
	}

	.vc-cartina-luoghi {
		columns: auto;
	}
}