/* Intestazione, menu e piede.

   Portato da prototipo2 quasi alla lettera: i commenti spiegano decisioni
   misurate — la soglia a cui il menu ripiega, l'aggancio dei pannelli che
   sborderebbero, il pixel del filo che si sottrae dalle schermate — e
   riscriverli a memoria sarebbe il modo piu' rapido di perderle.

   Sta in un foglio suo e non in blocchi.css perche' l'intestazione e il piede
   non sono blocchi: esistono su ogni pagina e non li compone nessuno.
*/

/* ── Intestazione ───────────────────────────────────────── */

/* La barra principale e' appiccicosa, quindi un salto a un'ancora
   porterebbe il titolo sotto la barra. Lo scarto lo compensa. La misura
   non e' scritta a mano due volte: la stessa proprieta' fissa l'altezza
   minima della barra e regge lo scarto, cosi' le due non divergono. */
:root {
	--elic-altezza-barra: 4.5rem;
	--elic-altezza-barra-estesa: 6.25rem;
	--elic-altezza-striscia: 2.5rem;
	--elic-marchio: 2.5rem;
	--elic-marchio-esteso: 3.75rem;

	/* Le tre misure qui sopra sono altezze minime di contenuto. Lo spazio
	   che le barre occupano davvero e' un pixel di piu' ciascuna, perche'
	   sotto ognuna corre un filo. Un pixel non conta quando serve a
	   scostare un'ancora, ma conta quando si sottrae da 100svh per fare
	   una schermata: li' l'errore non si assorbe, si vede come una striscia
	   della sezione seguente che spunta in fondo.
	   Da qui due misure a parte, che sono quelle da usare nei conti:
	   l'ingombro della barra compatta (quella che si ha dopo aver scorso) e
	   quello dell'intestazione intera a riposo (striscia piu' barra estesa,
	   cioe' cio' che sta sopra la hero allo zero della pagina). */
	--elic-ingombro-barra: calc(var(--elic-altezza-barra) + 1px);
	--elic-ingombro-intestazione:
		calc(var(--elic-altezza-striscia) + var(--elic-altezza-barra-estesa) + 2px);
}

/* Lo scarto usa l'altezza compatta e non quella estesa: si arriva a
   un'ancora scorrendo, e chi ha scorso ha gia' la barra ristretta. */
[id] {
	scroll-margin-top: calc(var(--elic-altezza-barra) + var(--elic-sp-2));
}

/* Alta un pixel e fuori dal flusso: non sposta niente, serve solo a farsi
   guardare dall'IntersectionObserver. */
.elic-sentinella {
	position: absolute;
	top: 0;
	width: 1px;
	height: 1px;
}

/* Appiccicosa e' l'intera intestazione, ma agganciata sopra il bordo della
   finestra di quanto misura la striscia: scorrendo, la striscia esce dal
   campo e resta in vista la sola barra con marchio, menu e CTA.

   Qui l'intestazione e' chiara come la pagina: nella variante verde era una
   fascia scura che separava se stessa dal contenuto per contrasto, e con la
   hero anch'essa scura le due si fondevano in un unico blocco. Su bianco il
   confine lo fa un filo da un pixel, e la pagina comincia dal titolo. */
.elic-header {
	position: sticky;
	top: calc(var(--elic-altezza-striscia) * -1);
	z-index: 50;
	background: var(--elic-bianco);
	/* Qui non c'e' nessun ritaglio, ed e' una scelta pagata cara una volta.

	   I pannelli del megamenu sono larghi 40rem e stanno in posizione
	   assoluta: da chiusi non si vedono, ma restano impaginati, e in una
	   fascia stretta di larghezze gli ultimi sporgono a destra. La pagina
	   acquistava cosi' una barra di scorrimento orizzontale che non serviva a
	   niente. La prima cura era "overflow-x: clip" con "overflow-y: visible"
	   — clip e' l'unico valore che ammette "visible" sull'altro asse, quindi
	   in teoria taglia di lato e lascia uscire i pannelli dal basso.

	   In teoria. Safari, con quella coppia, dipinge il pannello finche' la
	   transizione del transform lo tiene su un layer composito e lo ritaglia
	   appena il layer rientra nel padre: il menu si apriva e spariva a
	   transizione finita, restando pero' cliccabile — perche' il ritaglio
	   colpiva il disegno e non il bersaglio del puntatore.

	   Il rimedio non e' un altro valore di overflow: e' non avere niente da
	   ritagliare. Ci pensa menu.js, che aggancia a destra ogni pannello che
	   sborderebbe, da chiuso e non solo all'apertura. */
}

