/*
Ricerca e filtri — VisitCaprarola.

PERCHE QUESTO FOGLIO ESISTE. Due buchi misurati sul sito in produzione il
2026-09-09:

  1. la ricerca stava SOLO nel widget della barra laterale. I quattordici
     archivi per tassonomia (/luoghi/<categoria>/ e /punti-sosta/<tappa>/) e
     /visitare/ la barra laterale non ce l'hanno: su quelle quindici pagine
     role="search" compariva ZERO volte. Verificato con una richiesta a
     /visitare/ e a /luoghi/chiese/: nessun <form> nell'HTML servito, non uno.

  2. /visitare/ elencava 29 luoghi senza alcun modo di restringere, mentre le
     cinque pagine per categoria esistevano gia e funzionavano bene.

Qui c'e l'aspetto delle due aggiunte: la fascia di ricerca della testata
(header.php) e i filtri per categoria (partials/filtri-luoghi.php).

DOVE VA NELLA CATENA DEGLI ACCODAMENTI. Dopo vc-nav e prima di vc-a11y, che
deve restare l'ultimo perche e lui a rimettere i contorni di messa a fuoco che
vc-foundation-core.css toglie a tutti i campi. Da qui la scelta di NON scrivere
qui nessuna regola :focus: il contorno arriva da vc-a11y.css e vale gia per
input, button e a.

NIENTE !important, come nel resto del progetto. Le specificita da battere sono
due sole e sono basse:

  input[type="search"]  (0,1,1)  — vc-foundation-core.css:440, height 2.3125rem
                                   e margin-bottom 1rem
  button                (0,0,1)  — vc-foundation-core.css:194, padding 1rem/2rem,
                                   fondo #008CBA e margin-bottom 1.25rem

".vc-cerca .vc-cerca-campo" e ".vc-cerca .vc-cerca-invia" valgono (0,2,0) e
vincono entrambi i confronti a prescindere dall'ordine di accodamento.

CONTRASTI, calcolati e non stimati:
  #11273d su #ffffff .......... 15.20:1
  #11273d su #f4f6f9 .......... 14.11:1
  #5e6b76 su #ffffff ........... 5.44:1
  #ffffff su #11273d .......... 15.20:1
  #ffffff su #007095 ........... 5.54:1
Tutti sopra il 4.5:1 del criterio 1.4.3.
*/

:root {
	/* Il fondo della fascia: appena staccato dal bianco della pagina e da
	   quello della barra di navigazione, quel tanto che basta perche si legga
	   come parte della testata e non come contenuto. */
	--vc-cerca-fondo: #f4f6f9;
	--vc-cerca-linea: rgba(17, 39, 61, 0.12);
	--vc-cerca-bordo-campo: #cfd7e0;
	--vc-cerca-testo: #11273d;
	--vc-cerca-testo-tenue: #5e6b76;

	/* Larghezza del campo da 641px in su. Sotto, il campo prende tutta la
	   riga: su un telefono non c'e niente altro con cui dividerla. */
	--vc-cerca-larghezza: 24rem;
}

/* ===============================================================
   1. La fascia di ricerca della testata

   STA DOPO LA NAVIGAZIONE, e non prima, ed e una scelta presa guardando il
   telefono. Sotto i 641px la testata desktop e spenta (le due colonne sono
   hide-for-medium-down) e l'unica cosa visibile e la barra mobile con il
   marchio: mettendo la fascia PRIMA, la prima cosa della pagina sarebbe un
   campo di ricerca e solo dopo il logo del sito. Dopo la navigazione,
   l'ordine di lettura resta marchio, menu, ricerca a ogni larghezza.

   La fascia NON e agganciata in alto. Le barre di navigazione lo sono
   (position: sticky in vc-nav.css) e restano raggiungibili durante lo
   scorrimento; aggiungere un secondo elemento agganciato vorrebbe dire
   sottrarre altri 58px di schermo su OGNI pagina vista da telefono. La
   scorciatoia della sezione 3 risolve lo stesso problema senza quel costo.
   =============================================================== */

