/* =============================================================================
   base.css — token, reset, tipografia, header, footer, bottoni.

   Direzione: pagina di giornale. Serif sui titoli, sans sul corpo.
   Due accenti con mansioni separate e non intercambiabili:
     --edit  identità della testata  (barra, breadcrumb, trattino H2, capolettera,
                                      bordo sinistro di box e citazioni, apostrofo, focus)
     --cta   commercio               (SOLO bottoni d'azione e spunte di garanzia)
   Nessun webfont, nessun gradiente (salvo la rigatura del blocco note),
   nessuna ombra colorata.
   ========================================================================== */

:root{
  /* superfici */
  --bg:#ffffff;
  --wash:#faf9f7;        /* fondino appena percettibile per box e placeholder */
  --pad:#fdf8d5;         /* riquadro aggiornamento, stile blocco note */

  /* testo — quattro livelli, usati tutti */
  --ink:#1a1b1d;         /* titoli */
  --body:#2c2e33;        /* corpo: mai nero pieno */
  --ink-soft:#63656b;    /* sommario, metadati, testo secondario */
  --ink-faint:#6f7178;   /* didascalie, note, footer chiaro */

  /* filetti */
  --rule:#e9e8e5;
  --rule-strong:#d4d3cf;

  /* accenti */
  --edit:#7a2e1e;        /* EDITORIALE: identità della testata */
  --cta:#1c7a45;         /* COMMERCIO: solo azione */
  --cta-dark:#155f36;
  --star:#c98a1f;        /* solo le stelle delle recensioni */

  /* tipografia */
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Open Sans','Segoe UI',Roboto,'Helvetica Neue',Arial,system-ui,sans-serif;
  --measure:660px;

  /* servizio */
  --error:#a5241b;
  --scrim:rgba(26,27,29,.5);

  /* Usati esclusivamente nel box AGGIORNAMENTO (css/article.css). */
  --urgent:#9e2b25;         /* rosso profondo, non acceso */
  --urgent-bg:#fdf6e9;      /* crema caldo, fondo del riquadro */
  --urgent-surface:#f7ecd6; /* un tono più scuro, per i box dentro il riquadro */
}

/* ---------- Reset minimale ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body,h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:none}
hr{border:none}

/* ---------- Base ---------- */
body{font-family:var(--sans);font-size:18px;line-height:1.75;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}

main{max-width:var(--measure);margin:0 auto;padding:40px 20px 44px}

p{margin:0 0 1.2rem}

h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5.2vw,2.85rem);
  line-height:1.14;letter-spacing:-.012em;color:var(--ink);margin:0 0 18px}

/* Spazio identico sopra e sotto: il titolo sta al centro del suo respiro.
   Niente text-wrap:balance: distribuiva le righe invece di riempirle. */
h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,4.2vw,2.35rem);
  line-height:1.2;letter-spacing:-.011em;color:var(--ink);margin:1.5em 0}

h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0}

strong,b{font-weight:700;color:var(--ink)}

/* I link inline NON usano --cta: quel verde è riservato alle azioni.
   Convenzione da giornale: testo in --ink sottolineato, hover editoriale. */
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-strong);
  text-underline-offset:2px}
a:hover{color:var(--edit);text-decoration-color:var(--edit)}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--edit);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--edit);color:#fff;
  padding:12px 16px;z-index:100}
.skip-link:focus{left:0}

/* =============================================================================
   HEADER — testata a due piani
   ========================================================================== */
/* Testata NON sticky: scorre via con la pagina e non ricompare.
   Sopra la piega c'è già tutto il contesto editoriale; una testata che
   rientra allo scroll ruba spazio di lettura e non aggiunge niente. */
.site-head{background:var(--bg);border-bottom:1px solid var(--rule-strong)}

.topline{height:3px;background:var(--edit)}

.utility{border-bottom:1px solid var(--rule)}
.utility__inner{max-width:var(--measure);margin:0 auto;padding:7px 20px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;letter-spacing:.03em;color:var(--ink-faint)}

.masthead{position:relative;max-width:var(--measure);margin:0 auto;padding:16px 20px;
  text-align:center}

/* Su mobile la testata è l'unica cosa sopra la piega: le serve più aria
   attorno per non sembrare schiacciata contro il filetto rosso e l'articolo. */
@media (max-width:767px){
  .masthead{padding:32px 20px}
}

/* clamp calibrato per stare su UNA riga anche a 360px. */
.logo{font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(22px,6.4vw,30px);letter-spacing:.01em;line-height:1.1;
  text-align:center;white-space:nowrap;text-decoration:none;margin:0}
.logo .amp{color:var(--edit)}

/* =============================================================================
   BOTTONI
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:16px 44px;border-radius:7px;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color 150ms ease,transform 150ms ease}

.btn--primary{background:var(--cta);color:#fff;box-shadow:0 2px 0 var(--cta-dark)}
.btn--primary:hover{background:var(--cta-dark);color:#fff}
/* scende di 2px e l'ombra sparisce: tasto premuto, non animazione */
.btn--primary:active{background:var(--cta-dark);transform:translateY(2px);box-shadow:none}
.btn--primary[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.btn--outline{width:100%;background:var(--bg);color:var(--ink);
  border:1px solid var(--rule-strong);font-size:1rem}
.btn--outline:hover{border-color:var(--edit);color:var(--ink);transform:none}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* Sotto i 520px i bottoni d'azione occupano tutta la larghezza */
@media (max-width:519px){
  .btn--primary{width:100%;padding:16px 20px}
}

/* =============================================================================
   FOOTER — unico blocco scuro della pagina
   ========================================================================== */
.site-footer{background:#141414;color:#b7b7b7;margin-top:0}

.site-footer__inner{max-width:var(--measure);margin:0 auto;padding:34px 20px 30px;
  font-size:12.5px;line-height:1.75}

.site-footer__logo{font-family:var(--serif);font-weight:700;color:#fff;margin:0 0 16px;
  font-size:clamp(18px,5vw,22px);letter-spacing:.01em;line-height:1.1;white-space:nowrap}
.site-footer__logo .amp{color:var(--edit)}

.site-footer__legal{margin:0 0 18px}
.site-footer__legal a{color:#b7b7b7;text-decoration:underline}
.site-footer__legal a:hover{color:#fff}

.site-footer__links{display:flex;flex-wrap:wrap;gap:2px 22px;margin:0 0 18px}
.site-footer__links a{color:#b7b7b7;text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.site-footer__links a:hover{color:#fff;text-decoration:underline}

.site-footer__note{border-top:1px solid #2a2a2a;padding-top:16px;
  color:#8a8a8a;font-size:11.5px;margin:0}

/* =============================================================================
   Utility
   ========================================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}