/* Bianca come la barra sotto, non avorio: le due fanno un'intestazione sola,
   e a dividerle basta il filo. */
.elic-servizi {
	background: var(--elic-bianco);
	border-bottom: 1px solid var(--elic-bordo-chiaro);
	font-size: var(--elic-dim-occhiello);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elic-testo-tenue);
}

/* L'altezza della striscia non e' lasciata al contenuto: e' la stessa misura
   che l'aggancio negativo qui sopra deve annullare, e due numeri che devono
   coincidere non possono stare in due posti. */
.elic-servizi__interno {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--elic-sp-3);
	min-height: var(--elic-altezza-striscia);
}

.elic-servizi__azioni {
	display: flex;
	align-items: center;
	gap: var(--elic-sp-3);
	margin: 0;
}

.elic-servizi a {
	color: inherit;
	text-decoration: none;
}

.elic-servizi a:hover {
	color: var(--elic-testo);
}

.elic-header__barra {
	background: var(--elic-bianco);
	border-bottom: 1px solid var(--elic-bordo-chiaro);
}

/* A inizio pagina la barra sta alta e il marchio si vede per quello che e';
   appena si scorre entrambi si ritirano. Lo stato di riposo e' quello alto:
   se il JS non parte, resta la versione generosa invece di una barra
   perennemente compressa. */
.elic-header__interno {
	display: flex;
	align-items: center;
	/* Lo stacco fra marchio e navigazione e' di un gradino piu' largo del
	   resto della barra, e deve esserlo: separa due cose diverse, non due voci
	   dello stesso elenco. Per un periodo era sceso alla misura normale per
	   guadagnare sedici pixel e tenere la navigazione completa disponibile su
	   finestre piu' strette; il guadagno non valeva lo schiacciamento, e la
	   misura larga e' tornata.

	   Il prezzo si paga altrove ed e' bene saperlo: ogni pixel qui alza la
	   larghezza minima della barra su una riga, cioe' la soglia oltre cui il
	   menu ripiega sulla versione compatta. Quella soglia sta in fondo al
	   foglio, in @media, ed e' misurata a mano: se si tocca questo distacco,
	   o si aggiunge una voce al menu, va rimisurata. */
	gap: var(--elic-sp-4);
	min-height: var(--elic-altezza-barra-estesa);
	transition: min-height var(--elic-transizione);
}

.elic-header[data-compatta] .elic-header__interno {
	min-height: var(--elic-altezza-barra);
}

/* Il piede ha fondo scuro ma non porta la classe di sezione che il tema
   riconosce, quindi erediterebbe il contorno di focus scuro: invisibile.
   Stesso errore che si commette pensando allo sfondo dell'elemento invece
   che a quello su cui l'anello viene disegnato.

   L'intestazione, al contrario della variante verde, adesso e' chiara: il
   contorno predefinito e' gia' quello giusto e qui non compare piu'. */
.elic-footer :focus-visible {
	outline: var(--elic-contorno-focus-su-scuro);
}

