/**
 * Rifiniture moderne, additive.
 *
 * Regola di questa passata: qui dentro niente che possa spostare un rettangolo.
 * Sono tutte proprietà che il browser usa per disegnare meglio o per navigare
 * più in fretta: se un browser non le conosce, le ignora e il sito resta com'è.
 *
 * @package Edilieco
 */

/* Il sito usa un tema scuro per le sezioni ink e chiaro per le altre: dichiararlo
   evita il lampo bianco durante l'overscroll su iOS/Android. */
html {
	color-scheme: light;
	/* la barra di scorrimento non deve allargare la pagina quando compare */
	scrollbar-gutter: stable;
}

/* Controlli nativi (checkbox del consenso, radio dei chip, slider del
   calcolatore) colorati col magenta del marchio invece del blu di sistema. */
:root {
	accent-color: var(--ee-magenta);
}

/* Selezione del testo nel colore del marchio. */
::selection {
	background: color-mix(in srgb, var(--ee-magenta) 24%, transparent);
	color: inherit;
}

/* Tipografia: niente pseudo-grassetti né pseudo-corsivi inventati dal browser
   quando il font non ha la variante, e cifre a larghezza fissa nei numeri. */
body {
	font-synthesis: none;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

.ee-stat__value,
.ee-figure__v,
.ee-calc__readout,
.ee-calc__price,
.ee-row__index,
.ee-hero__strip-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Paragrafi: evita le righe orfane in fondo al blocco senza cambiare il numero
   di righe del titolo (che è misurato sul riferimento). */
p,
.ee-lede,
.ee-row__text {
	text-wrap: pretty;
}

/* Le immagini hero non devono mai poter allargare la pagina su un telefono
   stretto: è una cintura oltre a `overflow: hidden` sull'hero. */
.ee-hero__media {
	max-width: 100vw;
	overflow: clip;
}

/* ---------- Touch: niente effetti "appiccicati" ---------- */

/* Su un telefono non esiste l'hover: se lo stile hover resta attaccato dopo il
   tocco, l'immagine rimane ingrandita e il testo colorato. Qui si neutralizza
   l'effetto, senza toccare le regole hover vere (che restano per il desktop). */
@media (hover: none) {
	.ee-svc .wp-block-image img,
	.ee-svc__media img,
	.ee-mcard .wp-block-image img,
	.ee-mcard__img img,
	.ee-card--media img,
	.ee-project__media img,
	.ee-menu__list a,
	.ee-nav__list a {
		transform: none !important;
	}
}

/* Il tocco non deve aspettare i 300 ms del doppio-tap né lasciare l'evidenziazione
   azzurra sopra i bottoni. */
a,
button,
summary,
label,
input,
select,
textarea,
[role="button"] {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Tap target comodi: 44 px è il minimo raccomandato, e la strip dell'hero su
   telefono ha già 12-14 px di padding. */
.ee-hero__strip-btn,
.ee-carousel__btn,
.ee-to-top,
.ee-burger,
.ee-btn {
	min-height: 44px;
}

/* Il menu a tutto schermo non deve far rimbalzare la pagina sotto. */
.ee-menu {
	overscroll-behavior: contain;
}

/* ---------- Preferenze di sistema ---------- */

/* Chi chiede più contrasto deve avere bordi e testi secondari più netti. */
@media (prefers-contrast: more) {
	:root {
		--ee-line: rgba(28, 32, 38, 0.45);
		--ee-line-invert: rgba(255, 255, 255, 0.55);
		--ee-muted: #3a3d44;
	}

	.ee-hero__strip-label {
		color: rgba(255, 255, 255, 0.92);
	}
}

/* In modalità a colori forzati i gradienti spariscono: la velatura dell'hero
   deve restare, altrimenti il titolo bianco finisce su un'immagine chiara. */
@media (forced-colors: active) {
	.ee-hero__overlay {
		background: Canvas;
		opacity: 0.55;
	}

	.ee-hero__strip-bar {
		background: Highlight;
	}

	.ee-to-top {
		border: 1px solid ButtonBorder;
	}
}

/* Transizione fra pagine (Chrome/Edge 126+). Se il browser non la conosce,
   la navigazione resta immediata come prima. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 220ms;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* L'header resta fermo durante la transizione: è già fisso, e animarlo
   produrrebbe uno sdoppiamento visibile. */
.ee-header {
	view-transition-name: none;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}