/*
Navigazione e testata di VisitCaprarola — fase F5.

SCOPO
Rifare l'aspetto e il comportamento di tre cose senza toccare una riga di
markup: il pannello a scomparsa del telefono, la barra di navigazione del
desktop e la testata. Il PHP e definitivo e le classi di Foundation restano al
loro posto, perche vc-ui.js si aggancia a quelle: qui si scavalca solo il CSS.

ORDINE DI CARICAMENTO
library/joints.php accoda questo foglio per ultimo, con dipendenza dichiarata
da vc-foundation-core.css, style.css e vc-mobile.css. A parita di specificita
vince l'ultima regola dichiarata, quindi la tecnica di tutto il file e una
sola: replicare la specificita esatta della regola da battere e arrivare dopo.
In questo file non c'e nessun !important.

I BREAKPOINT sono 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 come in vc-grid.css e vc-mobile.css.

--------------------------------------------------------------------------
LA COSA PIU RISCHIOSA DEL FOGLIO, in cima cosi non sfugge a nessuno.

Per far funzionare position: sticky serve togliere overflow: hidden da
.off-canvas-wrap (sezione 6). Me lo posso permettere solo perche con il modello
a sovrapposizione la pagina non trasla piu e il pannello e position: fixed:
non c'e piu niente che sporga e vada nascosto. Restava pero un elemento che
sporgeva davvero, .right-off-canvas-menu, traslato di +100% oltre il bordo
destro: con il ritaglio tolto avrebbe prodotto 250px di scorrimento
orizzontale su telefono. E neutralizzato nella sezione 1.4.

SE COMPARE ECCEDENZA ORIZZONTALE, in ordine di preferenza:
  1. cercare quale elemento sporge davvero (di solito un'immagine o una
     tabella nel contenuto, non la navigazione);
  2. rimettere overflow-x: hidden sul body;
  3. rinunciare a sticky e passare a position: fixed con un padding-top di
     compensazione sul contenitore.

SECONDA COSA DA SAPERE, misurata e non aggirata: allo stato attuale del markup
position: sticky NON puo avere alcun effetto, perche header.php include
partials/nav-main-offcanvas-sidebar.php DENTRO #inner-header.row. Un elemento
sticky si muove solo dentro il riquadro del proprio genitore, e qui le due
barre sono l'ultimo contenuto di quel riquadro: la corsa disponibile e zero.
Le regole della sezione 6 sono scritte giuste e diventano vive nel momento in
cui quella include viene spostata fuori da #inner-header, cioe subito dopo
<div> di chiusura di #inner-header. E una modifica di header.php, non di
questo foglio, e come tale sta nella relazione e non qui.
--------------------------------------------------------------------------
*/

/* ===============================================================
   0. Variabili locali

   Stanno qui e non in vc-tokens.css perche F5 tocca un file solo. Ogni valore
   poggia su un token dove il token esiste, e ogni var() porta con se il
   proprio valore di ripiego, qui e in ogni punto d'uso.

   PERCHE DUE ACCENTI DIVERSI, ed e una scelta non una distrazione. Il blu
   acceso del brand (#007095) su bianco da 5.66:1, sopra il 3:1 che il
   criterio 1.4.11 chiede a un elemento grafico; sul blu profondo del pannello
   darebbe 2.65:1, cioe non si vedrebbe. L'ambra (#f39207) fa il percorso
   opposto: 6.4:1 sul pannello scuro, 2.34:1 su bianco. Quindi blu acceso sul
   chiaro, ambra sullo scuro. Sono entrambi colori gia presenti nel sito.
   =============================================================== */

