/* SOS Flussi — stile condiviso, design system «SOSpermesso — Adesivo» (famiglia SOS).
 * Fonte: https://claude.ai/artifact/VsgC5Qtuj4iLQV5HoUmYnc (tokens.json, README, componenti).
 * Token con gli stessi nomi e valori di SOS Permesso (Sito_Nuovo/src/styles/main.css).
 * Ogni pagina carica questo file e tiene nel proprio <style> solo i suoi componenti.
 *
 * Colore di base di SOS Flussi: arancione (--brand), dove SOS Permesso usa il giallo.
 * È l'arancione di categoria del design system (cat-protection) con le sue sfumature.
 */

/* ---------- Token ---------- */
:root {
  --sp-yellow: #FFD400;
  --sp-yellow-tint: #FFF4C2;
  --sp-ink: #141414;
  --sp-red: #D62828;
  --sp-paper: #FFFDF5;
  --sp-white: #FFFFFF;
  --sp-muted: #5A5A5A;
  --sp-rule: #E6E1D3;

  /* Arancione SOS Flussi */
  --brand: #FF8A3D;        /* = cat-protection; testo sopra sempre sp-ink */
  --brand-deep: #F26B1D;   /* ombre e accenti del logo */
  --brand-light: #FFB27A;  /* pennellate del logo */
  --brand-tint: #FFEBDD;   /* fondi chiari */

  --cat-work: #4D9FFF;
  --cat-work-tint: #E4F0FF;
  --cat-protection: #FF8A3D;
  --cat-protection-tint: #FFEBDD;
  --cat-health: #22B8A0;
  --cat-health-tint: #DCF5F0;
  --cat-family: #A98BF5;
  --cat-family-tint: #EEE8FE;

  --state-success: #1F9D55;
  --state-success-tint: #E3F6EA;
  --state-warning: #F5A300;
  --state-warning-tint: #FFF4D6;
  --state-error-tint: #FDE5E5;
  --state-info: #2D7FF9;
  --state-info-tint: #E4EEFF;
  --badge-new: #4D9FFF;

  --border-ui: 2.5px;
  --border-chip: 2px;
  --border-print: 3px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --sx = direzione dell'ombra: 1 in LTR, -1 in RTL */
  --sx: 1;
  --sticker-sm: calc(3px * var(--sx)) 3px 0 var(--sp-ink);
  --sticker: calc(4px * var(--sx)) 4px 0 var(--sp-ink);
  --sticker-md: calc(5px * var(--sx)) 5px 0 var(--sp-ink);
  --sticker-lg: calc(9px * var(--sx)) 9px 0 var(--sp-ink);
  --sticker-sm-hover: calc(6px * var(--sx)) 6px 0 var(--sp-ink);
  --sticker-hover: calc(7px * var(--sx)) 7px 0 var(--sp-ink);
  --sticker-md-hover: calc(8px * var(--sx)) 8px 0 var(--sp-ink);
  --sticker-pressed: calc(1px * var(--sx)) 1px 0 var(--sp-ink);
  --sticker-lift: translate(calc(-3px * var(--sx)), -3px);
  --sticker-press: translate(calc(3px * var(--sx)), 3px);
  --focus-ring: 0 0 0 4px var(--sp-yellow), 0 0 0 7px var(--sp-ink);

  --font-display: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: var(--font-display); /* alias usato dalle pagine */

  --wrap: 1180px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sp-paper); color: var(--sp-ink); font: 17px/1.6 var(--font-body); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; }
