/**
 * Skuola Corporate — base: alias delle variabili, colonna di contenuto, scala tipografica.
 *
 * Qui sta solo ciò che theme.json non può esprimere: gli alias delle misure che in
 * theme.json vivono sotto settings.custom, le variabili che cambiano per banda
 * (theme.json non ha media query) e il secondo stato della scala tipografica.
 * Nessun componente, nessun colore scritto a mano.
 *
 * Ogni valore viene dai computed style della produzione in docs/baseline/
 * (Melinda attivo), non dai sorgenti del tema legacy.
 */

/* -------------------------------------------------------------------------- */
/*  Variabili                                                                 */
/* -------------------------------------------------------------------------- */
/* Alias dei numeri del telaio, che stanno in theme.json (settings.custom). `--skuola-header-*`:
   `.main-h-bottom` misura 59.1875 in un wrapper con 15px di padding e 1px di bordo, 90.1875 in
   tutto; `__fixed` 60 senza il padding. `--skuola-gutter`: 60/30/15 per banda. `--skuola-col`: il
   `.container` di Melinda ha quattro gradini e theme.json ne dichiara uno solo (contentSize). */
body {
	-webkit-font-smoothing: antialiased;

	--skuola-header-bar-h: var(--wp--custom--header--bar);
	--skuola-header-h: var(--wp--custom--header--height);
	--skuola-header-h-solid: var(--wp--custom--header--solid);

	--skuola-gutter: var(--wp--preset--spacing--30);

	--skuola-col: var(--wp--custom--container--lg);
}

@media (max-width: 1199px) {
	body {
		--skuola-gutter: var(--wp--preset--spacing--20);
		--wp--style--root--padding-left: var(--wp--preset--spacing--20);
		--wp--style--root--padding-right: var(--wp--preset--spacing--20);
		--skuola-col: var(--wp--custom--container--md);
	}
}

@media (max-width: 991px) {
	body {
		--skuola-col: var(--wp--custom--container--sm);
	}
}

@media (max-width: 767px) {
	/* Sotto i 768 il container è fluido: la colonna la delimita il padding di radice (345 su 375). */
	body {
		--skuola-gutter: var(--wp--preset--spacing--10);
		--wp--style--root--padding-left: var(--wp--preset--spacing--10);
		--wp--style--root--padding-right: var(--wp--preset--spacing--10);
		--skuola-col: none;
	}
}

/* -------------------------------------------------------------------------- */
/*  Colonna di contenuto                                                      */
/* -------------------------------------------------------------------------- */
/* `.skuola-col` marca nei template il contenitore che fa da colonna. Serve un selettore nostro
   perché il core scrive contentSize come valore letterale nella classe di layout del blocco, non
   come var: la media query da sola non lo raggiungerebbe. Due classi battono la sua senza
   `!important`. */
/* `.alignwide` va escluso: la sua larghezza è l'altra colonna di Melinda, quella del `.container`
   da 1740, e la dà già `wideSize`. Senza l'esclusione questa regola la riportava a 1140 e le card
   di `case-history` uscivano 262.5 invece di 307.5. */
.skuola-col.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: var(--skuola-col);
}

/* Fasce a tutta larghezza dentro il contenuto. `.entry-content` sta dentro il padding di radice,
   quindi un `alignfull` si fermerebbe al bordo della colonna larga (a 375 la fascia di `/contatti/`
   misurava 345 invece di 375). Il core lo risolve con `useRootPaddingAwareAlignments` passando il
   margine negativo ai `.has-global-padding`; qui quella classe non c'è, perché il padding è sulla
   radice e non sul contenitore. Solo margini orizzontali: i verticali li azzera il core. */
.entry-content > .alignfull {
	margin-left: calc(-1 * var(--skuola-gutter));
	margin-right: calc(-1 * var(--skuola-gutter));
	max-width: none;
}

/* Il blockGap della radice metteva 30px sopra il primo blocco: in produzione la pagina parte da
   y=0. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------- */
/*  Scala tipografica — il secondo dei due stati                               */
/*                                                                            */
/*  Melinda ne ha due, non quattro: le bande tablet cambiano larghezza e      */
/*  navigazione, non il testo. Sta in CSS perché theme.json non esprime media */
/*  query, e la tipografia fluida darebbe una rampa dove i gradini sono       */
/*  discreti.                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	h1 {
		font-size: var(--wp--preset--font-size--90);
	}
	h2 {
		font-size: var(--wp--preset--font-size--90);
	}
	h3 {
		font-size: var(--wp--preset--font-size--80);
	}
	h4 {
		font-size: var(--wp--preset--font-size--70);
	}
	h5 {
		font-size: var(--wp--preset--font-size--50);
	}
	/* Anche l'h6 scende, 18 → 16px: lo ha trovato F5 sulle schede progetto, dove l'h6 è l'etichetta
	   «Categoria / Cliente». */
	h6 {
		font-size: var(--wp--preset--font-size--40);
	}
}