/*
 * Mentora — fondamenta.
 *
 * Si carica dopo tokens.css e prima di textures.css e components.css.
 * Qui stanno: i token che tokens.css non copre (forma e movimento),
 * il focus, lo skip link e il comportamento a movimento ridotto.
 */

/* ------------------------------------------------------------------ *
 * Token di forma e movimento (skill mentora-skeuo-ui §2 e §8).
 * I colori arrivano da tokens.css, che si carica prima di questo file.
 * ------------------------------------------------------------------ */
:root {
	/*
	 * Alias dei font.
	 *
	 * I font veri li registra theme.json, che genera le --wp--preset--*.
	 * Il brand kit però parla in --m-font-*: questi alias tengono insieme
	 * i due vocabolari senza duplicare nulla.
	 */
	--m-font-display: var(--wp--preset--font-family--display);
	--m-font-body: var(--wp--preset--font-family--body);
	--m-font-mono: var(--wp--preset--font-family--mono);

	/* Forma */
	--m-r-sm: 11px;
	--m-r-md: 14px;
	--m-r-lg: 20px;
	--m-r-xl: 28px;

	/* Luce dall'alto: highlight sopra, ombra sotto. Sempre così. */
	--m-hl: inset 0 1px 0 rgba(255, 255, 255, .9);
	--m-drop: 0 18px 30px rgba(70, 55, 35, .16), 0 3px 5px rgba(70, 55, 35, .14);
	/*
	 * La stessa ombra, per quando cade su una superficie SCURA.
	 * `--m-drop` e' bruna — rgba(70,55,35) — piu' chiara del metallo del
	 * footer, che e' (46,38,32): composta li' sopra lo schiarisce invece
	 * di scurirlo, cioe' non fa l'ombra. Stessa geometria, colore nero e opacita' bassa: sul buio basta
	 * poco perche' si legga.
	 */
	--m-drop-on-dark: 0 18px 30px rgba(0, 0, 0, .18), 0 3px 5px rgba(0, 0, 0, .14);
	--m-well: inset 0 3px 6px rgba(0, 0, 0, .18), 0 1px 0 #fff;

	/* Movimento */
	--m-speed: 1;
	--m-dur-fast: calc(140ms * var(--m-speed));
	--m-dur-base: calc(260ms * var(--m-speed));
	--m-dur-slow: calc(440ms * var(--m-speed));
	--m-ease-soft: cubic-bezier(.2, .8, .2, 1);
	--m-ease-spring: cubic-bezier(.34, 1.5, .64, 1);
	/*
	 * Era cubic-bezier(.16, 1, .3, 1): una partenza violenta, che
	 * faceva meta' strada nei primi 44ms e l'87% entro 132, per poi
	 * strisciare per altri 300. A occhio non era una scivolata, era
	 * uno scatto seguito da niente. Misurato: i fotogrammi erano
	 * regolari a 17ms, quindi non mancava potenza — era la curva.
	 */
	--m-ease-drawer: cubic-bezier(.4, 0, .2, 1);
	--m-ease-exit: cubic-bezier(.5, 0, .75, 0);
	--m-lift: 10px;

	/*
	 * Il fluido: due colori della palette e quanto si vede. Li legge
	 * `mentora-fluido.js` da qui invece di averli dentro, cosi' il
	 * giorno che la palette cambia cambia anche lo sfondo.
	 *
	 * L'opacita' e' bassa di proposito: sotto ci passa il testo, e il
	 * limite non lo decide il gusto ma il contrasto.
	 *
	 * **Misurato sul nostro fondo, non copiato dal loro.** Il testo
	 * secondario `--m-ink-2` sopra la carta velata di rame:
	 *
	 *   0,20 → 5,62:1   0,26 → 5,14:1   0,32 → 4,75:1   0,40 → 4,23:1
	 *
	 * Il 40% di KCC **da noi sarebbe sotto il minimo**: sul loro fondo
	 * reggeva, sul nostro no. Il tetto vero e' intorno a 0,32, e 0,22
	 * lascia margine restando «molto leggero», che e' quello che e'
	 * stato chiesto. Il rame e' il caso peggiore: l'ottone e' piu'
	 * chiaro e resta sopra il 6.
	 */
	--m-fluido-colore-1: var(--m-accent);
	--m-fluido-colore-2: var(--m-brass-2);
	--m-fluido-opacita: 0.22;
}