h3, h4 { font-weight: 700; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--sp-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
mark.verify { background: var(--sp-red); color: var(--sp-white); font-weight: 700; padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.ico { display: inline-block; vertical-align: -0.2em; flex: none; }
@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
}

/* Fascia «bozza» */
.draft { background: var(--sp-ink); color: var(--brand); text-align: center; font: 700 14px var(--font-display); padding: 6px 16px; }

/* ---------- Fascia avvisi (riempita da annunci.js), sempre in vista ----------
 * annunci.js scrive in --annunci-top l'altezza reale della fascia: la testata si ferma subito sotto. */
:root { --annunci-h: 56px; }
.annunci { position: sticky; top: 0; z-index: 30; height: var(--annunci-h); background: var(--sp-red); color: var(--sp-white); border-bottom: var(--border-ui) solid var(--sp-ink); overflow: hidden; }
.annunci[hidden] { display: none; }
.annunci .wrap { display: flex; align-items: center; gap: 14px; height: 100%; }
.annunci-ico { flex: none; }
.annunci-ico .lancetta { transform-origin: 12px 12px; animation: annunci-lancetta 4s steps(8) infinite; }
.annunci-lista { position: relative; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; list-style: none; }
.annunci-lista li { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; visibility: hidden; }
.annunci-lista li.attivo { visibility: visible; animation: annunci-entra .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.annunci-lista li.esce { visibility: visible; animation: annunci-esce .4s ease-in both; }
.annunci-testo { white-space: nowrap; font-size: 16px; line-height: 1.3; }
.annunci-testo strong { font-family: var(--font-display); font-weight: 800; }
.annunci a { color: inherit; text-decoration: none; }
.annunci a:hover .annunci-testo, .annunci a:focus-visible .annunci-testo { text-decoration: underline; }
.annunci-lista li.scorre .annunci-testo { animation: annunci-scorre var(--durata) ease-in-out .8s infinite; }
.annunci:hover li.scorre .annunci-testo, .annunci.in-pausa li.scorre .annunci-testo,
.annunci.in-pausa .lancetta { animation-play-state: paused; }
.annunci-pausa { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; background: transparent; color: var(--sp-white); border: 2px solid var(--sp-white); border-radius: var(--radius-pill); font: 700 14px var(--font-display); cursor: pointer; }
.annunci-pausa[hidden] { display: none; }
.annunci-pausa:hover { background: var(--sp-white); color: var(--sp-red); }
@keyframes annunci-entra { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes annunci-esce { to { transform: translateY(110%); opacity: 0; } }
@keyframes annunci-scorre { 0%, 15% { transform: none; } 50%, 65% { transform: translateX(var(--sposta)); } 100% { transform: none; } }
@keyframes annunci-lancetta { to { transform: rotate(360deg); } }
/* Chi chiede meno movimento: niente animazioni, il testo va a capo */
.annunci.fermo { height: auto; }
.annunci.fermo .wrap { padding-top: 10px; padding-bottom: 10px; }
.annunci.fermo .annunci-lista { height: auto; }
.annunci.fermo .annunci-lista li { position: static; visibility: visible; }
.annunci.fermo .annunci-testo { white-space: normal; }
.annunci.fermo .lancetta { animation: none; }
@media (max-width: 600px) {
  :root { --annunci-h: 48px; }
  .annunci .wrap { gap: 10px; }
  .annunci-testo { font-size: 15px; }
  .annunci-pausa { min-height: 32px; padding: 0 10px; font-size: 13px; }
}

/* ---------- Testata: logo + NavPill ---------- */
.site-header { background: var(--sp-white); border-bottom: var(--border-ui) solid var(--sp-ink); position: sticky; top: var(--annunci-top, 0px); z-index: 20; }
.site-header .wrap { display: flex; align-items: center; gap: 12px 24px; min-height: 76px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 80px; width: auto; }
.nav-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-pills a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--sp-white); border: var(--border-ui) solid var(--sp-ink); border-radius: var(--radius-pill); box-shadow: var(--sticker-sm); font: 700 16px var(--font-display); text-decoration: none; color: var(--sp-ink); transition: transform .12s ease, box-shadow .12s ease; }
.nav-pills a:hover { transform: var(--sticker-lift); box-shadow: var(--sticker-sm-hover); }
.nav-pills a:active { transform: var(--sticker-press); box-shadow: var(--sticker-pressed); }
.nav-pills a:focus-visible { box-shadow: var(--sticker-sm), var(--focus-ring); }
.nav-pills a[aria-current] { background: var(--brand); }
@media (max-width: 900px) {
  .site-header { position: static; }
  .nav-pills { margin: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px 6px 8px 2px; }
  .nav-pills a { white-space: nowrap; min-height: 44px; padding: 0 14px; font-size: 15px; }
  .logo img { height: 60px; }
}

/* ---------- Hero delle pagine interne ---------- */
.page-hero { background: var(--brand-tint); border-bottom: var(--border-print) solid var(--sp-ink); padding: 44px 0 36px; }
.page-hero h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.page-hero p { max-width: 65ch; margin: 0 0 18px; font-size: 19px; }
.page-hero p:last-child { margin-bottom: 0; }
.page-hero--brand { background: var(--brand); }   /* test: pieno = agisci */
.page-hero--family { background: var(--cat-family-tint); }  /* glossario = blocco Dizionario */
/* Occhiello a pill bianca (come il badge dell'hero di SOS Permesso) */
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--sp-white); border: var(--border-ui) solid var(--sp-ink); border-radius: var(--radius-pill); padding: 4px 14px; margin-bottom: 16px; font: 700 14px var(--font-display); }

