/**
 * Struttura e composizione delle pagine.
 *
 * Nessun valore visivo è scritto qui: tutto arriva dai token. Questo file
 * descrive come le cose sono disposte, non che aspetto hanno.
 */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--pc-color-paper);
	color: var(--pc-color-ink);
	font-family: var(--pc-font-body);
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--pc-font-display);
	font-weight: var(--pc-weight-bold);
	line-height: var(--pc-leading-tight);
	letter-spacing: var(--pc-tracking-tight);
	margin: 0 0 var(--pc-space-4);
	text-wrap: balance;
}

p { margin: 0 0 var(--pc-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--pc-color-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--pc-color-accent-hover); }

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

:focus-visible {
	outline: 2px solid var(--pc-color-accent);
	outline-offset: 2px;
}

/* Il salto al contenuto è visibile solo quando serve. */
.salta-al-contenuto {
	position: absolute;
	left: -9999px;
	top: var(--pc-space-2);
	z-index: 100;
	background: var(--pc-color-ink);
	color: var(--pc-color-paper);
	padding: var(--pc-space-3) var(--pc-space-4);
	border-radius: var(--pc-radius);
}

.salta-al-contenuto:focus { left: var(--pc-space-2); }

.solo-lettori-schermo {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------- */
/* Contenitori                                                            */
/* --------------------------------------------------------------------- */
.contenitore {
	width: 100%;
	max-width: var(--pc-measure-wide);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.contenitore--stretto { max-width: var(--pc-measure-text); }

.sezione { padding-block: var(--pc-space-7); }
.sezione--ampia { padding-block: var(--pc-space-8); }
.sezione + .sezione { border-block-start: var(--pc-border-width) solid var(--pc-color-rule); }
.sezione--fondale { background: var(--pc-color-paper-alt); }

/* --------------------------------------------------------------------- */
/* Testata                                                                */
/* Sobria e stabile: l'identità la porta il marchio, non la decorazione.  */
/* --------------------------------------------------------------------- */
.testata {
	border-block-end: var(--pc-border-width) solid var(--pc-color-rule);
	background: var(--pc-color-paper);
}

.testata__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	min-height: 4rem;
	padding-block: var(--pc-space-3);
}

.marchio {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-3);
	text-decoration: none;
	color: inherit;
}

.marchio__testo { display: grid; gap: 2px; }

.marchio__nome {
	font-family: var(--pc-font-display);
	font-weight: var(--pc-weight-bold);
	font-size: var(--pc-text-base);
	letter-spacing: var(--pc-tracking-tight);
	line-height: 1;
}

.marchio__qualifica {
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	color: var(--pc-color-ink-muted);
	line-height: 1;
}

/* Marchio proprietario reso a timbro (sez. 22.5): monocromatico,
   leggermente irregolare, chiaramente privato. Mai un sigillo pubblico. */
.timbro {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--pc-color-ink);
}

.navigazione { display: flex; align-items: center; gap: var(--pc-space-5); }

.navigazione__elenco {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--pc-space-5);
}

@media (min-width: 52rem) {
	.navigazione__elenco { display: flex; }
}

.navigazione__elenco a {
	color: var(--pc-color-ink-muted);
	text-decoration: none;
	font-size: var(--pc-text-small);
}

.navigazione__elenco a:hover,
.navigazione__elenco .current-menu-item > a { color: var(--pc-color-ink); }

/* --------------------------------------------------------------------- */
/* Bottoni condivisi con il plugin                                        */
/* --------------------------------------------------------------------- */
.bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pc-space-2);
	min-height: 2.75rem;
	padding: var(--pc-space-3) var(--pc-space-5);
	font: inherit;
	font-weight: var(--pc-weight-medium);
	border: var(--pc-border-width) solid transparent;
	border-radius: var(--pc-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pc-motion), border-color var(--pc-motion);
}

.bottone--primario {
	background: var(--pc-color-accent);
	color: var(--pc-color-accent-ink);
}

.bottone--primario:hover { background: var(--pc-color-accent-hover); color: var(--pc-color-accent-ink); }

.bottone--contorno {
	border-color: var(--pc-color-rule-strong);
	color: var(--pc-color-ink);
}

.bottone--contorno:hover { border-color: var(--pc-color-ink); color: var(--pc-color-ink); }

