/*
Invito a installare VisitCaprarola sul telefono — fase F6.

SCOPO
Vestire la striscia costruita da library/js/vc-pwa.js. Nessun markup del tema
viene toccato: l'elemento non esiste finche il JavaScript non decide di
crearlo, e nella stragrande maggioranza delle visite non viene mai creato.
Questo foglio quindi, quasi sempre, non produce nulla. E voluto.

ORDINE DI CARICAMENTO
Va accodato dopo vc-tokens.css (da cui prende i token) e dopo
vc-foundation-core.css, che stila il selettore nudo "button" con padding
1rem/2rem, margine inferiore 1.25rem e fondo #008CBA, e stila "button:hover"
e "button:focus" con fondo #007095. Quest'ultima regola vale (0,1,1): una
classe sola non basterebbe a batterla, quindi i due pulsanti sono sempre
scritti come .vc-pwa-invito .vc-pwa-xxx, che vale (0,2,0) e vince.
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. Le media query non accettano var(), quindi i valori sono
scritti per esteso come in vc-grid.css, vc-mobile.css e vc-nav.css.

DUE COSE CHE NON SONO SCELTE ESTETICHE

1. NON E UNA FINESTRA MODALE, e il CSS deve dirlo quanto il JavaScript: non
   c'e nessun velo, il fondo della pagina resta cliccabile, lo scorrimento
   non viene bloccato. Una striscia che si comporta da modale sarebbe una
   modale, comunque la si chiami nel markup.

2. LA STRISCIA NON CRESCE. Resta attorno agli 80-100 pixel di altezza perche
   copre l'ultimo tratto della pagina: e un invito, e un invito che occupa
   mezzo schermo e una pretesa.
*/

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

   Stesso criterio di vc-nav.css: stanno qui perche questa fase tocca un file
   solo, ogni valore poggia su un token dove il token esiste, e ogni var()
   porta con se il proprio ripiego, qui e in ogni punto d'uso.

   IL VALORE DI z-index, che e la decisione piu delicata del foglio.
   vc-nav.css dichiara tre piani: 900 le barre agganciate in alto, 1040 il
   velo del menu, 1050 il pannello. La striscia va a 1000, cioe:
     - SOPRA le barre (900), perche stanno in cima e questa sta in fondo: non
       si incontrano mai, ma se un giorno si incontrassero e la striscia a
       dover essere raggiungibile, essendo l'elemento con cui si interagisce;
     - SOTTO il velo (1040) e sotto il pannello (1050), e questo e il punto
       che conta: aprire il menu e una cosa che l'utente ha voluto, mentre
       l'invito e una cosa che gli e capitata. Quando le due si sovrappongono
       vince quella voluta. Con la striscia sopra il velo, il menu aperto
       avrebbe un rettangolo bianco acceso in fondo e un pulsante attivo
       fuori dalla trappola del focus del pannello.
   Restano 1001-1039 liberi per qualunque cosa debba stare fra i due.
   =============================================================== */

