/* =====================================================================================
   Curriculum Facile — foglio di stile dell'interfaccia
   =====================================================================================

   Scritto a mano, senza framework né compilazione: su hosting condiviso ogni passaggio
   di build è un pezzo in più che può mancare al momento del caricamento dei file.

   Qui, a differenza del CSS dei modelli di curriculum, si può usare tutto ciò che i
   browser moderni supportano — flexbox, grid, custom property — perché questo foglio
   non deve mai passare da Dompdf.

   Organizzazione:
     1. Token          colori, spazi, tipografia
     2. Reset
     3. Impianto       contenitori, griglie
     4. Componenti     bottoni, campi, card, avvisi
     5. Struttura      intestazione, piè di pagina
     6. Pagine         landing, area utente, editor
     7. Utilità
   ===================================================================================== */


/* ------------------------------------------------------------------ 1. Token -------- */

:root {
    /* ------------------------------------------------------------------------
       Palette del sistema di progetto «blueprint».

       Un fondo carta, un inchiostro quasi nero e un solo accento: un blu acciaio
       smorzato. Nessuna sfumatura, nessun secondo colore in gara — la gerarchia la
       fanno il peso del carattere, i filetti e lo spazio. È una scelta coerente col
       prodotto: la pagina non deve rubare l'occhio al curriculum che mostra.

       I nomi delle scale restano quelli di prima (--blu-*, --verde-*) perché sono
       usati in un centinaio di regole: cambiano i valori, non i riferimenti.
       ------------------------------------------------------------------------ */

    --fondo: #f2f2f3;
    --superficie-piana: #e9e9ea;
    --inchiostro: #1d1f20;
    --filetto: rgba(29, 31, 32, 0.16);

    /* Accento: verde pino. La scala è costruita sulle stesse luminosità dei grigi,
       così un passo qualsiasi dell'uno pesa quanto il passo corrispondente dell'altro.
       Il gradino 500 è stato scelto perché regge il contrasto in entrambi i versi:
       5,4:1 come testo sulla carta e 5,4:1 per il testo chiaro sul bottone pieno.
       Sopra quel valore il verde sbiadisce, sotto diventa cupo.

       I nomi restano «--blu-*»: sono citati in un centinaio di regole, e rinominarli
       darebbe solo l'occasione di dimenticarne una. */
    --blu-50: #eff5f2;
    --blu-100: #dcebe4;
    --blu-200: #b8d6c9;
    --blu-300: #8bbaa7;
    --blu-400: #5c9b83;
    --blu-500: #2f6e57;
    --blu-600: #28614c;
    --blu-700: #1f4d3d;
    --blu-800: #17392d;
    --blu-900: #0f261e;

    /* Accento secondario: lo stesso verde spostato appena verso il freddo. Serve a
       distinguere una seconda famiglia di elementi senza introdurre un colore nuovo. */
    --ciano-50: #eef5f3;
    --ciano-100: #d9eae6;
    --ciano-200: #b2d3cb;
    --ciano-300: #83b5aa;
    --ciano-400: #549587;
    --ciano-500: #2b6a5d;
    --ciano-600: #245d51;
    --ciano-700: #1c4a41;
    --ciano-800: #153731;
    --ciano-900: #0e2521;

    /* Il verde non fa più parte della tavolozza: dove serviva a dire «va bene»
       ora parla l'accento. Le variabili restano, puntate sull'accento, perché
       toglierle spezzerebbe regole sparse in quattro fogli di stile. */
    --verde-50: #eff5f2;
    --verde-100: #dcebe4;
    --verde-200: #b8d6c9;
    --verde-300: #8bbaa7;
    --verde-400: #5c9b83;
    --verde-500: #2f6e57;
    --verde-600: #28614c;
    --verde-700: #1f4d3d;
    --verde-800: #17392d;
    --verde-900: #0f261e;

    /* Nessuna sfumatura nel sistema: le superfici sono piane. Le variabili restano
       per non spezzare le regole che le citano, ma valgono una tinta unita. */
    --gradiente-marchio: #2f6e57;
    --gradiente-marchio-scuro: #0f261e;

    --ambra-50: #f6f1e6;
    --ambra-500: #9a7b3f;
    --ambra-600: #7d6231;

    --rosso-50: #f7edec;
    --rosso-500: #a8524c;
    --rosso-600: #8b423d;

    /* Grigi neutri, senza dominante: il colore lo mette solo l'accento. */
    --grigio-0: #ffffff;
    --grigio-25: #f5f5f8;
    --grigio-50: #f2f2f3;
    --grigio-100: #e7e7ea;
    --grigio-200: #d4d4d7;
    --grigio-300: #b7b7ba;
    --grigio-400: #98989b;
    --grigio-500: #7a7a7d;
    --grigio-600: #5d5d60;
    --grigio-700: #424244;
    --grigio-800: #2b2b2d;
    --grigio-900: #1d1f20;

    --testo: var(--grigio-900);
    --testo-tenue: var(--grigio-600);
    --testo-inverso: #f2f2f3;

    /* Il fondo è carta, non bianco: le superfici bianche restano per i riquadri che
       devono staccare, come l'anteprima del curriculum. */
    --sfondo: var(--fondo);
    --superficie: var(--grigio-0);
    --bordo: var(--filetto);
    --bordo-forte: rgba(29, 31, 32, 0.32);

    /* Scala tipografica a rapporto costante: le dimensioni si accordano fra loro
       invece di essere scelte una per una. */
    --testo-xs: 0.75rem;
    --testo-sm: 0.875rem;
    --testo-base: 1rem;
    --testo-lg: 1.125rem;
    --testo-xl: 1.375rem;
    --testo-2xl: 1.75rem;
    --testo-3xl: 2.25rem;
    --testo-4xl: 2.875rem;
    --testo-5xl: 3.5rem;

    /* Spaziature multiple di 4px. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Angoli vivi su tutta la piattaforma. I nomi restano — sono usati in una
       cinquantina di regole — così la scelta si cambia da qui e non ritoccando
       ogni foglio di stile. */
    --raggio-sm: 0;
    --raggio: 0;
    --raggio-lg: 0;
    --raggio-xl: 0;
    --raggio-tondo: 0;

    /* Ombre tinte d'inchiostro, non nere: su un fondo caldo il nero puro sporca. */
    --ombra-sm: 0 1px 2px rgba(43, 43, 45, 0.14);
    --ombra: 0 1px 2px rgba(43, 43, 45, 0.14);
    --ombra-md: 0 3px 10px rgba(43, 43, 45, 0.16);
    --ombra-lg: 0 12px 32px rgba(43, 43, 45, 0.22);

    --transizione: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    --larghezza-contenuto: 1160px;
    --larghezza-testo: 68ch;

    /* Outfit su tutta l'interfaccia. Una famiglia sola: i titoli si distinguono dal
       corpo per peso, dimensione e spaziatura, non cambiando carattere. Il carattere
       dei curriculum è un'altra cosa e lo sceglie chi compila — vedi FontCatalog.
       I ripieghi coprono i millisecondi prima che il file arrivi, e il caso in cui
       non arrivi affatto. */
    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-titoli: 'Outfit', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --peso-titoli: 600;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}


