/**
 * Impalcatura della pagina — DAU 2026.
 *
 * Mobile first: le regole senza media query valgono per il telefono, quelle
 * dentro @media aggiungono complessità man mano che lo spazio cresce.
 */

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

.contenitore {
	width: 100%;
	max-width: var(--largh-max);
	margin-inline: auto;
	/* padding-inline e non padding: un padding abbreviato azzererebbe i lati
	   quando qualcuno aggiunge spazio verticale. */
	padding-inline: var(--gutter);
}

.contenitore--stretto {
	max-width: 900px;
}

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

.sezione--carta-scura {
	background: var(--carta-scura);
}

/* --- Intestazione ---------------------------------------------------------
   Una sola barra, che resta in cima e si compatta scorrendo. Il tema vecchio
   ne aveva due sovrapposte, una nascosta a -95px: due copie dello stesso menu
   da tenere allineate. */

.testata {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--carta) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transizione), padding var(--transizione);
}

/* La classe la aggiunge il JavaScript dopo 40px di scorrimento. */
.testata.is-scorsa {
	border-bottom-color: var(--linea);
}

/* Se il browser non conosce backdrop-filter il fondo resta pieno, altrimenti
   il menu diventerebbe illeggibile sopra le foto. */
@supports not (backdrop-filter: blur(10px)) {
	.testata {
		background: var(--carta);
	}
}

.testata__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding-block: var(--s4);
	transition: padding var(--transizione);
}

.testata.is-scorsa .testata__interno {
	padding-block: var(--s3);
}

.testata__logo {
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.testata__logo img {
	width: auto;
	height: 44px;
	transition: height var(--transizione);
}

.testata.is-scorsa .testata__logo img {
	height: 34px;
}

/* --- Menu ----------------------------------------------------------------
   Sul telefono è un pannello che scende; da 1000px in su una riga di voci. */

.menu-bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* 44px è la misura minima di un bersaglio toccabile */
	height: 44px;
	padding: 0;
	border: 1px solid var(--linea-forte);
	border-radius: var(--raggio);
	background: none;
	color: var(--inchiostro);
	cursor: pointer;
	transition: background var(--transizione);
}

.menu-bottone:hover {
	background: var(--carta-scura);
}

.menu-bottone svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	padding: var(--s4) var(--gutter) var(--s8);
	background: var(--carta);
	border-bottom: 1px solid var(--linea);
	box-shadow: var(--ombra);
}

.menu.is-aperto {
	display: block;
}

.menu__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__lista li {
	margin: 0;
	border-bottom: 1px solid var(--linea);
}

.menu__lista a {
	display: block;
	padding: var(--s4) 0;
	color: var(--inchiostro);
	font-size: var(--t-md);
	font-family: var(--serif);
	text-decoration: none;
}

.menu__lista a:hover,
.menu__lista a[aria-current="page"] {
	color: var(--inchiostro-t);
}

@media (min-width: 1000px) {
	.menu-bottone {
		display: none;
	}

	.menu {
		position: static;
		display: block;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.menu__lista {
		display: flex;
		align-items: center;
		gap: clamp(var(--s4), 1.6vw, var(--s8));
	}

	.menu__lista li {
		border: 0;
	}

	.menu__lista a {
		position: relative;
		padding: var(--s2) 0;
		font-family: var(--sans);
		font-size: var(--t-sm);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-size: var(--t-sm);
	}

	/* La sottolineatura cresce dal centro al passaggio del mouse. È
	   l'unica animazione decorativa del tema. */
	.menu__lista a::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 1px;
		background: var(--inchiostro);
		transform: translateX(-50%);
		transition: width var(--transizione);
	}

	.menu__lista a:hover::after,
	.menu__lista a[aria-current="page"]::after {
		width: 100%;
	}
}

/* --- Piè di pagina -------------------------------------------------------- */

.pie {
	margin-top: var(--sezione);
	padding-block: var(--s16) var(--s8);
	background: var(--inchiostro);
	color: var(--carta);
}

.pie a {
	color: var(--carta);
	text-decoration-color: color-mix(in srgb, var(--carta) 45%, transparent);
}

.pie a:hover {
	color: #ffffff;
}

.pie__griglia {
	display: grid;
	gap: var(--s8);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.pie__griglia {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s12);
	}
}

.pie__titolo {
	margin-bottom: var(--s3);
	color: #ffffff;
	font-family: var(--sans);
	font-size: var(--t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.pie__chiusura {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s6);
	justify-content: space-between;
	margin-top: var(--s12);
	padding-top: var(--s6);
	border-top: 1px solid color-mix(in srgb, var(--carta) 18%, transparent);
	color: color-mix(in srgb, var(--carta) 72%, transparent);
	font-size: var(--t-xs);
}

/* Il bottone delle preferenze cookie eredita l'aspetto di un link: nel piè
   di pagina scuro deve leggersi come gli altri. */
.pie .dau-preferenze-cookie {
	color: var(--carta);
}

.pie .dau-preferenze-cookie:hover {
	color: #ffffff;
}

/* --- La casa nel menu ------------------------------------------------------
   Su telefono sta in riga con le altre voci, in un pannello dove ogni voce è
   una riga: l'icona da sola sembrerebbe un errore, quindi si mostra anche la
   parola. Da 1000px in su resta la sola icona, allineata alle altre voci. */

.menu__casa {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
}

.menu__casa svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: 0 0 auto;
}

@media (max-width: 999px) {
	/* Sul telefono la parola "Home" torna visibile accanto all'icona. */
	.menu__casa .solo-lettori {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

@media (min-width: 1000px) {
	.menu__casa svg {
		width: 16px;
		height: 16px;
	}

	/* L'icona non ha testo, quindi la sottolineatura animata delle altre
	   voci finirebbe larga zero: si àncora alla larghezza dell'icona. */
	.menu__lista .menu__casa::after {
		left: 0;
		transform: none;
	}

	.menu__lista .menu__casa:hover::after,
	.menu__lista .menu__casa[aria-current="page"]::after {
		width: 16px;
	}
}