/* ==========================================================================
   Base: reset, tipografia, griglia
   ==========================================================================
   Tutto quello che vale su ogni pagina prima dei componenti. Le misure
   modificabili arrivano come variabili dal Customizer (inc/customizer):
   qui ci sono i loro predefiniti, cosi' il sito e' corretto anche con il
   Customizer vuoto.
   ========================================================================== */

:root {
	/* Tipografia (Customizer > Tipografia) */
	--htmb-font-titoli: 'Poppins', system-ui, sans-serif;
	--htmb-font-testo: 'Roboto', system-ui, sans-serif;
	--htmb-font-ui: 'Montserrat', system-ui, sans-serif;
	--htmb-testo-base: 16px;
	/* Il corpo cresce con lo schermo: la misura del Customizer fino a 1440px,
	   tre pixel in piu' a 2560 (16 -> 19 con il predefinito). Sta sulla
	   radice, cosi' crescono insieme testo, rem e spaziature: sugli schermi
	   grandi la pagina si ingrandisce invece di svuotarsi.
	   Spec 2026-09-27-larghezze-e-componenti, L5. */
	--htmb-corpo: clamp(var(--htmb-testo-base), calc(var(--htmb-testo-base) - 3.86px + 0.268vw), calc(var(--htmb-testo-base) + 3px));
	--htmb-scala: 1.25;
	--htmb-peso-testo: 400;

	/* I titoli seguono la scala: h2 = base x scala^4 (39px con i
	   predefiniti, la misura di oggi), h1 un gradino sopra. */
	--htmb-h4: calc(var(--htmb-corpo) * var(--htmb-scala) * var(--htmb-scala));
	--htmb-h3: calc(var(--htmb-h4) * var(--htmb-scala));
	--htmb-h2: calc(var(--htmb-h3) * var(--htmb-scala));
	--htmb-h1: calc(var(--htmb-h2) * var(--htmb-scala));

	/* Griglia (Customizer > Articoli per la colonna di lettura) */
	/* La colonna di lettura in caratteri veri: 0,44em e' la larghezza media
	   di una lettera in Roboto (misurata: 88 caratteri su 726px a 19px).
	   ch non va bene: e' la larghezza dello zero, piu' largo della media, e
	   68ch davano 88 caratteri per riga. 72 caratteri a 20px fanno una
	   colonna di circa 630px su desktop. */
	--htmb-colonna-testo: calc(72 * 0.44em);
	/* Il testo degli articoli cresce fino a questa misura sugli schermi
	   larghi (Customizer > Articoli). */
	--htmb-art-corpo-max: 20px;
	/* Tre larghezze in tutto il tema (spec 2026-09-27, L3): "largo" per barra,
	   sezioni e griglie; "medio" per i blocchi raccolti (CTA, FAQ); la
	   colonna di lettura e' --htmb-colonna-testo, qui sopra. Nessun foglio
	   di pagina dichiara larghezze proprie.
	   1680 lascia ~430px per lato a 2560: aria, mai vuoto (Daniele, L1-L2). */
	--htmb-largo: 1680px;
	--htmb-medio: 1120px;
	--htmb-margine: clamp(20px, 5vw, 96px);

	/* L'altezza della barra: la dichiara navbar.css, qui il ripiego per le
	   pagine che la usano come distanza prima che il foglio arrivi. */
	--htmb-nav-h: 74px;
}

/* --- Reset essenziale ----------------------------------------------------- */

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

html {
	font-size: var(--htmb-corpo);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--htmb-superficie);
	color: var(--htmb-ink-2);
	font-family: var(--htmb-font-testo);
	font-size: var(--htmb-corpo);
	font-weight: var(--htmb-peso-testo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	border-style: none;
}

