/**
 * flytheme-app.css — strato aggiuntivo, caricato DOPO bundle.css
 * Ennestudio
 *
 * Perche' non sta negli SCSS: bundle.css lo compila picostrap dal browser, iniettando i
 * valori del customizer. Ricompilarlo da riga di comando produce un file leggermente
 * diverso, e non vale il rischio di rigenerare 380KB per poche regole. Quando ricompili
 * con il compilatore di picostrap questo file resta valido e non entra in conflitto:
 * carica dopo, stesse regole vincerebbero comunque.
 *
 * Contiene: la testata a vetro, e il poco CSS che dipende dallo scorrimento morbido.
 */

/* ═══ Testata a vetro ═══════════════════════════════════════════════════════
 *
 * In cima alla pagina la testata resta trasparente, com'era: sopra l'hero non deve
 * esserci nessuna barra. Il vetro si accende appena si scorre, quando sotto la testata
 * comincia a passare del contenuto — che e' anche l'unico momento in cui un
 * `backdrop-filter` ha qualcosa da sfocare.
 *
 * La classe la mette header.js. Senza JavaScript la testata resta trasparente e il sito
 * e' esattamente quello di prima.
 */

header#site-header nav.menu-transparent-scroll {
	/* Il tema dichiara `transition: all 1.5s` su nav: un secondo e mezzo su "all" qui
	   sarebbe una tendina, non una dissolvenza. Qui si limita alle proprieta' che
	   cambiano davvero, con un tempo da interfaccia. */
	transition:
		background-color 0.35s ease,
		-webkit-backdrop-filter 0.35s ease,
		backdrop-filter 0.35s ease,
		box-shadow 0.35s ease;
}

header#site-header.is-scrolled nav.menu-transparent-scroll {
	background-color: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Senza backdrop-filter (Firefox con la preferenza spenta, browser vecchi) il vetro
   diventerebbe una lastra semitrasparente che lascia leggere il testo sotto. Meglio
   opaco: si perde l'effetto, non la leggibilita'. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	header#site-header.is-scrolled nav.menu-transparent-scroll {
		background-color: rgba(255, 255, 255, 0.94);
	}
}

/* Chi chiede meno movimento non ha chiesto meno vetro: l'effetto resta, sparisce la
   dissolvenza. */
@media (prefers-reduced-motion: reduce) {
	header#site-header nav.menu-transparent-scroll { transition: none; }
}


/* ═══ Scorrimento morbido ═══════════════════════════════════════════════════
 *
 * Tutto dietro `body.gg-morbido`, che smooth.js aggiunge solo dopo aver creato davvero
 * lo smoother: se lo script non parte — errore, prefers-reduced-motion, editor
 * LiveCanvas — non si applica niente di qui sotto.
 *
 * Non c'e' nessuna compensazione di layout da fare, perche' la testata era gia' `fixed`
 * e fuori dal flusso anche prima. Queste due regole servono solo a evitare che il
 * browser e lo smoother provino a scorrere la stessa cosa.
 */

body.gg-morbido {
	/* Lo scorrimento lo governa lo smoother: quello nativo del browser, se resta acceso
	   su un'ancora, si somma al ritardo del contenuto. */
	scroll-behavior: auto;
}

/* L'involucro non scorre mai: e' il contenuto a muoversi dentro. Una barra qui sarebbe
   una seconda barra, inerte, accanto a quella vera. */
body.gg-morbido #smooth-wrapper { overflow: hidden; }


/* ═══ Piede del sito ════════════════════════════════════════════════════════
 *
 * Il markup e' in footer.php. Qui c'e' solo quello che Bootstrap non da' gia':
 * i titoli di colonna, la riga di chiusura e il comportamento dei collegamenti.
 */

/* I titoli delle quattro colonne. Piccoli e spaziati: devono dire "questa e' una
   colonna" senza competere con i titoli del contenuto sopra. */
.footer__titolo {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 1rem;
}

/* Il logo aveva `w-25 w-md-33`: una percentuale della colonna, che cambiava larghezza
   a ogni breakpoint e sul telefono lo riduceva a un francobollo. Una misura in rem
   fa sempre la stessa cosa. */
.footer__logo img {
	width: auto;
	max-width: 140px;
	height: auto;
}

/* `<address>` arriva in corsivo dal foglio del browser. */
.footer__sede {
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.6;
}

