/* ============================================================
   AGORÀ — rifiniture UI condivise (solo aggiunte, nessuna regola esistente rimossa)
   Accessibilità e comfort di lettura comuni a tutte le pagine che lo includono.
   Per disattivarlo: togliere il <link> alla pagina.
   ============================================================ */
html { scroll-padding-top: 5.5rem; }              /* le ancore non finiscono sotto la barra fissa */
:focus-visible { outline: 2px solid #0047AB; outline-offset: 2px; }
::selection { background: rgba(0, 71, 171, .18); }
a { text-underline-offset: .18em; }

.skip-link {
  position: absolute; left: -9999px; top: .5rem; z-index: 1000;
  background: #0E0E0E; color: #fff; padding: .6rem 1rem; border-radius: 8px;
  font: 600 .85rem 'Inter', system-ui, sans-serif; text-decoration: none;
}
.skip-link:focus { left: .5rem; }

@media (max-width: 700px) {
  footer a { padding: .5rem 0; }                   /* bersagli di tocco più comodi su mobile */
}
@media print {
  nav.top, footer, .share-bar, .skip-link, #readProgress { display: none !important; }
  body { background: #fff; }
}

/* ---------- Layout footer a 4 colonne ---------- */
footer .wrap { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
footer .footer-claim { color: rgba(255,255,255,.6); margin: 1rem 0; font-size: .9rem; max-width: 32ch; }
footer .small { grid-column: 1 / -1; }
@media (max-width: 900px) { footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer .wrap { grid-template-columns: 1fr; } }

/* ---------- Stati di link e pulsanti ---------- */
a:hover { text-decoration: underline; }
nav.top a:hover, footer a:hover, .logo:hover { text-decoration: none; }
button, .btn, .btn-primary, [role="button"] { cursor: pointer; }
.btn:active, .btn-primary:active, button:active { transform: translateY(1px); }
.btn:focus-visible, .btn-primary:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 3px solid #0047AB; outline-offset: 2px; }
footer a:focus-visible { outline-color: #fff; }

/* ---------- Mobile: niente overflow orizzontale, immagini adattive ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { display: block; max-width: 100%; overflow-x: auto; }
input, select, textarea { font-size: 16px; } /* evita lo zoom forzato su iOS */
.nav-links a, .burger { min-height: 44px; }

/* ---------- Lettura (articoli e pagine di testo) ---------- */
.body, .articolo-corpo { line-height: 1.75; font-size: 1.05rem; }
.body p, .articolo-corpo p { margin-bottom: 1.1rem; }
.body h2 { margin: 2.2rem 0 .8rem; }
.body h3 { margin: 1.6rem 0 .6rem; }
.body ul, .body ol { margin: 0 0 1.1rem 1.4rem; }
.body a { color: #0047AB; text-decoration: underline; }
.indice-pagina { background: #fff; border: 1px solid #e4e2dc; border-radius: 12px; padding: 1rem 1.3rem; margin: 1.2rem 0 2rem; }
.indice-pagina strong { display: block; font: 500 .72rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: #6b6b6b; margin-bottom: .5rem; }
.indice-pagina ol { margin: 0 0 0 1.2rem; }
.indice-pagina a { color: #0047AB; }
.nota-segnaposto { background: #fff8e1; border: 1px solid #f0d98a; border-radius: 10px; padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1.5rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: #6b6b6b; margin: 0 0 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .3rem; }
.breadcrumb a { color: #0047AB; }

/* ---------- Newsletter: consenso ---------- */
.newsletter-consenso { display: flex; gap: .5rem; align-items: flex-start; width: 100%; font-size: .78rem; color: rgba(255,255,255,.75); line-height: 1.4; }
.newsletter-consenso input { width: auto; margin-top: .15rem; flex: none; }
.newsletter-consenso a { color: #fff; text-decoration: underline; }

/* ---------- Monetizzazione pronta (non attiva): box "Risorse utili" / "Prodotti consigliati" ----------
   Uso (da inserire dentro un articolo):
   <aside class="box-risorse" aria-label="Risorse utili">
     <span class="box-risorse-label">Risorse utili · Link di affiliazione</span>
     <h3>Titolo</h3><ul><li><a href="URL" rel="sponsored noopener" target="_blank">Prodotto</a> — descrizione</li></ul>
   </aside>
   Indicare sempre che si tratta di link di affiliazione. */
.box-risorse { border: 1px solid #e4e2dc; border-left: 4px solid #0047AB; background: #fff; border-radius: 10px; padding: 1.1rem 1.3rem; margin: 2rem 0; }
.box-risorse h3 { margin: .3rem 0 .6rem; font-family: 'Playfair Display', Georgia, serif; }
.box-risorse ul { margin: 0 0 0 1.2rem; }
.box-risorse-label { font: 500 .7rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: #6b6b6b; }
.box-sponsor { border: 1px dashed #c9c6bd; border-radius: 10px; padding: 1rem 1.3rem; margin: 2rem 0; font-size: .92rem; }

/* Spazi pubblicitari vuoti non lasciano buchi nella pagina */
.pub-slot:empty, ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }