/*
Theme Name: Fondazione Zappalà ETS
Theme URI: https://fondazionezappala.fymera.it
Author: Fymera
Description: Tema a blocchi costruito sul Manuale di identità visiva della Fondazione Zappalà ETS (edizione 1.0, agosto 2026). Palette, tipografia, taglio a 33,8° e quadrato oro derivano dal brand book; i caratteri Cormorant Garamond e Montserrat sono ospitati sul server, non chiamati da Google.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fondazione-zappala
Tags: block-theme, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   Quasi tutto il tema vive in theme.json. Qui sta solo ciò che theme.json non
   sa esprimere: i due segni grafici del marchio, il comportamento della
   testata e qualche correzione di accessibilità.
   ========================================================================== */

:root {
	/* L'angolo del marchio: la diagonale della Z, 33,8° rispetto alla
	   verticale. Ogni taglio nel sito usa questo valore e nessun altro. */
	--fz-taglio: 33.8deg;
	--fz-modulo: 0.5rem;
}

/* --- Leggibilità -------------------------------------------------------- */

/* Righe da 60-70 battute: oltre, il testo diventa faticoso (brand book, cap. 3).
   Vale per il testo corrente, non per titoli e tabelle. */
.entry-content > p,
.wp-block-post-content > p {
	max-width: var(--wp--custom--riga--massima);
}

/* Niente giustificato: crea buchi e peggiora la lettura (brand book, cap. 3). */
p, li { text-align: left; }

/* Il salto al contenuto, per chi naviga da tastiera. */
.fz-salta-al-contenuto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--blu);
	color: var(--wp--preset--color--bianco);
	text-decoration: none;
}
.fz-salta-al-contenuto:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* Il focus deve vedersi sempre, anche sul blu. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--oro);
	outline-offset: 2px;
}
.has-blu-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--oro-chiaro);
}

/* --- Il taglio ---------------------------------------------------------- */
/* Il filetto obliquo che separa la F dalla Z, ripreso in grande: divide una
   copertina, apre una sezione, chiude una fotografia. Sempre lo stesso angolo,
   sempre inclinato in alto a destra, mai speculare, mai a più angolazioni
   sulla stessa pagina (brand book, cap. 4).

   Il taglio è una RIGA a 33,8° dalla verticale, non un bordo diagonale di
   sezione: su una fascia larga 1440 px quell'angolo vorrebbe 2150 px di
   altezza, e per farcelo stare bisognerebbe cambiargli l'inclinazione — cioè
   proprio la cosa che il manuale vieta. Quindi il taglio resta il «taglio oro
   sottile sul blu pieno» delle copertine, e i passaggi fra una sezione e
   l'altra si fanno col colore.

   L'asse della sfumatura sta a 33,8° + 90°: in CSS la linea di stacco è
   perpendicolare alla direzione della sfumatura, non parallela. */

.fz-taglio {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.fz-taglio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		calc(var(--fz-taglio) + 90deg),
		transparent 0 calc(50% - 1px),
		var(--wp--preset--color--oro) calc(50% - 1px) calc(50% + 1px),
		transparent calc(50% + 1px) 100%
	);
	opacity: 0.85;
}

/* La variante spostata: la riga passa più a destra, per non tagliare il testo. */
.fz-taglio-destra::before {
	background: linear-gradient(
		calc(var(--fz-taglio) + 90deg),
		transparent 0 calc(72% - 1px),
		var(--wp--preset--color--oro) calc(72% - 1px) calc(72% + 1px),
		transparent calc(72% + 1px) 100%
	);
}

/* --- Il quadrato oro ---------------------------------------------------- */
/* Il quadrato che appoggia la F si stacca e diventa segno di elenco. Lato pari
   all'altezza della x del testo, mai più grande della maiuscola. Sostituisce
   pallini e trattini in tutti i materiali (brand book, cap. 4). */

.fz-elenco {
	list-style: none;
	padding-left: 0;
}
.fz-elenco > li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.6em;
}
.fz-elenco > li::before {
	content: "";
	position: absolute;
	left: 0;
	/* 0.52em ≈ altezza della x di Montserrat: il quadrato si allinea alla
	   pancia della lettera, non alla riga. */
	top: 0.55em;
	width: 0.52em;
	height: 0.52em;
	background: var(--wp--preset--color--oro);
}
.has-blu-background-color .fz-elenco > li::before,
.has-text-color.has-bianco-color .fz-elenco > li::before {
	background: var(--wp--preset--color--oro-chiaro);
}