.elic-logo {
	display: flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

/* Il marchio arriva in due file, uno per fondo. Quello originale ha la
   scritta in bianco e serve al buio; su carta bianca meta' del logotipo
   sparirebbe, quindi qui va la versione con la scritta in inchiostro —
   stesso disegno, stesso oro, cambiano solo i pixel bianchi. L'oro non si
   tocca in nessuna delle due: e' il marchio. */
.elic-logo__immagine {
	display: block;
	height: var(--elic-marchio-esteso);
	width: auto;
	transition: height var(--elic-transizione);
}

.elic-header[data-compatta] .elic-logo__immagine {
	height: var(--elic-marchio);
}

/* Il menu occupa lo spazio fra il marchio e il bordo destro: le voci a
   sinistra, la coda con la CTA spinta a fondo corsa. */
.elic-menu {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--elic-sp-3);
}

.elic-nav {
	display: flex;
	align-items: center;
	gap: var(--elic-sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Le voci padre sono bottoni, non link: non portano da nessuna parte e
   non devono fingere di farlo. Perche' stiano sulla stessa riga delle
   voci semplici serve azzerare l'aspetto nativo del bottone. */
.elic-nav__padre,
.elic-nav__voce {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--elic-dim-piccolo);
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.2;
	color: var(--elic-testo);
	text-decoration: none;
	cursor: pointer;
}

/* Il filo d'oro che compare sotto la voce e' l'unico segnale di stato della
   navigazione: nella variante verde lo faceva il colore del testo, che
   passava da tenue a pieno. Con l'inchiostro pieno gia' allo stato di
   riposo — su bianco non c'e' motivo di tenerlo smorzato — quel salto non
   era piu' disponibile, e il segnale si e' spostato sotto la riga di base.
   Cresce da sinistra: e' un sottolineato che si scrive, non che si accende. */
.elic-nav__padre::before,
.elic-nav__voce::before {
	content: "";
	position: absolute;
	inset: auto 0 -0.55rem 0;
	height: 1px;
	background: var(--elic-oro-scuro);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--elic-transizione);
}

.elic-nav__padre:hover::before,
.elic-nav__voce:hover::before,
.elic-nav__gruppo[data-aperto] .elic-nav__padre::before {
	transform: scaleX(1);
}

.elic-nav__padre::after {
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	border-right: 1.5px solid currentcolor;
	border-bottom: 1.5px solid currentcolor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform var(--elic-transizione);
	opacity: 0.55;
}

.elic-nav__gruppo[data-aperto] .elic-nav__padre::after {
	transform: translateY(0.06rem) rotate(-135deg);
	opacity: 1;
}

.elic-nav__gruppo {
	position: relative;
}

/* ── Pannelli del megamenu ──────────────────────────────── */

.elic-pannello {
	position: absolute;
	top: calc(100% + var(--elic-sp-2) + 0.55rem);
	left: calc(var(--elic-sp-4) * -1);
	z-index: 60;
	width: min(40rem, calc(100vw - 2rem));
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13rem;
	gap: var(--elic-sp-4);
	padding: var(--elic-sp-4);
	background: var(--elic-bianco);
	border: 1px solid var(--elic-bordo-chiaro);
	border-radius: var(--elic-raggio);
	/* Un'ombra sola, lunga e quasi trasparente: serve a staccare il pannello
	   dalla pagina, non a farlo galleggiare. Sulla carta bianca un'ombra
	   marcata e' la cosa che invecchia per prima. */
	box-shadow: 0 24px 60px rgba(11, 11, 11, 0.10);
	opacity: 0;
	visibility: hidden;
	/* Da chiuso il pannello non intercetta il puntatore, e non e' una
	   ridondanza rispetto a visibility: visibility e' discreta, quindi
	   transita a hidden solo alla fine dei 200ms e nel frattempo il pannello
	   che si sta chiudendo e' ancora bersaglio del mouse. Nel frattempo,
	   pero', si e' anche gia' sollevato di 0,4rem — e con lui il ponte, che
	   finisce sopra il bordo basso delle voci vicine. Il browser rifa' il
	   conto di cosa sta sotto il puntatore anche se il puntatore e' fermo:
	   ne usciva una coppia di eventi uscita/entrata a mouse fermo, che con i
	   ritardi di apertura e chiusura faceva aprire due voci vicine a turno,
	   all'infinito. */
	pointer-events: none;
	transform: translateY(-0.4rem);
	transition: opacity var(--elic-transizione),
	            transform var(--elic-transizione),
	            visibility var(--elic-transizione);
}