/*
 * Movimento ridotto. Gli stati cambiano lo stesso, ma all'istante:
 * non si toglie l'informazione, si toglie il viaggio.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--m-speed: .001;
		--m-lift: 0px;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * Fondamenta
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * I salti d'ancora scorrono invece di scattare: la freccia dell'hero,
 * la navigazione delle sezioni nelle schede prodotto, le FAQ, i
 * pulsanti che portano alla newsletter.
 *
 * Sta su `html` e non sul link perche' e' la proprieta' di chi scorre,
 * non di chi chiede di scorrere: non si puo' rendere fluido un solo
 * collegamento col CSS.
 *
 * Chi ha chiesto meno movimento torna allo scatto secco: lo annulla il
 * blocco `prefers-reduced-motion` qui sopra, che lo rimette ad `auto`.
 */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--m-ground);
	color: var(--m-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ *
 * Il footer si appoggia al fondo della finestra
 *
 * Su una pagina piu' corta della finestra — una «In arrivo», un 404 —
 * il contenuto finiva prima del fondo e sotto il footer restava una
 * fascia di sfondo vuoto: misurati 58px su una finestra da 900.
 *
 * `100svh` e non `100vh`: su telefono `vh` vale la finestra con la
 * barra degli indirizzi gia' ritirata, quindi la pagina diventa piu'
 * alta dello schermo e compare uno scorrimento che non porta da
 * nessuna parte. La riga `100vh` resta sopra come riserva.
 * ------------------------------------------------------------------ */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/*
 * La larghezza va dichiarata, e non basta `align-items: stretch` (che
 * e' comunque il valore predefinito): la specifica dice che un elemento
 * flex con un margine automatico sull'asse trasversale NON si distende,
 * e viene invece dimensionato sul proprio contenuto.
 *
 * `main` ha `margin-inline: auto`, perche' sugli schermi larghi si
 * centra entro i 1200px. Sotto flex quel margine gli toglieva la
 * distensione e lo rendeva largo quanto il suo contenuto minimo:
 * misurati 341px su una finestra da 320, con scroll orizzontale sulla
 * pagina 404, dove il campo di ricerca non si lascia stringere.
 *
 * Con una larghezza definita il margine automatico torna a fare solo
 * il suo lavoro: centrare entro `max-width`.
 */
.wp-site-blocks > * {
	width: 100%;
}

/*
 * E' `main` a crescere: header e footer tengono la loro altezza, e lo
 * spazio che avanza va al contenuto. `flex-basis: auto` perche' la
 * pagina deve restare alta quanto il suo contenuto quando lo supera.
 */
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* ------------------------------------------------------------------ *
 * Il footer si scopre: il contenuto gli scorre sopra
 *
 * Il footer non scorre con la pagina. Resta agganciato al fondo della
 * finestra, DIETRO al contenuto, e il contenuto gli passa sopra come
 * un foglio appoggiato: arrivati in fondo il foglio finisce e il
 * footer resta scoperto.
 *
 * Servono tre cose insieme, e se ne manca una l'effetto non si vede:
 * il footer appiccicato in basso, il contenuto davvero OPACO — se
 * fosse trasparente il footer si leggerebbe sotto fin dall'inizio — e
 * il contenuto sopra di lui nell'ordine di impilamento.
 * ------------------------------------------------------------------ */
.wp-site-blocks > footer {
	position: sticky;
	bottom: 0;
	z-index: 0;
	/*
	 * Niente stacco. I 56px che c'erano prima lascerebbero una striscia
	 * di sfondo fra il foglio e il footer, e il foglio non sembrerebbe
	 * piu' appoggiato: quello spazio ora sta dentro al foglio.
	 */
	margin-block-start: 0;
}

/*
 * L'header sta sopra a tutti e due. Senza, il footer agganciato —
 * che e' posizionato — gli finisce davanti, perche' fra elementi
 * posizionati vince chi viene dopo nel documento.
 */
.wp-site-blocks > header {
	position: relative;
	z-index: 2;
}

/*
 * Lo scoprimento ha senso solo se il footer ci sta, nella finestra.
 * Sul telefono le colonne vanno in pila e il footer arriva a 847px su
 * una finestra da 812: agganciato in basso partirebbe da sopra il
 * bordo superiore e coprirebbe tutta la pagina, header compreso — ed
 * e' esattamente quello che faceva. Stessa cosa su uno schermo basso,
 * per esempio un telefono coricato.
 *
 * Li' il footer torna a scorrere con la pagina, che e' il
 * comportamento normale.
 */
@media (max-width: 600px), (max-height: 600px) {

	.wp-site-blocks > footer {
		position: static;
	}
}

.wp-site-blocks > main {
	position: relative;
	z-index: 1;
	/*
	 * Lo sfondo non e' qui: e' la carta, dichiarata in materials.css
	 * insieme a quella del fondo pagina. Un colore pieno messo qui la
	 * coprirebbe, ed e' esattamente l'errore che ha fatto sparire la
	 * trama la prima volta.
	 */
	/*
	 * L'ombra del bordo del foglio. Stessa geometria dei rilievi del
	 * tema — cade solo verso il basso, luce dall'alto — ma nella
	 * versione per fondo scuro: sotto c'e' il metallo del footer, e
	 * l'ombra bruna li' sopra lo schiarirebbe invece di scurirlo.
	 */
	box-shadow: var(--m-drop-on-dark);
	/*
	 * Il foglio copre tutta la larghezza anche dove `main` porta
	 * `.m-section` (404, pagine, ricerca, articoli): senza, il footer
	 * spunterebbe ai lati. Il contenuto non si allarga, perche' a
	 * stringerlo e' il layout «constrained» di WordPress — 720px — e
	 * non questo max-width.
	 */
	max-width: none;
}

/* Le immagini non sfondano mai il contenitore. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Le etichette tecniche sono sempre mono, maiuscole, spaziate. */
.m-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--m-ink-3);
}

