/*
L'itinerario a piedi di VisitCaprarola.

SCOPO
Dare forma alla sola pagina /itinerario/, servita da itinerario.php: le nove
tappe del percorso nel paese, in ordine, ciascuna con i luoghi che contiene.
Non e' un archivio di WordPress e non lo diventa: l'indirizzo nasce da una
regola di riscrittura registrata in functions.php.

CHE COSA QUESTO FOGLIO NON FA, ed e' la parte importante.
La pagina usa <main id="main-visit"> e le stesse schede degli archivi, quindi
eredita gratis quasi tutto:
  - la SCHEDA (.vc-luogo-scheda, .vc-luogo-immagine, il sollevamento, lo zoom
    dell'immagine, l'ombra, il contorno di messa a fuoco su :focus-within, e il
    loro azzeramento con prefers-reduced-motion) arriva da vc-home.css, che
    scrive quelle regole senza prefisso di pagina apposta perche' valgano
    ovunque quel markup compaia;
  - il TITOLO DI PAGINA (h1.vc-sezione-titolo, con la barretta ambra sopra),
    il PARAGRAFO introduttivo (.vc-archivio-descrizione) e il messaggio di
    ELENCO VUOTO (.vc-archivio-vuoto) arrivano da vc-archivi.css, che li
    aggancia a #main-visit.
Qui si scrive solo cio' che l'itinerario ha e gli archivi non hanno: l'indice
delle tappe, la tappa, il suo numero, e la didascalia della scheda riportata
sul livello di titolo che questa pagina usa.

ORDINE DI CARICAMENTO
library/joints.php accoda, e solo su questa pagina:
vc-home.css, poi vc-archivi.css, poi questo foglio. La condizione e'
get_query_var( 'vc_itinerario' ). Dipendenze dichiarate: vc-tokens, style.css,
vc-mobile.css, vc-nav.css, vc-home, vc-archivi. vc-a11y.css resta l'ultimo
della coda, come prescrive il commento in joints.php.
Le variabili --vc-home-* le dichiara vc-home.css nel proprio :root e le
--vc-nav-* le dichiara vc-nav.css; qui non se ne dichiarano di nuove, ma ogni
var() porta con se' il valore di ripiego, cosi' il foglio regge anche se un
domani quella catena cambiasse.

BREAKPOINT: quelli di Foundation 5 gia' in uso, small fino a 40em, medium da
40.063em, large da 64.063em. Le media query non accettano var(), quindi i
valori sono scritti per esteso. In questo file non c'e' nessun !important.

--------------------------------------------------------------------------
LE DUE REGOLE STORICHE CON CUI QUESTO FOGLIO DEVE FARE I CONTI

1. LA BANDA BLU SU OGNI h2, library/css/style.css righe 101-106:

     #main-visit h2   (1,0,1)   background-color #374A66
                                color #FFF
                                padding 0.5em
                                font-size 1em

   E' la didascalia delle schede, e colpisce OGNI h2 dentro quel contenitore.
   I titoli delle tappe sono h2, quindi diventerebbero nove bande blu piene
   larghe quanto la colonna, alte come una riga di testo a 16px.

   SCELTA: la banda si disinnesca, non si riusa. Poteva sembrare comoda —
   e' gia' il linguaggio visivo del sito — ma quella regola e' l'idioma della
   DIDASCALIA di una scheda, non quello di un titolo di sezione: 1em di corpo
   su un titolo di livello due e' un titolo che non si vede, e nove bande
   piene sopra diciassette bande piene di schede fanno una pagina che di
   leggibile non ha piu' niente. L'idioma dei titoli di sezione, in questo
   sito, e' un altro ed e' gia' scritto: testo scuro con una barretta ambra
   corta sopra (.vc-sezione-titolo in homepage e negli archivi). Le tappe
   riusano quello, in scala ridotta, cosi' la pagina si riconosce come parte
   dello stesso sito.

   COME: "#main-visit .vc-tappa-titolo" e' (1,1,0) contro (1,0,1). Stesso
   numero di id, una classe in piu', nessun elemento: vince sulla seconda
   cifra, a prescindere dall'ordine dei fogli. Nessun !important, come nel
   resto del tema.

2. LA DIDASCALIA DELLA SCHEDA, vc-archivi.css sezione 3, agganciata a
   "#main-visit h2.page-title".

   In questa pagina il titolo del luogo e' un h3 e non un h2, perche' i luoghi
   stanno DENTRO le tappe: h1 la pagina, h2 la tappa, h3 il luogo. Il motivo
   per esteso sta in itinerario.php, sul markup. La conseguenza e' che quel
   selettore qui non ha bersaglio, e la sezione 5 di questo foglio lo riporta
   sull'h3 con gli stessi valori.

   E' lo stesso movimento che vc-archivi.css ha fatto rispetto a vc-home.css e
   per la stessa ragione — "riscrive SOLO quella meta', con l'ancoraggio giusto
   per il contesto" — con una differenza da tenere presente: li' cambiava il
   contenitore, qui cambia il nome dell'elemento. Se un giorno si tocca la
   didascalia in vc-archivi.css, la sezione 5 va guardata insieme.

   L'ALTERNATIVA SCARTATA era tenere l'h2 anche per i luoghi: la didascalia
   sarebbe arrivata gratis e questo foglio sarebbe stato piu' corto di trenta
   righe. Ma tappe e luoghi sarebbero finiti allo stesso livello, e chi naviga
   per intestazioni — cioe' esattamente chi cammina col telefono in mano e un
   lettore di schermo, che e' il caso d'uso di questa pagina — avrebbe trovato
   un elenco piatto di ventisei voci senza capire dove finisce una tappa e
   comincia la successiva. Trenta righe di CSS valgono meno di quello.
--------------------------------------------------------------------------
*/

