/* =========================================
   RESET & BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/*
   `hidden` deve vincere sempre. Basta una regola di questo foglio che dia un
   `display` a un elemento (un bottone `inline-flex`, per dire) perche
   l'attributo smetta di funzionare: lo stile dell'autore batte quello del
   browser, e l'elemento resta in pagina mentre il JavaScript e convinto di
   averlo nascosto.
*/
[hidden] { display: none !important; }

/* Nascosto visivamente ma leggibile dagli screen reader */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}