/* Pellegrini Theme — fondamenta.
   Reset, tipografia di base, link, focus, movimento ridotto, superfici
   di testata e piè di pagina. I componenti arrivano nelle fasi successive. */

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

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--carbone);
	color: var(--calce);
	font-family: var(--famiglia-base);
	font-weight: var(--peso-corpo);
	font-stretch: var(--larghezza-corpo);
	font-size: var(--misura-16);
	line-height: var(--interlinea-corpo);
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, ul, ol, dl {
	margin: 0 0 calc(var(--passo) * 2);
}

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

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

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

h1, h2, h3 {
	font-weight: var(--peso-display);
	font-stretch: var(--larghezza-display);
	/* Ripete gli stessi valori: la proprietà font-stretch da sola non basta
	   ovunque per impegnare l'asse variabile wdth in modo affidabile. */
	font-variation-settings: "wght" var(--peso-display), "wdth" 112;
	letter-spacing: var(--avvicinamento-display);
	line-height: var(--interlinea-display);
}

h1 { font-size: var(--misura-48); }
h2 { font-size: var(--misura-34); }
h3 { font-size: var(--misura-26); }

h4, h5, h6 {
	font-size: var(--misura-20);
	font-weight: var(--peso-dati);
	line-height: var(--interlinea-corpo);
}

/* Righe di testo sotto i 72 caratteri (01-DESIGN.md) */
.contenuto p,
.contenuto li {
	max-width: 72ch;
}

/* Dati tecnici e numeri: peso 500, cifre tabellari */
.dati {
	font-weight: var(--peso-dati);
	font-variant-numeric: tabular-nums;
}

/* Nome dell'articolo: l'unico impiego di Bodoni Moda (04-BRAND-E-LINGUE.md).
   Il max() impedisce che scenda sotto i 20px, dove le grazie spariscono. */
.nome-articolo {
	font-family: var(--famiglia-articolo);
	font-weight: var(--peso-corpo);
	font-size: max(20px, 1em);
}

/* ---- Link e focus ---- */

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: currentColor;
	transition: text-decoration-thickness var(--durata-micro) var(--curva);
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Focus da tastiera sempre visibile: anello in accento con alone scuro,
   così regge sia sul fondo cabina sia sul carbone. */
:focus-visible {
	outline: 2px solid var(--accento);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(34, 33, 31, 0.45);
}

::selection {
	background: var(--calce);
	color: var(--carbone);
}

/* ---- Movimento ridotto ---- */

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

	html {
		scroll-behavior: auto !important;
	}
}

/* ---- Testata e piè di pagina: superfici carbone ---- */

.testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--passo) * 3);
	background: var(--carbone);
	color: var(--calce);
	padding: calc(var(--passo) * 2) var(--margine-lato);
}

.testata a {
	text-decoration: none;
}

/* Il logo in testata è stemma + lettering affiancati, non si anima
   (04-BRAND-E-LINGUE.md). */
.marchio-testata {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.marchio-testata .stemma {
	height: 40px;
	width: auto;
}

.marchio-testata .lettering {
	height: 20px;
	width: auto;
}

.navigazione-principale ul,
.navigazione-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--passo) * 3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pie-pagina {
	background: var(--carbone);
	color: var(--calce);
	padding: calc(var(--passo) * 6) var(--margine-lato) calc(var(--passo) * 4);
	margin-top: calc(var(--passo) * 8);
}

.pie-pagina a {
	text-decoration: none;
}

.marchio-footer {
	display: inline-block;
}

.marchio-footer img {
	height: 72px;
	width: auto;
}

.colofone {
	color: var(--calce-fioca);
	font-size: var(--misura-14);
	margin: calc(var(--passo) * 3) 0 0;
}

/* ---- Contenuto ---- */

.contenuto {
	max-width: var(--contenitore-max);
	margin-inline: auto;
	padding: calc(var(--passo) * 6) var(--margine-lato);
	min-height: 60vh;
}

/* ---- Salta al contenuto ---- */

.salta-contenuto {
	position: absolute;
	left: -9999px;
}

.salta-contenuto:focus {
	position: fixed;
	left: calc(var(--passo) * 2);
	top: calc(var(--passo) * 2);
	z-index: 100;
	background: var(--carbone);
	color: var(--calce);
	padding: var(--passo) calc(var(--passo) * 2);
	text-decoration: none;
}