/* ==========================================================================
   Base — reset, tipografia, layout
   ========================================================================== */

/* --- Font (self-hosted, licenza OFL in assets/fonts/LICENZE.txt) ------------
   Sottoinsieme "latin" di Google Fonts: copre tutti i caratteri del sito (italiano compreso).
   Un carattere fuori da questo insieme (es. un nome con la "č") passa al font di riserva dello
   stack: per aggiungerlo servirebbe il sottoinsieme "latin-ext" con il suo unicode-range.
   Literata e Archivo sono variabili (peso e, per Literata, dimensione ottica: il browser la
   segue da solo con font-optical-sizing: auto). font-display: swap mostra subito il testo. */
@font-face {
  font-family: "Notable";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/notable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/literata-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/literata-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

* {
  margin: 0;
}

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

body {
  min-block-size: 100vh;
  background: var(--colore-fondo);
  color: var(--colore-testo);
  font-family: var(--font-testo);
  font-size: var(--testo-m);
  line-height: var(--interlinea-testo);
  /* Niente grassetti o corsivi finti (Notable ha un solo peso) */
  font-synthesis: none;
  /* Rete di sicurezza per tutto il testo: con testo ingrandito una parola lunga va a capo invece di far scorrere la pagina */
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* --- Tipografia ----------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--display-peso);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--display-spaziatura);
  text-transform: var(--display-maiuscolo);
  text-wrap: balance;
  overflow-wrap: break-word;
  /* In una griglia o in un contenitore flex il titolo può restringersi fino alla colonna: la parola
     più lunga va a capo (overflow-wrap) invece di allargare la pagina con testo ingrandito */
  min-inline-size: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--colore-accento);
  text-decoration-thickness: var(--filetto-sottile);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--colore-accento-hover);
}

::selection {
  background: var(--colore-selezione);
}

/* --- Focus ---------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-spessore) solid var(--colore-focus);
  outline-offset: var(--focus-offset);
}

main:focus {
  outline: none;
}

/* --- Layout --------------------------------------------------------------- */
.contenitore {
  inline-size: min(100% - 2 * var(--margine-pagina), var(--larghezza-max));
  margin-inline: auto;
}

.visivamente-nascosto {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Link di salto -------------------------------------------------------- */
.salta-contenuto {
  position: absolute;
  inset-inline-start: var(--margine-pagina);
  inset-block-start: var(--spazio-2xs);
  z-index: var(--z-salta-contenuto);
  padding: var(--spazio-2xs) var(--spazio-s);
  background: var(--colore-accento);
  color: var(--colore-su-accento);
  font-family: var(--font-ui);
  font-size: var(--testo-s);
  transform: translateY(-200%);
}

.salta-contenuto:focus {
  color: var(--colore-su-accento);
  transform: none;
}