/* Il quadrato come apertura di titolo. */
.fz-quadrato-titolo {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
}
.fz-quadrato-titolo::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	background: var(--wp--preset--color--oro);
	transform: translateY(-0.05em);
}

/* Taglio e quadrato non si usano insieme sullo stesso elemento (brand book). */

/* --- Testata ------------------------------------------------------------ */

.fz-testata {
	z-index: 20;
	background: var(--wp--preset--color--bianco);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 12%, transparent);
}
/* Resta in alto solo dove c'è schermo per tenercela: su un portatile da 13
   pollici una testata a due livelli fissa si mangia un quinto della pagina. */
@media (min-height: 900px) {
	.fz-testata { position: sticky; top: 0; }
}
.fz-testata .wp-block-site-logo img {
	/* 170 px è la soglia minima della versione orizzontale ridotta; sotto si
	   passerebbe a un logo illeggibile (brand book, cap. 1). */
	min-width: 170px;
	height: auto;
}
/* Area di rispetto: un modulo M su tutti e quattro i lati, e nell'area non
   entra «nessun testo, filetto, immagine o bordo» (cap. 1). Col marchio a
   210 px, M vale 9,7 px: il margine qui sotto tiene il filetto del menù e i
   bottoni fuori da quella fascia anche quando vanno a capo. */
.fz-testata .wp-block-site-logo { margin-block: 4px 6px; }
.fz-menu .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--dati);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.fz-menu .wp-block-navigation-item__content:hover,
.fz-menu .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-color: var(--wp--preset--color--oro);
	text-decoration-thickness: 2px;
}

/* --- Piè di pagina ------------------------------------------------------ */

.fz-pie {
	font-size: var(--wp--preset--font-size--didascalia);
}
.fz-pie a { color: var(--wp--preset--color--oro-chiaro); }
.fz-pie a:hover { color: var(--wp--preset--color--bianco); }
/* La denominazione completa con "ETS" compare sempre: fa parte del nome
   (art. 12 D.Lgs. 117/2017), non è una sigla decorativa. */
.fz-denominazione { font-weight: 600; }

/* --- Immagini ----------------------------------------------------------- */
/* Formati 3:2 e 4:5, quadrato solo per i social, niente bordi arrotondati
   (brand book, cap. 5). */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 0;
}
.fz-foto-3-2 img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.fz-foto-4-5 img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Marchio su fotografia: velo blu all'80%, mai un nero generico. */
.fz-velo-blu { position: relative; }
.fz-velo-blu::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--blu);
	opacity: 0.8;
	pointer-events: none;
}
.fz-velo-blu > *:not(img) { position: relative; z-index: 1; }

/* --- Schede ------------------------------------------------------------- */

.fz-scheda {
	background: var(--wp--preset--color--bianco);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 10%, transparent);
	height: 100%;
}
.fz-scheda:hover {
	border-color: var(--wp--preset--color--oro);
}
/* Il numero d'area in Cormorant, come i numeri d'apertura del brand book. */
.fz-numero {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 600;
	color: var(--wp--preset--color--oro);
	line-height: 1;
}

/* --- Banda finanziatori -------------------------------------------------- */
/* «Con il contributo di»: filetto oro sottile, loghi allineati alla base,
   altezza uniforme, area di rispetto propria per ciascuno (brand book, cap. 8). */
.fz-banda-contributo {
	border-top: 2px solid var(--wp--preset--color--oro);
	padding-top: var(--wp--preset--spacing--20);
}
.fz-banda-contributo .wp-block-image img {
	max-height: 56px;
	width: auto;
}

