/*
 * Theme Name:        Digiflo Base
 * Description:       Tema base custom (blocchi Gutenberg server-side, nessun page builder). Struttura standard Digiflo. Non si modifica per-progetto: ogni lavoro cliente va nel child theme.
 * Author:            Digiflo
 * Version:           2.0.0
 * Requires at least: 7.1
 * Requires PHP:      8.0
 * Text Domain:       digiflo-base
 *
 * Tutto il CSS del tema sta in questo file:
 *   1. token · 2. base (accessibilità, header/menu, footer, contenuti) · 3. blocchi (una sezione per blocco).
 * assets/css/ è riservata a CSS aggiuntivo (nel child: tokens-child.css e child.css).
 */

/* ============================================================
   1. DESIGN TOKENS — stessi slug del theme.json (metodo Digiflo).
   theme.json = tavolozza e scale nell'editor · questo blocco = variabili per il CSS.
   Sono DUE posti con gli stessi valori: se ne cambi uno, cambia anche l'altro.
   `bash scripts/verifica-tema.sh` segnala se non sono allineati.
   Regola: nessun colore o misura "sparsa" nel CSS, si usa sempre var(--…).
   Il child ridefinisce questi valori in assets/css/tokens-child.css (e nel proprio theme.json).
   ============================================================ */

:root {

	/* ── Colori (slug = palette del theme.json) ── */
	--color-bg:           #ffffff;
	--color-surface:      #f5f5f4;
	--color-ink:         #1c1917;
	--color-ink-muted:   #57534e;
	--color-accent:       #1d4ed8;
	--color-accent-dark:  #1e3a8a;
	--color-accent-light: #eaf0fe;
	--color-line:       #e7e5e4;
	--color-dark:         #1c1917;

	/* ── Colori di servizio (non nella palette dell'editor) ── */
	--color-on-accent:     #ffffff;  /* testo sopra accent / accent-dark */
	--color-on-dark:       #ffffff;  /* testo sopra dark */
	--color-border-strong: #8a8682;  /* bordi di campi form e controlli: minimo 3:1 (--color-line è solo decorativo) */
	--color-focus:         #1d4ed8;  /* anello di focus da tastiera */
	--color-error:         #b3261e;

	/* ── Tipografia ──
	   Stack di sistema di default: zero richieste esterne, zero problemi privacy.
	   Font brand: self-hosting (woff2 in assets/ del child), MAI Google Fonts da CDN. */
	--font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-heading: var(--font-body);

	/* scala = fontSizes del theme.json (slug: sm, base, span, h4, h3, h2, h1) */
	--text-sm:   clamp(0.8125rem, 1.2vw, 0.875rem);  /* testo secondario, label */
	--text-base: 1rem;                               /* corpo */
	--text-span: clamp(1rem, 1.5vw, 1.125rem);       /* lead / testo evidenziato */
	--text-h4:   1.0625rem;
	--text-h3:   clamp(1.0625rem, 2vw, 1.1875rem);
	--text-h2:   clamp(1.375rem, 3vw, 2rem);
	--text-h1:   clamp(2rem, 5vw, 3rem);

	--leading-tight: 1.15;
	--leading-body:  1.6;
	--measure:       68ch;   /* larghezza massima del testo: sotto gli 80 caratteri per riga */

	/* ── Spazi = spacingSizes del theme.json (slug: xs, sm, md, lg, xl, section) ── */
	--space-xs:      clamp(0.5rem, 1vw, 0.75rem);
	--space-sm:      clamp(0.75rem, 2vw, 1.25rem);
	--space-md:      clamp(1.25rem, 3vw, 2rem);
	--space-lg:      clamp(2rem, 5vw, 4rem);
	--space-xl:      clamp(4rem, 8vw, 7rem);
	--space-section: clamp(5rem, 10vw, 9rem);   /* respiro tra sezioni */

	/* ── Layout = layout del theme.json (contentSize / wideSize) ── */
	--container-sm: 900px;   /* contenuto */
	--container-lg: 1200px;  /* largo */
	--header-h:     4.5rem;

	/* ── Forme e movimento ── */
	--radius-sm:   0.375rem;
	--radius-md:   0.75rem;
	--radius-pill: 999px;
	--shadow-sm:   0 1px 2px rgb(0 0 0 / 0.08);
	--ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur:         200ms;
}