/* --------------------------------------------------------------------- */
/* Apertura                                                               */
/* Il prezzo non domina: prima si capisce il servizio (sez. 24.2).        */
/* --------------------------------------------------------------------- */
.apertura { padding-block: var(--pc-space-8) var(--pc-space-7); }

.apertura__titolo {
	font-size: var(--pc-text-hero);
	max-width: 18ch;
	margin-block-end: var(--pc-space-5);
}

.apertura__testo {
	font-size: var(--pc-text-lead);
	max-width: 46ch;
	color: var(--pc-color-ink-muted);
	margin-block-end: var(--pc-space-3);
}

.apertura__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	margin-block-start: var(--pc-space-6);
}

/* Nota sulla natura del servizio: chiara, mai trasformata in titolo. */
.nota-servizio {
	font-size: var(--pc-text-small);
	color: var(--pc-color-ink-muted);
	border-inline-start: var(--pc-border-strong) solid var(--pc-color-rule);
	padding-inline-start: var(--pc-space-4);
	margin-block-start: var(--pc-space-6);
	max-width: 52ch;
}

/* --------------------------------------------------------------------- */
/* Scheda dati: l'impaginazione da documento amministrativo               */
/* --------------------------------------------------------------------- */
.scheda {
	border: var(--pc-border-width) solid var(--pc-color-rule);
	border-radius: var(--pc-radius-lg);
	padding: var(--pc-space-5);
	background: var(--pc-color-paper);
}

.etichetta-micro {
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	color: var(--pc-color-ink-muted);
	margin: 0 0 var(--pc-space-2);
}

.dato-codice {
	font-family: var(--pc-font-mono);
	letter-spacing: var(--pc-tracking-code);
}

.titolo-sezione {
	font-size: var(--pc-text-h2);
	margin-block-end: var(--pc-space-5);
}

.occhiello {
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	color: var(--pc-color-ink-muted);
	margin: 0 0 var(--pc-space-3);
}

/* --------------------------------------------------------------------- */
/* Risultato fisico (sez. 24.3)                                           */
/* --------------------------------------------------------------------- */
.risultato {
	display: grid;
	gap: var(--pc-space-6);
	align-items: center;
}

@media (min-width: 48rem) {
	.risultato { grid-template-columns: 1fr 1fr; }
}

.risultato__figura { margin: 0; }

.risultato__segnaposto {
	aspect-ratio: 3 / 2;
	background: var(--pc-color-paper-deep);
	border: var(--pc-border-width) solid var(--pc-color-rule);
	border-radius: var(--pc-radius-lg);
	display: grid;
	place-items: center;
	color: var(--pc-color-ink-faint);
	font-size: var(--pc-text-small);
	text-align: center;
	padding: var(--pc-space-5);
}

.risultato__didascalia {
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	color: var(--pc-color-ink-faint);
	margin-block-start: var(--pc-space-2);
}

/* --------------------------------------------------------------------- */
/* Contenuto editoriale                                                   */
/* --------------------------------------------------------------------- */
.contenuto { max-width: var(--pc-measure-text); }
.contenuto h2 { font-size: var(--pc-text-h2); margin-block-start: var(--pc-space-7); }
.contenuto h3 { font-size: var(--pc-text-h3); margin-block-start: var(--pc-space-6); }
.contenuto ul, .contenuto ol { padding-inline-start: var(--pc-space-5); margin-block-end: var(--pc-space-4); }
.contenuto li { margin-block-end: var(--pc-space-2); }

.contenuto blockquote {
	margin: var(--pc-space-5) 0;
	padding-inline-start: var(--pc-space-4);
	border-inline-start: var(--pc-border-strong) solid var(--pc-color-rule);
	color: var(--pc-color-ink-muted);
}

.contenuto table { width: 100%; border-collapse: collapse; margin-block-end: var(--pc-space-5); }
.contenuto th, .contenuto td {
	text-align: start;
	padding: var(--pc-space-3);
	border-block-end: var(--pc-border-width) solid var(--pc-color-rule);
}
.contenuto th { font-size: var(--pc-text-small); text-transform: uppercase; letter-spacing: var(--pc-tracking-label); color: var(--pc-color-ink-muted); }

.pagina__intestazione {
	padding-block: var(--pc-space-7) var(--pc-space-5);
	border-block-end: var(--pc-border-width) solid var(--pc-color-rule);
	margin-block-end: var(--pc-space-6);
}

.pagina__titolo { font-size: var(--pc-text-h1); margin: 0; }