.footer__sede p { margin-bottom: 0; }

/* I collegamenti del piede non hanno sottolineatura: senza uno stato al passaggio non
   si distinguerebbero dal testo. */
.footer__voce {
	transition: color 0.2s ease, opacity 0.2s ease;
}

.footer__voce:hover,
.footer__voce:focus-visible {
	color: #ffffff !important;
	opacity: 1;
}

.footer__voce:not(:hover) { opacity: 0.92; }

/* La riga di chiusura. Il bordo e' bianco al 15%: su fondo nero una linea piena
   taglierebbe il piede in due. */
.footer__barra {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Sul telefono le colonne sono centrate (`text-center`), ma un contenitore in flex non
   ascolta `text-align`: senza questo i contatti resterebbero incollati a sinistra
   mentre il titolo sopra e' centrato. Era il disallineamento piu' visibile. */
@media (max-width: 991.98px) {
	.footer .footer__voce { justify-content: center; }
	.footer__logo { display: flex; justify-content: center; }
}

/* Segnaposto per le voci senza icona: tiene il testo sulla stessa colonna delle altre.
   La larghezza e' quella di un'icona a `fs-6`, piu' il `gap-2` che la separa dal testo
   ce lo mette gia' il contenitore flex. */
.footer__voce-spazio {
	display: inline-block;
	width: 1rem;
	flex: 0 0 auto;
}

/* Le icone sono glifi di un font: ognuna ha la sua larghezza, quindi il testo accanto
   partiva qualche pixel piu' in la' a ogni riga. Larghezza fissa e centrate: le voci si
   incolonnano davvero. */
.footer__voce > [class*="icon-"] {
	display: inline-flex;
	justify-content: center;
	width: 1rem;
	flex: 0 0 auto;
}


/* ═══ Sezione "Direttamente nel tuo salone" (pagina Accademia) ══════════════
 *
 * Due soli pezzi che Bootstrap non ha: il sopratitolo spaziato e il numero nel
 * cerchio. Il cerchio e' volutamente identico a quello delle icone di "Cosa
 * imparerai": la pagina deve leggersi come un sistema solo. A cambiare e' il
 * contenuto — un numero invece di un'icona — perche' nel set del tema non c'e'
 * nessuna icona che dica "veniamo da te", e `icon-cut` e `icon-shield` sono gia'
 * usate poco piu' su.
 */

.gg-sopratitolo {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Misura fissa: con la larghezza data dal contenuto, "01" e "03" darebbero
   cerchi di diametro diverso. */
.gg-numero {
	width: 3.5rem;
	height: 3.5rem;
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* I tre titoli non hanno la stessa lunghezza: "Formazione sul posto" va su due righe
   mentre gli altri stanno su una, e i paragrafi sotto partivano 29px piu' in basso.
   Riservando l'altezza di due righe le tre colonne si incolonnano a qualunque
   larghezza. La misura e' in `em`, quindi segue la dimensione del titolo. */
.gg-salone .row.g-4 h4 {
	min-height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}


/* ═══ Stacco dalla testata per le pagine di solo testo ══════════════════════
 *
 * La testata e' `position: fixed`: non occupa spazio nel flusso. Le pagine che si
 * aprono con una sezione a tutta larghezza se ne infischiano — l'hero ci passa sotto
 * apposta — ma quelle che iniziano con del testo devono riservarle il posto.
 *
 * L'altezza vera la scrive smooth.js in `--gg-testata` misurando il nav; il valore di
 * riserva copre il caso in cui quello script non giri (reduced-motion, editor).
 */
.gg-pt-header {
	padding-top: calc(var(--gg-testata, 3rem) + 4rem) !important;
}

/* Testata sopra una sezione scura: logo e collegamenti si schiariscono.
   La classe la mette header.js guardando davvero il colore dietro la testata, non
   in base alla pagina. Vale solo finche' il vetro e' spento: acceso, il fondo torna
   bianco e il logo deve tornare scuro. */
header#site-header.over-dark:not(.is-scrolled) .header-logo img {
	filter: brightness(0) invert(1);
}

header#site-header.over-dark:not(.is-scrolled) a {
	color: #ffffff;
}

/* Il passaggio fra i due stati segue quello del vetro, altrimenti il logo scatterebbe
   mentre la barra sfuma. */
header#site-header .header-logo img {
	transition: filter 0.35s ease;
}