/* ============================================================================
   BASE — azzeramento, elementi HTML e accessibilità.
   Qui si definisce come si comportano i tag, non i componenti dell'interfaccia.
   ============================================================================ */

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

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

body {
    margin: 0;
    font-family: var(--carattere);
    font-size: var(--testo-base);
    line-height: 1.5;
    color: var(--testo);
    background: var(--sfondo);
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p { margin: 0 0 .8em; }

a { color: var(--primario-pieno); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Il contorno di messa a fuoco non si toglie mai: è la bussola di chi naviga
   da tastiera e di chi usa una tecnologia assistiva. */
:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 2px;
    border-radius: 3px;
}

/* I campi hanno già un bordo proprio: l'anello staccato vi si sommerebbe in un
   doppio bordo. Qui la messa a fuoco è una sola: bordo colorato con alone
   attaccato (in componenti.css), altrettanto visibile da tastiera. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

.salta-al-contenuto {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--superficie);
    padding: 10px 16px;
    border-radius: var(--raggio-piccolo);
    box-shadow: var(--ombra-media);
}
.salta-al-contenuto:focus { left: 8px; }

fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; margin: 0; }
legend { font-size: var(--testo-piccolo); font-weight: 600; padding: 0 6px; color: var(--testo-tenue); }

/* I campi data e ora usano il carattere dell'applicazione: alcuni motori applicano
   ai controlli di sistema un carattere proprio, e si vede. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    font-family: inherit;
    font-size: inherit;
}