/* comune.css — base condivisa dai due siti (caratteri, reset, accessibilità).
   I colori li decide ogni sito nel proprio file (ar.css / fl.css). */

@font-face { font-family: "Schibsted Grotesk"; src: url("../font/schibsted.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../font/schibsted-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../font/literata.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../font/literata-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);
  --larghezza: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font-family: var(--sans);
  font-size: 1.0625rem; line-height: 1.6; }
.giorno, .testo table, .quando, .meta, time { font-variant-numeric: tabular-nums; }
img { max-width: 100%; height: auto; }
a { color: var(--accento); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
p, ul, ol, dl { margin: 0 0 1em; }

.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--gutter); }
.salta { position: absolute; left: -9999px; }
.salta:focus { left: var(--gutter); top: 8px; background: var(--carta); padding: 8px 12px; z-index: 10; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avviso anteprima: visibile solo nella versione locale */
.avviso-anteprima { background: #FFF4C2; color: #3D3300; font: 600 .875rem/1.4 var(--sans);
  padding: 6px var(--gutter); text-align: center; }

/* Testo lungo generato dal Markdown */
.testo { max-width: 68ch; }
.testo h2 { font-size: 1.5rem; margin-top: 2em; }
.testo h3 { font-size: 1.2rem; margin-top: 1.6em; }
.testo li { margin-bottom: .4em; }
.testo table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-family: var(--sans); font-size: .95rem; display: block; overflow-x: auto; }
.testo th, .testo td { border-bottom: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; }
.testo th { font-weight: 700; border-bottom-width: 2px; }
.testo blockquote { margin: 1.5em 0; padding: 0 0 0 1.2em; border-left: 3px solid var(--accento); color: var(--pietra); }

/* Menu mobile (pulsante + elenco) */
.menu-pulsante { display: none; background: none; border: 1px solid var(--linea); border-radius: 6px;
  font: 600 .95rem var(--sans); color: var(--inchiostro); padding: 8px 12px; cursor: pointer; }
@media (max-width: 760px) {
  .menu-pulsante { display: inline-block; }
  .menu { display: none; width: 100%; }
  .menu.aperto { display: block; }
  .menu ul { flex-direction: column; gap: 0 !important; padding: 8px 0; }
  .menu li a { display: block; padding: 10px 0; }
}