/* Buona Fede - foglio di stile unico. Testo puro, monospazio, un solo colore d'accento: il giallo
   dell'evidenziatore, usato per le azioni, per le segnalazioni "da verificare" e per il punto del marchio.
   Nessun font esterno, nessuna risorsa remota. */

:root {
  --fg: #141414;
  --bg: #FBFBF8;
  --debole: #55554F;
  --filo: #141414;
  --link: #0B3D91;
  --giallo: #FFE14D;
  --su-giallo: #141414;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --misura: 74ch;
  --largo: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #E4E4DE;
    --bg: #121212;
    --debole: #94948C;
    --filo: #E4E4DE;
    --link: #8DB4FF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { background: var(--giallo); color: var(--su-giallo); text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.salta { position: absolute; left: -999px; top: 0; background: var(--giallo); color: var(--su-giallo); padding: .5rem .75rem; z-index: 10; }
.salta:focus { left: .5rem; top: .5rem; }

/* Testata */
.testata { max-width: var(--largo); margin: 0 auto; padding: 1.25rem 1.25rem 0; }
.testata .interno { border-bottom: 1px dashed var(--filo); padding-bottom: .75rem; }
.marchio { display: inline-block; line-height: 0; text-decoration: none; }
.marchio:hover, .marchio:focus-visible { background: transparent; }
.marchio img { height: 26px; width: auto; display: block; }
.marchio .scuro { display: none; }
@media (prefers-color-scheme: dark) { .marchio .chiaro { display: none; } .marchio .scuro { display: block; } }
nav { margin-top: .5rem; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25ch; }
nav li { margin: 0; }
nav a { color: var(--debole); text-decoration: none; white-space: nowrap; }
nav a::before { content: "["; }
nav a::after { content: "]"; }
nav a:hover, nav a:focus-visible { color: var(--su-giallo); }
nav a[aria-current="page"] { background: var(--giallo); color: var(--su-giallo); font-weight: 700; }

/* Struttura */
main { display: block; counter-reset: sez; }
.colonna { max-width: calc(var(--misura) + 2.5rem); margin: 0 auto; padding: 0 1.25rem; }
.largo { max-width: var(--largo); margin: 0 auto; padding: 0 1.25rem; }
.largo > .apertura, .largo > .colonna { max-width: var(--misura); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.largo > .apertura { padding-bottom: 0; }

h1, h2, h3 { line-height: 1.3; font-weight: 700; }
h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 2.75rem 0 .75rem; counter-increment: sez; }
h2::before { content: counter(sez) ". "; color: var(--debole); }
h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 3ch; margin: 0 0 1.25rem; }
li { margin-bottom: .45rem; }
ol.lettere { list-style: lower-alpha; }
ol.lettere > li { padding-left: .5ch; }
code { font-family: var(--mono); background: var(--giallo); color: var(--su-giallo); padding: 0 .4ch; }
strong { font-weight: 700; }
mark { background: var(--giallo); color: var(--su-giallo); padding: 0 .3ch; }

.etichetta { color: var(--debole); margin: 0 0 .75rem; }
.stato { color: var(--debole); font-size: .9rem; }

/* Apertura */
.apertura { padding-top: 2.25rem; padding-bottom: 1.5rem; }
.apertura .sottotitolo { margin: 0 0 1.5rem; }
.apertura .tesi { margin-bottom: 1.5rem; }

.azioni { display: flex; flex-wrap: wrap; gap: .75rem 2ch; align-items: center; margin: 1.5rem 0; }
.pulsante { display: inline-block; background: var(--giallo); color: var(--su-giallo); border: 2px solid var(--fg); font-weight: 700; text-decoration: none; padding: .65rem 1rem; }
.pulsante::before { content: ">> "; }
.pulsante:hover, .pulsante:focus-visible { background: var(--fg); color: var(--giallo); text-decoration: none; }
.secondario { font-size: 1rem; }

/* Dati */
.cifre { list-style: none; margin: 2rem 0 0; padding: .75rem 0 0; border-top: 1px dashed var(--filo); }
.cifre li { margin: 0 0 1rem; }
.cifre .numero { display: block; font-weight: 700; font-size: 1.15rem; }
.cifre .didascalia { display: block; color: var(--debole); font-size: .92rem; line-height: 1.5; }

/* Sezioni */
.sezione { padding: 0; }
.sezione:first-of-type > h2:first-of-type { margin-top: 1.5rem; }

blockquote.chiusa { margin: 2.5rem 0 2rem; padding-left: 2ch; border-left: 2px solid var(--filo); }
blockquote.chiusa p { margin: 0 0 .75rem; }