/* ------------------------------------------------------------------ 2. Reset -------- */

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

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

/* Chi ha attivato la riduzione del movimento nel sistema operativo non deve subire
   animazioni: per alcune persone provocano nausea o disorientamento reali. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--testo-base);
    line-height: 1.6;
    color: var(--testo);
    background: var(--sfondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* I titoli hanno una loro voce: condensata, quasi maiuscola, interlinea corta.
   È il tratto più riconoscibile del sistema, e vale la pena che sia una regola
   sola invece di trenta dichiarazioni sparse. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-titoli);
    font-weight: var(--peso-titoli);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--grigio-900);
}

/* Outfit non è un carattere stretto: in maiuscolo la crenatura negativa lo
   soffocherebbe. Qui la spaziatura resta appena aperta, che è ciò che rende
   leggibile una riga tutta maiuscola in un carattere geometrico. */
h1, h2 {
    text-transform: uppercase;
    letter-spacing: 0.005em;
}

/* Occhiello: la riga breve in maiuscoletto spaziato che introduce una sezione,
   spesso numerata («01 — Come funziona»). Nel sistema è monospaziata, e quel
   contrasto con i titoli condensati è ciò che dà alla pagina l'aria da tavola
   tecnica invece che da opuscolo. */
.occhiello {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--blu-700);
}

.occhiello--tenue {
    color: var(--testo-tenue);
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--blu-600);
    text-decoration: none;
    transition: color var(--transizione);
}

a:hover {
    color: var(--blu-700);
    text-decoration: underline;
}

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

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

/* Il contorno di messa a fuoco non si rimuove mai: è l'unico modo per capire dove
   ci si trova navigando da tastiera. Si sostituisce con uno più visibile. */