/* --- Stampa -------------------------------------------------------------- */
@media print {
	.fz-testata, .fz-pie, .wp-block-navigation { display: none; }
	body { background: #fff; color: #000; }
}

/* --- Link dentro i titoli ------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6) a,
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
:where(h1, h2, h3, h4, h5, h6) a:hover,
.wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--wp--preset--color--oro);
	text-decoration-thickness: 2px;
}

/* --- Attacchi fra le fasce ----------------------------------------------- */
/* Testata, contenuto e piè di pagina non vogliono aria in mezzo: ogni fascia
   ha già il suo respiro dentro. Senza questo si vede una striscia avorio fra
   la testata e l'apertura, che sembra un errore di montaggio. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* --- Il taglio sui telefoni ---------------------------------------------- */
/* Su uno schermo stretto e alto una riga a 33,8° attraversa per forza il
   testo: l'angolo non si tocca (lo vieta il manuale) e il testo non si sposta,
   quindi sotto i 782 px il taglio non c'è. Resta il campo blu pieno — che il
   brand book considera comunque una scelta buona, non un ripiego. */
@media (max-width: 781px) {
	.fz-taglio::before { display: none; }
}

/* ==========================================================================
   Componenti delle pagine interne
   ========================================================================== */

/* --- Stato vuoto ---------------------------------------------------------
   Non dice «Nessun risultato». La Fondazione è nata a giugno 2026: che una
   sezione sia ancora vuota è un fatto, non un errore, e va detto con parole
   sue lasciando comunque una strada aperta a chi è arrivato fin lì. */
.fz-vuoto {
	border-left: 2px solid var(--wp--preset--color--oro);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: color-mix(in srgb, var(--wp--preset--color--sabbia) 45%, transparent);
	color: var(--wp--preset--color--grigio-testo);
}
.fz-vuoto p { margin: 0; max-width: var(--wp--custom--riga--massima); }
.has-blu-background-color .fz-vuoto {
	background: color-mix(in srgb, #ffffff 8%, transparent);
	color: var(--wp--preset--color--sabbia);
}

/* --- Griglie di schede ---------------------------------------------------- */
.fz-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
}
.fz-scheda-elenco,
.fz-scheda-area {
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fz-scheda-titolo {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	line-height: 1.15;
	margin: 0;
}
.fz-scheda-testo {
	font-size: var(--wp--preset--font-size--didascalia);
	color: var(--wp--preset--color--grigio-testo);
	margin: 0;
}
.fz-scheda-luogo,
.fz-etichetta {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-testo);
	margin: 0;
}
.fz-scheda-area .fz-numero { margin: 0 0 0.25rem; }

/* --- Elenco di documenti --------------------------------------------------
   Una riga per documento: nome a sinistra, tipo e anno a destra. Le schede
   servono a invogliare, un bilancio si scarica. */
.fz-documenti {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--sabbia);
}
.fz-documento {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sabbia);
	margin: 0;
}
.fz-documento-nome { font-weight: 500; }
.fz-documento-dati {
	font-size: var(--wp--preset--font-size--didascalia);
	color: var(--wp--preset--color--grigio-testo);
	white-space: nowrap;
}

/* --- Persone -------------------------------------------------------------
   Nessuna fotografia: non ne abbiamo, e i ritratti presi da LinkedIn sono
   esattamente il genere di cosa che il manuale vieta. Il quadrato oro apre il
   nome, come sul badge. */
.fz-persone {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}
.fz-persona { margin: 0; }
.fz-persona .fz-persona-nome {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.15rem;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}
.fz-persona .fz-persona-nome::before {
	content: "";
	flex: 0 0 auto;
	width: 0.42em;
	height: 0.42em;
	background: var(--wp--preset--color--oro);
	transform: translateY(-0.08em);
}
.fz-persona .fz-persona-ruolo {
	font-size: var(--wp--preset--font-size--didascalia);
	color: var(--wp--preset--color--grigio-testo);
	margin: 0 0 0.3rem;
}
.fz-persona .fz-persona-email { font-size: var(--wp--preset--font-size--didascalia); margin: 0; }

/* --- Tappe ---------------------------------------------------------------
   La linea del tempo di una fondazione nata tre mesi fa: tre voci, non venti.
   Il filetto verticale è oro, come i filetti attorno a «ETS» nel marchio. */
.fz-tappe {
	list-style: none;
	padding: 0 0 0 var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0;
	border-left: 2px solid var(--wp--preset--color--oro);
}
.fz-tappa { position: relative; margin-bottom: var(--wp--preset--spacing--30); }
.fz-tappa:last-child { margin-bottom: 0; }
.fz-tappa::before {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--30) * -1 - 5px);
	top: 0.45em;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--oro);
}
.fz-tappa .fz-tappa-quando {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-testo);
	margin: 0 0 0.2rem;
}
.fz-tappa .fz-tappa-cosa { margin: 0; max-width: var(--wp--custom--riga--massima); }
.fz-tappa-cosa strong { font-weight: 600; }

