/* La barra delle pagine legali, e la lingua unica.
 *
 * Condiviso da tutte e sei: privacy di Sorsus, Zampario, Gironzolo e del
 * sito, più le due pagine di cancellazione account. Ognuna ha la sua palette
 * (Zampario viola, Gironzolo corallo…) e questo foglio non la conosce: usa
 * solo le variabili che quelle definiscono, così una pagina nuova eredita la
 * barra senza toccare niente qui.
 *
 * ⚠️ Va incluso PRIMA del <style> della pagina, o le sue regole vincono. */

/* ---------- La barra che resta ---------- */

/* Prima stava solo in fondo, il ritorno alla home: chi legge una lingua sola
 * non arriva mai in fondo, e restava senza via d'uscita (corretto il
 * 01/09/2026). Ora è appiccicata in alto e non se ne va mai. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}

/* Stessa misura del `.wrap` della pagina, così il contenuto della barra sta
 * incolonnato col testo sotto invece di galleggiare al bordo dello schermo. */
.barra .dentro {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.barra .indietro {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  /* Area di tocco piena altezza: 56 px verticali, oltre i 24 minimi del
     criterio 2.5.8 e comodi anche col pollice. */
  padding: 8px 0;
  /* ⚠️ Su uno schermo stretto "Linchetto Studio" andava a capo e la barra
     cresceva di una riga — peggiorato da quando i pulsanti sono due. Resta
     su una riga: a 360 px ci sta tutto con margine. */
  white-space: nowrap;
}
.barra .indietro:hover { color: var(--accent); }
.barra .indietro .freccia { color: var(--accent); font-size: 1.1rem; line-height: 1; }

/* Il selettore della lingua, uguale a quello della home. */
.barra .langbtn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .8rem;
  letter-spacing: .05em;
  font-family: inherit;
  cursor: pointer;
}
.barra .langbtn:hover { border-color: var(--accent); }
/* Il menu delle lingue, dove la pagina ne ha più di due: stesso aspetto del
   bottone, con la freccia del sistema. */
.barra select.langbtn { padding: 7px 10px; }

.barra select:focus-visible,
.barra a:focus-visible,
.barra button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* La barra si è presa lo spazio in cima: il primo titolo non ha più bisogno
   dei 32 px che aveva quando era lui il primo elemento della pagina. */
.barra + .wrap { padding-top: 12px; }

/* ---------- «Vai al contenuto» ---------- */

/* Il primo link della pagina, invisibile finché non ci si arriva col tasto
 * Tab: salta la barra e porta dritto al testo. Chi naviga da tastiera,
 * senza, deve attraversare l'intestazione a ogni pagina.
 *
 * ⚠️ Sta qui e non nel <style> di ogni pagina perché è chrome condiviso come
 * la barra — e perché due pagine (Sorsus e la privacy del sito) non ce
 * l'avevano proprio.
 *
 * ⚠️ Fuori dallo schermo con `left:-9999px` e NON con `display:none`: quello
 * lo toglierebbe anche dall'ordine di tabulazione, cioè proprio a chi
 * serve. */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed;
  left: 20px;
  top: 14px;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 10px 16px;
  /* ⚠️ SOPRA la barra (che sta a 20), o quando compare ci finisce sotto —
     cioè è invisibile proprio per l'unica persona che lo usa. */
  z-index: 30;
}

/* ⚠️ **Il bersaglio del salto vuole `tabindex="-1"`** (è nell'HTML di ogni
 * pagina). Senza, saltare sposta la PAGINA ma non il FUOCO: il Tab successivo
 * ripartirebbe da dov'era, cioè dalla barra, e il link avrebbe fatto
 * scorrere lo schermo senza far saltare un bel niente — che è il modo più
 * subdolo di non funzionare, perché a occhio sembra a posto.
 *
 * L'anello di fuoco qui si toglie di proposito: non è un comando che si
 * raggiunge tabulando, è una regione dove si è appena atterrati, e il
 * riscontro visivo è il salto stesso. */
#contenuto:focus { outline: none; }

/* ⚠️ E il bersaglio va tenuto SOTTO la barra: senza questo, saltare porta il
 * titolo esattamente a filo dello schermo — cioè dietro la barra, che è alta
 * 56 px e sta appiccicata lì sopra. Si atterrerebbe con le prime righe
 * coperte. */
#contenuto { scroll-margin-top: 72px; }

/* «Datenschutzerklärung» è una parola sola: sul telefono il titolo usciva
 * dallo schermo. Si va a capo anche dentro la parola, col trattino dove la
 * lingua lo prevede. Qui e non nelle pagine, da quando tutte le pagine
 * legali delle app parlano tedesco (18/10/2026). */
header > div { min-width: 0; }
header h1, header .sub { overflow-wrap: anywhere; hyphens: auto; }

/* ---------- Una lingua per volta ---------- */

/* Stesso meccanismo della home (`data-active` su <html>), e per la stessa
 * ragione: i due testi restano tutti e due nell'HTML — quindi un motore di
 * ricerca li trova entrambi e non serve una pagina per lingua — ma se ne
 * vede uno solo.
 *
 * ⚠️ Prima le pagine mostravano ITALIANO e INGLESE uno sotto l'altro: la
 * pagina risultava lunga il doppio, e chi leggeva solo la prima metà non
 * arrivava mai al fondo. */
[data-lang-en] { display: none; }
html[data-active="en"] [data-lang-it] { display: none; }
html[data-active="en"] [data-lang-en] { display: revert; }

/* Le pagine con più lingue (data-lingue su <html>: dal 18/10/2026 tutte le
   pagine legali delle app, che parlano cinque lingue come le app; restano in
   italiano e inglese la privacy del sito e l'indice /legali): ogni lingua in
   più nasconde l'italiano e mostra la sua. */
[data-lang-de], [data-lang-fr], [data-lang-es] { display: none; }
html[data-active="de"] [data-lang-it],
html[data-active="fr"] [data-lang-it],
html[data-active="es"] [data-lang-it] { display: none; }
html[data-active="de"] [data-lang-de],
html[data-active="fr"] [data-lang-fr],
html[data-active="es"] [data-lang-es] { display: revert; }