/* ============================================================================
   BASE — azzeramento, elementi di testo e impianto della pagina
   ============================================================================

   Riguarda ciò che vale ovunque: come si comportano i tag HTML di base, quanto
   è largo il contenuto, dove va il margine bianco laterale. I singoli pezzi
   ricorrenti (bottoni, card, sopratitoli) stanno in `components.css`; barra in
   alto e piede stanno in `header.css` e `footer.css`.

   Tutti i colori e le misure arrivano da `tokens.css`: qui non compare nessun
   valore scritto a mano.
   ========================================================================= */

/* --- Azzeramento minimo -----------------------------------------------------
   Solo le tre correzioni che servono davvero, invece di un foglio di reset di
   terze parti: il progetto è volutamente leggero. */

*,
*::before,
*::after {
  box-sizing: border-box; /* le misure comprendono bordo e imbottitura */
}

html {
  -webkit-text-size-adjust: 100%; /* iOS non ingrandisce il testo a modo suo */
  scroll-behavior: smooth;
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non deve subire
   lo scorrimento animato: per alcune persone è causa di nausea o vertigini. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Corpo della pagina ---------------------------------------------------- */

body {
  margin: 0;
  background: var(--deep);
  color: var(--ice);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

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

p {
  margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
}

/* --- Contorno del focus -----------------------------------------------------
   Il rettangolo che segnala dove ci si trova navigando con il tasto Tab. Va
   lasciato sempre visibile: toglierlo rende il sito inutilizzabile senza
   mouse. `:focus-visible` lo mostra a chi usa la tastiera e non a chi clicca. */

:focus-visible {
  outline: 2px solid var(--ultra-hi);
  outline-offset: 3px;
}

/* --- Impianto --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  padding-block: var(--section-pad);
}

/* Il contenuto principale non deve mostrare il proprio contorno di focus
   quando lo skip link ci porta dentro: il salto è già evidente di suo. */
main:focus {
  outline: none;
}

/* --- Testo riservato agli screen reader -------------------------------------
   Testo presente nella pagina ma non visibile: serve a chi la ascolta. Non si
   usa `display: none`, che lo toglierebbe anche agli screen reader. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Salta al contenuto -----------------------------------------------------
   Primo collegamento della pagina. Sta fuori dallo schermo finché non viene
   raggiunto con il tasto Tab, e allora compare in alto a sinistra. */

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  background: var(--ultra);
  color: var(--on-accent);

  &:focus {
    left: 0;
    top: 0;
  }
}