/* ------------------------------------------------------------------ *
 * Focus
 *
 * Visibile sempre, su qualunque materiale: due anelli, uno scuro e uno
 * chiaro, così si stacca sia dall'alluminio sia dalla pelle.
 * ------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--m-accent);
	outline-offset: 2px;
	border-radius: var(--m-r-sm);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .85);
}

/* Il focus del mouse no: solo quello da tastiera. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------ *
 * Testo solo per i lettori di schermo.
 *
 * Lo definisce anche WordPress, ma dipenderne è fragile: se quella
 * regola cambiasse o non venisse caricata, la parola «Menu» comparirebbe
 * di colpo accanto al pulsante a tratti. Sei righe per non pensarci più.
 * ------------------------------------------------------------------ */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Salta al contenuto
 *
 * Fuori schermo finché non riceve il focus. Il primo elemento della
 * pagina per chi naviga da tastiera.
 * ------------------------------------------------------------------ */
.m-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 14px 22px;
	background: var(--m-ink);
	color: var(--m-enamel);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--m-r-md) 0;
	box-shadow: var(--m-drop);
}

.m-skip-link:focus {
	left: 0;
}

/* ------------------------------------------------------------------ *
 * Decorazioni
 *
 * Viti, cuciture, LED finti: non si selezionano e non si trascinano.
 * Il loro aria-hidden lo mette il markup, questo è il contorno visivo.
 * ------------------------------------------------------------------ */
[aria-hidden="true"] {
	user-select: none;
	-webkit-user-drag: none;
}

/* ------------------------------------------------------------------ *
 * Contenitore
 *
 * Le sezioni governano la propria larghezza da qui, non dal layout
 * «constrained» di WordPress: quello impone ai figli un max-width
 * centrato, e su una griglia a tutta larghezza produce un rientro che
 * non c'entra niente con il disegno.
 * ------------------------------------------------------------------ */
.m-section {
	max-width: 1200px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--80);
	padding-inline: 24px;
}

@media (max-width: 600px) {
	.m-section {
		padding-inline: 16px;
	}
}

/*
 * Una sezione che continua quella sopra invece di aprirne una nuova.
 *
 * Fra la testata di una webapp e la targa degli investitori ci sarebbe
 * due volte lo stacco pieno, uno sotto e uno sopra: un vuoto che fa
 * sembrare la targa un'altra pagina. Qui lo stacco di sopra si taglia a
 * meta' e quello di sotto resta, perche' dopo la targa comincia
 * davvero un altro discorso.
 */
.m-section--attaccata {
	padding-block-start: calc(var(--wp--preset--spacing--80) / 2);
}

/* Sotto i 600px le ombre lunghe si accorciano (skill §7). */
@media (max-width: 600px) {
	:root {
		--m-drop: 0 9px 15px rgba(70, 55, 35, .16), 0 2px 3px rgba(70, 55, 35, .14);
		--m-drop-on-dark: 0 9px 15px rgba(0, 0, 0, .18), 0 2px 3px rgba(0, 0, 0, .14);
	}
}