/* --- Passi numerati ------------------------------------------------------- */
.fz-passi {
	list-style: none;
	counter-reset: passo;
	padding: 0;
	margin: var(--wp--preset--spacing--30) 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}
.fz-passo { counter-increment: passo; display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1rem; }
.fz-passo::before {
	content: counter(passo, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-m);
	font-weight: 600;
	color: var(--wp--preset--color--oro);
	line-height: 1;
	grid-row: span 2;
}
.fz-passo .fz-passo-nome {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	margin: 0 0 0.25rem;
	align-self: center;
}
.fz-passo .fz-passo-cosa { margin: 0; color: var(--wp--preset--color--grigio-testo); max-width: var(--wp--custom--riga--massima); }

/* --- Riquadro di nota -----------------------------------------------------
   Per le cose che il visitatore deve leggere prima di agire: la riservatezza
   su «Chiedi supporto», l'avviso che un documento non è ancora pubblicato. */
.fz-nota {
	border: 1px solid var(--wp--preset--color--oro);
	padding: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--bianco);
}
.fz-nota > :first-child { margin-top: 0; }
.fz-nota > :last-child { margin-bottom: 0; }
.fz-nota-titolo {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-testo);
	margin: 0 0 0.5rem;
}

/* --- Dati d'identità ------------------------------------------------------ */
.fz-identita {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.6rem 1.5rem;
	margin-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--dati);
}
.fz-identita dt {
	font-size: var(--wp--preset--font-size--occhiello);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grigio-testo);
	padding-top: 0.15em;
}
.fz-identita dd { margin: 0; font-weight: 500; }

/* --- Canali di contatto --------------------------------------------------- */
.fz-canali {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}
.fz-canale {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--blu) 12%, transparent);
	padding: var(--wp--preset--spacing--30);
	margin: 0;
}
/* `.fz-canale p` prima, e il nome dopo con una classe in più: sono due
   selettori della stessa forza e vince l'ultimo, quindi il nome del canale
   veniva rimpicciolito dalla regola dei paragrafi. */
.fz-canale p { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--didascalia); color: var(--wp--preset--color--grigio-testo); }
.fz-canale .fz-canale-nome {
	font-family: var(--wp--preset--font-family--titolo);
	font-size: var(--wp--preset--font-size--titolo-s);
	font-weight: 600;
	color: var(--wp--preset--color--blu);
	margin: 0 0 0.35rem;
}
.fz-canale a { font-weight: 500; }

/* ==========================================================================
   La scala tipografica del manuale, alla lettera (cap. 3)
   ========================================================================== */

/* Interlinee. theme.json fissa i corpi, ma non tutte le interlinee della
   tabella: qui ci sono quelle che mancavano. */
.has-occhiello-font-size  { line-height: 1.4; }
.has-didascalia-font-size { line-height: 1.6; }
.has-dati-font-size,
.fz-identita,
.wp-block-table { line-height: 1.5; }

/* «Dati e tabelle: Montserrat Medium, cifre tabulari». Senza `tabular-nums`
   le cifre hanno larghezze diverse e una colonna di numeri non si allinea —
   che è esattamente il motivo per cui il manuale lo chiede. */
.has-dati-font-size,
.fz-identita,
.fz-documento-dati,
.wp-block-table {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* «Righe da 60–70 battute. Oltre, il testo diventa faticoso.»
   In `ch` la misura si adatta da sola al corpo del testo, quindi la regola
   regge anche dentro una scheda o una colonna, dove il contenitore è più
   stretto e il limite semplicemente non si attiva. */
main :is(p, li, dd) {
	max-width: var(--wp--custom--riga--massima);
}
/* Non vale dove il testo è già corto per costruzione, o dove spezzare la
   larghezza romperebbe l'allineamento. */
main :is(.fz-identita dd, .fz-documento, .fz-scheda p, .fz-canale p, .wp-block-button, figcaption) {
	max-width: none;
}