/* BASE */
/* ------------------------------------------------ */
/* Caratteri, azzeramento, contesti chiaro e scuro, tipografia e
   collegamenti. Tutto scritto in termini dei token di tema.css: qui
   dentro non deve comparire nessun valore letterale di colore. */


/* I CARATTERI */
/* ------------------------------------------------ */
/* Ospitati in static/media/caratteri/. Il perche' e la licenza stanno
   nel file LICENZA.txt li' accanto.

   Gli intervalli unicode servono a non far scaricare il file esteso a
   chi legge una pagina di solo italiano: il browser richiede il
   secondo file solo se in pagina compare un carattere che ci sta
   dentro. */

/* --- Marcellus, un peso solo --- */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/caratteri/marcellus-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: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/caratteri/marcellus-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Jost, carattere variabile --- */
/* Il peso e' dichiarato come intervallo: un solo file copre da 100 a
   900 con continuita'. Scrivere `font-weight: 400` farebbe credere al
   browser che sia un peso singolo, e i pesi 300 e 600 verrebbero
   deformati invece che disegnati. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caratteri/jost-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: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caratteri/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caratteri/jost-corsivo-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: "Jost";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caratteri/jost-corsivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}


/* I DUE CONTESTI */
/* ------------------------------------------------ */
/* Il meccanismo su cui poggia tutto il resto del foglio di stile.

   Nell'export una card su fondo chiaro e una su fondo scuro erano due
   blocchi di stile scritti per intero, ciascuno con i suoi colori
   letterali. Qui esiste una sola regola .card, e a cambiare non e' la
   regola ma il valore delle variabili: una sezione scura ridichiara
   otto token e tutto quello che contiene si adegua da solo.

   Gli altri fogli usano SOLO i nomi di questo blocco. Se in una regola
   compare --superficie-chiara invece di --superficie, quella regola
   smette di funzionare dentro una sezione scura. */

:root,
.contesto-chiaro {
  --fondo: var(--fondo-chiaro);
  --superficie: var(--superficie-chiara);
  --superficie-alt: var(--superficie-chiara-alt);
  --testo: var(--testo-su-chiaro);
  --testo-attenuato: var(--testo-su-chiaro-attenuato);
  --testo-tenue: var(--testo-su-chiaro-tenue);
  --bordo: var(--bordo-su-chiaro);
  --bordo-forte: var(--bordo-su-chiaro-forte);
  --bordo-tenue: var(--bordo-su-chiaro-tenue);
  --ombra-card: var(--ombra-card-chiara);
  --accento-leggibile: var(--accento-su-chiaro);
  --bagliore-contesto: var(--bagliore);
}

.contesto-scuro {
  --fondo: var(--fondo-scuro);
  --superficie: var(--superficie-scura);
  --superficie-alt: var(--superficie-scura-alta);
  --testo: var(--testo-su-scuro);
  --testo-attenuato: var(--testo-su-scuro-attenuato);
  --testo-tenue: var(--testo-su-scuro-tenue);
  --bordo: var(--bordo-su-scuro);
  --bordo-forte: var(--bordo-su-scuro-forte);
  --bordo-tenue: var(--bordo-su-scuro-tenue);
  --ombra-card: var(--ombra-card-scura);
  --accento-leggibile: var(--accento-tenue);
  --bagliore-contesto: var(--bagliore-su-scuro);
}


/* AZZERAMENTO */
/* ------------------------------------------------ */

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

/* Azzerare i margini di default evita di doverli poi disfare uno per
   uno: gli spazi li decide la scala, non il browser. */
body,
h1, h2, h3, h4,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* L'attributo hidden deve vincere sempre.

   Il browser lo applica con `[hidden] { display: none }`, che e' una
   regola del suo foglio di stile predefinito: qualunque nostra regola
   che dichiari un display — anche solo `.pannello { display: flex }` —
   ha piu' peso e la scavalca. Il risultato e' un elemento marcato come
   nascosto che resta in vista, e uno script che crede di averlo
   chiuso mentre e' li'.

   E' successo davvero, al pannello dell'assistente: restava sempre
   aperto, e siccome lo stato interno diceva "chiuso", il clic fuori
   non lo chiudeva. Questa riga toglie di mezzo la classe di problemi. */
