/* Lo stile delle pagine di testo: privacy.html e supporto.html. Stessi colori
   e stesso tratto di index.html, ma a misura di lettura. Font di sistema:
   niente da scaricare. */
:root {
  --ink: #1B1A3A;
  --crema: #FFF6E5;
  --oro: #FFC93C;
  --sfondo: var(--crema);
  --testo: var(--ink);
  --tenue: #4A4870;
  --carta: #FFFFFF;
  --ombra: var(--ink);
  --link: #5236D9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sfondo: #16152F;
    --testo: #FFF6E5;
    --tenue: #C9C6E8;
    --carta: #1F1E40;
    --ombra: #000000;
    --link: #FFC93C;
  }
}
:root[data-theme="dark"] {
  --sfondo: #16152F;
  --testo: #FFF6E5;
  --tenue: #C9C6E8;
  --carta: #1F1E40;
  --ombra: #000000;
  --link: #FFC93C;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
.fascia { height: 14px; background: var(--oro); border-bottom: 2px solid var(--ink); }
.fascia.fondo { border-bottom: 0; border-top: 2px solid var(--ink); }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.marchio img {
  width: 40px; height: 40px;
  border: 2px solid var(--ink);
  background: var(--oro);
}
.marchio span { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }

.lingue { display: flex; gap: 8px; }
.lingue a {
  padding: 4px 10px;
  border: 2px solid var(--testo);
  color: var(--testo);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.lingue a[aria-current="true"] { background: var(--oro); color: var(--ink); border-color: var(--ink); }

h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { margin: 36px 0 10px; font-size: 21px; line-height: 1.25; }
h3 { margin: 22px 0 6px; font-size: 17px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.data { color: var(--tenue); font-size: 15px; margin-bottom: 24px; }
a { color: var(--link); text-underline-offset: 2px; }
strong { font-weight: 700; }

.riquadro {
  background: var(--carta);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ombra);
  padding: 18px 20px 6px;
  margin: 8px 0 24px;
}
.riquadro h2 { margin-top: 0; }

.contatto {
  display: inline-block;
  margin: 4px 0 18px;
  padding: 14px 18px;
  background: var(--oro);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ombra);
  font-weight: 800;
  text-decoration: none;
}
.contatto:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ombra); }

details {
  background: var(--carta);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ombra);
  margin: 0 0 14px;
}
summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
}
details > div { padding: 0 18px 4px; }

footer { margin-top: 40px; color: var(--tenue); font-size: 15px; }
footer a { color: inherit; }

/* Con JavaScript si vede solo la lingua scelta; senza, tutte e tre in fila. */
.js section[lang]:not(.attiva) { display: none; }