/* ============================================================
   2. BASE — reset leggero, tipografia, layout, accessibilità, header/footer.
   Non contiene stile di brand: quello arriva dai token e dal child.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-md)); }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

/* ── Tipografia: la dimensione segue il ruolo, non il livello di heading (vedi accessibilita.md) ── */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: var(--leading-tight); margin: 0 0 var(--space-sm); text-wrap: balance; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p  { margin: 0 0 var(--space-md); max-width: var(--measure); }

a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-dark); }

/* ── Layout ──
   .container NON ha padding laterale: i margini si ottengono dalla larghezza (evita il doppio padding). */
.container {
	width: min(var(--container-lg), 100% - 2 * var(--space-md));
	margin-inline: auto;
}
.container--narrow { width: min(var(--container-sm), 100% - 2 * var(--space-md)); }
.section { padding-block: var(--space-section); }

/* ── Accessibilità ── */
.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* skip link: invisibile finché non riceve il focus da tastiera */
.skip-link {
	position: absolute; left: var(--space-md); top: -4rem; z-index: 1000;
	padding: var(--space-xs) var(--space-md);
	background: var(--color-dark); color: var(--color-on-dark);
	border-radius: var(--radius-sm);
	transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-xs); }

/* focus visibile su ogni elemento interattivo, solo da tastiera */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* chi ha impostato "riduci movimento" non vede transizioni né scroll animato */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Form — reset di fieldset (ha bordo e padding di default del browser) ── */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; }
input, select, textarea {
	font: inherit; color: inherit; width: 100%;
	padding: var(--space-sm); background: var(--color-bg);
	border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}

/* ── Bottoni ── */
.btn {
	display: inline-flex; align-items: center; gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-accent); color: var(--color-on-accent);
	border: 2px solid var(--color-accent); border-radius: var(--radius-pill);
	font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-on-accent); }

/* ── Header e navigazione ──
   Dropdown solo CSS con combinatore figlio ">" per livello: evita che il terzo livello si apra
   passando sul primo (problema già incontrato). :focus-within lo rende usabile da tastiera. */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--space-md); }
.site-header__logo img { display: block; max-height: 3rem; width: auto; }

.nav-toggle { display: none; padding: var(--space-xs) var(--space-sm); background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; cursor: pointer; }

.nav-menu, .nav-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu { display: flex; gap: var(--space-md); }
.nav-menu a { display: block; padding: var(--space-xs) 0; color: var(--color-ink); text-decoration: none; }
.nav-menu a:hover, .nav-menu .current-menu-item > a { color: var(--color-accent); }
.nav-menu li { position: relative; }

.nav-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 14rem; padding: var(--space-xs);
	background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
	opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* Livelli successivi: il pannello si affianca al genitore, bordo contro bordo e con il bordo superiore alla stessa altezza
   (si compensano padding e bordo del genitore). Di default a destra; main.js aggiunge .open-left se a destra uscirebbe dalla finestra.
   Il ::before è un ponte invisibile sullo spazio tra i due pannelli: il mouse non perde l'hover attraversandolo. */
.nav-menu .sub-menu .sub-menu { top: calc(-1 * (var(--space-xs) + 1px)); left: calc(100% + var(--space-xs) + 1px); }
.nav-menu .sub-menu .sub-menu::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(var(--space-xs) + 1px); }
.nav-menu .sub-menu li.open-left > .sub-menu { left: auto; right: calc(100% + var(--space-xs) + 1px); }
.nav-menu .sub-menu li.open-left > .sub-menu::before { right: auto; left: 100%; }
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu,
.nav-menu .sub-menu > li:hover > .sub-menu,
.nav-menu .sub-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