/* ===============================================================
   1. L'indice delle tappe — .vc-itinerario-indice

   Nove ancore interne in cima alla pagina. Non e' un ornamento: chi cammina
   apre la pagina alla tappa sei per andare alla sette, e senza indice
   dovrebbe scorrere quattro schermate di schede. Zero richieste, zero
   JavaScript, funziona anche senza rete — che a Caprarola, fra i muri di
   pietra del centro storico, non e' un dettaglio teorico.

   E' una fila di pastiglie che va a capo da sola: su telefono diventano due o
   tre righe, su schermo largo una sola. Nessuna media query, se ne occupa
   flex-wrap.
   =============================================================== */

#main-visit .vc-itinerario-indice {
	margin: 0 0 var(--vc-spazio-6, 2.8125rem);

	/*
	   scroll-margin-top perche' le barre di navigazione sono position: sticky
	   con top 0 (vc-nav.css sezione finale): un salto a #itinerario-indice
	   farebbe altrimenti finire l'indice SOTTO la barra, invisibile. 56px e'
	   l'altezza della barra mobile, piu' 15px d'aria.

	   Sui browser che non conoscono scroll-margin (Safari sotto la 14.1) la
	   dichiarazione viene ignorata e il salto si comporta come oggi si comporta
	   il collegamento di salto del tema: fastidio, non guasto.
	*/
	scroll-margin-top: calc(var(--vc-nav-barra-h, 3.5rem) + var(--vc-spazio-2, 0.9375rem));
}

#main-visit .vc-itinerario-elenco {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-spazio-1, 0.46875rem);

	/*
	   list-style a none e margine azzerato: la numerazione automatica del
	   browser conterebbe 1..9 a prescindere da cio' che c'e' scritto nei nomi
	   dei termini, e mentirebbe il giorno in cui una tappa fosse numerata (10)
	   o un numero venisse saltato. Il numero che si vede lo stampa il PHP,
	   leggendolo dal nome. Resta un <ol> perche' l'ordine E' l'informazione, e
	   i lettori di schermo continuano ad annunciare "elenco di nove elementi".
	*/
	list-style: none;
	margin: 0;
	padding: 0;
}

#main-visit .vc-itinerario-voce {
	margin: 0;
}