:focus-visible {
    outline: 3px solid var(--blu-400);
    outline-offset: 2px;
    border-radius: var(--raggio-sm);
}

::selection {
    background: var(--blu-100);
    color: var(--blu-900);
}


/* ------------------------------------------------------------- 3. Impianto ---------- */

.container {
    width: 100%;
    max-width: var(--larghezza-contenuto);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.container--stretto {
    max-width: 760px;
}

.container--medio {
    max-width: 940px;
}

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

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

.sezione--chiara {
    background: var(--superficie);
}

.sezione--tenue {
    background: var(--grigio-50);
}

.griglia {
    display: grid;
    gap: var(--sp-6);
}

.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .griglia--3,
    .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .griglia--2,
    .griglia--3,
    .griglia--4 { grid-template-columns: minmax(0, 1fr); }

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

.pila {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.riga {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.riga--tra {
    justify-content: space-between;
}


/* ------------------------------------------------------------ 4. Componenti --------- */

/* --- Bottoni --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.6875rem var(--sp-5);
    /* Nel sistema il bordo c'è sempre, anche sul bottone pieno: gli elementi sono
       oggetti disegnati, non superfici morbide. */
    border: 1px solid var(--bordo);
    border-radius: 0;
    /* I bottoni parlano con la voce dei titoli: condensata e maiuscola. */
    font-family: var(--font-titoli);
    font-size: 15px;
    font-weight: var(--peso-titoli);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transizione), border-color var(--transizione),
                color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
    /* Area di tocco sufficiente sul telefono: sotto i 44px si sbaglia bersaglio. */
    min-height: 44px;
}

.btn:hover {
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background: var(--blu-500);
    border-color: var(--blu-500);
    color: var(--testo-inverso);
    box-shadow: none;
}

.btn--primary:hover {
    background: var(--blu-600);
    color: var(--testo-inverso);
}

/* Il secondario è un contorno sulla carta, non una superficie chiara appoggiata
   sopra: nel sistema è trasparente con filetto. */
.btn--secondary {
    background: transparent;
    color: var(--grigio-900);
    border-color: var(--bordo);
}

.btn--secondary:hover {
    background: color-mix(in srgb, var(--testo) 7%, transparent);
    border-color: var(--grigio-400);
    color: var(--grigio-900);
}

/* Il bottone «fantasma» è un collegamento travestito: nel sistema non porta bordo
   né riquadro, altrimenti competerebbe con le azioni vere. */
.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--grigio-700);
    text-transform: none;
    font-family: var(--font);
    letter-spacing: 0;
    font-size: var(--testo-sm);
    font-weight: 500;
}

.btn--ghost:hover {
    background: transparent;
    color: var(--blu-700);
}

.btn--danger {
    background: var(--rosso-500);
    color: var(--testo-inverso);
}

.btn--danger:hover {
    background: var(--rosso-600);
    color: var(--testo-inverso);
}

.btn--danger-ghost {
    background: transparent;
    color: var(--rosso-600);
    border-color: var(--rosso-500);
}

.btn--danger-ghost:hover {
    background: var(--rosso-50);
}

.btn--grande {
    padding: 0.9375rem var(--sp-8);
    font-size: var(--testo-base);
    min-height: 52px;
    border-radius: var(--raggio-lg);
}

.btn--piccolo {
    padding: 0.4375rem var(--sp-3);
    font-size: var(--testo-xs);
    min-height: 36px;
}

.btn--pieno {
    width: 100%;
}

.btn--icona {
    padding: var(--sp-2);
    min-width: 40px;
    min-height: 40px;
}


/* --- Campi --- */

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.campo__label {
    font-size: var(--testo-sm);
    font-weight: 600;
    color: var(--grigio-700);
}

.campo__label .opzionale {
    font-weight: 400;
    color: var(--testo-tenue);
}

.campo__aiuto {
    font-size: var(--testo-xs);
    color: var(--testo-tenue);
    line-height: 1.5;
}

.campo__errore {
    font-size: var(--testo-xs);
    color: var(--rosso-600);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.6875rem var(--sp-3);
    /* Il campo è incavato nella carta, non appoggiato sopra: fondo leggermente più
       scuro della pagina e filetto sottile, come nel sistema. */
    background: var(--superficie-piana);
    border: 1px solid var(--bordo);
    border-radius: 0;
    font-size: var(--testo-base);
    line-height: 1.5;
    color: var(--testo);
    transition: border-color var(--transizione), box-shadow var(--transizione);
    /* 16px minimo su iOS, altrimenti Safari ingrandisce la pagina al focus. */
    min-height: 44px;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--grigio-400);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--blu-500);
    box-shadow: 0 0 0 3px var(--blu-100);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--rosso-500);
}