/* Ultima voce del menu (a destra): i pannelli vanno verso sinistra, senza dipendere dal JS. Solo desktop: sotto 62rem i sottomenu sono in colonna. */
@media (min-width: 62.0625rem) {
	.nav-menu > li:last-child > .sub-menu { left: auto; right: 0; }
	.nav-menu > li:last-child .sub-menu .sub-menu { left: auto; right: calc(100% + var(--space-xs) + 1px); }
	.nav-menu > li:last-child .sub-menu .sub-menu::before { right: auto; left: 100%; }
}

/* Esc: chiude il sottomenu anche con il focus ancora dentro (classe messa da main.js). Dopo le regole di apertura: a parità di specificità vince l'ultima. */
.nav-menu li.menu-item-has-children.is-closed > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(4px); }

@media (max-width: 62rem) {
	.nav-toggle { display: inline-block; }
	.site-nav { display: none; position: absolute; inset: 100% 0 auto 0; padding: var(--space-md); background: var(--color-bg); border-bottom: 1px solid var(--color-line); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
	.site-nav.is-open { display: block; }
	.nav-menu { flex-direction: column; gap: 0; }
	.nav-menu .sub-menu, .nav-menu .sub-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding-left: var(--space-md); }
	.nav-menu .sub-menu .sub-menu::before { display: none; }
}

/* ── Footer ── */
.site-footer { background: var(--color-dark); color: var(--color-on-dark); padding-block: var(--space-xl); }
.site-footer a { color: var(--color-on-dark); }
.site-footer :focus-visible { outline-color: var(--color-on-dark); }

/* ── Contenuto articoli/pagine ── */
.entry-content > * + * { margin-top: var(--space-md); }
.card-post { padding: var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.card-post__title { font-size: var(--text-h3); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-lg); }


/* ── Articolo singolo: contenuto + sidebar sticky ── */
.single-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.single-layout__aside { align-self: start; }
@media (min-width: 62rem) {
	.single-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
	.single-layout__aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.sidebar-news ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.sidebar-news li + li { margin-top: var(--space-xs); }
.contatti-info dt { font-weight: 600; }
.contatti-info dd { margin: 0 0 var(--space-sm); }

/* ============================================================
   3. BLOCCHI — una sezione per blocco, nome del blocco nel titolo.
   Colori: variabili locali --xx-* impostate dal blocco; se mancano valgono i token.
   ============================================================ */

/* ── BLOCCO: sezione-testo ──
   Colori, tipografia, spaziature, bordi, ombre, sfondo e versioni tablet/mobile arrivano dai block supports di WordPress
   (stili inline/classi sull'elemento): qui solo i valori di partenza, che un controllo dell'editor sostituisce sempre.
   Questo CSS è caricato anche nell'editor (functions.php, dfb_editor_assets): anteprima = sito. */
.dfb-sezione-testo {
	position: relative;
	isolation: isolate;                 /* il velo ::before sta sopra lo sfondo e sotto il contenuto */
	padding-block: var(--space-section);
	background-size: cover;
	background-position: center;
}

.dfb-sezione-testo__inner {
	width: min(var(--container-sm), 100% - 2 * var(--space-md));
	margin-inline: auto;
}
.dfb-sezione-testo--wide .dfb-sezione-testo__inner { width: min(var(--container-lg), 100% - 2 * var(--space-md)); }
.dfb-sezione-testo--full .dfb-sezione-testo__inner { width: 100%; }
.dfb-sezione-testo__inner > :first-child { margin-top: 0; }
.dfb-sezione-testo__inner > :last-child { margin-bottom: 0; }
/* testo centrato → anche i pulsanti (il blocco Pulsanti è un contenitore flex: text-align non basta). Una impostazione sul singolo blocco Pulsanti vince sempre. */
.has-text-align-center .wp-block-buttons { justify-content: center; }

/* velo (overlay): colore e opacità arrivano da variabili impostate dal blocco */
.dfb-sezione-testo.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--dfb-overlay);
	opacity: var(--dfb-overlay-opacity, 0.5);
	pointer-events: none;
}