#main-visit .vc-itinerario-voce > a {
	/*
	   Bersaglio tattile. min-height 44px e' il criterio 2.5.5 di WCAG 2.2, lo
	   stesso valore che vc-mobile.css impone al resto del tema; inline-flex e
	   align-items al centro danno l'altezza senza che il padding verticale
	   sposti la linea di base rispetto alle pastiglie accanto.
	*/
	display: inline-flex;
	align-items: center;
	gap: var(--vc-spazio-1, 0.46875rem);
	min-height: var(--vc-tocco-minimo, 44px);
	padding: 0 0.85rem 0 0.5rem;

	border: 1px solid var(--vc-colore-bordo, #cecece);
	border-radius: var(--vc-raggio-pieno, 999px);

	color: var(--vc-home-testo-forte, #11273d); /* 15.20:1 su bianco */
	text-decoration: none;
	font-weight: var(--vc-peso-medio, 600);
	font-size: 0.9375rem;
	line-height: 1.2;

	transition:
		background-color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease),
		border-color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

/*
   Il numero dentro la pastiglia. Fondo blu del tema, bianco sopra: 9.00:1,
   la stessa coppia gia' misurata in vc-archivi.css per la didascalia.
*/
#main-visit .vc-itinerario-voce-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--vc-raggio-pieno, 999px);
	background-color: var(--vc-home-tessera-fondo, #374a66);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: var(--vc-peso-grassetto, 700);
	font-variant-numeric: tabular-nums;
}

#main-visit .vc-itinerario-voce > a:hover {
	background-color: var(--vc-colore-bordo-tenue, #eeeeee);
	border-color: var(--vc-home-testo-forte, #11273d);
}

/*
   Il contorno di messa a fuoco non si tocca: quello del tema, definito in
   vc-a11y.css, arriva dopo nella coda e vale anche qui. Si aggiunge solo la
   sottolineatura, perche' il colore da solo non basta a distinguere lo stato
   (criterio 1.4.1).
*/
#main-visit .vc-itinerario-voce > a:hover .vc-itinerario-voce-nome,
#main-visit .vc-itinerario-voce > a:focus .vc-itinerario-voce-nome {
	text-decoration: underline;
}

/* ===============================================================
   2. La tappa — .vc-tappa

   Un contenitore per tappa, con dentro il titolo e le schede dei luoghi. Le
   schede sono colonne della griglia a float (large-3 medium-6 small-12), e
   quindi vanno contenute: senza, il titolo della tappa successiva si
   affiancherebbe alle schede della precedente invece di andare sotto.

   Si usa il clearfix classico e non display: flow-root, che sarebbe una riga
   sola ma non ha ripiego: dove non e' supportato il layout si rompe davvero,
   invece di degradare. Lo stesso clearfix e' gia' quello che vc-grid.css usa
   per .row, quindi e' una tecnica gia' in casa e gia' verificata su questo
   sito.
   =============================================================== */

#main-visit .vc-tappa {
	margin: 0 0 var(--vc-spazio-8, 3.75rem);

	/* Vedi la nota su scroll-margin-top nella sezione 1: qui vale per i nove
	   salti dall'indice, che sono il modo normale di usare questa pagina. */
	scroll-margin-top: calc(var(--vc-nav-barra-h, 3.5rem) + var(--vc-spazio-2, 0.9375rem));
}

#main-visit .vc-tappa::after {
	content: "";
	display: table;
	clear: both;
}

/* ===============================================================
   3. Il titolo della tappa — .vc-tappa-titolo

   Qui si disinnesca "#main-visit h2" (vedi la nota 1 in testa al file).
   Ogni proprieta' che quella regola impone va riportata a un valore esplicito,
   altrimenti resta: background-color, color, padding, font-size. Non basta
   dichiarare cio' che si vuole, bisogna dichiarare anche cio' che non si
   vuole piu'.

   La rampa e' quella degli h3 e non quella degli h2, ed e' voluto: 27->34px
   invece di 34->44px. Il titolo principale della pagina e' l'h1 sopra, che
   usa gia' la rampa h1; se le tappe usassero la rampa h2 sarebbero quasi
   grandi uguali e la gerarchia si vedrebbe solo dal peso. Il livello di
   titolo resta h2 nel markup: cambia la misura, non la struttura.
   =============================================================== */

