/*
 * Mov3, base: variabili, testo, contenitori, pulsanti, aiuti, entrate.
 *
 * Direzione «Altri pianeti»: arancio solo per le azioni, schede su sabbia
 * (schede.css), due temi: chiaro e scuro (la notte). Nessun codice colore
 * qui: i valori stanno in theme.json, e qui si danno loro nomi corti.
 *
 * I fogli di stile usano i ruoli (--mv-fondo, --mv-ink, …), non i nomi dei
 * colori: il ruolo cambia valore col tema. I nomi dei colori restano per i
 * punti dove il colore è fisso (notte sui pulsanti arancio, schede su sabbia).
 * Spec: docs/superpowers/specs/2026-10-21-temi-chiaro-scuro-design.md.
 */

:root {
	--mv-notte: var(--wp--preset--color--notte);
	--mv-profondo: var(--wp--preset--color--profondo);
	--mv-pannello: var(--wp--preset--color--pannello);
	--mv-filo-scuro: var(--wp--preset--color--filo-scuro);
	--mv-luna: var(--wp--preset--color--luna);
	--mv-nebbia: var(--wp--preset--color--nebbia);
	--mv-blu: var(--wp--preset--color--blu);
	--mv-marchio: var(--wp--preset--color--marchio);
	--mv-arancio: var(--wp--preset--color--arancio);
	--mv-sabbia: var(--wp--preset--color--sabbia);
	--mv-carta: var(--wp--preset--color--carta);
	--mv-inchiostro: var(--wp--preset--color--inchiostro);
	--mv-terra: var(--wp--preset--color--terra);
	--mv-filo: var(--wp--preset--color--filo);
	--mv-errore: var(--wp--preset--color--errore);
	--mv-riuscito: var(--wp--preset--color--riuscito);
	--mv-errore-chiaro: var(--wp--preset--color--errore-chiaro);
	--mv-riuscito-chiaro: var(--wp--preset--color--riuscito-chiaro);
	--mv-arancio-chiaro: var(--wp--preset--color--arancio-chiaro);

	/* I ruoli del tema chiaro. Lo scuro li ridefinisce qui sotto. */
	color-scheme: light;
	--mv-fondo: var(--wp--preset--color--alba);
	--mv-fascia: var(--wp--preset--color--foschia);
	--mv-superficie: var(--wp--preset--color--bianco);
	--mv-bordo: var(--wp--preset--color--brina);
	--mv-bordo-campo: var(--wp--preset--color--ghiaccio);
	--mv-campo: var(--wp--preset--color--alba);
	--mv-ink: var(--wp--preset--color--abisso);
	--mv-minore: var(--wp--preset--color--ardesia);
	--mv-accento: var(--wp--preset--color--rame);
	--mv-link: var(--wp--preset--color--marchio);
	--mv-errore-testo: var(--wp--preset--color--errore);
	--mv-riuscito-testo: var(--wp--preset--color--riuscito);
	/* Le schede su carta: sul fondo chiaro hanno la stessa luce, le stacca un filo. */
	--mv-scheda-filo: 0 0 0 1px var(--wp--preset--color--filo);
	/* La mappa degli agenti: regioni in lista d'attesa, confini, regione scelta,
	   bordo col Tab, etichetta delle spente (blocks/mappa-agenti). */
	--mv-regione: var(--wp--preset--color--nuvola);
	--mv-regione-su: var(--wp--preset--color--nuvola-chiara);
	--mv-confine: var(--wp--preset--color--bianco);
	--mv-scelta: var(--wp--preset--color--marchio);
	--mv-regione-fuoco: var(--wp--preset--color--abisso);
	--mv-etichetta: var(--wp--preset--color--abisso);
	/* Per mostrare una cosa in un tema solo (i due loghi): display: var(--mv-se-chiaro). */
	--mv-se-chiaro: block;
	--mv-se-scuro: none;

	--mv-titoli: var(--wp--preset--font-family--titoli);
	--mv-testo: var(--wp--preset--font-family--testo);
	--mv-dati: var(--wp--preset--font-family--dati);

	--mv-larghezza: var(--wp--custom--larghezza);
	--mv-margine: var(--wp--custom--margine);
	--mv-sezione: var(--wp--custom--sezione);
	--mv-raggio: var(--wp--custom--raggio);
	--mv-raggio-piccolo: var(--wp--custom--raggio-piccolo);
	--mv-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* La testata galleggia: distanza dai bordi e altezza del blocco (bordi compresi). */
	--mv-galleggia: clamp(10px, 1.4vw, 16px);
	--mv-testata-alta: 66px;
	--mv-ombra: 0 18px 40px -24px color-mix(in srgb, var(--mv-notte) 70%, transparent);
}

/*
 * Il tema scuro: lo mette lo script in testa (inc/assets.php) o il pulsante
 * della testata (mv-ui.js). La classe mv-scuro tiene scuro un ramo anche nel
 * tema chiaro: l'apertura con la foto della luna, il piè e la testata della
 * home finché sta sopra la foto (pannello chiuso). I ruoli si risolvono dove
 * sono dichiarati, quindi qui si ridefiniscono i ruoli, non la tavolozza.
 */
html[data-tema="scuro"],
.mv-scuro,
html:not(.mv-pannello-aperto) .mv-testata--sopra:not(.is-scorsa) {
	color-scheme: dark;
	--mv-fondo: var(--wp--preset--color--notte);
	--mv-fascia: var(--wp--preset--color--profondo);
	--mv-superficie: var(--wp--preset--color--pannello);
	--mv-bordo: var(--wp--preset--color--filo-scuro);
	--mv-bordo-campo: var(--wp--preset--color--filo-scuro);
	--mv-campo: var(--wp--preset--color--notte);
	--mv-ink: var(--wp--preset--color--luna);
	--mv-minore: var(--wp--preset--color--nebbia);
	--mv-accento: var(--wp--preset--color--arancio);
	--mv-link: var(--wp--preset--color--arancio);
	--mv-errore-testo: var(--wp--preset--color--errore-chiaro);
	--mv-riuscito-testo: var(--wp--preset--color--riuscito-chiaro);
	--mv-scheda-filo: 0 0 0 0 transparent;
	--mv-regione: var(--wp--preset--color--piombo);
	--mv-regione-su: var(--wp--preset--color--piombo-chiaro);
	--mv-confine: var(--wp--preset--color--notte);
	--mv-scelta: var(--wp--preset--color--blu);
	--mv-regione-fuoco: var(--wp--preset--color--notte);
	--mv-se-chiaro: none;
	--mv-se-scuro: block;
}

/* Un ramo sempre scuro prende anche il suo colore di testo. */
.mv-scuro {
	color: var(--mv-ink);
}

/* --- Correzioni dei temi a blocchi (trappole di 3AR) ---------------------- */

/* I temi a blocchi non mettono box-sizing: senza, padding e bordi allargano tutto. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Lo spazio della barra di scorrimento c'è sempre: una pagina che si allunga dopo il caricamento
   (il configuratore della rata) non restringe di colpo tutto il resto (Lighthouse, 2026-10-22). */
html {
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

/*
 * Il contenuto arriva da post-content dentro il gruppo vincolato della
 * pagina. Senza «align full» nel modello resterebbe largo 760px e le
 * sezioni non potrebbero uscirne (3AR, 2026-10-07).
 */
.mv-pagina {
	padding-inline: 0 !important;
	/* Un contenuto troppo largo (un'immagine, una tabella) non deve allargare la pagina sul telefono. */
	overflow-x: clip;
}

.mv-pagina > .wp-block-post-content.alignfull {
	margin: 0 !important;
	padding-inline: 0 !important;
	max-width: none;
}

/* I blocchi a tutta larghezza si toccano: niente spazio tra sezioni. */
.mv-pagina > .wp-block-post-content > .alignfull,
.mv-pagina > .wp-block-post-content > .mv-sezione {
	margin-block: 0 !important;
	margin-inline: 0 !important;
	max-width: none;
	width: 100%;
}

/* WordPress mette un margine tra testata, contenuto e piè: qui si toccano. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* --- Testo ----------------------------------------------------------------- */

/*
 * Le misure dei titoli anche qui, un gradino più specifiche di theme.json: nella
 * pagina del configuratore il reset di Tailwind del plugin (h1…h6 { font-size:
 * inherit }) arriverebbe dopo e le azzererebbe. Le classi del plugin, agganciate
 * a #mov3-configuratore, vincono comunque.
 */
body h1 { font-size: var(--wp--preset--font-size--titolo-1); font-weight: 700; }
body h2 { font-size: var(--wp--preset--font-size--titolo-2); font-weight: 700; }
body h3 { font-size: var(--wp--preset--font-size--titolo-3); font-weight: 500; }
body h4 { font-size: var(--wp--preset--font-size--grande); font-weight: 500; }

h1,
h2,
h3,
h4 {
	text-wrap: balance;
	margin-block: 0;
	letter-spacing: -0.01em;
}

p {
	text-wrap: pretty;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--mv-accento);
	outline-offset: 3px;
}

.mv-tele {
	font-family: var(--mv-dati);
	font-size: var(--wp--preset--font-size--dato);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mv-minore);
}