.vc-cerca-fascia {
	box-sizing: border-box;
	background: var(--vc-cerca-fondo, #f4f6f9);
	border-bottom: 1px solid var(--vc-cerca-linea, rgba(17, 39, 61, 0.12));
	padding: var(--vc-spazio-1, 0.46875rem) 0;
}

/*
   Il contenitore interno replica a mano la misura della griglia invece di
   usare .row: le classi di griglia sono ricostruite in vc-grid.css, sono a
   float e sono fragili, e questo elemento non ha nessun bisogno di float.
   I due valori vengono dai token, quindi se la griglia cambia larghezza la
   fascia la segue da sola.
*/
.vc-cerca-interno {
	box-sizing: border-box;
	max-width: var(--vc-griglia-max-width, 80.8rem);
	margin: 0 auto;
	padding: 0 var(--vc-griglia-gutter, 0.9375rem);
}

/* ===============================================================
   2. Il modulo, il campo, il pulsante

   E UN <form> VERO CON method="get" E name="s": funziona senza una riga di
   JavaScript, perche a mandarlo e il browser. Non c'e nessun ascoltatore,
   nessun fetch, nessun suggerimento automatico. Se il JavaScript e spento,
   o se non e ancora arrivato, la ricerca funziona identica.
   =============================================================== */

.vc-cerca {
	display: flex;
	align-items: stretch;
	margin: 0;
}

/*
   Il campo.

   box-sizing: border-box e obbligatorio e non decorativo: senza, il padding
   si sommerebbe al 100 per cento della larghezza e il pulsante uscirebbe
   dalla riga. Foundation lo imposta gia sui campi, ma e ripetuto qui perche
   questa regola non deve dipendere da un foglio che un domani potrebbe
   essere potato.

   min-height e non height: min-height vince su height a parita di
   specificita, ed e la stessa strada gia usata da vc-mobile.css per i campi
   della barra laterale. 44px e --vc-tocco-minimo.

   margin: 0 azzera il margin-bottom di 1rem che Foundation da a ogni campo:
   dentro una fascia alta 58px quel margine si vedrebbe come uno scalino.

   appearance: none toglie a Safari l'aspetto a pillola dei campi
   type="search", che qui darebbe due raggi diversi fra campo e pulsante.
*/
.vc-cerca .vc-cerca-campo {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--vc-tocco-minimo, 44px);
	height: auto;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid var(--vc-cerca-bordo-campo, #cfd7e0);
	border-right: 0;
	border-radius: var(--vc-raggio-2, 6px) 0 0 var(--vc-raggio-2, 6px);
	background: var(--vc-colore-sfondo, #ffffff);
	color: var(--vc-cerca-testo, #11273d);
	font-family: var(--vc-font-testo, 'Titillium Web', sans-serif);
	font-size: 1rem;
	line-height: 1.3;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;

	/*
	   Serve alla scorciatoia della sezione 3: quando il browser salta a
	   #vc-cerca-campo, senza questo lo porterebbe sotto la barra agganciata
	   in alto, che e alta 56px, e il campo resterebbe coperto proprio mentre
	   riceve il fuoco.
	*/
	scroll-margin-top: 4.5rem;
}

/*
   Il segnaposto NON e l'etichetta: l'etichetta vera e il
   <label class="screen-reader-text"> in header.php. Questo e solo un aiuto
   visivo, e ha il colore piu scuro che il progetto usa per il testo
   attenuato, non il grigio di sistema, che su bianco sta sotto 4.5:1.
*/
.vc-cerca .vc-cerca-campo::-webkit-input-placeholder {
	color: var(--vc-cerca-testo-tenue, #5e6b76);
}

.vc-cerca .vc-cerca-campo::placeholder {
	color: var(--vc-cerca-testo-tenue, #5e6b76);
	opacity: 1;
}

/*
   La crocetta che WebKit aggiunge dentro i campi type="search" ruberebbe
   spazio e non e raggiungibile da tastiera: si toglie il disegno, non la
   funzione, che il campo ha comunque con la selezione e Canc.
*/
.vc-cerca .vc-cerca-campo::-webkit-search-decoration,
.vc-cerca .vc-cerca-campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/*
   Il pulsante.

   E un <button type="submit"> e non un <input type="image">: dentro ci sta
   un SVG piu un <span class="screen-reader-text">, cioe il nome accessibile
   tradotto come qualunque altra stringa del tema, senza dover passare da un
   attributo alt.

   Le misure azzerano quelle di Foundation, che darebbe padding 1rem/2rem,
   fondo #008CBA e margin-bottom 1.25rem: dentro una fascia sarebbe un
   pulsante alto 54px con 20px di aria sotto.

   44x44 e --vc-tocco-minimo: l'area di tocco e il pulsante stesso, non uno
   pseudo-elemento invisibile.
*/
.vc-cerca .vc-cerca-invia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--vc-tocco-minimo, 44px);
	min-height: var(--vc-tocco-minimo, 44px);
	margin: 0;
	padding: 0;
	border: 1px solid var(--vc-colore-blu-scuro, #11273d);
	border-radius: 0 var(--vc-raggio-2, 6px) var(--vc-raggio-2, 6px) 0;
	background-color: var(--vc-colore-blu-scuro, #11273d);
	color: var(--vc-colore-sfondo, #ffffff);
	cursor: pointer;
	transition: background-color var(--vc-nav-durata, 260ms) ease;
}

.vc-cerca .vc-cerca-invia:hover,
.vc-cerca .vc-cerca-invia:focus {
	background-color: var(--vc-colore-blu-acceso, #007095);
	border-color: var(--vc-colore-blu-acceso, #007095);
	color: var(--vc-colore-sfondo, #ffffff);
}

/* fill: currentColor, cosi la lente segue il colore del pulsante in ogni
   stato senza una seconda regola. */
.vc-cerca .vc-cerca-lente {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/*
   Da 641px in su il campo si stringe e va a destra.

   641px e non 1025px: sotto i 1025px le due colonne della testata sono
   spente (hide-for-medium-down) e fra 641 e 1024 la testata e VUOTA, quindi
   la fascia e l'unica cosa che ci sta. Sopra i 1025 sta sotto il marchio e
   la colonna di servizio, allineata al loro bordo destro.
*/
@media only screen and (min-width: 40.063em) {

	.vc-cerca {
		width: 100%;
		max-width: var(--vc-cerca-larghezza, 24rem);
		margin-left: auto;
	}
}

/* ===============================================================
   3. Scorciatoia dalla barra mobile — OPZIONALE

   Queste regole valgono solo se qualcuno aggiunge in
   partials/nav-main-offcanvas-sidebar.php il collegamento
   <a class="vc-cerca-scorciatoia" href="#vc-cerca-campo">. Quel file non e
   stato toccato: la riga esatta sta nella relazione di consegna. Finche non
   c'e, queste regole non colpiscono niente e non costano niente.

   PERCHE UN COLLEGAMENTO A UN FRAMMENTO E NON UN COMANDO CON JavaScript.
   Seguendo un collegamento a un frammento il browser porta il fuoco
   sull'elemento bersaglio se quell'elemento e focalizzabile, e un <input>
   lo e: il campo riceve il fuoco davvero, senza una riga di script. Con il
   JavaScript spento continua a funzionare, perche a farlo e il browser.

   Il riquadro 48x48 e la posizione li da gia vc-nav.css, che stila
   .vc-barra-coda: qui si aggiunge solo cio che serve a un collegamento
   invece che a uno spaziatore vuoto.
   =============================================================== */

.vc-barra-mobile .vc-cerca-scorciatoia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--vc-cerca-testo, #11273d);
	border-radius: var(--vc-raggio-2, 6px);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.vc-barra-mobile .vc-cerca-scorciatoia:hover {
	background: rgba(17, 39, 61, 0.06);
	color: var(--vc-cerca-testo, #11273d);
}

.vc-barra-mobile .vc-cerca-scorciatoia .vc-cerca-lente {
	width: 22px;
	height: 22px;
}

/* ===============================================================
   4. Filtri per categoria dei luoghi

   SONO COLLEGAMENTI, non un filtro che nasconde schede con JavaScript, e la
   ragione e che le cinque pagine di destinazione ESISTONO GIA e funzionano:
   /luoghi/edifici-storici/, /luoghi/chiese/, /luoghi/fontane/,
   /luoghi/piazze/, /luoghi/natura/. Un filtro a schermo le avrebbe duplicate
   in una sesta implementazione, e in cambio avrebbe dato indirizzi non
   condivisibili, non indicizzabili e inservibili senza JavaScript.

   Il markup e in partials/filtri-luoghi.php. Qui c'e solo l'aspetto.

   LO STATO ATTIVO NON E DISTINGUIBILE DAL SOLO COLORE, che sarebbe il
   criterio 1.4.1. Tre segnali sovrapposti:
     - un pallino pieno prima del nome, che le voci inattive non hanno
       (differenza di forma);
     - il peso del carattere, 700 contro 400 (differenza di forma);
     - aria-current="page" nel markup, per chi la pagina non la vede affatto.
   Il colore invertito e il quarto segnale, non l'unico.
   =============================================================== */

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

/*
   flex-wrap: wrap e la parte che conta su telefono. La pagina ha
   overflow-x: clip su .off-canvas-wrap (vc-nav.css sezione 6): una riga che
   sborda NON si vedrebbe, ma ci sarebbe lo stesso, e le voci oltre il bordo
   sarebbero irraggiungibili. Andando a capo il problema non nasce.

   Il gap di 0.5rem e anche cio che tiene separate le aree di tocco: due
   bersagli da 44px attaccati si toccano, e il dito non sa quale ha preso.
*/
.vc-filtri-elenco {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-filtri-elenco > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
   La voce.

   min-height 44px piu padding orizzontale: l'area di tocco e il collegamento
   stesso. inline-flex serve a centrare verticalmente il testo dentro quei
   44px senza calcolare un line-height a mano.

   Il colore del testo e dichiarato perche "a, a:visited { color: #003882 }"
   di style.css lo porterebbe al blu dei link: #003882 su bianco fa 10.4:1 ed
   e leggibile, ma dentro una pastiglia con il bordo grigio sembrerebbe un
   link nel testo e non un comando.
*/
.vc-filtri .vc-filtro {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--vc-tocco-minimo, 44px);
	padding: 0 0.85rem;
	border: 1px solid var(--vc-cerca-bordo-campo, #cfd7e0);
	border-radius: var(--vc-raggio-pieno, 999px);
	background: var(--vc-colore-sfondo, #ffffff);
	color: var(--vc-cerca-testo, #11273d);
	font-size: 0.9375rem;
	font-weight: var(--vc-peso-normale, 400);
	line-height: 1.2;
	text-decoration: none;
}

.vc-filtri .vc-filtro:hover {
	background: #eef1f5;
	border-color: var(--vc-colore-ardesia, #5e6b76);
	color: var(--vc-cerca-testo, #11273d);
	text-decoration: none;
}

/*
   Il numero.

   #5e6b76 su bianco fa 5.44:1. E volutamente piu tenue del nome: e un dato
   accessorio, e chi legge deve poter saltare la colonna dei numeri senza che
   gli rubino l'occhio.

   font-variant-numeric: tabular-nums tiene le cifre della stessa larghezza,
   cosi le pastiglie non ballano quando un conteggio passa da 9 a 10.
*/
.vc-filtri .vc-filtro-conta {
	color: var(--vc-cerca-testo-tenue, #5e6b76);
	font-size: 0.8125rem;
	font-weight: var(--vc-peso-medio, 600);
	font-variant-numeric: tabular-nums;
}

/* Lo stato attivo. Vedi il cappello della sezione: colore, peso e forma
   insieme, mai il colore da solo. */
.vc-filtri .vc-filtro-attivo,
.vc-filtri .vc-filtro-attivo:hover {
	border-color: var(--vc-colore-blu-scuro, #11273d);
	background: var(--vc-colore-blu-scuro, #11273d);
	color: var(--vc-colore-sfondo, #ffffff);
	font-weight: var(--vc-peso-grassetto, 700);
}

/*
   Il pallino. content vuoto, quindi nessun lettore di schermo lo annuncia:
   il segnale per chi non vede e aria-current="page", che sta nel markup.
   currentColor lo tiene bianco sul fondo scuro senza una seconda regola.
*/
.vc-filtri .vc-filtro-attivo::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--vc-raggio-pieno, 999px);
	background: currentColor;
}

.vc-filtri .vc-filtro-attivo .vc-filtro-conta {
	color: var(--vc-colore-sfondo, #ffffff);
}

/* ===============================================================
   5. Pagina dei risultati della ricerca

   MISURATO PRIMA. /?s=palazzo pesava 219 KB di solo HTML per 39 risultati, e
   /?s=di 275 KB per 50: search.php chiamava the_content(), cioe stampava
   ogni articolo INTERO. Dentro ci finivano 124 immagini a size-large e
   size-full, 15 iframe di YouTube e 3 moduli di Contact Form 7 renderizzati
   davvero, uno per ogni scheda che ne contiene uno. Una pagina di risultati
   che pesa piu di dieci pagine vere.

   Ora search.php usa un estratto e una miniatura, e il markup e in
   partials/loop-search.php.
   =============================================================== */

.vc-ricerca-elenco {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
   Ogni risultato e una riga con miniatura a sinistra e testo a destra.
   Su telefono la miniatura resta: e la size "thumbnail" di WordPress,
   150x150, e costa poche decine di KB per tutta la pagina.
*/
.vc-ricerca-scheda {
	display: flex;
	align-items: flex-start;
	gap: var(--vc-spazio-2, 0.9375rem);
	margin: 0;
	padding: var(--vc-spazio-3, 1.40625rem) 0;
	border-bottom: 1px solid var(--vc-colore-bordo-tenue, #eeeeee);
}

.vc-ricerca-elenco > .vc-ricerca-scheda:first-child {
	padding-top: 0;
}

.vc-ricerca-miniatura {
	flex: 0 0 auto;
	display: block;
	width: 5.5rem;
	line-height: 0;
}

.vc-ricerca-miniatura img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vc-raggio-1, 3px);
}

.vc-ricerca-testo {
	flex: 1 1 auto;
	min-width: 0;
}

/*
   Il titolo del risultato resta un <h2>, che e il livello giusto sotto l'<h1>
   "Risultati della ricerca per". La banda blu di "#main-visit h2"
   (style.css:101) NON arriva qui: quella regola e legata a un id, e questa
   pagina usa <main id="main">, non #main-visit.
*/
.vc-ricerca-titolo {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-medio, 600);
}

/*
   Il tipo di contenuto, al posto della riga di firma che c'era prima.
   Maiuscoletto spaziato e corpo piccolo: si legge come etichetta e non come
   la prima riga del testo. #5e6b76 su bianco fa 5.44:1.
*/
.vc-ricerca-tipo {
	margin: 0 0 0.35rem;
	color: var(--vc-cerca-testo-tenue, #5e6b76);
	font-size: 0.75rem;
	font-weight: var(--vc-peso-medio, 600);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vc-ricerca-estratto {
	margin: 0;
	color: var(--vc-colore-testo, #000000);
	line-height: var(--vc-interlinea, 1.5);
}

/* Il conteggio dei risultati, sotto il titolo della pagina. */
.vc-ricerca-conta {
	margin: 0 0 var(--vc-spazio-3, 1.40625rem);
	color: var(--vc-cerca-testo-tenue, #5e6b76);
}

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

	.vc-ricerca-miniatura {
		width: 7.5rem;
	}
}

/* ===============================================================
   6. Movimento ridotto

   Va per ultimo: le media query non aggiungono specificita, quindi questa
   regola vince sulla transizione del pulsante solo perche arriva dopo.
   =============================================================== */

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

	.vc-cerca .vc-cerca-invia {
		transition-duration: 0.01ms;
	}
}

/* ===============================================================
   7. Stampa

   Un campo di ricerca su un foglio di carta non serve a nessuno. I filtri
   spariscono gia da soli: library/css/style.css riga 829 nasconde "nav" in
   stampa, e i filtri sono un <nav>. La fascia della testata e un <div>, e
   quella regola non la prende: va detto qui.
   =============================================================== */

@media print {

	.vc-cerca-fascia {
		display: none;
	}
}