#main-visit .vc-tappa-titolo {
	background-color: transparent;
	color: var(--vc-home-testo-forte, #11273d); /* 15.20:1 su bianco */
	padding: 0;

	font-size: var(--vc-h3-fluido, clamp(1.375rem, 1.0635rem + 1.558vw, 1.6875rem));
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-grassetto, 700);

	margin: 0 0 var(--vc-spazio-2, 0.9375rem);

	/*
	   Il pallino e il nome su una riga sola, allineati in alto: con
	   align-items center un nome che va a capo su due righe farebbe scendere
	   il pallino a meta' altezza, e la colonna dei pallini non sarebbe piu'
	   dritta lungo la pagina. Su telefono i nomi lunghi vanno a capo spesso.
	*/
	display: flex;
	align-items: flex-start;
	gap: var(--vc-spazio-2, 0.9375rem);
}

/*
   IL PALLINO. E' l'unico posto in cui il numero della tappa si vede: dal nome
   viene tolto in PHP con la stessa espressione regolare che lo ha estratto,
   cosi' "Piazza Della Rocca (07)" diventa il pallino 07 piu' il nome pulito.
   aria-hidden nel markup, perche' "07" letto ad alta voce non dice niente:
   ai lettori di schermo la stessa informazione arriva come "Tappa 7 di 9".

   flex: 0 0 auto perche' non si stringa quando il nome accanto e' lungo.
*/
#main-visit .vc-tappa-numero {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--vc-raggio-pieno, 999px);

	background-color: var(--vc-home-tessera-fondo, #374a66);
	color: #ffffff; /* 9.00:1 su #374A66 */

	font-size: 1rem;
	font-weight: var(--vc-peso-grassetto, 700);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/*
   IL NOME, che e' anche il collegamento a /punti-sosta/<slug>/.

   La sottolineatura c'e' A RIPOSO e non solo al passaggio: e' un link dentro
   un titolo, e senza sottolineatura si distinguerebbe dal testo solo per il
   colore — che qui e' per giunta lo stesso degli altri titoli. Criterio 1.4.1.
   text-underline-offset stacca il filetto dalle lettere discendenti, cosi' la
   sottolineatura non taglia le "p" e le "g" di "Piazza" e "Giardini".

   Il colore batte "a, a:visited { color:#003882 }" di style.css riga 200
   (0,0,1) con (1,1,1): i link non ereditano il colore del titolo che li
   contiene, e senza questa riga il nome della tappa sarebbe blu acceso in
   mezzo a titoli scuri.
*/
#main-visit .vc-tappa-titolo .vc-tappa-nome {
	flex: 1 1 auto;

	/* min-height come bersaglio tattile: il pallino accanto e' alto 38px, il
	   link deve arrivare a 44 anche quando il nome sta su una riga sola. */
	display: block;
	min-height: var(--vc-tocco-minimo, 44px);

	color: var(--vc-home-testo-forte, #11273d);
}

/*
   La sottolineatura sta sull'ANCORA e non sulla classe: quando get_term_link
   fallisce il markup stampa uno <span class="vc-tappa-nome"> al posto del
   link, e un testo sottolineato che non e' un collegamento e' peggio di un
   collegamento non sottolineato.
*/
#main-visit .vc-tappa-titolo a.vc-tappa-nome {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

#main-visit .vc-tappa-titolo a.vc-tappa-nome:hover {
	color: var(--vc-home-fuoco, #007095); /* 5.60:1 su bianco */
	text-decoration-thickness: 2px;
}

/*
   QUANDO SI ARRIVA DA UN SALTO DELL'INDICE. :target dice quale tappa ha
   ricevuto il salto: senza, su un telefono si atterra in mezzo alla pagina
   senza nessuna conferma di essere finiti sulla tappa giusta.

   IL SEGNO STA SUL PALLINO E NON SUL TITOLO, ed e' una correzione fatta in
   corso d'opera. La prima stesura metteva un filetto ambra a sinistra del
   titolo, con un margine negativo per compensare bordo e padding: su schermo
   largo funzionava, su telefono quei 4px finivano oltre il bordo della
   colonna, cioe' esattamente il tipo di eccedenza orizzontale che
   .off-canvas-wrap nasconde con overflow-x: clip. Un segno che deve essere
   ritagliato per non fare danno non e' un segno.

   Cosi' invece non si sposta un pixel: cambia il colore del pallino e gli si
   aggiunge un anello, e box-shadow non partecipa al layout.
   Ambra #f39207 con testo #11273d da' 6.47:1. Il segno e' comunque
   supplementare — l'informazione "sei su questa tappa" ce l'ha gia' la barra
   dell'indirizzo e la posizione dello scorrimento — quindi non ricade sotto
   il criterio 1.4.1.
*/
#main-visit .vc-tappa:target .vc-tappa-numero {
	background-color: var(--vc-home-segno, #f39207);
	color: var(--vc-home-testo-forte, #11273d); /* 6.47:1 su #f39207 */
	box-shadow: 0 0 0 3px rgba(243, 146, 7, 0.35);
}

/* ===============================================================
   4. Quanti luoghi ha la tappa — .vc-tappa-conta

   Una riga sola, sommessa, sotto il titolo. Serve a decidere se fermarsi:
   "4 luoghi da vedere" e "1 luogo da vedere" sono due soste diverse.

   Il colore e' il grigio ardesia e non --vc-colore-testo-tenue, per la stessa
   ragione gia' misurata in vc-archivi.css sezione 5: il grigio "attenuato"
   del tema da' 3.60:1 su bianco, sotto il 4.5 del criterio 1.4.3. L'ardesia
   da' 5.32:1.
   =============================================================== */

#main-visit .vc-tappa-conta {
	margin: 0 0 var(--vc-spazio-3, 1.40625rem);
	color: var(--vc-colore-ardesia, #5e6b76); /* 5.32:1 su bianco */
	font-size: 0.9375rem;
}

/* ===============================================================
   5. La didascalia della scheda, riportata sull'h3

   Vedi la nota 2 in testa al file: vc-archivi.css aggancia la didascalia a
   "#main-visit h2.page-title" e qui i titoli dei luoghi sono h3. Stessi
   valori, stesso ragionamento dietro ciascuno, stessa specificita' (1,1,1):
   cambia solo il nome dell'elemento.

   Da battere non c'e' la banda blu — "#main-visit h2" non tocca gli h3 — ma
   c'e' "h3 { font-size: var(--vc-h3-fluido) }" di vc-mobile.css (0,0,1) e il
   margine predefinito degli h3.
   =============================================================== */

#main-visit h3.page-title {
	margin: 0;
	background-color: var(--vc-home-tessera-fondo, #374a66);
	padding: 0.7rem 0.85rem;
	border-radius: 0 0 var(--vc-home-raggio, 6px) var(--vc-home-raggio, 6px);

	/*
	   17px fissi e non fluidi, come in vc-archivi.css e per la stessa ragione:
	   il corpo determina l'altezza della banda, e un corpo che cambia con il
	   viewport farebbe cambiare l'altezza delle schede a meta' di una rampa,
	   con le righe della griglia a float che si riallineano di continuo
	   durante il ridimensionamento.
	*/
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: var(--vc-peso-medio, 600);
	color: #ffffff;

	box-shadow: var(--vc-home-ombra-0, 0 0 0 0 rgba(17, 39, 61, 0));
	transition:
		background-color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease),
		box-shadow var(--vc-home-durata, 200ms) var(--vc-home-curva, ease);
}

/*
   Il colore del link e l'altezza costante della banda. Senza la prima riga si
   otterrebbe #003882 su #374A66, cioe' 1.24:1: e' il difetto che vc-archivi.css
   descrive per esteso in testa al proprio file, e vale identico qui.

   min-height 2.6em sono due righe a interlinea 1.3, cioe' 44.2px con il corpo
   qui sopra: un titolo di una riga occupa comunque lo spazio di due e la banda
   ha sempre la stessa altezza, quindi le schede di una riga della griglia
   restano allineate. 44.2px sono anche sopra i 44px del bersaglio tattile.

   display -webkit-box e' necessario perche' line-clamp funziona solo dentro
   una -webkit-box, e non toglie niente: resta un blocco a tutti gli effetti.
*/
#main-visit h3.page-title > a {
	color: #ffffff; /* 9.00:1 su #374A66 */

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
}