.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--rosso-50);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
    background: var(--grigio-50);
    color: var(--testo-tenue);
    cursor: not-allowed;
}

.textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}

.select {
    appearance: none;
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7688' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
}

/* Casella di spunta e interruttore */

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
    padding: var(--sp-1) 0;
}

.check input[type="checkbox"],
.check input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--blu-500);
    cursor: pointer;
    flex-shrink: 0;
}

.check__testo {
    font-size: var(--testo-sm);
    line-height: 1.55;
    color: var(--grigio-700);
}

.interruttore {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
}

.interruttore input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.interruttore__pista {
    width: 42px;
    height: 24px;
    background: var(--grigio-300);
    border-radius: var(--raggio-tondo);
    position: relative;
    transition: background-color var(--transizione);
    flex-shrink: 0;
}

.interruttore__pista::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 0;
    box-shadow: var(--ombra-sm);
    transition: transform var(--transizione);
}

.interruttore input:checked + .interruttore__pista {
    background: var(--blu-500);
}

.interruttore input:checked + .interruttore__pista::after {
    transform: translateX(18px);
}

.interruttore input:focus-visible + .interruttore__pista {
    outline: 3px solid var(--blu-400);
    outline-offset: 2px;
}


/* --- Card --- */

.card {
    /* Trasparente, non bianca: nel sistema una scheda è un contorno sulla carta.
       Il bianco resta ai riquadri che devono davvero staccare, come l'anteprima. */
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: 0;
    padding: var(--sp-6);
}

.card--interattiva {
    transition: border-color var(--transizione), box-shadow var(--transizione),
                transform var(--transizione);
}

.card--interattiva:hover {
    border-color: var(--blu-300);
    box-shadow: var(--ombra-md);
    transform: translateY(-2px);
}

.card__titolo {
    font-size: var(--testo-lg);
    margin-bottom: var(--sp-2);
}

.card__testo {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    line-height: 1.65;
}


/* --- Avvisi --- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--raggio);
    border: 1px solid transparent;
    font-size: var(--testo-sm);
    margin-block: var(--sp-4);
    line-height: 1.6;
}

.alert__icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert__text {
    flex: 1;
}

.alert__close {
    background: none;
    border: 0;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 var(--sp-1);
}

.alert__close:hover {
    opacity: 1;
}

.alert--success {
    background: var(--verde-50);
    border-color: #a8e0cc;
    color: #0a5c46;
}

.alert--error {
    background: var(--rosso-50);
    border-color: #f2bcbc;
    color: #8f2626;
}

.alert--info {
    background: var(--blu-50);
    border-color: var(--blu-200);
    color: var(--blu-800);
}

.alert--warning {
    background: var(--ambra-50);
    border-color: #f0d090;
    color: #7c4f06;
}


/* --- Etichette --- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0.1875rem var(--sp-2);
    border-radius: 0;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    font-size: var(--testo-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Le etichette non introducono colori nuovi: Premium è l'accento pieno, ATS il
   suo contorno. Due segni distinti senza uscire dalla tavolozza. */
.badge--premium {
    background: var(--blu-500);
    color: var(--testo-inverso);
}

.badge--ats {
    background: transparent;
    border: 1px solid var(--blu-500);
    color: var(--blu-700);
}

.badge--neutro {
    background: var(--grigio-100);
    color: var(--grigio-600);
}

.badge--blu {
    background: var(--blu-50);
    color: var(--blu-700);
}

.badge--rosso {
    background: var(--rosso-50);
    color: var(--rosso-600);
}


/* --- Barra di avanzamento --- */

.progresso {
    height: 8px;
    background: var(--grigio-200);
    border-radius: var(--raggio-tondo);
    overflow: hidden;
}