/* Fra la voce e il pannello c'e' uno stacco vuoto: senza questo ponte il
   puntatore lo attraversa e il gruppo si considera abbandonato. */
.elic-pannello::before {
	content: "";
	position: absolute;
	inset: calc(var(--elic-sp-2) * -1 - 0.55rem) 0 auto 0;
	height: calc(var(--elic-sp-2) + 0.55rem);
}

/* Sull'ultimo gruppo il pannello uscirebbe dalla finestra: il JS misura e
   aggiunge questo aggancio a destra. */
.elic-pannello--destra {
	left: auto;
	right: calc(var(--elic-sp-4) * -1);
}

.elic-nav__gruppo[data-aperto] .elic-pannello {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.elic-pannello__voci {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elic-pannello__voci li + li {
	border-top: 1px solid var(--elic-bordo-chiaro);
}

.elic-pannello__voci a {
	display: grid;
	gap: 0.15rem;
	padding: var(--elic-sp-2) var(--elic-sp-1) var(--elic-sp-2) 0;
	color: var(--elic-testo);
	text-decoration: none;
}

.elic-pannello__voci span {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	font-weight: var(--elic-peso-titolo);
	letter-spacing: -0.02em;
	line-height: 1.2;
	transition: color var(--elic-transizione);
}

.elic-pannello__voci small {
	font-size: var(--elic-dim-piccolo);
	color: var(--elic-testo-tenue);
}

.elic-pannello__voci a:hover span {
	color: var(--elic-oro-scuro);
}

/* L'immagine e' decorativa e non cliccabile: riempie la colonna da bordo a
   bordo, annullando l'imbottitura del pannello sui tre lati che tocca. Da
   qui i margini negativi, che valgono l'imbottitura esatta. Le voci restano
   l'unica cosa cliccabile del pannello. */
.elic-pannello__figura {
	margin: calc(var(--elic-sp-4) * -1) calc(var(--elic-sp-4) * -1) calc(var(--elic-sp-4) * -1) 0;
	overflow: hidden;
}

.elic-pannello__figura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il pulsante "indietro" serve solo al secondo livello del menu mobile. */
.elic-pannello__indietro {
	display: none;
}

.elic-menu__coda {
	display: flex;
	align-items: center;
	gap: var(--elic-sp-2);
}

/* La CTA dell'intestazione porta l'etichetta piu' lunga della pagina e sta
   nel punto piu' affollato: si stringe sui fianchi. E' l'unica eccezione
   alle misure del bottone, e vale solo qui dentro. */
.elic-menu__coda .elic-bottone {
	padding-inline: 1.25rem;
}

.elic-lingue {
	display: flex;
	gap: 0.65rem;
	margin: 0;
}

.elic-lingue [aria-current] {
	color: var(--elic-testo);
	font-weight: 700;
}

/* Il menu mobile ha due livelli, e due livelli non stanno in uno stato
   booleano: il trucco della casella di spunta e' stato ritirato. Lo stato
   vive in data-aperto e data-livello, che li scrive il JS. */

.elic-menu__bottone {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	margin-inline-start: auto;
	border: 1px solid var(--elic-bordo-chiaro);
	border-radius: var(--elic-raggio);
	background: none;
	cursor: pointer;
}

.elic-menu__tratti,
.elic-menu__tratti::before,
.elic-menu__tratti::after {
	display: block;
	width: 1.15rem;
	height: 1.5px;
	background: var(--elic-testo);
	transition: transform var(--elic-transizione);
}

.elic-menu__tratti::before,
.elic-menu__tratti::after {
	content: "";
	position: relative;
}

.elic-menu__tratti::before { top: -6px; }
.elic-menu__tratti::after { top: 4.5px; }

/* A menu aperto la pagina sotto non deve scorrere. */
.elic-corpo-bloccato {
	overflow: hidden;
}

/* Sotto questa soglia la navigazione completa non sta su una riga: misurata
   voce per voce, la barra ha bisogno di 1240px, e sotto ripiegava su due o
   tre righe — a 1025px "Domande e Risposte" ne occupava tre da sola. La
   soglia era 64rem (1024px), ereditata dalla variante verde, che aveva corpi
   e distacchi piu' piccoli. Qui e' 78rem (1248px), cioe' appena sopra la
   misura vera, con otto pixel di margine.

   Il valore e' ripetuto in menu.js: e' l'unico numero che i due file si
   scambiano a voce, e se cambia qui va cambiato anche li'. */
@media (max-width: 78rem) {
	.elic-menu__bottone { display: grid; }

	/* Il menu diventa un pannello a tutto schermo agganciato sotto la barra.
	   Lo scarto dall'alto lo misura il JS all'apertura: la barra e'
	   appiccicosa, quindi la sua distanza dal bordo dipende da quanto si e'
	   gia' scorso. */
	.elic-menu {
		position: fixed;
		top: var(--elic-scarto-menu, var(--elic-altezza-barra));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 45;
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		overflow: hidden;
		padding: 0 var(--elic-margine-laterale) var(--elic-sp-3);
		background: var(--elic-bianco);
	}

	.elic-menu[data-aperto] {
		display: flex;
	}

	.elic-nav {
		display: grid;
		align-content: start;
		gap: 0;
	}

	.elic-nav > li + li {
		border-top: 1px solid var(--elic-bordo-chiaro);
	}

	.elic-nav__padre,
	.elic-nav__voce {
		width: 100%;
		justify-content: space-between;
		padding-block: var(--elic-sp-3);
		font-family: var(--elic-font-display);
		font-size: var(--elic-dim-grande);
		font-weight: var(--elic-peso-titolo);
		letter-spacing: -0.025em;
		transition: transform var(--elic-transizione),
		            opacity var(--elic-transizione),
		            visibility var(--elic-transizione);
	}

	/* Il filo d'oro e' un segnale da puntatore: su un pannello a tutto
	   schermo, dove ogni voce e' una riga separata da un filo suo, non
	   aggiunge niente e si sovrappone a quelli. */
	.elic-nav__padre::before,
	.elic-nav__voce::before {
		display: none;
	}

	/* Il primo livello non si limita a scomparire: scivola a sinistra, cosi'
	   il verso del movimento dice da che parte si sta andando.

	   A muoversi sono le voci, non la lista che le contiene, ed e' il punto:
	   dentro quella lista ci sono anche i pannelli del secondo livello.
	   Nascondendo la lista si nascondeva pure il pannello che doveva
	   comparire, e per due motivi indipendenti. Un antenato con opacity: 0
	   spegne tutto il sottoalbero e il figlio non puo' tirarsi fuori. Un
	   antenato trasformato diventa il blocco contenitore di cio' che sta in
	   posizione assoluta, quindi l'inset: 0 del pannello smetteva di misurarsi
	   sul menu e si portava dietro anche la traslazione. */
	.elic-menu[data-livello="1"] .elic-nav__padre,
	.elic-menu[data-livello="1"] .elic-nav__voce {
		transform: translateX(-20%);
		opacity: 0;
		/* Non solo trasparenti: sotto il pannello resterebbero raggiungibili
		   con il Tab, e il focus finirebbe su comandi che non si vedono. Qui
		   visibility si puo' usare senza rischi, perche' queste sono le voci,
		   non la lista che contiene i pannelli. */
		visibility: hidden;
	}

	.elic-menu[data-livello="1"] .elic-menu__coda {
		opacity: 0;
		visibility: hidden;
	}

	.elic-menu__coda {
		margin-top: auto;
		padding-top: var(--elic-sp-3);
	}

	.elic-menu__coda .elic-bottone {
		flex: 1;
		justify-content: center;
	}

	.elic-nav__gruppo {
		position: static;
	}

	.elic-pannello {
		position: absolute;
		inset: 0;
		display: block;
		width: auto;
		padding: 0 var(--elic-margine-laterale);
		overflow-y: auto;
		background: var(--elic-bianco);
		border: 0;
		box-shadow: none;
		opacity: 1;
		transform: translateX(100%);
	}

	/* L'aggancio a destra serve solo a non far uscire il pannello dalla
	   finestra sul desktop: qui il pannello e' a tutta larghezza. */
	.elic-pannello--destra {
		left: 0;
		right: 0;
	}

	.elic-pannello::before {
		display: none;
	}

	.elic-nav__gruppo[data-aperto] .elic-pannello {
		visibility: visible;
		transform: none;
	}

	.elic-pannello__indietro {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		width: 100%;
		padding: var(--elic-sp-3) 0;
		border: 0;
		border-bottom: 1px solid var(--elic-bordo-chiaro);
		background: none;
		font-family: inherit;
		font-size: var(--elic-dim-occhiello);
		font-weight: var(--elic-peso-etichetta);
		letter-spacing: var(--elic-spaziatura-occhiello);
		text-transform: uppercase;
		color: var(--elic-oro-scuro);
		cursor: pointer;
	}

	.elic-pannello__indietro::before {
		content: "←";
	}

	.elic-pannello__voci a {
		padding-block: var(--elic-sp-2);
	}

	/* Nascosta e non caricata: su rete mobile la foto del menu non vale il
	   traffico, e con loading="lazy" un elemento non reso non si scarica. */
	.elic-pannello__figura {
		display: none;
	}
}

/* Su schermo stretto la barra alta si mangia mezza schermata prima ancora del
   contenuto: si ridimensionano le misure, non le regole. Toccare qui le
   custom property invece delle altezze evita di dover ripetere anche la
   variante compatta, che ha specificita' maggiore e vincerebbe comunque. */
@media (max-width: 48rem) {
	:root {
		--elic-altezza-barra-estesa: 5.25rem;
		--elic-marchio-esteso: 3.25rem;
	}
}

@media (max-width: 30rem) {
	/* La striscia di servizio non nasconde piu' le lingue. Su un sito in tre
	   lingue erano l'unico modo per cambiarla, e sparivano proprio dove non
	   c'e' un menu di riserva in cui cercarle: a 320px la riga misura circa
	   150px su 288 disponibili, quindi non c'era nemmeno da guadagnare. */
	:root {
		--elic-altezza-barra-estesa: 4.75rem;
		--elic-marchio-esteso: 2.75rem;
		--elic-marchio: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elic-nav,
	.elic-pannello,
	.elic-nav__padre::after,
	.elic-nav__padre::before,
	.elic-nav__voce::before,
	.elic-header__interno,
	.elic-logo__immagine {
		transition-duration: 1ms;
	}
}


/* ── Piede ──────────────────────────────────────────────── */

.elic-footer {
	background: var(--elic-bruno);
	color: var(--elic-su-scuro);
	padding-block: var(--elic-sp-5) var(--elic-sp-3);
}

.elic-footer :focus-visible {
	outline: var(--elic-contorno-focus-su-scuro);
}

.elic-footer__griglia {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--elic-sp-4);
}

.elic-footer h2 {
	font-family: var(--elic-font-testo);
	font-size: var(--elic-dim-occhiello);
	font-weight: var(--elic-peso-etichetta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--elic-oro);
	margin-bottom: var(--elic-sp-3);
	padding-bottom: var(--elic-sp-2);
	border-bottom: 1px solid var(--elic-bordo-scuro);
}

.elic-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: var(--elic-dim-piccolo);
}

.elic-footer a {
	color: var(--elic-su-scuro-tenue);
	text-decoration: none;
	transition: color var(--elic-transizione);
}

.elic-footer a:hover {
	color: var(--elic-su-scuro);
}

/* La riga di chiusura porta un filo sopra di se', e il filo deve attraversare
   tutta la larghezza del piede: senza togliere il limite di 68 caratteri che
   base.css mette a ogni paragrafo, il tratto si fermerebbe dove finisce la
   misura del testo — un quarto della pagina — e si leggerebbe come un
   divisorio storto invece che come il fondo del piede. */
.elic-footer__nota {
	max-width: none;
	margin-top: var(--elic-sp-5);
	padding-top: var(--elic-sp-2);
	border-top: 1px solid var(--elic-bordo-scuro);
	font-size: var(--elic-dim-occhiello);
	letter-spacing: 0.06em;
	color: var(--elic-su-scuro-tenue);
}


/* ══ Sezioni alte una schermata ════════════════════════════════════════

   Portato da prototipo2. Le altezze sono misurate sulle sezioni vere e non
   sull'idea di come dovrebbero essere:

   1. SOLO DOVE C'E' POSTO. Misurato sul riferimento: a 1440x900 dieci
      sezioni su undici stanno in una finestra; a 390x844 ne sbordano
      cinque, e "Come si diventa elicicoltore" misura 2,2 finestre. Su un
      telefono questa pagina non e' fatta di schermate ma di testo, e
      imporgliele significherebbe tagliare i contenuti.

      Da qui la doppia soglia: 78rem di larghezza e 48rem di altezza. La
      larghezza e' la stessa a cui compare la navigazione completa, e non e'
      una coincidenza: sotto quella misura le sezioni a due colonne
      stringono la colonna del testo, il testo si allunga e alcune sezioni
      sforano la finestra di qualche decina di pixel.

   2. NON TUTTE LE SEZIONI. Nel riferimento due non ce la fanno nemmeno sul
      desktop e non la portano: il percorso in sei passi e le forniture.
      Costringerle vorrebbe dire stringere il contenuto per far tornare il
      meccanismo, che e' il verso sbagliato. Nel tema la scelta e' un campo
      del blocco, e l'istruzione dice esattamente questo.

   3. MIN-HEIGHT, MAI HEIGHT. Se un testo cresce, o se qualcuno apre tutte
      le domande, la sezione si allunga invece di tagliare. Una schermata e'
      un pavimento, non un soffitto — ed e' la ragione per cui lasciare la
      scelta al redattore non e' pericoloso.

   Nel prototipo qui c'era anche lo scatto dello scorrimento, tolto perche'
   dava fastidio: la pagina prendeva il controllo del punto di vista e non
   c'era modo di disattivarlo. Le altezze restano, perche' quelle sono
   impaginazione e non movimento. */

@media (min-width: 78.0625rem) and (min-height: 48rem) {

	/* La misura si toglie dall'altezza perche' l'intestazione appiccicosa
	   copre la finestra dall'alto: senza, la sezione sborderebbe di quel
	   tanto. Vale l'ingombro della barra compatta e non di quella estesa,
	   per lo stesso motivo delle ancore: a una sezione ci si arriva
	   scorrendo, e chi ha scorso ha gia' la barra ristretta. */
	.elic-schermo {
		min-height: calc(100svh - var(--elic-ingombro-barra));
	}

	/* L'apertura e' il caso a parte. A pagina ferma sopra di lei c'e'
	   l'intestazione intera, striscia compresa: una hero da 100svh farebbe
	   una prima schermata alta 100svh piu' centoquaranta pixel, e si
	   aprirebbe gia' fuori squadra, con il fondo sotto la piega. Si toglie
	   quindi l'ingombro vero dell'intestazione a riposo.

	   L'apertura non prende piu' tutta la prima schermata: si ferma all'88%,
	   cosi' sotto resta una striscia della sezione seguente. Una fascia che
	   finisce esattamente sulla piega si legge come tutta la pagina, e chi
	   guarda non ha motivo di scorrere.

	   Il tetto in rem sta a 42: e' l'altezza oltre la quale il contenuto
	   smette di crescere e comincia soltanto a distanziarsi. */
	.elic-hero--campagna {
		min-height: min(calc(88svh - var(--elic-ingombro-intestazione)), 42rem);
	}
}

/* I dati societari vanno a capo sotto il nome del sito. */
.elic-footer__societa {
	display: block;
	margin-top: 0.35rem;
}