/* ============================================================
   RESET MINIMO
   (adattato da crolla-sistemi-v2.html — vedi §4 istruzioni progetto)
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* stessa base di .body: su iPhone/Safari, tirando oltre l'inizio o la
	   fine della pagina (rubber-band), si vede lo sfondo di html, non
	   quello di body — senza questa riga lampeggiava bianco anche in
	   tema scuro. */
	background: var(--page-bg);
}

/* le sezioni raggiunte da un'ancora (#segnali, #stato, ...) non devono
   restare coperte dalla nav fissa quando lo scroll arriva in cima */
#segnali,
#stato,
#azienda {
	scroll-margin-top: 100px;
}

body {
	overflow-x: hidden;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.is-locked {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

@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;
	}
}

/* ============================================================
   TOKEN — colori di brand e palette estesa (§4 istruzioni progetto)
   Da tenere allineati a crolla-sistemi-v2.html: nessun valore va
   cambiato qui senza aggiornare anche la bozza di riferimento.
   ============================================================ */
:root {
	/* Brand obbligatori — fissi, non cambiano con il tema chiaro/scuro */
	--signal-dk: #2B497D;
	--signal: #2378BE;
	--signal-lt: #5AA9E6;

	/* Palette estesa (bozza approvata) — restano disponibili come colori
	   letterali di brand (bottoni, progress bar, ecc.), ma le superfici e i
	   testi che devono reagire al tema chiaro/scuro passano dai token
	   semantici qui sotto, non da questi direttamente. */
	--fog: #ECEEF1;
	--paper: #F4F5F7;
	--ink: #0E1729;
	--ink-soft: #16223A;
	--slate: #5B6470;
	--wire: #C9CDD0;

	/* ---- Tema chiaro/scuro (§ dark/light mode) --------------------------
	   Due famiglie di superfici, indipendenti tra loro:
	   - "page"   → corpo pagina e sezioni oggi chiare (Assistenza, Stato
	     servizi, Contatti, pagine interne): chiaro in light, scuro in dark.
	   - "accent" → sezioni volutamente scure per ritmo visivo (Hero, Chi
	     siamo, Cosa facciamo): in light un po' più chiare dell'--ink puro,
	     in dark ancora più scure del fondo pagina (restano un "gradino"
	     sotto, così si distinguono) — mai chiare in nessuno dei due temi. */
	--page-bg: var(--fog);
	--page-bg-2: var(--paper);
	--page-text: var(--ink);
	--muted-text: var(--slate);
	--hairline: var(--wire);
	--accent-bg: var(--ink-soft);
	--accent-text: var(--fog);
	--panel-bg: var(--paper);

	/* Font (§4) — caricati da Google Fonts, vedi inc/enqueue.php. */
	--font-display: 'Archivo', sans-serif;
	--font-text: 'Instrument Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	/* Spaziature e timing condivisi (bozza approvata) */
	--gut: clamp(20px, 5vw, 72px);
	--sec: clamp(88px, 13vh, 168px);
	--max: 1440px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="dark"] {
	--page-bg: #0B121F;
	--page-bg-2: #101A2C;
	--page-text: #E9ECF2;
	--muted-text: #8B93A6;
	--hairline: #262F44;
	--accent-bg: #05070C;
	--accent-text: #E9ECF2;
	--panel-bg: #131C2E;
}

body {
	color: var(--page-text);
	font-family: var(--font-text);
	font-size: clamp(18px, 1.05vw, 20px);
	background: var(--page-bg);
	/* si raffredda verso il blu con lo scroll: --sp (0–1) è aggiornato da scroll-effects.js */
	background: color-mix(in srgb, var(--page-bg), var(--signal) calc(var(--sp, 0) * 7%));
	transition: background-color .4s var(--ease), color .4s var(--ease);
}

:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 4px;
	border-radius: 2px;
}

/* etichette per chi usa uno screen reader, invisibili a schermo (standard
   WordPress) — usata dove un'intestazione visiva già fa da etichetta ma un
   campo di form ha comunque bisogno di un <label> collegato. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ============================================================
   SCALA DESKTOP — schermi 1001–1919px (portatili, monitor normali,
   finestre ridotte). Da 1920px in su il layout è già al suo formato
   "giusto": contenuto centrato con larghezza massima (--max), molta
   aria attorno e dimensioni ferme. Sotto quella soglia il contenuto
   occupava quasi tutta la larghezza e il sito sembrava "ingrandito".
   Qui tutto il sito viene rimpicciolito in proporzione con `zoom` (un
   solo valore per fascia, modificabile qui sotto), con un pavimento
   (.8) che tiene i testi piccoli leggibili. Mobile/tablet (≤1000px)
   non cambiano: nessuna regola qui sotto li tocca.
   --ui-zoom è letto anche da assets/js/scroll-effects.js e dalle
   regole che usano 100svh/100vh in components.css, che devono
   compensare lo zoom. Il blocco è dentro @supports: dove `zoom` non
   esiste (Firefox < 126) non cambia niente, né qui né nelle
   compensazioni.
   ============================================================ */
@supports (zoom: 1) {
	@media (min-width: 1600px) and (max-width: 1919px) {
		:root {
			--ui-zoom: .9;
			zoom: .9;
		}
	}

	@media (min-width: 1440px) and (max-width: 1599px) {
		:root {
			--ui-zoom: .85;
			zoom: .85;
		}
	}

	@media (min-width: 1001px) and (max-width: 1439px) {
		:root {
			--ui-zoom: .8;
			zoom: .8;
		}
	}
}