/* Timbro: parola chiave bianca su inchiostro, ruotata, senza punto (uno per pagina) */
.stamp { display: inline-block; padding: 2px 18px 8px; background: var(--sp-ink); color: var(--sp-white); border-radius: var(--radius-md); transform: rotate(-5deg); transform-origin: left center; letter-spacing: -0.02em; }

/* ---------- Componenti comuni ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; font: 700 17px var(--font-display); color: var(--sp-ink); text-decoration: none; background: var(--brand); border: var(--border-ui) solid var(--sp-ink); border-radius: var(--radius-pill); box-shadow: var(--sticker); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: var(--sticker-lift); box-shadow: var(--sticker-hover); }
.btn:active { transform: var(--sticker-press); box-shadow: var(--sticker-pressed); }
.btn:focus-visible { box-shadow: var(--sticker), var(--focus-ring); }
.btn-secondary { background: var(--sp-white); }

/* Filtri a pill */
.pill { font: 700 14px var(--font-display); color: var(--sp-ink); background: var(--sp-white); border: var(--border-chip) solid var(--sp-ink); border-radius: var(--radius-pill); padding: 6px 14px; min-height: 40px; cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--brand); box-shadow: var(--sticker-sm); }

/* Avvisi: Da sapere / Attenzione / Scadenza (mai un bordo colorato solo a sinistra) */
.alert-info, .alert-warning, .alert-danger { display: flex; gap: 12px; align-items: flex-start; border: var(--border-ui) solid var(--sp-ink); border-radius: 16px; padding: 18px 20px; font-size: 16px; }
.alert-info { background: var(--state-info-tint); }
.alert-info .ico { color: var(--state-info); }
.alert-warning { background: var(--state-warning-tint); }
.alert-danger { background: var(--sp-red); color: var(--sp-white); box-shadow: var(--sticker-md); }
.alert-danger a { color: var(--sp-white); }

/* ---------- Piede ---------- */
.site-footer { background: var(--sp-ink); color: var(--sp-white); padding: 28px 0; text-align: center; font-size: 15px; line-height: 1.6; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-bottom: 8px; }
.site-footer nav a { color: var(--sp-white); font-weight: 700; text-decoration: none; }
.site-footer nav a:hover { color: var(--brand); text-decoration: underline; }
.site-footer nav a + a::before { content: "|"; color: var(--sp-white); opacity: .5; margin: 0 .6rem; display: inline-block; }
.site-footer .copy { color: var(--brand); margin: 0; font-weight: 700; }
.site-footer .note { color: var(--sp-white); opacity: .8; margin: 6px 0 0; font-size: 14px; }