:root {
	--vc-pwa-z: 1000;

	--vc-pwa-fondo: #ffffff;

	/* Contrasti misurati sul fondo bianco della striscia:
	   #11273d 15.9:1, #5e6b76 5.3:1, #374a66 8.6:1. Il minimo richiesto e
	   4.5:1 per il testo e 3:1 per icone e contorni. */
	--vc-pwa-testo: var(--vc-colore-blu-scuro, #11273d);
	--vc-pwa-testo-2: var(--vc-colore-ardesia, #5e6b76);
	--vc-pwa-icona: var(--vc-colore-blu, #374a66);

	--vc-pwa-linea: var(--vc-colore-bordo, #cecece);

	/* Il blu del brand. Bianco su #007095 da 5.66:1; la variante scura per
	   il tocco ne da 7.7:1. Serve una tinta piu scura e non piu chiara
	   perche schiarendo si scenderebbe sotto la soglia proprio nel momento
	   in cui il dito copre il pulsante. */
	--vc-pwa-azione: var(--vc-colore-blu-acceso, #007095);
	--vc-pwa-azione-premuta: #005a77;

	/* Stesse durata e curva del menu: due movimenti diversi nello stesso
	   sito si notano, e non in bene. */
	--vc-pwa-durata: 260ms;
	--vc-pwa-curva: cubic-bezier(0.22, 1, 0.36, 1);

	/* Distanza dai bordi dello schermo. Non zero: una striscia incollata ai
	   bordi si legge come parte del browser, non come parte del sito. */
	--vc-pwa-margine: 0.75rem;
}

/* ===============================================================
   1. La striscia

   Ancorata in basso e non in alto per due motivi: in alto ci sono gia le
   barre agganciate della navigazione, e in basso il pollice ci arriva.

   position: fixed e non sticky: non deve avere un genitore di riferimento.
   L'elemento e figlio diretto del <body>, quindi fuori da .off-canvas-wrap
   e dal suo overflow-x: clip; anche se ci finisse dentro, un elemento fisso
   ha come blocco contenitore la finestra e non verrebbe ritagliato.

   La comparsa e affidata a opacity, transform e visibility, MAI a display:
   display non e animabile e soprattutto un elemento display:none rientra
   nell'ordine di lettura di colpo, senza preavviso. visibility: hidden lo
   toglie insieme dalla vista, dal Tab e dall'albero di accessibilita, che e
   esattamente cio che serve prima della comparsa.
   =============================================================== */

.vc-pwa-invito {
	box-sizing: border-box;
	position: fixed;
	left: var(--vc-pwa-margine, 0.75rem);
	right: var(--vc-pwa-margine, 0.75rem);
	bottom: var(--vc-pwa-margine, 0.75rem);

	/* Seconda dichiarazione della stessa proprieta: i browser che non
	   conoscono env() la scartano e tengono la prima. Serve sui telefoni
	   con la barra gestuale in fondo, dove senza questo margine la striscia
	   finirebbe sotto la zona non toccabile. */
	bottom: calc(var(--vc-pwa-margine, 0.75rem) + env(safe-area-inset-bottom, 0px));

	/* Sui telefoni larghi e in orizzontale una striscia larga tutto lo
	   schermo per tre parole di testo sembra un cartellone. Con left e right
	   entrambi fissati, margin auto centra. */
	max-width: 30rem;
	margin: 0 auto;

	z-index: var(--vc-pwa-z, 1000);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 0.75rem;

	padding: 0.75rem;
	background: var(--vc-pwa-fondo, #ffffff);
	color: var(--vc-pwa-testo, #11273d);
	border: 1px solid var(--vc-pwa-linea, #cecece);
	border-radius: var(--vc-raggio-2, 6px);
	box-shadow: var(--vc-ombra-3, 0 10px 30px rgba(0, 0, 0, 0.18));

	font-family: var(--vc-font-testo, 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);

	/* visibility con durata zero e ritardo pari alla durata: sparisce alla
	   fine della dissolvenza e non all'inizio, altrimenti l'uscita non si
	   vedrebbe affatto. */
	transition:
		opacity var(--vc-pwa-durata, 260ms) var(--vc-pwa-curva, ease),
		transform var(--vc-pwa-durata, 260ms) var(--vc-pwa-curva, ease),
		visibility 0s linear var(--vc-pwa-durata, 260ms);
}

.vc-pwa-invito.is-visibile {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--vc-pwa-durata, 260ms) var(--vc-pwa-curva, ease),
		transform var(--vc-pwa-durata, 260ms) var(--vc-pwa-curva, ease),
		visibility 0s linear 0s;
}

/* ===============================================================
   2. Il marchio

   E lo STESSO file che header.php dichiara come apple-touch-icon, cioe
   esattamente l'icona che l'utente si ritrovera sulla schermata Home:
   mostrarla non e decorazione, e la risposta anticipata alla domanda
   "cosa mi compare?". Se un giorno cambia l'icona dell'applicazione va
   cambiata anche qui, altrimenti l'invito promette una cosa e il sistema
   ne consegna un'altra.

   Il logo esteso, logo-visitcaprarola.png, e stato scartato: 530x97 pixel,
   una proporzione di 5,5 a 1 che in un riquadro da 44 pixel diventerebbe
   una striscia alta otto pixel con la parola illeggibile. In una striscia
   dove lo spazio orizzontale e la risorsa scarsa, un marchio disteso costa
   piu di quanto renda. Il segno del pentagono, invece, a 44 pixel si legge.

   Dichiarato come fondo e non come <img> per due motivi: e decorativo, e il
   titolo dice gia "VisitCaprarola"; e il percorso relativo si risolve
   rispetto a QUESTO foglio, cosi il JavaScript non deve sapere dove sta
   installato il tema. La richiesta parte solo quando la striscia viene
   creata, cioe quasi mai.
   =============================================================== */

.vc-pwa-invito .vc-pwa-marchio {
	flex: 0 0 auto;
	width: var(--vc-tocco-minimo, 44px);
	height: var(--vc-tocco-minimo, 44px);
	border-radius: var(--vc-raggio-2, 6px);
	border: 1px solid var(--vc-colore-bordo-tenue, #eeeeee);
	background-color: #ffffff;
	background-image: url('../images/pwa/apple-touch-180.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* ===============================================================
   3. Il testo

   min-width: 0 non e superfluo: un elemento flessibile ha per impostazione
   predefinita min-width auto, cioe non si restringe sotto la sua parola piu
   lunga. Senza, "VisitCaprarola" nel titolo terrebbe larga tutta la colonna
   e spingerebbe i pulsanti fuori dalla striscia.

   flex-basis a 10rem, non auto: e la larghezza sotto la quale conviene che
   i pulsanti vadano a capo invece di strizzare il testo a due parole per
   riga. Su uno schermo da 320 pixel succede sempre, ed e il comportamento
   giusto.
   =============================================================== */

.vc-pwa-invito .vc-pwa-corpo {
	flex: 1 1 10rem;
	min-width: 0;
}

/* Il margine inferiore va azzerato esplicitamente: vc-foundation-core.css
   da a "p" un margin-bottom di 1.25rem, che qui aprirebbe un buco sotto il
   titolo piu alto del titolo stesso. */
.vc-pwa-invito .vc-pwa-titolo {
	margin: 0;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: var(--vc-interlinea-stretta, 1.25);
	font-weight: var(--vc-peso-medio, 600);
	color: var(--vc-pwa-testo, #11273d);
}

.vc-pwa-invito .vc-pwa-riga,
.vc-pwa-invito .vc-pwa-istruzioni {
	margin: 0.25rem 0 0;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: var(--vc-interlinea, 1.5);
	color: var(--vc-pwa-testo-2, #5e6b76);
}

/* L'icona di condivisione sta sulla riga del testo, non sopra: e il segno
   che l'utente deve andare a cercare nella barra di Safari, e mostrarlo
   dentro la frase e piu chiaro che descriverlo a parole. */
.vc-pwa-invito .vc-pwa-istruzioni .vc-pwa-icona {
	display: inline-block;
	vertical-align: -0.2em;
	color: var(--vc-pwa-icona, #374a66);
}

/* ===============================================================
   4. I pulsanti

   Tutte le proprieta che Foundation impone al selettore nudo "button" vanno
   riscritte, non solo quelle che danno fastidio: lasciarne una a caso
   significa ereditare padding 1rem/2rem e un margine inferiore di 1.25rem
   dentro un contenitore alto 44 pixel.

   La misura minima e 44x44, il token --vc-tocco-minimo. E la soglia del
   criterio WCAG 2.5.5 (AAA), non del 2.5.8 (AA, 24x24): qui si sta sopra
   l'obbligo, come nel resto del lavoro fatto in F4.
   =============================================================== */

.vc-pwa-invito .vc-pwa-azioni {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;

	/* Quando i pulsanti vanno a capo restano allineati a destra, sotto il
	   testo, invece di incolonnarsi a sinistra sotto il marchio. */
	margin-left: auto;
}

.vc-pwa-invito .vc-pwa-installa,
.vc-pwa-invito .vc-pwa-chiudi {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--vc-tocco-minimo, 44px);
	margin: 0;
	border: 0;

	/* Ripetuto anche se vc-foundation-core.css lo dichiara gia sul selettore
	   nudo "button": e cio che impedisce a Safari di ridisegnare il pulsante
	   con il proprio smalto di sistema, e non voglio che dipenda dal fatto
	   che un altro foglio venga caricato. */
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--vc-raggio-2, 6px);
	font-family: inherit;
	line-height: var(--vc-interlinea-stretta, 1.25);
	cursor: pointer;
	transition: background-color var(--vc-pwa-durata, 260ms) var(--vc-pwa-curva, ease);
}

.vc-pwa-invito .vc-pwa-installa {
	padding: 0 1.125rem;
	font-size: 0.9375rem;
	font-weight: var(--vc-peso-medio, 600);
	background-color: var(--vc-pwa-azione, #007095);
	color: #ffffff;

	/* Il testo del pulsante e una parola sola in tutte e cinque le lingue
	   ("Installieren" e la piu lunga): mandarla a capo la renderebbe
	   illeggibile prima che stretta. */
	white-space: nowrap;
}

.vc-pwa-invito .vc-pwa-installa:hover,
.vc-pwa-invito .vc-pwa-installa:focus {
	background-color: var(--vc-pwa-azione-premuta, #005a77);
	color: #ffffff;
}

.vc-pwa-invito .vc-pwa-installa[disabled] {
	/* Disabilitato solo nell'istante fra il tocco e la comparsa del pannello
	   di sistema, per non chiamare due volte un evento che vale una volta
	   sola. Resta leggibile perche resta sullo schermo. */
	opacity: 0.6;
	cursor: default;
}

.vc-pwa-invito .vc-pwa-chiudi {
	width: var(--vc-tocco-minimo, 44px);
	min-width: var(--vc-tocco-minimo, 44px);
	padding: 0;
	background-color: transparent;
	color: var(--vc-pwa-icona, #374a66);
}

.vc-pwa-invito .vc-pwa-chiudi:hover,
.vc-pwa-invito .vc-pwa-chiudi:focus {
	background-color: rgba(17, 39, 61, 0.08);
	color: var(--vc-pwa-testo, #11273d);
}

.vc-pwa-invito .vc-pwa-chiudi .vc-pwa-icona {
	display: block;
	fill: currentColor;
	pointer-events: none;
}

/* Il contorno di messa a fuoco.

   Colore #11273d sul bianco della striscia: 15.9:1, molto oltre il 3:1 che
   il criterio 1.4.11 chiede. L'offset positivo e obbligatorio sul pulsante
   Installa: un contorno appoggiato sul suo stesso fondo blu non si vedrebbe,
   con l'offset invece cade sul bianco della striscia.

   :focus-visible e non :focus, come nel resto del progetto: un anello che
   compare anche al tocco del dito e rumore. */
.vc-pwa-invito .vc-pwa-installa:focus-visible,
.vc-pwa-invito .vc-pwa-chiudi:focus-visible {
	outline: 2px solid var(--vc-pwa-testo, #11273d);
	outline-offset: 2px;
}

/* ===============================================================
   5. La pagina sotto

   La striscia copre l'ultimo tratto della pagina finche resta aperta, e non
   c'e modo di evitarlo per un elemento fisso in fondo. Cio che si puo
   evitare e il caso peggiore: che il browser porti in vista un'ancora o un
   elemento appena messo a fuoco proprio li sotto, dove non si vede.

   scroll-padding-bottom risolve esattamente quello e non sposta un pixel del
   disegno, a differenza di un padding sul body, che qui sarebbe anche
   rischioso: il body viene portato a position: fixed da vc-ui.js quando si
   apre il menu.

   La classe la mette e la toglie il JavaScript sull'elemento radice.
   =============================================================== */

.vc-pwa-attivo {
	scroll-padding-bottom: 7rem;
}

/* ===============================================================
   6. Solo su schermo piccolo

   Installare un sito sulla schermata Home e un gesto da telefono. Su desktop
   Chrome mette gia la sua icona nella barra degli indirizzi e non serve
   nessun invito nostro.

   La condizione e speculare a quella del JavaScript (max-width: 40em): li
   decide se costruire la striscia, qui se continuare a mostrarla. Servono
   entrambe, perche fra la costruzione e il momento in cui si guarda lo
   schermo puo esserci una rotazione o il passaggio a schermo diviso.
   =============================================================== */

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

	.vc-pwa-invito {
		display: none;
	}
}

/* ===============================================================
   7. Movimento ridotto

   Per ultimo, come in vc-nav.css: le media query non aggiungono specificita
   e queste regole vincono solo perche arrivano dopo.

   Si azzerano le durate, non i comportamenti: la striscia compare invece di
   scorrere, e resta identica in tutto il resto. Va azzerato anche il ritardo
   su visibility, altrimenti l'elemento resterebbe invisibile per 260
   millisecondi dopo essere apparso.
   =============================================================== */

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

	.vc-pwa-invito,
	.vc-pwa-invito.is-visibile,
	.vc-pwa-invito .vc-pwa-installa,
	.vc-pwa-invito .vc-pwa-chiudi {
		transition-duration: 0.01ms;
		transition-delay: 0s;
		animation-duration: 0.01ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
	}

	.vc-pwa-invito {
		transform: none;
	}
}