/* Riquadri */
.riquadro { border: 1px dashed var(--filo); padding: 1rem 1.25rem; margin: 1.75rem 0; }
.riquadro > :last-child { margin-bottom: 0; }
.riquadro h3 { margin-top: 0; }
.riquadro.forte { background: var(--giallo); color: var(--su-giallo); border: 2px solid var(--fg); }
.riquadro.forte a { color: var(--su-giallo); }
.riquadro.forte .pulsante { background: #141414; color: var(--giallo); border-color: #141414; }
.riquadro.forte .pulsante:hover, .riquadro.forte .pulsante:focus-visible { background: #FBFBF8; color: #141414; }
.riquadro.forte code { background: #141414; color: var(--giallo); }
.riquadro.forte a:hover, .riquadro.forte a:focus-visible { background: #141414; color: var(--giallo); }
.riquadro.forte a:focus-visible { outline-color: #141414; }

.invito { margin: 2.5rem 0; }

/* Domande della call */
ol.domande { padding-left: 0; list-style: none; counter-reset: dom; }
ol.domande > li { counter-increment: dom; position: relative; padding-left: 5ch; margin-bottom: 1rem; }
ol.domande > li::before { content: "[" counter(dom) "]"; position: absolute; left: 0; font-weight: 700; color: var(--debole); }

details { border-top: 1px dashed var(--filo); border-bottom: 1px dashed var(--filo); margin: 1.5rem 0; padding: .6rem 0; }
summary { cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+ "; }
details[open] summary::before { content: "- "; }
details[open] summary { margin-bottom: .75rem; }
pre.modello { white-space: pre-wrap; font-family: var(--mono); font-size: .92rem; line-height: 1.55; border: 1px dashed var(--filo); padding: .9rem 1rem; margin: 0; overflow-x: auto; }

/* Tabelle */
.scorri { overflow-x: auto; margin: 1.5rem 0 2rem; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; line-height: 1.5; }
.scorri table { min-width: 56rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .7rem .55rem 0; border-bottom: 1px dashed var(--filo); }
thead th { border-bottom: 2px solid var(--filo); font-weight: 700; }
tbody th { font-weight: 700; width: 9rem; }
table.stretta { min-width: 0; }

/* Schede Paese */
.scheda { border-top: 1px dashed var(--filo); margin-top: 3rem; padding-top: .5rem; }
.fonti { font-size: .88rem; line-height: 1.55; }
.fonti li { margin-bottom: .4rem; word-break: break-word; }
.dacontrollare { font-size: .95rem; }
.marca { background: var(--giallo); color: var(--su-giallo); font-weight: 700; padding: 0 .4ch; }

/* Piede */
.piede { max-width: var(--largo); margin: 4rem auto 0; padding: 0 1.25rem 3rem; color: var(--debole); font-size: .88rem; line-height: 1.55; }
.piede .interno { border-top: 1px dashed var(--filo); padding-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem 2rem; }
.piede p { margin: 0 0 .5rem; }
.piede .marchio img { height: 20px; }
.piede strong { color: var(--fg); }

/* Telefono: la tabella del confronto diventa una scheda per riga, il Paese davanti a ogni cella.
   Esclude table.stretta (firmatari). */
@media (max-width: 760px) {
  .scorri { overflow-x: visible; }
  .scorri table:not(.stretta) { min-width: 0; display: block; }
  .scorri table:not(.stretta) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .scorri table:not(.stretta) tbody { display: block; }
  .scorri table:not(.stretta) tr { display: block; border-top: 2px solid var(--filo); padding: .6rem 0 .4rem; margin-bottom: .75rem; }
  .scorri table:not(.stretta) th, .scorri table:not(.stretta) td { display: block; width: auto; border-bottom: 0; padding: .15rem 0; }
  .scorri table:not(.stretta) tbody th { font-size: 1rem; padding-bottom: .4rem; }
  .scorri table:not(.stretta) td { margin-bottom: .4rem; }
  .scorri table:not(.stretta) td::before { display: block; font-weight: 700; color: var(--debole); }
  .scorri table:not(.stretta) td:nth-of-type(1)::before { content: "Belgio"; }
  .scorri table:not(.stretta) td:nth-of-type(2)::before { content: "Paesi Bassi"; }
  .scorri table:not(.stretta) td:nth-of-type(3)::before { content: "Germania"; }
  .scorri table:not(.stretta) td:nth-of-type(4)::before { content: "Francia"; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .pulsante { display: block; text-align: center; width: 100%; }
}

@media print {
  nav, .azioni, .salta { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  a { color: #000; }
  .pulsante, .riquadro.forte { background: #fff; color: #000; }
}