:root {
	/* Pannello */
	--vc-nav-pannello-fondo: var(--vc-colore-blu-scuro, #11273d);
	--vc-nav-pannello-fondo-2: rgba(0, 0, 0, 0.22);
	--vc-nav-pannello-testo: rgba(255, 255, 255, 0.92);
	--vc-nav-pannello-testo-2: rgba(255, 255, 255, 0.78);
	--vc-nav-pannello-linea: rgba(255, 255, 255, 0.12);

	/* Testo e accenti sul chiaro */
	--vc-nav-testo: var(--vc-colore-blu, #374a66);
	--vc-nav-testo-forte: var(--vc-colore-blu-scuro, #11273d);
	--vc-nav-testo-tenue: var(--vc-colore-ardesia, #5e6b76);
	--vc-nav-accento-chiaro: var(--vc-colore-blu-acceso, #007095);
	--vc-nav-accento-scuro: var(--vc-colore-ambra, #f39207);
	--vc-nav-linea: rgba(17, 39, 61, 0.12);
	--vc-nav-velo: rgba(10, 20, 35, 0.55);

	/* Movimento. 260ms invece dei 500ms di Foundation: mezzo secondo per
	   aprire un menu si legge come lentezza, non come eleganza. */
	--vc-nav-durata: 260ms;
	--vc-nav-curva: cubic-bezier(0.22, 1, 0.36, 1);

	/* Metriche condivise. --vc-nav-marchio-h e l'unico numero accordato a mano
	   fra le due colonne della testata: se cambia va riguardato a occhio
	   l'allineamento verticale della colonna di servizio (sezione 5). */
	--vc-nav-barra-h: 3.5rem;   /* 56px, barra mobile */
	--vc-nav-marchio-h: 3.5rem; /* 56px, marchio della testata desktop */

	/* Impilamento. Le barre stanno SOTTO il velo, il velo sotto il pannello. */
	--vc-nav-z-barra: 900;
	--vc-nav-z-velo: 1040;
	--vc-nav-z-pannello: 1050;
}

/* ===============================================================
   1. Pannello a scomparsa: da modello a spinta a modello a sovrapposizione

   Come funzionava. L'<aside> del pannello sta dentro .inner-wrap ed e fermo a
   translate(-100%). Aggiungendo .move-right a .off-canvas-wrap, e .inner-wrap
   a traslare di 15.625rem verso destra: il pannello viene trascinato e
   compare. Nessuna regola riporta mai il pannello a 0.

   Come funziona adesso. La pagina resta ferma, il pannello scivola sopra, un
   velo scuro separa i due piani.

   L'ORDINE DELLE TRE MOSSE E OBBLIGATO, ed e il punto da non invertire:
     1. si azzera il transform di .inner-wrap;
     2. si porta il pannello a position: fixed;
     3. si aggiunge la regola che lo riporta a 0 quando e aperto.
   La 1 deve venire prima della 2 perche un elemento con un transform diverso
   da none diventa il blocco contenitore di qualunque discendente position:
   fixed. Finche .inner-wrap trasla, un pannello "fisso" sarebbe fisso rispetto
   a .inner-wrap, cioe verrebbe trascinato come prima e la 2 non servirebbe a
   niente. La 3 e necessaria perche in Foundation non esiste: e sempre stata la
   traslazione del genitore a rendere visibile il pannello.
   =============================================================== */

/* ---------------------------------------------------------------
   1.1 Prima mossa: la pagina non si sposta piu.

   Specificita (0,2,1) contro la (0,1,1) di .move-right > .inner-wrap.
   -webkit-transform e ripetuto solo per i Safari vecchi in cui non e ancora
   un alias della proprieta standard: sui browser correnti e ridondante.
   --------------------------------------------------------------- */
.off-canvas-wrap.move-right > .inner-wrap {
	-webkit-transform: none;
	transform: none;
}

/* Stessa cosa per il verso opposto. .move-left oggi non e raggiungibile
   (l'unico innesco .right-off-canvas-toggle sta in
   partials/nav-top-offcanvas-sidebar.php, che header.php non include), ma se
   un domani viene ricablato deve trovare gia il modello nuovo e non riaprire
   quello a spinta. */
.off-canvas-wrap.move-left > .inner-wrap {
	-webkit-transform: none;
	transform: none;
}

/* ---------------------------------------------------------------
   1.2 Seconda mossa: il pannello diventa un pannello vero.

   box-sizing: border-box e obbligatorio, non decorativo: Foundation impone
   content-box e con quello il padding delle voci allargherebbe il pannello
   oltre la larghezza dichiarata.

   min(86vw, 22rem): su un telefono da 390px fanno 335px invece dei 250px di
   Foundation, cioe voci molto piu comode; su schermi larghi si ferma a 352px.

   L'ombra NON sta qui ma nello stato aperto: da chiuso il pannello e a
   translateX(-100%), quindi il suo bordo destro coincide con x = 0 e un'ombra
   proiettata a destra sborderebbe dentro la pagina come una sbavatura scura
   permanente lungo il lato sinistro.

   visibility: hidden da chiuso e un'aggiunta rispetto a Foundation: senza, i
   link del pannello restano nel percorso della tastiera anche a menu chiuso.
   Transisce con durata 0 ma ritardata a fine corsa, cosi in chiusura la
   traslazione si vede tutta; in apertura (regola 1.3) e immediata.
   --------------------------------------------------------------- */
.left-off-canvas-menu.vc-pannello {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(86vw, 22rem);
	background: var(--vc-nav-pannello-fondo, #11273d);
	color: var(--vc-nav-pannello-testo, rgba(255, 255, 255, 0.92));
	border-radius: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	z-index: var(--vc-nav-z-pannello, 1050);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	transition: transform var(--vc-nav-durata, 260ms) var(--vc-nav-curva, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s linear var(--vc-nav-durata, 260ms);
}

/* ---------------------------------------------------------------
   1.3 Terza mossa: la regola che in Foundation non esiste.
   --------------------------------------------------------------- */
.off-canvas-wrap.move-right .left-off-canvas-menu.vc-pannello {
	visibility: visible;
	box-shadow: 6px 0 28px rgba(4, 12, 22, 0.4);
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition: transform var(--vc-nav-durata, 260ms) var(--vc-nav-curva, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s;
}

/* ---------------------------------------------------------------
   1.4 Il pannello destro, che e il vero prezzo di overflow: visible.

   .right-off-canvas-menu e position: absolute con right: 0 e transform
   translate3d(100%, 0, 0): occupa 250px OLTRE il bordo destro di .inner-wrap.
   Finche .off-canvas-wrap ritagliava non si vedeva. Togliendo il ritaglio
   (sezione 6) diventerebbe eccedenza orizzontale vera, e su telefono la
   pagina scorrerebbe di lato di 250px.

   Portandolo a position: fixed il problema sparisce alla radice: un elemento
   fisso non entra mai nella regione di scorrimento del documento. E la
   correzione piu piccola possibile e resta reversibile in una riga.
   --------------------------------------------------------------- */
.right-off-canvas-menu {
	position: fixed;
}

/* ---------------------------------------------------------------
   1.5 Il velo.

   Foundation non gli da nessuna regola di base: e un <a> vuoto, quindi inline
   e di dimensione zero, e diventa un riquadro a tutto schermo solo con
   .move-right. Lo dichiaro comunque display: none, che e piu esplicito e non
   toglie niente: .move-right .exit-off-canvas ha specificita (0,2,0) e
   continua a vincere su questa (0,1,0).
   --------------------------------------------------------------- */
.exit-off-canvas {
	display: none;
}

/*
   Il velo aperto. Specificita (0,3,0) contro la (0,2,0) di Foundation.

   Tre correzioni: fixed invece di absolute, cosi copre la finestra e non il
   riquadro di .inner-wrap; fondo scuro invece del rgba(255,255,255,0.2) di
   Foundation, che schiariva la pagina invece di allontanarla; e via le due
   box-shadow, che disegnavano una banda nera verticale in mezzo allo schermo.

   z-index sotto il pannello: Foundation dava 1002 al velo e 1001 al pannello,
   cioe il velo copriva il menu che avrebbe dovuto mettere in risalto.

   La dissolvenza e un'animazione e non una transizione: l'elemento passa da
   display: none a display: block, e su un cambio di display le transizioni non
   partono mentre le animazioni si. In chiusura la dissolvenza non c'e, per lo
   stesso motivo al contrario: servirebbe che il JavaScript ritardasse la
   rimozione della classe, e il JavaScript non e questo file.

   backdrop-filter e solo una rifinitura: dove manca resta il fondo opaco al
   55%, che da solo fa gia il lavoro.
*/
.off-canvas-wrap.move-right .exit-off-canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--vc-nav-z-velo, 1040);
	background: var(--vc-nav-velo, rgba(10, 20, 35, 0.55));
	box-shadow: none;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: vc-velo-entra var(--vc-nav-durata, 260ms) var(--vc-nav-curva, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes vc-velo-entra {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Foundation schiarisce il velo al passaggio del mouse. Su un velo scuro
   sarebbe un lampo bianco: annullato replicandone la specificita. */
@media only screen and (min-width: 40.063em) {

	.move-right .exit-off-canvas:hover {
		background: var(--vc-nav-velo, rgba(10, 20, 35, 0.55));
	}
}

/* ===============================================================
   2. Contenuto del pannello

   NOTA SUI SELETTORI. wp_nav_menu stampa <ul id="menu-topmenu-1"> senza
   nessuna classe utile, quindi tutto si aggancia a .vc-pannello-menu e alla
   struttura sotto di essa.

   NOTA SU display, che spiega una scelta altrimenti strana.
   .show-for-small-only riceve display: inherit !important da
   vc-foundation-core.css: sull'<aside> la proprieta display e fuori dalla mia
   portata. Il pannello e percio impaginato come blocco e solo i suoi figli
   sono flessibili; non e un limite fastidioso, ma spiega perche .vc-pannello
   non e un flex container.
   =============================================================== */

/* ---------------------------------------------------------------
   2.1 Testa del pannello
   --------------------------------------------------------------- */
.vc-pannello .vc-pannello-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	border-bottom: 1px solid var(--vc-nav-pannello-linea, rgba(255, 255, 255, 0.12));
}

/*
   Il marchio su una piastrella bianca, e non e una scelta estetica.

   logo-visitcaprarola.png ha il segno a colori ma la parola "VisitCaprarola"
   in grigio molto scuro: su un fondo blu profondo spariva, verificato sulla
   cattura del pannello aperto. Le alternative erano peggiori: un filtro
   brightness(0) invert(1) avrebbe reso bianco anche il segno, buttando via i
   colori del marchio, e un file nuovo in negativo qui non c'e.

   La piastrella conserva i colori veri e si legge come un elemento voluto.
*/
.vc-pannello .vc-pannello-marchio {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 0;
	padding: 0.4rem 0.6rem;
	border-radius: var(--vc-raggio-2, 6px);
	background: #ffffff;
}

.vc-pannello .vc-pannello-marchio img {
	display: block;
	max-height: 2rem;
	width: auto;
}

/*
   Il pulsante di chiusura. padding e margin vanno azzerati esplicitamente:
   vc-foundation-core.css stila il selettore nudo "button" con padding
   1rem/2rem, margine inferiore 1.25rem e fondo #008CBA.

   ATTENZIONE alla specificita degli stati: button:hover vale (0,1,1), quindi
   .vc-pannello-chiudi da sola (0,1,0) perderebbe il confronto e il pulsante
   tornerebbe azzurro al passaggio del mouse. Gli stati sono percio scritti con
   la classe piu la pseudo-classe, che fa (0,2,0).
*/
.vc-pannello .vc-pannello-chiudi {
	flex: 0 0 var(--vc-tocco-minimo, 44px);
	width: var(--vc-tocco-minimo, 44px);
	height: var(--vc-tocco-minimo, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--vc-raggio-2, 6px);
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.vc-pannello .vc-pannello-chiudi svg {
	display: block;
	fill: currentColor;
}

.vc-pannello-chiudi:hover,
.vc-pannello-chiudi:focus {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

/* ---------------------------------------------------------------
   2.2 Elenco delle voci

   ul e li vanno ripuliti: vc-foundation-core.css da a ul margin-left 1.1rem,
   margin-bottom 1.25rem e i pallini, e nessuna delle regole di
   ul.off-canvas-list arriva fin qui (quella classe sta solo sul pannello
   destro). Il colore va dichiarato sui li perche style.css assegna
   header ul li { color: #868787 }, che qui sarebbe illeggibile sul blu.

   Il <li> e flex con wrap perche il pulsante della fisarmonica e fratello del
   <a> e non figlio: il link prende lo spazio che resta, il pulsante sta a
   destra sulla stessa riga, e il sottomenu va a capo con flex-basis 100%.
   --------------------------------------------------------------- */
.vc-pannello-menu {
	padding: 0.25rem 0 2rem;
}

.vc-pannello-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: var(--vc-interlinea, 1.5);
}

.vc-pannello-menu li {
	margin: 0;
	color: var(--vc-nav-pannello-testo, rgba(255, 255, 255, 0.92));
}

.vc-pannello-menu > ul > li {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/*
   Voci di primo livello. flex: 1 1 0% e non 1 1 auto: con la base automatica
   una voce lunga spingerebbe fuori il pulsante della fisarmonica, ed essendo
   il contenitore in wrap quello ci andrebbe davvero a capo.
*/
.vc-pannello-menu > ul > li > a {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.7rem 1rem;
	color: var(--vc-nav-pannello-testo, rgba(255, 255, 255, 0.92));
	font-size: 1.0625rem;
	font-weight: var(--vc-peso-medio, 600);
	line-height: var(--vc-interlinea-stretta, 1.25);
	text-decoration: none;
	transition: background-color 160ms ease;
}

.vc-pannello-menu > ul > li > a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/*
   Messa a fuoco da tastiera. outline-offset NEGATIVO di proposito: il pannello
   e overflow-x: hidden, quindi un contorno proiettato all'esterno verrebbe
   tagliato sui due lati. Tirandolo dentro si vede tutto il perimetro.
*/
.vc-pannello-menu a:focus-visible,
.vc-pannello-chiudi:focus-visible,
.vc-pannello-menu .vc-fisarmonica:focus-visible {
	outline: 2px solid var(--vc-nav-accento-scuro, #f39207);
	outline-offset: -3px;
}

/*
   Pagina corrente. WordPress mette .current-menu-item / .current_page_item /
   .current-menu-ancestor sul <li>; library/joints.php aggiunge anche .active,
   sia alla voce corrente sia ai suoi antenati.

   La barretta e una box-shadow interna e non un border-left perche un bordo
   aggiungerebbe 3px al riquadro e sposterebbe il testo delle sole voci
   correnti rispetto a tutte le altre. Il segnale non e solo il colore: c'e
   anche il testo pieno e il peso maggiore.
*/
.vc-pannello-menu > ul > li.current-menu-item > a,
.vc-pannello-menu > ul > li.current_page_item > a,
.vc-pannello-menu > ul > li.current-menu-ancestor > a,
.vc-pannello-menu > ul > li.active > a {
	color: #ffffff;
	font-weight: var(--vc-peso-grassetto, 700);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 3px 0 0 var(--vc-nav-accento-scuro, #f39207);
}

/* ---------------------------------------------------------------
   2.3 Sottomenu a fisarmonica

   Oggi i sottomenu sono sempre aperti e il menu diventa un muro di testo. Qui
   sono chiusi di default; la classe .is-aperto sul <li class="has-dropdown">
   la mette e la toglie il JavaScript, che e scritto a parte.
   --------------------------------------------------------------- */
.vc-pannello-menu .has-dropdown > ul.dropdown {
	display: none;
}

.vc-pannello-menu .has-dropdown.is-aperto > ul.dropdown {
	display: block;
}

.vc-pannello-menu > ul > li > ul.dropdown {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding: 0.25rem 0;
	background: var(--vc-nav-pannello-fondo-2, rgba(0, 0, 0, 0.22));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Secondo livello: rientrato, corpo un filo minore, fondo appena piu scuro. */
.vc-pannello-menu ul.dropdown > li > a {
	display: flex;
	align-items: center;
	min-height: var(--vc-tocco-minimo, 44px);
	padding: 0.5rem 1rem 0.5rem 2rem;
	color: var(--vc-nav-pannello-testo-2, rgba(255, 255, 255, 0.78));
	font-size: 0.9375rem;
	font-weight: var(--vc-peso-normale, 400);
	line-height: var(--vc-interlinea-stretta, 1.25);
	text-decoration: none;
	transition: background-color 160ms ease;
}

.vc-pannello-menu ul.dropdown > li > a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.vc-pannello-menu ul.dropdown > li.current-menu-item > a,
.vc-pannello-menu ul.dropdown > li.current_page_item > a,
.vc-pannello-menu ul.dropdown > li.active > a {
	color: #ffffff;
	font-weight: var(--vc-peso-medio, 600);
	box-shadow: inset 3px 0 0 var(--vc-nav-accento-scuro, #f39207);
}

/*
   Il pulsante della fisarmonica, che il JavaScript inserisce nel <li> accanto
   al <a>. Stessa avvertenza del pulsante di chiusura sugli stati: la classe da
   sola perderebbe contro button:hover, quindi il selettore e
   .vc-pannello-menu .vc-fisarmonica:hover, che fa (0,3,0).

   align-self: stretch invece di un'altezza fissa, cosi il pulsante e alto
   quanto la riga anche quando la voce va su due righe e la linea di
   separazione verticale arriva fino in fondo.
*/
.vc-pannello-menu .vc-fisarmonica {
	flex: 0 0 var(--vc-tocco-minimo, 44px);
	width: var(--vc-tocco-minimo, 44px);
	min-height: 48px;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 0;
	background: transparent;
	color: var(--vc-nav-pannello-testo, rgba(255, 255, 255, 0.92));
	cursor: pointer;
}

.vc-pannello-menu .vc-fisarmonica:hover,
.vc-pannello-menu .vc-fisarmonica:focus {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.vc-pannello-menu .vc-fisarmonica-segno {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	transition: transform 200ms var(--vc-nav-curva, cubic-bezier(0.22, 1, 0.36, 1));
}

.vc-pannello-menu .vc-fisarmonica[aria-expanded="true"] .vc-fisarmonica-segno {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------
   2.4 Voce della lingua

   Le bandiere che stampa qTranslate sono <img> da 16px senza attributi di
   dimensione: vanno vincolate, altrimenti bastano un file sbagliato o la
   cache di un plugin per farle diventare alte quanto la riga.

   I <a> del pannello sono flex container, quindi vertical-align non avrebbe
   effetto sull'immagine: l'allineamento verticale lo fa align-self.
   --------------------------------------------------------------- */
.vc-pannello-menu .qtranxs-lang-menu > a img,
.vc-pannello-menu ul.dropdown > li > a img {
	flex: 0 0 auto;
	align-self: center;
	width: 18px;
	height: auto;
	margin: 0 0.2rem;
	border-radius: var(--vc-raggio-1, 3px);
}

/* ===============================================================
   3. Barra mobile (fino a 640px)

   CORREZIONE a quanto scritto qui prima. Il marchio NON era scentrato: la
   tab-bar di Foundation rientrava di 45px su entrambi i lati e il logo
   risultava centrato al pixel. Misurato a 492px: centro 245,5 contro 246 della
   finestra.

   I difetti veri erano due, e sono quelli che si correggono: l'immagine era
   alta 58px in una barra alta 55, quindi sbordava; e la barra era larga 462 su
   492, perche stava dentro una colonna della griglia e ne ereditava il
   margine, con due strisce bianche ai lati e il logo a occupare il 64 per
   cento della larghezza. Ora: barra 492, logo 186x34, barra alta 56.

   Le tre zone restano utili comunque: tengono il centro fermo se un domani a
   destra si aggiunge qualcosa.
   =============================================================== */

.vc-barra-mobile {
	display: flex;
	align-items: center;
	min-height: var(--vc-nav-barra-h, 3.5rem);
	background: var(--vc-colore-sfondo, #ffffff);
	box-shadow: 0 1px 0 var(--vc-nav-linea, rgba(17, 39, 61, 0.12)), 0 2px 10px rgba(17, 39, 61, 0.06);
}

/* Le due zone laterali: larghezza identica, non negoziabile. flex: 0 0 48px e
   non la sola width, cosi nessun contenuto lungo del marchio puo comprimerle
   e spostare il centro. */
.vc-barra-mobile .vc-innesco,
.vc-barra-mobile .vc-barra-coda {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}

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

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

.vc-barra-mobile .vc-innesco:focus-visible {
	outline: 2px solid var(--vc-nav-accento-chiaro, #007095);
	outline-offset: -3px;
}

.vc-barra-mobile .vc-barra-marchio {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	line-height: 0;
}

.vc-barra-mobile .vc-barra-marchio img {
	display: block;
	margin: 0 auto;
	max-height: 2.125rem;
	width: auto;
}

/*
   L'hamburger, disegnato qui.

   Quello di Foundation era fatto con tre box-shadow su uno pseudo-elemento e
   un text-indent di 2.1875rem per spingere via un testo che nel markup nuovo
   non esiste piu. Tre barre disegnate a mano costano meno, e si colorano con
   currentColor, quindi seguono il colore del link in ogni stato.

   Lo <span> E la barra centrale; ::before e ::after sono le altre due. Il
   riquadro toccabile resta 48x48 perche lo porta il link, non lo span.
*/
.vc-barra-mobile .vc-innesco-segno {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.vc-barra-mobile .vc-innesco-segno::before,
.vc-barra-mobile .vc-innesco-segno::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.vc-barra-mobile .vc-innesco-segno::before {
	top: -6px;
}

.vc-barra-mobile .vc-innesco-segno::after {
	top: 6px;
}

/* ===============================================================
   4. Barra di navigazione desktop (da 641px)

   Il comportamento delle tendine resta di vc-ui.js, che lavora sulle classi
   .hover e .not-click su li.has-dropdown. Qui si tocca solo l'aspetto.

   La specificita da battere e alta perche Foundation qualifica quasi tutto con
   doppie :not(): .top-bar-section li:not(.has-form) a:not(.button) vale (0,3,2)
   e .top-bar-section li.active:not(.has-form) a:not(.button) vale (0,4,2). Il
   prefisso .vc-barra-desktop aggiunge una classe e basta a vincere ogni
   confronto, senza inventare selettori acrobatici.
   =============================================================== */

/* Il contenitore. style.css metteva sulla .top-bar un border-top 1px solid
   #000: una riga nera piena sopra un menu grigio chiaro. Sostituita da una
   linea tenue in alto piu un'ombra bassa, che e anche quello che serve quando
   la barra e agganciata in cima. */
.vc-barra-desktop {
	background: var(--vc-colore-sfondo, #ffffff);
	box-shadow: inset 0 1px 0 var(--vc-nav-linea, rgba(17, 39, 61, 0.12)), 0 2px 10px rgba(17, 39, 61, 0.07);
}

/*
   height: auto invece dei 2.8125rem fissi di Foundation, con min-height a
   tenere l'altezza attuale: se un domani il menu cresce e le voci vanno a
   capo, la barra si alza invece di tagliare la seconda riga, perche la
   .top-bar di base e overflow: hidden.
*/
.vc-barra-desktop .top-bar {
	background: var(--vc-colore-sfondo, #ffffff);
	border-top: 0;
	height: auto;
	min-height: 2.8125rem;
	overflow: visible;
}

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

	/*
	   Foundation limita .contain-to-grid .top-bar a 72.5rem mentre la .row
	   della testata arriva a 80.8rem: il menu risultava rientrato di una
	   cinquantina di pixel per lato rispetto al marchio. Tolto il limite, la
	   prima voce si allinea al bordo sinistro del logo.
	*/
	.contain-to-grid.vc-barra-desktop .top-bar {
		max-width: none;
		margin: 0;
	}

	/*
	   Voci centrate sulla barra.

	   Foundation impagina le voci con dei float dentro un <ul> a display:
	   block, e un float non si centra: si puo solo accostare a un bordo. Il
	   modo pulito e rendere flessibile il solo <ul> di primo livello, dove i
	   float vengono ignorati per definizione, e centrare li.

	   Il combinatore figlio e obbligatorio: senza, la regola prenderebbe anche
	   gli <ul class="dropdown">, che sono a display: none / block e in
	   posizione assoluta, e le tendine si scomporrebbero.

	   flex-wrap: wrap perche il menu arriva dal pannello di WordPress e puo
	   allungarsi: meglio una seconda riga centrata che voci tagliate. La
	   .top-bar qui sopra ha gia height: auto apposta.
	*/
	.vc-barra-desktop .top-bar-section > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	/* Il <ul class="title-area"> resta a sinistra e a larghezza zero: contiene
	   solo il pulsante "Menu" di Foundation, nascosto da medium-up. Azzerarne
	   l'ingombro evita che sposti di qualche pixel il centro delle voci. */
	.vc-barra-desktop .top-bar .title-area {
		width: 0;
	}

	/*
	   Il contrasto. Oggi le voci sono #868787 su bianco, circa 3.0:1, sotto il
	   4.5:1 del criterio 1.4.3. Il blu del brand #374a66 da 8.9:1.

	   I combinatori figlio fanno si che questi selettori NON tocchino i link
	   delle tendine, che hanno regole proprie piu sotto: senza di quelli la
	   regola del padding vincerebbe anche la, e le voci di secondo livello
	   resterebbero alte 45px.
	*/
	.vc-barra-desktop .top-bar-section > ul > li > a {
		position: relative;
		color: var(--vc-nav-testo, #374a66);
		font-weight: var(--vc-peso-medio, 600);
		letter-spacing: 0.012em;
	}

	.vc-barra-desktop .top-bar-section > ul > li:not(.has-form) > a:not(.button) {
		padding: 0 1rem;
		line-height: 2.8125rem;
		background: transparent;
	}

	/*
	   La sottolineatura.

	   E su ::before e non su ::after perche ::after su .has-dropdown > a e gia
	   occupato dal triangolino della tendina: usarlo lo cancellerebbe.

	   Anima transform e non la larghezza ne un border-bottom: scaleX non
	   cambia il riquadro del link, quindi non fa saltare la riga di voci al
	   passaggio del mouse.

	   left/right a 1rem seguono il padding delle voci normali; sulle voci con
	   tendina, che Foundation costringe a padding-right 2.1875rem con un
	   !important che non posso togliere, la linea risulta un po' piu larga del
	   testo. E l'unico compromesso visibile ed e minore dell'alternativa, cioe
	   linee di lunghezza diversa da voce a voce.
	*/
	.vc-barra-desktop .top-bar-section > ul > li > a::before {
		content: "";
		position: absolute;
		left: 1rem;
		right: 1rem;
		bottom: 7px;
		height: 3px;
		border-radius: 2px;
		background: var(--vc-nav-accento-chiaro, #007095);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 200ms var(--vc-nav-curva, cubic-bezier(0.22, 1, 0.36, 1));
	}

	.vc-barra-desktop .top-bar-section > ul > li > a:hover::before,
	.vc-barra-desktop .top-bar-section > ul > li > a:focus::before,
	.vc-barra-desktop .top-bar-section > ul > li.hover > a::before,
	.vc-barra-desktop .top-bar-section > ul > li.active > a::before {
		transform: scaleX(1);
	}

	/*
	   Annullamento dei fondi scuri di Foundation. Sono quattro regole distinte
	   perche sono quattro selettori distinti da battere, ciascuno replicato con
	   una classe in piu:
	     li:hover:not(.has-form) > a               (0,3,3) -> (0,4,4)
	     li.hover > a:not(.button)                 (0,3,2) -> (0,4,2)
	     li:not(.has-form) a:not(.button):hover    (0,3,2) -> (0,5,3)
	     li.active:not(.has-form) a:not(.button)   (0,4,2) -> (0,5,3)
	   L'ultima e la piu importante: oggi la pagina corrente e una pillola
	   azzurra #008CBA a tutta altezza, che accanto alla sottolineatura nuova
	   sarebbe un doppio segnale contraddittorio.
	*/
	.vc-barra-desktop .top-bar-section ul li:hover:not(.has-form) > a {
		background: transparent;
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-barra-desktop .top-bar-section li.hover > a:not(.button) {
		background: transparent;
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-barra-desktop .top-bar-section > ul > li:not(.has-form) > a:not(.button):hover {
		background: transparent;
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-barra-desktop .top-bar-section > ul > li.active:not(.has-form) > a:not(.button),
	.vc-barra-desktop .top-bar-section > ul > li.active:not(.has-form) > a:not(.button):hover {
		padding: 0 1rem;
		line-height: 2.8125rem;
		background: transparent;
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-barra-desktop .top-bar-section a:focus-visible {
		outline: 2px solid var(--vc-nav-accento-chiaro, #007095);
		outline-offset: -3px;
	}

	/*
	   Il triangolino della tendina era rgba(255, 255, 255, 0.4), cioe bianco al
	   40%: invisibile da quando la barra e bianca. Ricolorato con il blu delle
	   voci.
	*/
	.vc-barra-desktop .top-bar-section .has-dropdown > a::after {
		border-color: var(--vc-nav-testo, #374a66) transparent transparent transparent;
	}

	/*
	   Le tendine.

	   Fondo e ombra stanno sulle regole di APERTURA e non su .dropdown: da
	   chiusa la tendina resta nel riquadro da 1x1 pixel ritagliato con clip che
	   Foundation usa per nasconderla, e un'ombra su un riquadro di un pixel
	   lascerebbe un puntino chiaro sotto ogni voce.

	   Gli angoli sono raccordati con padding verticale sull'ul invece che con
	   overflow: hidden: cosi il fondo delle voci non arriva mai a toccare i
	   raccordi, e un eventuale terzo livello di menu non verrebbe tagliato via.
	*/
	.vc-barra-desktop .top-bar-section .has-dropdown.hover > .dropdown,
	.vc-barra-desktop .top-bar-section .has-dropdown.not-click:hover > .dropdown,
	.vc-barra-desktop .top-bar-section .has-dropdown > a:focus + .dropdown {
		min-width: 14rem;
		padding: 0.35rem 0;
		background: var(--vc-colore-sfondo, #ffffff);
		border-radius: 0 0 var(--vc-raggio-2, 6px) var(--vc-raggio-2, 6px);
		box-shadow: var(--vc-ombra-3, 0 10px 30px rgba(0, 0, 0, 0.18));
	}

	.vc-barra-desktop .top-bar-section .dropdown li {
		background: transparent;
	}

	.vc-barra-desktop .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
		display: flex;
		align-items: center;
		min-height: var(--vc-tocco-minimo, 44px);
		padding: 0.55rem 1rem;
		line-height: var(--vc-interlinea-stretta, 1.25);
		font-size: 1rem;
		font-weight: var(--vc-peso-normale, 400);
	}

	.vc-barra-desktop .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
		background: transparent;
		color: var(--vc-nav-testo, #374a66);
	}

	.vc-barra-desktop .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
		background: rgba(17, 39, 61, 0.06);
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-barra-desktop .top-bar-section .dropdown li.active:not(.has-form) > a:not(.button) {
		background: rgba(17, 39, 61, 0.06);
		color: var(--vc-nav-testo-forte, #11273d);
		font-weight: var(--vc-peso-medio, 600);
	}

	/* Bandiere della voce "Lingua:". Qui il <a> non e un flex container,
	   quindi l'allineamento alla riga di testo si fa con vertical-align. */
	.vc-barra-desktop .top-bar-section img {
		width: 18px;
		height: auto;
		margin-left: 0.15rem;
		vertical-align: -3px;
		border-radius: var(--vc-raggio-1, 3px);
	}
}

/* ===============================================================
   5. Testata desktop

   Da 1025px in su e non da 641px: le due colonne portano hide-for-medium-down,
   che vc-grid.css spegne fino a 64em. Fra 641px e 1024px la testata non c'e
   proprio, e resta la sola barra di navigazione. Non e una cosa che si possa
   correggere da qui.
   =============================================================== */

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

	/*
	   Respiro verticale. Il padding sta sulle due classi vc-, non su .row ne su
	   .columns: le classi di griglia sono ricostruite in vc-grid.css e non
	   vanno sfiorate. Qui si toccano solo le proprieta verticali, quindi il
	   padding orizzontale del gutter resta quello della griglia.
	*/
	.vc-testata-marchio {
		padding-top: 1.75rem;
		padding-bottom: 1.25rem;
	}

	.vc-marchio {
		display: inline-block;
		line-height: 0;
	}

	.vc-marchio img {
		display: block;
		max-height: var(--vc-nav-marchio-h, 3.5rem);
		width: auto;
	}

	/*
	   La tagline deve leggersi come sottotitolo del marchio e non come un
	   paragrafo: corpo piccolo, maiuscolo spaziato e peso medio la distinguono
	   dal testo corrente senza ricorrere a un colore acceso. Il #5e6b76 da
	   5.5:1 su bianco, sopra soglia anche a corpo piccolo.

	   Nota: vc-mobile.css da a "p" la scala fluida --vc-testo-fluido con
	   specificita (0,0,1); qui siamo a (0,2,0) e la misura fissa vince.
	*/
	.vc-testata-marchio .vc-tagline {
		margin: 0.55rem 0 0;
		max-width: 34rem;
		color: var(--vc-nav-testo-tenue, #5e6b76);
		font-size: 0.8125rem;
		font-weight: var(--vc-peso-medio, 600);
		line-height: 1.35;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/*
	   Colonna di servizio, allineata a destra e in basso.

	   COMPROMESSO DICHIARATO. Le due colonne sono float, perche vc-grid.css
	   riproduce apposta il modello di Foundation, e due float non hanno
	   un'altezza comune: non esiste modo di allineare davvero la base di questa
	   colonna a quella del marchio senza rendere flex la .row, cioe senza
	   toccare la griglia. Una min-height calcolata sulla stessa variabile del
	   marchio piu l'ingombro della tagline e l'approssimazione piu onesta
	   possibile: se cambia --vc-nav-marchio-h questa la segue da sola, se
	   cambia il corpo della tagline va riguardata a occhio.
	*/
	/*
	   CORREZIONE dopo la misura sulla pagina vera. Le tre proprieta flessibili
	   stavano sulla colonna, dove non potevano funzionare: hide-for-medium-down
	   le impone display con !important (none sotto i 1025px, inherit sopra), e
	   un !important si batte solo con un altro !important. La colonna tiene
	   quindi solo padding e altezza minima; l'impaginazione e su .vc-servizio-blocco,
	   un elemento interno che nessuno governa con !important.
	*/
	.vc-testata-servizio {
		min-height: calc(var(--vc-nav-marchio-h, 3.5rem) + 1.6rem);
		padding-top: 1.75rem;
		padding-bottom: 1.25rem;
	}

	.vc-testata-servizio .vc-servizio-blocco {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		gap: 0.35rem;
		height: 100%;
	}

	.vc-testata-servizio .vc-servizio {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0 0.9rem;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0.875rem;
	}

	.vc-testata-servizio .vc-servizio li {
		position: relative;
		margin: 0;
	}

	/* Separatore sottile fra i link di servizio, disegnato a meta del gap cosi
	   resta centrato qualunque sia la lunghezza delle voci tradotte. */
	.vc-testata-servizio .vc-servizio li + li::before {
		content: "";
		position: absolute;
		top: 0.35em;
		bottom: 0.35em;
		left: -0.45rem;
		width: 1px;
		background: rgba(17, 39, 61, 0.25);
	}

	.vc-testata-servizio .vc-servizio a {
		display: inline-block;
		padding: 0.35rem 0;
		color: var(--vc-nav-testo-tenue, #5e6b76);
		text-decoration: none;
	}

	.vc-testata-servizio .vc-servizio a:hover {
		color: var(--vc-nav-testo-forte, #11273d);
		text-decoration: underline;
	}

	.vc-testata-servizio .vc-servizio a:focus-visible,
	.vc-testata-servizio .vc-social-testata a:focus-visible {
		outline: 2px solid var(--vc-nav-accento-chiaro, #007095);
		outline-offset: 2px;
	}

	/*
	   Icone social.

	   L'area toccabile e il <a> portato a 44x44 con inline-flex: e la soluzione
	   diretta, senza lo pseudo-elemento invisibile che vc-mobile.css ha dovuto
	   usare altrove, perche qui il markup e nuovo e le icone non stanno piu
	   dentro un paragrafo di testo. Il gap di 0.25rem garantisce che le tre
	   aree non si sovrappongano.

	   La misura del disegno va abbassata esplicitamente: vc-grid.css da a
	   .vc-icona-social 36x36, che era la dimensione del glifo del footer e in
	   una testata sarebbe sproporzionata. (0,2,0) contro (0,1,0).

	   Il margine destro negativo riallinea il bordo dell'ultima icona al bordo
	   del testo sopra: senza, i 44px del riquadro invisibile spingerebbero il
	   disegno dentro di 11px e la colonna sembrerebbe storta.
	*/
	.vc-testata-servizio .vc-social-testata {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.25rem;
		margin: 0.15rem -0.7rem 0 0;
		padding: 0;
		list-style: none;
	}

	.vc-testata-servizio .vc-social-testata li {
		margin: 0;
	}

	.vc-testata-servizio .vc-social-testata a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--vc-tocco-minimo, 44px);
		height: var(--vc-tocco-minimo, 44px);
		border-radius: var(--vc-raggio-2, 6px);
		color: var(--vc-nav-testo-tenue, #5e6b76);
	}

	.vc-testata-servizio .vc-social-testata a:hover {
		background: rgba(17, 39, 61, 0.06);
		color: var(--vc-nav-testo-forte, #11273d);
	}

	.vc-testata-servizio .vc-social-testata .vc-icona-social {
		display: block;
		width: 21px;
		height: 21px;
		fill: currentColor;
	}
}

/* ===============================================================
   6. Barre agganciate in alto allo scorrimento

   Leggere prima il cappello in cima al file: e la parte piu rischiosa, e allo
   stato attuale del markup e anche inerte.

   overflow: visible su .off-canvas-wrap serve perche position: sticky non
   funziona dentro un antenato che ritaglia. E lecito solo grazie alla sezione
   1: la pagina non trasla piu, il pannello sinistro e fixed e quello destro
   pure, quindi non resta niente da nascondere.

   z-index sotto il velo e sotto il pannello: a menu aperto le barre devono
   stare dietro, non davanti.

   L'ombra e sempre presente e non solo a pagina scorsa: distinguere i due casi
   vuole qualcuno che osservi la posizione di scorrimento, cioe del JavaScript
   o una sentinella nel markup, e qui non c'e ne l'uno ne l'altra. E tenuta
   molto bassa proprio perche a pagina ferma si noti il meno possibile.
   =============================================================== */

/*
   MISURATO, non ipotizzato. Con il solo overflow: visible compaiono 15px di
   scorrimento orizzontale su ogni pagina e a ogni larghezza: finestra 492,
   documento 507. Il colpevole e un div.row che va da -15 a 507, cioe i
   margini negativi che Foundation da alle righe annidate, su una riga che
   annidata non e. E un difetto che c'era gia da prima di F5: overflow: hidden
   lo teneva semplicemente nascosto.

   overflow-x: clip risolve entrambe le cose insieme, ed e l'unico valore che
   puo farlo: ritaglia come hidden ma NON crea un contenitore di scorrimento,
   quindi position: sticky continua a vedere la finestra come proprio
   riferimento. hidden non andrebbe (riporterebbe sticky al punto di partenza)
   e visible nemmeno (lascerebbe i 15px).

   Il pannello resta visibile perche e position: fixed, e un elemento fisso ha
   come blocco contenitore la finestra: non viene ritagliato dagli antenati.

   Ripiego sui browser che non conoscono clip: la dichiarazione viene ignorata,
   resta overflow: visible, e si torna ai 15px. Fastidio, non guasto.
*/
.off-canvas-wrap {
	overflow: visible;
	overflow-x: clip;
}

.vc-barra-mobile,
.vc-barra-desktop {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: var(--vc-nav-z-barra, 900);
}

/*
   AGGIUNTO DOPO LA CONSEGNA DEL FOGLIO, e cio che rende vivo l'aggancio.

   Il rilievo diceva il vero: cosi com'era, sticky non poteva funzionare,
   perche la barra stava dentro #inner-header e quel riquadro finiva dove
   finiva la barra. Il markup e stato quindi cambiato: le due barre sono ora
   figlie dirette di #container, che arriva fino al footer.

   Con quello spostamento sono cadute anche show-for-medium-up e
   show-for-small-only, che imponevano display con !important e avrebbero
   impedito a .vc-barra-mobile di essere flex. La visibilita la decidono
   queste due regole, che stanno qui in fondo perche le media query non
   aggiungono specificita e devono arrivare dopo il display: flex di base.
*/
@media only screen and (max-width: 40em) {

	.vc-barra-desktop {
		display: none;
	}
}

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

	.vc-barra-mobile {
		display: none;
	}
}

/*
   Blocco dello scorrimento a pannello aperto.

   vc-ui.js mette questa classe sulla radice e scrive lui, inline sul <body>,
   position/top/left/right/width: il valore di top dipende da quanto si era
   scorso, e solo il JavaScript puo saperlo. Qui resta la parte statica.

   overscroll-behavior: none impedisce che lo scorrimento arrivi al documento
   e, su mobile, che parta il "tira per aggiornare".
*/
html.vc-blocco-scorrimento {
	overflow: hidden;
	overscroll-behavior: none;
}

/* ===============================================================
   7. 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: tutto resta raggiungibile e
   visibile, semplicemente compare invece di scorrere.

   .top-bar-section e in elenco perche Foundation le da una transition su left
   di 300ms che sopravvive sotto i 641px.
   =============================================================== */

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

	.off-canvas-wrap .inner-wrap,
	.left-off-canvas-menu.vc-pannello,
	.off-canvas-wrap.move-right .left-off-canvas-menu.vc-pannello,
	.off-canvas-wrap.move-right .exit-off-canvas,
	.top-bar-section,
	.vc-pannello-menu > ul > li > a,
	.vc-pannello-menu ul.dropdown > li > a,
	.vc-pannello-menu .vc-fisarmonica-segno,
	.vc-barra-desktop .top-bar-section > ul > li > a::before {
		transition-duration: 0.01ms;
		transition-delay: 0s;
		animation-duration: 0.01ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
	}
}