/*
   Il contorno del singolo link si toglie perche' e' SOSTITUITO, non perche'
   da' fastidio: quando questo link ha il fuoco, l'article che lo contiene
   soddisfa ".vc-luogo-scheda:focus-within" di vc-home.css e disegna il
   contorno da 3px attorno all'intera scheda. I due stati coincidono sempre;
   lasciarli entrambi darebbe due contorni concentrici.
*/
#main-visit h3.page-title > a:focus {
	outline: none;
}

#main-visit .vc-luogo-scheda:hover h3.page-title,
#main-visit .vc-luogo-scheda:focus-within h3.page-title {
	background-color: var(--vc-home-tessera-fondo-2, #11273d);
	box-shadow: var(--vc-home-ombra, 0 8px 20px 0 rgba(17, 39, 61, 0.22));
}

/* ===============================================================
   6. Il ritorno all'indice — .vc-tappa-ritorno

   In fondo a ogni tappa. Su telefono la tappa con quattro luoghi e' alta tre
   schermate: senza, per passare alla tappa successiva bisogna risalire a mano
   fino in cima alla pagina.

   Sta DOPO le schede, che sono colonne a float: e' il clearfix della
   sezione 2 a garantire che finisca sotto e non accanto.
   =============================================================== */

#main-visit .vc-tappa-ritorno {
	clear: both;
	margin: var(--vc-spazio-3, 1.40625rem) 0 0;
	font-size: 0.9375rem;
}