[hidden] {
  display: none !important;
}

/* Sposta il bersaglio dell'ancora piu' in basso, cosi' la barra a
   isola non copre il titolo della sezione a cui si e' appena saltati. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--testo-m);
  font-weight: var(--peso-normale);
  line-height: var(--interlinea-ampia);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nessun elemento deve poter allargare il documento in orizzontale:
     con quattro aloni in posizione assoluta e' un rischio concreto. */
  overflow-x: hidden;
}

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

/* I bottoni non ereditano il carattere da soli. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}


/* TITOLI */
/* ------------------------------------------------ */
/* Marcellus, sempre e solo al peso 400: e' l'unico che esiste. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--interlinea-stretta);
  letter-spacing: 0;
}

h1 { font-size: var(--titolo-xl); }
h2 { font-size: var(--titolo-l); }
h3 { font-size: var(--titolo-s); }
h4 { font-size: var(--testo-xl); }


/* COLLEGAMENTI */
/* ------------------------------------------------ */

a {
  color: var(--accento-leggibile);
  text-decoration: none;
  transition: color var(--durata-rapida) ease,
              border-color var(--durata-rapida) ease;
}

a:hover {
  color: var(--accento-su-chiaro-forte);
}

.contesto-scuro a:hover {
  color: var(--accento-chiarissimo);
}

/* Dentro un testo lungo il collegamento va riconosciuto senza dover
   passarci sopra: nel corpo degli articoli torna sottolineato. */
.prosa a {
  border-bottom: 1px solid var(--bordo-forte);
}

.prosa a:hover {
  border-bottom-color: currentColor;
}


/* MESSA A FUOCO */
/* ------------------------------------------------ */
/* :focus-visible, non :focus: l'anello compare a chi naviga da
   tastiera e non a chi clicca con il mouse. Nell'export non c'era
   nessuno stato di messa a fuoco, il che rende il sito inutilizzabile
   senza puntatore. */

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: var(--raggio-xs);
}


/* SELEZIONE */
/* ------------------------------------------------ */

::selection {
  background: var(--accento-tenue);
  color: var(--testo-su-chiaro);
}


/* PROSA */
/* ------------------------------------------------ */
/* Il corpo di un articolo o di una pagina scritta in Markdown: e'
   l'unico posto in cui i tag arrivano senza classe, perche' li genera
   il convertitore. */

.prosa {
  max-width: var(--testo-massimo);
  font-size: var(--testo-l);
  line-height: var(--interlinea-ampia);
  color: var(--testo-attenuato);
}

.prosa > * + * {
  margin-top: var(--sp-5);
}

.prosa h2 {
  margin-top: var(--sp-14);
  font-size: var(--titolo-s);
  color: var(--testo);
}

.prosa h3 {
  margin-top: var(--sp-10);
  font-size: var(--testo-xl);
  color: var(--testo);
}

.prosa strong {
  font-weight: var(--peso-forte);
  color: var(--testo);
}

.prosa ul,
.prosa ol {
  padding-left: var(--sp-5);
}

.prosa li + li {
  margin-top: var(--sp-2);
}

.prosa li::marker {
  color: var(--accento);
}

.prosa blockquote {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--bordo-forte);
  font-style: italic;
  color: var(--testo);
}

.prosa hr {
  height: 0;
  margin: var(--sp-14) 0;
  border: 0;
  border-top: 1px solid var(--bordo);
}

.prosa img {
  border-radius: var(--raggio-m);
}


/* SERVIZIO */
/* ------------------------------------------------ */

/* Visibile ai lettori di schermo, invisibile a tutti gli altri. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Il salto al contenuto, prima voce raggiungibile con il tabulatore. */
.salta {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-testata);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--raggio-pillola);
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
  transform: translateY(-200%);
}

.salta:focus {
  transform: translateY(0);
}