.progresso__barra {
    height: 100%;
    background: var(--blu-500);
    border-radius: var(--raggio-tondo);
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.progresso__barra--buono { background: var(--verde-500); }
.progresso__barra--medio { background: var(--ambra-500); }
.progresso__barra--basso { background: var(--rosso-500); }


/* ------------------------------------------------------------- 5. Struttura --------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--blu-600);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    z-index: 200;
    border-radius: 0 0 var(--raggio) 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Piana e opaca: il sistema non usa vetri smerigliati né trasparenze. */
    background: var(--fondo);
    border-bottom: 1px solid var(--bordo);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    /* Il nome del sito è scritto con la voce dei titoli: condensata e maiuscola. */
    font-family: var(--font-titoli);
    font-weight: var(--peso-titoli);
    font-size: 19px;
    color: var(--grigio-900);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.brand:hover {
    text-decoration: none;
    color: var(--grigio-900);
}

.brand__mark {
    color: var(--blu-500);
    display: flex;
}

/* Il segno del marchio resta quadrato anche quando è un file caricato. */
.brand__logo,
.brand__mark svg {
    border-radius: 0;
}

.site-header__toggle {
    display: none;
    background: none;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--sp-2);
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.burger,
.burger::before,
.burger::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--grigio-700);
    border-radius: 0;
    transition: transform var(--transizione), opacity var(--transizione);
}

.burger {
    position: relative;
}

.burger::before,
.burger::after {
    content: '';
    position: absolute;
    left: 0;
}

.burger::before { top: -6px; }
.burger::after { top: 6px; }

[aria-expanded="true"] .burger { background: transparent; }
[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.site-nav__list {
    display: flex;
    gap: var(--sp-6);
}

.site-nav__link {
    color: var(--grigio-600);
    font-size: var(--testo-sm);
    font-weight: 500;
    padding-block: var(--sp-2);
}

.site-nav__link:hover,
.site-nav__link.is-active {
    color: var(--blu-600);
    text-decoration: none;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

@media (max-width: 860px) {
    .site-header__toggle { display: inline-flex; }

    .site-nav {
        position: fixed;
        inset: 68px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-4);
        background: var(--superficie);
        border-bottom: 1px solid var(--bordo);
        padding: var(--sp-5);
        box-shadow: var(--ombra-lg);
        transform: translateY(-120%);
        transition: transform var(--transizione);
        max-height: calc(100vh - 68px);
        overflow-y: auto;
    }

    .site-nav.is-open { transform: translateY(0); }

    .site-nav__list {
        flex-direction: column;
        gap: var(--sp-1);
    }

    .site-nav__link {
        display: block;
        padding: var(--sp-3);
        border-radius: var(--raggio);
    }

    .site-nav__link:hover { background: var(--grigio-50); }

    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        padding-top: var(--sp-4);
        border-top: 1px solid var(--bordo);
    }
}

.site-footer {
    background: var(--grigio-900);
    color: var(--grigio-300);
    padding-block: var(--sp-16) var(--sp-8);
    margin-top: var(--sp-20);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-10);
}

@media (max-width: 860px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.brand--footer {
    color: #fff;
    margin-bottom: var(--sp-3);
}

.site-footer__claim {
    font-size: var(--testo-sm);
    line-height: 1.7;
    max-width: 34ch;
    color: var(--grigio-400);
}

.site-footer__title {
    font-size: var(--testo-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grigio-400);
    margin-bottom: var(--sp-4);
    font-weight: 600;
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.site-footer a {
    color: var(--grigio-300);
    font-size: var(--testo-sm);
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__bottom {
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--testo-xs);
    color: var(--grigio-400);
}


/* --- Banner cookie --- */

.cookie-banner {
    position: fixed;
    inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
    z-index: 150;
    background: var(--superficie);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-lg);
    box-shadow: var(--ombra-lg);
    max-width: 780px;
    margin-inline: auto;
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__inner {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-5);
}

.cookie-banner__title {
    font-size: var(--testo-base);
    margin-bottom: var(--sp-1);
}

.cookie-banner__text p {
    font-size: var(--testo-sm);
    color: var(--grigio-600);
    line-height: 1.6;
}

.cookie-banner__links {
    margin-top: var(--sp-2);
    font-size: var(--testo-xs);
}

.cookie-banner__actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .cookie-banner__inner { flex-direction: column; align-items: stretch; }
    .cookie-banner__actions { flex-direction: column-reverse; }
}


/* ------------------------------------------------------------------ 7. Utilità ------ */

.testo-centro { text-align: center; }
.testo-tenue { color: var(--testo-tenue); }
.testo-piccolo { font-size: var(--testo-sm); }
.testo-mini { font-size: var(--testo-xs); }
.testo-forte { font-weight: 600; }
.testo-bilanciato { text-wrap: balance; }
.misura { max-width: var(--larghezza-testo); }
.misura-centro { max-width: var(--larghezza-testo); margin-inline: auto; }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.nascondi { display: none !important; }