/* --------------------------------------------------------------------- */
/* Chiusura                                                               */
/* I dati del gestore stanno in fondo a ogni pagina (sez. 3): sono una    */
/* misura di fiducia, non un obbligo da nascondere.                       */
/* --------------------------------------------------------------------- */
.chiusura {
	border-block-start: var(--pc-border-width) solid var(--pc-color-rule);
	background: var(--pc-color-paper-alt);
	padding-block: var(--pc-space-7);
	margin-block-start: var(--pc-space-8);
}

.chiusura__griglia {
	display: grid;
	gap: var(--pc-space-6);
}

@media (min-width: 44rem) {
	.chiusura__griglia { grid-template-columns: 1.4fr 1fr 1fr; }
}

.chiusura__titolo {
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	color: var(--pc-color-ink-muted);
	margin: 0 0 var(--pc-space-3);
}

.chiusura__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pc-space-2); }
.chiusura__elenco a { color: var(--pc-color-ink-muted); text-decoration: none; font-size: var(--pc-text-small); }
.chiusura__elenco a:hover { color: var(--pc-color-ink); }

.chiusura__coda {
	margin-block-start: var(--pc-space-6);
	padding-block-start: var(--pc-space-4);
	border-block-start: var(--pc-border-width) solid var(--pc-color-rule);
}

/* --------------------------------------------------------------------- */
/* Selettore del tema chiaro/scuro                                        */
/* --------------------------------------------------------------------- */
.tema-switch {
	background: none;
	border: var(--pc-border-width) solid var(--pc-color-rule);
	border-radius: var(--pc-radius);
	color: var(--pc-color-ink-muted);
	cursor: pointer;
	font: inherit;
	font-size: var(--pc-text-micro);
	text-transform: uppercase;
	letter-spacing: var(--pc-tracking-label);
	padding: var(--pc-space-2) var(--pc-space-3);
	min-height: 2rem;
}

.tema-switch:hover { color: var(--pc-color-ink); border-color: var(--pc-color-rule-strong); }

/* --------------------------------------------------------------------- */
/* Stampa: la pagina pratica deve poter diventare un foglio               */
/* --------------------------------------------------------------------- */
@media print {
	.testata, .chiusura, .apertura__azioni, .tema-switch, .pc-completamento { display: none !important; }
	body { background: #fff; color: #000; }
	.contenitore { max-width: none; padding: 0; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --------------------------------------------------------------------- */
/* Elenco articoli (aggiornamenti e avvisi di servizio)                   */
/* --------------------------------------------------------------------- */
.elenco-articoli {
	display: grid;
	gap: var(--pc-space-6);
	max-width: var(--pc-measure-text);
}

.articolo {
	padding-block-end: var(--pc-space-6);
	border-block-end: var(--pc-border-width) solid var(--pc-color-rule);
}

.articolo:last-child { border-block-end: 0; }

.articolo__titolo { font-size: var(--pc-text-h3); margin-block-end: var(--pc-space-3); }
.articolo__titolo a { color: inherit; text-decoration: none; }
.articolo__titolo a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Paginazione                                                            */
/* --------------------------------------------------------------------- */
.pagination,
.pagina__paginazione {
	margin-block: var(--pc-space-7);
	padding-block-start: var(--pc-space-5);
	border-block-start: var(--pc-border-width) solid var(--pc-color-rule);
}

.pagination .nav-links,
.pagina__paginazione {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-2);
	align-items: center;
}

.pagination .page-numbers,
.pagina__paginazione a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--pc-space-3);
	border: var(--pc-border-width) solid var(--pc-color-rule);
	border-radius: var(--pc-radius);
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-small);
	text-decoration: none;
	color: var(--pc-color-ink-muted);
}

.pagination .page-numbers:hover { border-color: var(--pc-color-rule-strong); color: var(--pc-color-ink); }

.pagination .page-numbers.current {
	background: var(--pc-color-accent);
	border-color: var(--pc-color-accent);
	color: var(--pc-color-accent-ink);
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* La navigazione resta disponibile anche su telefoni e con zoom elevato. */
@media (max-width: 51.99rem) {
	.testata__interno { flex-wrap: wrap; }
	.navigazione { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: var(--pc-space-3); }
	.navigazione__elenco { gap: var(--pc-space-2) var(--pc-space-4); }
	.navigazione__elenco a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.tema-switch { min-height: 2.75rem; }