#main-visit .vc-tappa-ritorno > a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vc-tocco-minimo, 44px);
	color: var(--vc-colore-ardesia, #5e6b76); /* 5.32:1 su bianco */
}

/* ===============================================================
   7. Telefono

   Sotto i 640px la griglia mette una scheda per riga (small-12) e il ritmo
   verticale della pagina raddoppia: 60px fra una tappa e l'altra diventano
   troppi e allungano lo scorrimento senza aggiungere chiarezza, perche' il
   titolo della tappa e' gia' un divisorio forte. Si scende a 45px.

   Il pallino si rimpicciolisce di poco, quanto basta perche' il nome della
   tappa non venga schiacciato a due o tre parole per riga sugli schermi
   stretti.
   =============================================================== */

@media only screen and (max-width: 40em) {

	#main-visit .vc-tappa {
		margin-bottom: var(--vc-spazio-6, 2.8125rem);
	}

	#main-visit .vc-tappa-numero {
		min-width: 2rem;
		height: 2rem;
		font-size: 0.875rem;
	}

	#main-visit .vc-tappa-titolo {
		gap: var(--vc-spazio-1, 0.46875rem);
	}
}

/* ===============================================================
   8. Movimento ridotto

   Obbligatorio, e va per ultimo: le media query non aggiungono specificita',
   quindi queste regole vincono sulle precedenti solo perche' arrivano dopo.

   Si azzerano le DURATE, non i comportamenti: il cambio di colore continua ad
   accadere, semplicemente accade subito. Le transizioni della scheda e
   dell'immagine le azzera gia' vc-home.css con selettori senza prefisso di
   pagina, che valgono anche qui; restano da coprire le sole due cose che
   questo foglio anima, la pastiglia dell'indice e la didascalia dell'h3.
   =============================================================== */

@media (prefers-reduced-motion: reduce) {

	#main-visit .vc-itinerario-voce > a,
	#main-visit h3.page-title {
		transition-duration: 0.01ms;
		transition-delay: 0s;
		animation-duration: 0.01ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
	}
}