/* --- Tipografia ----------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--htmb-ink);
	font-family: var(--htmb-font-titoli);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

/* Fluidi: sotto i 768px scendono fino a due terzi della misura piena. */
h1 { font-size: clamp(calc(var(--htmb-h1) * 0.66), calc(var(--htmb-h1) * 0.45 + 2vw), var(--htmb-h1)); }
h2 { font-size: clamp(calc(var(--htmb-h2) * 0.7), calc(var(--htmb-h2) * 0.5 + 1.5vw), var(--htmb-h2)); }
h3 { font-size: clamp(calc(var(--htmb-h3) * 0.8), calc(var(--htmb-h3) * 0.6 + 1vw), var(--htmb-h3)); }
h4 { font-size: var(--htmb-h4); }
h5 { font-size: calc(var(--htmb-corpo) * var(--htmb-scala)); }
h6 { font-size: var(--htmb-corpo); }

p,
ul,
ol,
blockquote,
figure,
pre,
table {
	margin: 0 0 1.25em;
}

a {
	color: var(--htmb-accento);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--htmb-accento-scuro);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--htmb-firma);
	outline-offset: 2px;
}

strong,
b {
	font-weight: 700;
}

::selection {
	background-color: color-mix(in srgb, var(--htmb-accento) 20%, transparent);
}

/* --- Griglia di pagina ----------------------------------------------------
   Tre larghezze con un nome: "pieno" (tutta la viewport), "largo" (il
   contenitore, --htmb-largo) e "testo" (la colonna di lettura). Un figlio sta
   in "testo" salvo che dichiari di uscire: e' lo schema gia' usato su
   /chi-sono/, qui reso di tutto il sito. */

.htmb-griglia {
	display: grid;
	grid-template-columns:
		[pieno-start] minmax(var(--htmb-margine), 1fr)
		[largo-start] minmax(0, calc((var(--htmb-largo) - min(var(--htmb-colonna-griglia, var(--htmb-colonna-testo)), var(--htmb-largo))) / 2))
		[testo-start] min(var(--htmb-colonna-griglia, var(--htmb-colonna-testo)), calc(100% - 2 * var(--htmb-margine))) [testo-end]
		minmax(0, calc((var(--htmb-largo) - min(var(--htmb-colonna-griglia, var(--htmb-colonna-testo)), var(--htmb-largo))) / 2)) [largo-end]
		minmax(var(--htmb-margine), 1fr) [pieno-end];
}

.htmb-griglia > * {
	grid-column: testo;
}

.htmb-griglia > .htmb-largo,
.htmb-griglia > .alignwide {
	grid-column: largo;
}

.htmb-griglia > .htmb-pieno,
.htmb-griglia > .alignfull {
	grid-column: pieno;
}

/* Il contenitore semplice, per le parti che non seguono la griglia. */
.htmb-contenitore {
	width: min(100% - 2 * var(--htmb-margine), var(--htmb-largo));
	margin-inline: auto;
}

.htmb-contenitore--medio {
	width: min(100% - 2 * var(--htmb-margine), var(--htmb-medio));
	margin-inline: auto;
}

/* --- Accessibilita' ------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important; /* contro il posizionamento dei plugin che riusano la classe */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Il primo elemento raggiungibile col Tab: porta al contenuto saltando barra
   e hero. Invisibile finche' non riceve il focus. */
.htmb-salta {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	padding: 10px 16px;
	background-color: var(--htmb-ink);
	color: #fff;
	font-family: var(--htmb-font-ui);
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	transform: translateY(-200%);
}

.htmb-salta:focus {
	transform: none;
	color: #fff;
}

/* L'arrivo di un'ancora lascia lo spazio della barra fissa. */
:target,
#content {
	scroll-margin-top: var(--htmb-nav-h);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --- Allineamenti di WordPress -------------------------------------------- */

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.wp-caption-text,
figcaption {
	font-size: 0.875rem;
	color: var(--htmb-ink-tenue);
}

/* --- Pagina di ripiego (index.php) ----------------------------------------- */

.htmb-principale {
	padding-top: calc(var(--htmb-nav-h) + 48px);
	padding-bottom: 64px;
}