.mv-cifre {
	font-variant-numeric: tabular-nums;
}

.mv-unito {
	white-space: nowrap;
}

/* --- Contenitori ----------------------------------------------------------- */

.mv-dentro {
	width: 100%;
	max-width: calc(var(--mv-larghezza) + 2 * var(--mv-margine));
	margin-inline: auto;
	padding-inline: var(--mv-margine);
}

.mv-sezione {
	padding-block: var(--mv-sezione);
}

.mv-sezione--profonda {
	background: linear-gradient(var(--mv-fondo), var(--mv-fascia));
}

.mv-testa-sezione {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.mv-testa-sezione__titolo {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--titolo-2);
}

/* Le pagine di testo (Chi siamo, Privacy, Certificazioni): colonna leggibile su notte. */
/* La colonna di lettura col padding, non con max-width: il gruppo è a tutta
   larghezza e la regola delle sezioni qui sopra ne toglie il limite. */
.wp-block-group.mv-testo {
	padding-inline: max(var(--mv-margine), (100% - 760px) / 2) !important;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.mv-testo > * + * {
	margin-block-start: 1.1rem;
}

.mv-testo h2 {
	font-size: var(--wp--preset--font-size--titolo-3);
	margin-block-start: 2.25rem;
}

.mv-testo a {
	color: var(--mv-link);
}

/* L'intestazione delle pagine interne: titolo e una riga di telemetria. */
.mv-intestazione {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
	background:
		radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--mv-blu) 22%, transparent), transparent 60%),
		var(--mv-fondo);
	border-bottom: 1px solid var(--mv-bordo);
}

.mv-intestazione h1 {
	margin-top: 0.75rem;
	max-width: 22ch;
}

.mv-intestazione p:not(.mv-tele) {
	margin: 1rem 0 0;
	color: var(--mv-minore);
	max-width: 60ch;
}

/* --- Pulsanti -------------------------------------------------------------- */

.mv-pulsante,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.35rem;
	border: 0;
	border-radius: 999px;
	background: var(--mv-arancio);
	color: var(--mv-notte);
	font-family: var(--mv-testo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--piccolo);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--mv-curva), box-shadow 0.2s var(--mv-curva);
}

.mv-pulsante:hover,
.wp-block-button__link:hover {
	color: var(--mv-notte);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--mv-arancio) 80%, transparent);
}

.mv-pulsante--vuoto,
.mv-pulsante--contorno {
	background: color-mix(in srgb, var(--mv-ink) 8%, transparent);
	color: var(--mv-ink);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mv-ink) 35%, transparent);
}

.mv-pulsante--vuoto:hover,
.mv-pulsante--contorno:hover {
	color: var(--mv-ink);
	box-shadow: inset 0 0 0 1px var(--mv-ink);
}

.mv-collegamento {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--mv-link);
	text-decoration: none;
}

.mv-collegamento:hover {
	text-decoration: underline;
}

.mv-icona {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* --- Aiuti ----------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.mv-salta {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	border-radius: var(--mv-raggio-piccolo);
	background: var(--mv-arancio);
	color: var(--mv-notte);
	text-decoration: none;
}

.mv-salta:focus {
	top: 1rem;
}

/* --- Entrate --------------------------------------------------------------- */

/* Lo stato nascosto vale solo con la classe mv-moto, messa in linea prima del
   disegno se il visitatore non ha chiesto meno movimento. Se lo script non
   arriva, mv-ui.js mostra comunque tutto dopo tre secondi. */
.mv-moto .mv-entra {
	opacity: 0;
	transform: translateY(var(--wp--custom--movimento--salita));
	transition:
		opacity var(--wp--custom--movimento--entrata) var(--mv-curva),
		transform var(--wp--custom--movimento--entrata) var(--mv-curva);
	transition-delay: calc(var(--i, 0) * var(--wp--custom--movimento--passo));
}

.mv-moto .mv-entra.is-dentro {
	opacity: 1;
	transform: none;
}

.mv-moto .mv-entra.is-subito {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Se mv-ui.js non arriva, le sezioni si mostrano comunque dopo tre secondi e mezzo. */
.mv-moto .mv-entra:not(.is-dentro) {
	animation: mv-svela 0.01s 3.5s forwards;
}

@keyframes mv-svela {
	to {
		opacity: 1;
		transform: none;
	}
}

/* I pulsanti core «contorno» come il pulsante vuoto del tema. */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: color-mix(in srgb, var(--mv-ink) 8%, transparent);
	color: var(--mv-ink);
	border: 0;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mv-ink) 35%, transparent);
}