@media (max-width: 620px) {
    .nascondi-mobile { display: none !important; }
}

@media (min-width: 621px) {
    .solo-mobile { display: none !important; }
}

/* Logo caricato dall'amministratore. L'altezza è fissa e la larghezza libera: così
   un logo quadrato e uno molto largo occupano entrambi la stessa fascia verticale
   e l'intestazione non cambia altezza da un sito all'altro. */
.brand__logo {
    height: 34px;
    width: auto;
    max-width: 220px;
    display: block;
}

@media (max-width: 640px) {
    .brand__logo {
        height: 28px;
        max-width: 160px;
    }
}

/* Firma dell'autore, nell'ultima riga del piè di pagina. */
.site-footer__firma a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__firma a:hover {
    color: #fff;
}

/* ------------------------------------------------------- Cornice a squadretta ------ */
/*
   Il segno distintivo del sistema: quattro squadrette agli angoli, come i segni di
   registro su una tavola da disegno. Si applicano a ciò che deve dichiararsi
   «costruito» — il bottone principale, il riquadro dell'anteprima, le schede dei
   modelli — e mai a tutto, altrimenti diventano rumore.

   Le squadrette stanno *fuori* dal bordo, quindi l'elemento che le porta non può
   ritagliare quello che sborda.
*/
.squadrata {
    position: relative;
    border: 1px solid var(--bordo);
    border-radius: 0;
    overflow: visible;
}

.squadrata::before,
.squadrata::after,
.squadrata > .squadretta::before,
.squadrata > .squadretta::after {
    content: "";
    position: absolute;
    background: currentColor;
    color: inherit;
}

/* Le due squadrette in alto sono disegnate dallo pseudo-elemento del contenitore,
   le due in basso da un elemento figlio: servono quattro angoli e gli pseudo-elementi
   disponibili sono due per nodo. */
.squadrata > .squadretta {
    position: absolute;
    width: 11px;
    height: 11px;
    color: color-mix(in srgb, var(--testo) 55%, transparent);
    pointer-events: none;
}

.squadrata > .squadretta::before {
    left: 5px;
    top: 0;
    width: 1px;
    height: 100%;
}

.squadrata > .squadretta::after {
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
}

.squadrata > .squadretta--as { top: -6px; left: -6px; }
.squadrata > .squadretta--ad { top: -6px; right: -6px; }
.squadrata > .squadretta--bs { bottom: -6px; left: -6px; }
.squadrata > .squadretta--bd { bottom: -6px; right: -6px; }

/* Senza JavaScript e senza quattro <i> in ogni pulsante: la variante «automatica»
   disegna gli angoli con i soli pseudo-elementi del contenitore, usando due
   gradienti per lato. Rende meno bene di quattro elementi veri, ma si applica a
   qualsiasi bottone senza toccarne il markup. */
.squadrata--auto::before,
.squadrata--auto::after {
    width: 11px;
    height: 11px;
    background:
        linear-gradient(currentColor, currentColor) 5px 0 / 1px 11px no-repeat,
        linear-gradient(currentColor, currentColor) 0 5px / 11px 1px no-repeat;
    color: color-mix(in srgb, var(--testo) 45%, transparent);
    pointer-events: none;
}

.squadrata--auto::before { top: -6px; left: -6px; }
.squadrata--auto::after { bottom: -6px; right: -6px; }

/* Filetto di sezione: la riga sottile che nel sistema separa i blocchi di pagina. */
.filetto {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--bordo);
}

/* --------------------------------------------------------- Pannelli fluttuanti ---- */
/*
   Un menu che si apre sopra il contenuto non può essere trasparente come le schede
   in pagina: sotto ci passa il testo, e si legge tutto sovrapposto. Le schede sono
   contorni sulla carta, questi sono fogli appoggiati sopra — e devono coprire.
*/
.pannello-fluttuante {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2);
    background: var(--grigio-0);
    border: 1px solid var(--bordo-forte);
    border-radius: 0;
    box-shadow: var(--ombra-lg);
}

/* Le voci del menu sono righe piene: il bordo del bottone qui darebbe una griglia
   di riquadri dentro un riquadro. */
.pannello-fluttuante .btn {
    border-color: transparent;
    justify-content: flex-start;
    width: 100%;
    text-transform: none;
    font-family: var(--font);
    letter-spacing: 0;
    font-size: var(--testo-sm);
    min-height: 38px;
}

.pannello-fluttuante .btn:hover {
    background: var(--grigio-100);
}