/* Le pagine secondarie — account.html, termini.html, privacy.html, grazie.html — con la
 * stessa pelle della home: colori, caratteri, sfondo "aurora", logo e piede.
 *
 * ⚠ Qui ci sono SOLO le cose in comune, copiate da css/feed.css: il contenuto di ogni
 * pagina resta nel suo <style>. Questo file si carica DOPO quel blocco, così a parità
 * di selettore vince lui. Cambiando colori, logo o piede in feed.css, vanno cambiati
 * anche qui: sono due copie della stessa pelle, e due copie divergono.
 *
 * ⚠ Sta nell'allowlist di Program.cs (feedAssets): senza, le quattro pagine
 * resterebbero senza colori e senza caratteri, e nessun errore lo direbbe.
 */

/* ⚠ Anche `:root:not([data-theme="light"])`: le pagine avevano un tema scuro loro
   sotto `prefers-color-scheme`, con quel selettore più specifico. */
:root, :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #0B0716; --card: #15051F; --surface: #3D3045;
  --text: #FFFFFF; --muted: #AE9FB6; --line: rgb(255 255 255 / .14);
  --primary: #F4D755; --primary-fg: #000000; --err: #FF3E41; --ok: #29DD76;
  --accent: #F4D755;
  --spectrum: linear-gradient(90deg, #FF3E41, #FD9D51, #F4D755, #29DD76, #2B8EFF, #B987F4);
  --f-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body { background: var(--bg); color: var(--text); font-family: var(--f-body); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--text); }

/* ---- il logo in testata, come nella home */
.brand { display: inline-block; line-height: 0; text-decoration: none; }
.brand-logo { display: block; height: 3.6rem; width: auto; }
@media (max-width: 720px) { .brand-logo { height: 3rem; } }

/* ---- lo sfondo: l'aurora della home */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(80px);
  opacity: .32; mix-blend-mode: screen; will-change: transform;
  animation: aurora 18s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: #8261EE; }
.aurora i:nth-child(2) { width: 46vw; height: 46vw; right: -14vw; top: 6vw; background: #3EA8E6; animation-delay: -5s; }
.aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; top: 32vw; background: #FF3E41; opacity: .18; animation-delay: -9s; }
.aurora i:nth-child(4) { width: 34vw; height: 34vw; right: 8vw; bottom: -10vw; background: #4EDD8B; opacity: .16; animation-delay: -12s; }
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0, rgb(11 7 22 / .5) 60vh, rgb(11 7 22 / .8) 140vh);
}
@keyframes aurora { to { transform: translate3d(6vw, 5vw, 0) scale(1.15); } }
@media (max-width: 720px) { .aurora i { filter: blur(60px); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
/* ⚠ Le macchie dell'aurora escono dalla finestra: senza, la pagina scorrerebbe di lato. */
body { overflow-x: clip; }

/* ---- il piede: la barra arcobaleno e il ".me" a colori, come nella home */
.site-foot { position: relative; border-top: 0; background: rgb(0 0 0 / .35); }
.site-foot::before { content: ""; display: block; height: 6px; background: var(--spectrum); }
.foot-in { max-width: 960px; margin: 0 auto; padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom)); }
.foot-brand {
  display: inline-block; margin-bottom: .5rem; line-height: 1.2; color: var(--text);
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em;
}
.foot-brand span {
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-foot p { margin: 0; font-size: .875rem; color: var(--muted); }
.foot-link { margin-top: .6rem !important; }
.foot-link a { color: var(--muted); }
.foot-link a:hover { color: var(--primary); }
.foot-small { margin-top: .6rem !important; font-size: .8125rem !important; max-width: none !important; }

/* Unbounded è largo: alle misure dei vecchi titoli, sul telefono un "1. Chi siamo e
   cosa stai accettando" prendeva tre righe. I titoli dei documenti un passo più piccoli. */
h2 { font-size: 1.1rem; line-height: 1.3; }
h3 { font-size: .98rem; line-height: 1.35; }
.parte { font-size: 1.4rem; }