/*
Theme Name: La fagIAnata
Description: Tema su misura per la fagIAnata (lafagianata.it), il magazine di ciclismo di Tinke. Block theme su token CSS: i colori stanno qui sotto, theme.json rimanda a queste variabili.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.3
Text Domain: ciclismo
License: GPL-2.0-or-later
*/

/* ---------------------------------------------------------------
   Token. theme.json rimanda a queste variabili: cambiarle qui
   cambia il sito intero, editor compreso.

   Il sito nasce chiaro; lo scuro si sceglie col pulsante nella
   testata e resta ricordato nel browser (data-theme="scuro").
   --------------------------------------------------------------- */

/* Il Bodoni con il disegno da lettura (misura ottica 14) a tutte le grandezze: lasciata in automatico, sui titoli
   grandi il browser sceglie il disegno da manifesto, con le aste sottilissime, che bianco su nero stanca. Degli altri
   caratteri nessuno ha l'asse opsz, quindi la regola tocca solo il Bodoni. */
html { font-variation-settings: "opsz" 14; }

:root {
  --cicl-bg: #FFFFFF;          /* carta */
  --cicl-surface: #F2F3F0;     /* nebbia: riquadri, schede */
  --cicl-text: #0D0F12;        /* asfalto */
  --cicl-body: #2E3238;        /* il testo lungo, un filo più morbido */
  --cicl-muted: #5A6069;
  --cicl-line: #DEE1DC;
  --cicl-strong-line: #0D0F12; /* il filo sotto la testata */
  --cicl-fluo: #D4FF3F;        /* solo come fondo, mai come colore del testo */
  --cicl-on-fluo: #0D0F12;
  --cicl-cobalt: #2846F0;      /* link al passaggio, dettagli */
  /* Le fasce scure (piede, testate delle sezioni) restano scure in tutti e due i temi */
  --cicl-band: #0D0F12;
  --cicl-band-text: #C3C8CF;
  --cicl-band-strong: #F4F5F2;
  --cicl-band-muted: #7D848E;
  --cicl-band-line: #2A2F36;
  --cicl-band-cobalt: #8C9DFF; /* il cobalto sulle fasce scure: gli inseguitori nella diretta */
  /* Le tinte delle discipline (le tessere, 15/10/2026): il fondo delle schede delle notizie, delle vigilie e delle
     guide nelle liste, la strada su nebbia (--cicl-surface), il ciclocross su sabbia, la pista su ghiaccio; la «forte»
     per il ripiego senza foto (la strada --cicl-nebbia-forte) e per il passaggio sugli ordini d'arrivo */
  --cicl-sabbia: #EEE1C6;
  --cicl-sabbia-forte: #E3D3B2;
  --cicl-ghiaccio: #DFE9F5;
  --cicl-ghiaccio-forte: #CFDCEC;
  --cicl-nebbia-forte: #E4E6E1;

  /* Ospitati da noi in assets/caratteri (OFL), mai chiamati da Google; i
     file li dichiara theme.json. Le stesse tre pile stanno anche lì, in
     fontFamilies: WordPress ne ricava il nome per @font-face, e una
     variabile CSS al loro posto non la sa leggere. */
  --cicl-font-titoli: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --cicl-font-testo: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cicl-font-numeri: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

:root[data-theme="scuro"] {
  /* Le fasce (piede, testate, nastro) restano più scure della pagina: si vedono anche qui */
  --cicl-bg: #121519;
  --cicl-surface: #1A1E24;
  --cicl-text: #F4F5F2;
  --cicl-body: #D5D9DE;
  --cicl-muted: #A7ADB6;
  --cicl-line: #2E343C;
  --cicl-strong-line: #3A4049;
  --cicl-cobalt: #8C9DFF;
  --cicl-band: #08090B;
  --cicl-band-line: #23272D;
  --cicl-sabbia: #2A2418;
  --cicl-sabbia-forte: #352E20;
  --cicl-ghiaccio: #15233A;
  --cicl-ghiaccio-forte: #1D2E48;
  --cicl-nebbia-forte: #242930;
  color-scheme: dark;
}

/* ---------------------------------------------------------------
   Il minimo che theme.json non sa dire.
   --------------------------------------------------------------- */

body {
  background: var(--cicl-bg);
  color: var(--cicl-text);
  -webkit-font-smoothing: antialiased;
}

/* I numeri della corsa — tempi, distacchi, watt — tutti della stessa
   larghezza, così in colonna si allineano. */
.numeri,
.wp-block-table td {
  font-variant-numeric: tabular-nums;
}
/* Nelle tabelle dei pezzi le celle dei numeri (quelle che WordPress allinea a destra: km, tempi, distacchi) in
   Geist Mono, come nei nostri blocchi: lo Schibsted tabulare staccava la virgola («300 ,3») */
.wp-block-table :is(td, th).has-text-align-right { font-family: var(--cicl-font-numeri); font-size: 0.92em; }

/* La tipografia fine. I titoli (pezzi, schede, elenchi, fasce) su righe di lunghezza simile; i paragrafi senza una
   parola sola nell'ultima riga. I numeri degli elenchi numerati in Geist Mono: il marcatore del browser è tabulare,
   e nello Schibsted lasciava il punto staccato («1 .») */
:is(h1, h2, h3, h4),
.wp-block-post-title,
.notizia-lead__titolo, .notizia__titolo, .ultimora__voce, .elenco__titolo, .pezzi-corsa__titolo, .da-leggere__titolo { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ol > li::marker { font-family: var(--cicl-font-numeri); font-size: 0.85em; font-weight: 600; font-variant-numeric: normal; }

/* L'etichetta in maiuscoletto monospaziato dei bozzetti: sezioni,
   date, didascalie tecniche. */
.etichetta {
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cicl-muted);
}

/* La «IA» accesa: dentro il marchio e ovunque serva richiamarla. */
.ia {
  font-family: var(--cicl-font-numeri);
  font-style: normal;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--cicl-fluo);
  color: var(--cicl-on-fluo);
  padding: 0 0.1em;
  margin: 0 0.03em;
}

a, button, input[type="submit"] { min-height: 44px; }
/* I link in linea non sentono min-height: le frecce «Tutti →», le briciole, i link delle fasce si allargano con un
   ::after invisibile, alto 44 px, che non sposta niente e non cambia il filo sotto */
.ultimora__tutte, .elenco__tutti, .italiani__tutti, .laboratorio__link a, .etichetta a, .guida__fonte a, .iscrizione__nota a { position: relative; }
:is(.ultimora__tutte, .elenco__tutti, .italiani__tutti, .laboratorio__link a, .etichetta a, .guida__fonte a, .iscrizione__nota a)::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 44px;
  transform: translateY(-50%);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cicl-cobalt);
  outline-offset: 3px;
}
/* Sulle fasce scure il cobalto della carta non si vede (2,95:1 sull'asfalto): il cobalto delle fasce */
:is(.testata-scura, .nastro, .scheda-corsa, .laboratorio, .piede, .spazio-ai, .oggi-richiamo) :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
a.nastro:focus-visible {
  outline-color: var(--cicl-band-cobalt);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------
   Marchio
   --------------------------------------------------------------- */

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cicl-text);
  text-decoration: none;
}
.marchio__fagiano { width: 56px; height: auto; flex-shrink: 0; }
.marchio__occhio,
.marchio__nodo { fill: var(--cicl-fluo); }
.marchio__nome {
  font-family: var(--cicl-font-titoli);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .marchio__fagiano { width: 44px; }
  .marchio__nome { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------
   Testata (piano UX/UI, fase B). A sinistra il marchio, poi le sette
   voci del menu, a destra la lente e il pulsante Menu. Sotto i 1.200 px
   le voci non ci stanno: resta il Menu, con le stesse voci dentro.
   Scorrendo resta in cima, compatta (56 px): assets/megamenu.js le mette
   la classe testata--compatta quando la testata intera è uscita dallo
   schermo, e tiene il suo posto nella pagina perché sotto non salti niente.
   --------------------------------------------------------------- */

.testata {
  position: relative; /* il pannello del Menu si apre sotto la testata, largo quanto la pagina */
  z-index: 50;
  background: var(--cicl-bg);
  border-bottom: 1px solid var(--cicl-strong-line);
}
.testata__riga { min-height: 72px; gap: 0; }
.testata .marchio { flex-shrink: 0; }
.testata .marchio__fagiano { width: 52px; }
.testata .marchio__nome { font-size: 1.625rem; }
.testata .testata__azioni {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; /* più forte del margin: 0 che WordPress mette ai figli dei gruppi flex */
  flex-shrink: 0;
}

/* Le voci: il nome in Schibsted, la voce in cui si è con un filo sotto (non solo il colore) */
.testata .navigazione { margin-left: 36px; min-width: 0; }
.navigazione__voci { display: flex; flex-wrap: nowrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.navigazione__voce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cicl-text);
  font-family: var(--cicl-font-testo);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.navigazione__voce:hover { color: var(--cicl-cobalt); }
.navigazione__voce[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

/* Il punto di Oggi: c'è solo quando si corre, e accanto c'è sempre la parola */
.punto-oggi {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cicl-fluo);
  border: 1.5px solid var(--cicl-text);
}

/* Scorrendo: fissa in cima, la riga da 56 px, il marchio più piccolo. Sotto la barra di WordPress, per chi è collegato. */
.testata--compatta {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
}
.testata--compatta .testata__riga { min-height: 56px; }
.testata--compatta .marchio__fagiano { width: 38px; }
.testata--compatta .marchio__nome { font-size: 1.25rem; }
/* Il posto della testata nella pagina mentre è fissa (assets/megamenu.js gli dà l'altezza) */
.testata__posto { height: 0; }

/* «Chiedi al fagIAno» fra la lente e il Menu; l'altra lingua, piccola, accanto al Menu (quella in cui si è non serve) */
.testata__lingua .lingua__voce--qui,
.testata__lingua .lingua__tra { display: none; }
.testata__lingua .lingua__voce { min-width: 32px; justify-content: center; font-size: 0.8125rem; }

/* Sotto i 1.200 px le sette voci non stanno in una riga accanto al marchio: restano nel Menu; la chat ha la sua bolla */
@media (max-width: 1199px) {
  .testata .navigazione { display: none; }
  .testata__azioni .chiedi { display: none; }
}
/* Al telefono una riga da 56 px: il marchio e il Menu (la ricerca sta in cima al Menu) */
@media (max-width: 599px) {
  .testata__riga { min-height: 56px; }
  .testata .marchio { gap: 8px; }
  .testata .marchio__fagiano,
  .testata--compatta .marchio__fagiano { width: 34px; }
  .testata .marchio__nome,
  .testata--compatta .marchio__nome { font-size: 1.1875rem; }
  .testata__azioni .cerca { display: none; }
}
/* I telefoni più piccoli (320 px) */
@media (max-width: 359px) {
  .testata .marchio { gap: 6px; }
  .testata .marchio__fagiano,
  .testata--compatta .marchio__fagiano { width: 30px; }
  .testata .marchio__nome,
  .testata--compatta .marchio__nome { font-size: 1.0625rem; }
}

/* I pulsanti tondi: la lente della testata */
.tondo {
  box-sizing: border-box;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--cicl-line);
  background: transparent;
  color: var(--cicl-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.tondo:hover { border-color: var(--cicl-text); }
.tondo svg { width: 18px; height: 18px; }

.tema .tema__sole { display: none; }
[data-theme="scuro"] .tema .tema__luna { display: none; }
[data-theme="scuro"] .tema .tema__sole { display: block; }

/* ---------------------------------------------------------------
   Il Menu: il pulsante in cima a destra e il suo pannello
   (patterns/megamenu.php, assets/megamenu.js), uguale su computer e
   telefono. Senza JavaScript è un <details>, con il JavaScript un
   <button> con aria-expanded: le stesse classi valgono per tutti e due.
   Si apre solo al clic. Dal computer le voci in quattro colonne, ognuna
   con il suo filo sopra e i sottolivelli aperti; al telefono una sotto
   l'altra, il nome che porta alla pagina e il +/– per i sottolivelli.
   --------------------------------------------------------------- */

.megamenu { flex-shrink: 0; }
.megamenu__apri {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1.5px solid var(--cicl-text);
  border-radius: 0;
  background: transparent;
  color: var(--cicl-text);
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.megamenu__apri::-webkit-details-marker { display: none; }
.megamenu__apri:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
/* Aperto si riempie d'asfalto, dice «Chiudi» e mostra la X */
.megamenu[open] > .megamenu__apri,
.megamenu__apri[aria-expanded="true"] { background: var(--cicl-text); color: var(--cicl-bg); }
.megamenu__apri:focus-visible { outline: 2px solid var(--cicl-cobalt); outline-offset: 3px; }
.megamenu__icona { width: 16px; height: 16px; flex-shrink: 0; }
.megamenu__icona--chiudi,
.megamenu__scritta--chiudi,
.megamenu[open] .megamenu__icona--apri,
.megamenu[open] .megamenu__scritta--apri,
.megamenu__apri[aria-expanded="true"] .megamenu__icona--apri,
.megamenu__apri[aria-expanded="true"] .megamenu__scritta--apri { display: none; }
.megamenu[open] .megamenu__icona--chiudi,
.megamenu__apri[aria-expanded="true"] .megamenu__icona--chiudi { display: block; }
.megamenu[open] .megamenu__scritta--chiudi,
.megamenu__apri[aria-expanded="true"] .megamenu__scritta--chiudi { display: inline; }

/* Il pannello: sotto il filo della testata, largo quanto la pagina, chiuso da un filo forte. Se è più alto dello
   schermo scorre lui (la pagina sotto è ferma). */
.megamenu__pannello {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--cicl-bg);
  color: var(--cicl-text);
  border-bottom: 2px solid var(--cicl-text);
}
.megamenu--js .megamenu__pannello {
  max-height: calc(100dvh - var(--megamenu-cima, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.megamenu__pannello[hidden] { display: none; }
html.megamenu-aperto { overflow: hidden; }
/* Il velo sulla pagina sotto il pannello: un clic e il Menu si chiude. --cicl-band e non --cicl-text, che nel
   tema scuro è chiaro. Sta nel body, appena sotto la testata (z-index 50) e sopra la pagina. */
.megamenu__velo {
  position: fixed;
  top: var(--megamenu-cima, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 49;
  background: color-mix(in srgb, var(--cicl-band) 50%, transparent);
}
.megamenu__velo[hidden] { display: none; }
.megamenu__dentro {
  width: min(1240px, 100% - 2.5rem);
  margin: 0 auto;
  padding: 24px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* In cima la ricerca, a tutta riga */
.megamenu__cerca { display: flex; align-items: center; gap: 8px 20px; margin: 0; }
.megamenu__cerca .megamenu__etichetta { flex-shrink: 0; white-space: nowrap; }
.megamenu__etichetta {
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cicl-muted);
}
.megamenu__cerca input,
.megamenu__cerca-corridore input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--cicl-text);
  border-radius: 0;
  background: var(--cicl-bg);
  color: var(--cicl-text);
  font-family: var(--cicl-font-testo);
  font-size: 1rem;
}
.megamenu__cerca input::placeholder,
.megamenu__cerca-corridore input::placeholder { color: var(--cicl-muted); opacity: 1; }

/* Le voci, in quattro colonne */
.megamenu__gruppi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.megamenu__gruppo { min-width: 0; border-top: 2px solid var(--cicl-text); padding-top: 10px; }
/* La voce in cui si è: la colonna in nebbia (e il nome con aria-current) */
.megamenu__gruppo--qui { background: var(--cicl-surface); padding: 10px 14px 14px; }
.megamenu__capo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.megamenu__nome {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--cicl-text);
  font-family: var(--cicl-font-testo);
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
}
.megamenu__nome:hover { color: var(--cicl-cobalt); }
.megamenu .megamenu__riga { margin: 0 0 10px; font-size: 0.875rem; line-height: 1.45; color: var(--cicl-muted); }
.megamenu__elenco { list-style: none; margin: 0; padding: 0; }
.megamenu__voce {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  width: 100%;
  min-height: 44px;
  padding: 11px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--cicl-line);
  background: none;
  color: var(--cicl-text);
  font-family: var(--cicl-font-testo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.megamenu__voce:hover { color: var(--cicl-cobalt); }
.megamenu__voce .ia { font-size: 0.85em; }
.megamenu__nota {
  flex-shrink: 0;
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  color: var(--cicl-muted);
  font-variant-numeric: tabular-nums;
}
.megamenu__cerca-corridore { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
/* «Tutto, dal più recente»: l'ultima colonna, senza sottolivelli */
.megamenu__gruppo--tutto .megamenu__nome span { font-family: var(--cicl-font-numeri); }

/* In fondo: le pagine della redazione; a destra la lingua e il tema */
.megamenu__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--cicl-line);
  padding-top: 8px;
}
.megamenu__redazione { display: flex; flex-wrap: wrap; gap: 0 22px; }
.megamenu__redazione a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cicl-text);
  font-size: 0.9375rem;
  text-decoration: none;
}
.megamenu__redazione a:hover { color: var(--cicl-cobalt); text-decoration: underline; text-underline-offset: 0.3em; }
.megamenu__opzioni { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.megamenu__tema {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cicl-text);
  font-family: var(--cicl-font-numeri);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.megamenu__tema:hover { color: var(--cicl-cobalt); }
.megamenu__tema svg { width: 18px; height: 18px; }
.megamenu__tema-chiaro,
[data-theme="scuro"] .megamenu__tema-scuro { display: none; }
[data-theme="scuro"] .megamenu__tema-chiaro { display: inline; }
.megamenu__opzioni .lingua { font-size: 0.8125rem; }

/* Fra il telefono e lo schermo largo: due colonne */
@media (max-width: 1023px) {
  .megamenu__gruppi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Il +/– dei sottolivelli: solo al telefono, solo con lo script (senza, i sottolivelli sono tutti aperti) */
.megamenu__piu { display: none; }
.megamenu__piu[hidden] { display: none !important; }

/* Al telefono il pannello prende lo schermo sotto la testata e scorre lui, non la pagina: la ricerca, poi le voci
   una sotto l'altra. Il nome porta alla pagina, il +/– da 44 px apre i sottolivelli; la voce in cui si è parte
   aperta, con il filo a sinistra. Senza JavaScript il pannello resta nella pagina, sotto la testata. */
@media (max-width: 759px) {
  .megamenu__apri { padding: 0 12px 0 14px; }
  .megamenu--js .megamenu__pannello {
    position: fixed;
    top: var(--megamenu-cima, 0px);
    bottom: 0;
    max-height: none;
    border-bottom: 0;
  }
  .megamenu__dentro { width: calc(100% - 32px); padding: 16px 0 40px; gap: 16px; }
  .megamenu__cerca { flex-direction: column; align-items: stretch; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--cicl-text); }
  .megamenu__gruppi { display: block; }
  .megamenu__gruppo,
  .megamenu__gruppo--qui { border-top: 0; border-bottom: 1px solid var(--cicl-line); padding: 0; background: none; }
  .megamenu__gruppo--qui { border-left: 3px solid var(--cicl-text); padding-left: 12px; }
  .megamenu__capo { min-height: 52px; }
  .megamenu__nome { font-size: 1.25rem; flex: 1 1 auto; min-height: 52px; }
  .megamenu .megamenu__riga { display: none; }
  .megamenu__piu {
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cicl-line);
    border-radius: 0;
    background: var(--cicl-bg);
    color: var(--cicl-text);
    cursor: pointer;
  }
  .megamenu__piu[aria-expanded="true"] { background: var(--cicl-text); border-color: var(--cicl-text); color: var(--cicl-bg); }
  .megamenu__piu-segno::before { content: "+"; font-family: var(--cicl-font-numeri); font-size: 1.25rem; line-height: 1; }
  .megamenu__piu[aria-expanded="true"] .megamenu__piu-segno::before { content: "−"; }
  .megamenu__sotto { padding: 0 0 12px 16px; }
  .megamenu--js .megamenu__gruppo--piu:not(.is-aperto) .megamenu__sotto { display: none; }
  .megamenu__voce { border-bottom: 0; font-size: 1.0625rem; padding: 10px 0; }
  .megamenu__piede { flex-direction: column; align-items: flex-start; border-top: 0; padding-top: 0; }
  .megamenu__redazione { flex-direction: column; }
}

/* ---------------------------------------------------------------
   Piede: fascia scura in tutti e due i temi
   --------------------------------------------------------------- */

.piede {
  background: var(--cicl-band);
  color: var(--cicl-band-text);
}
.piede a { color: var(--cicl-band-strong); text-decoration: none; }
.piede a:hover { color: var(--cicl-fluo); }
.piede .marchio__nome { color: var(--cicl-band-strong); font-size: 1.9rem; }
.piede__colonne {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.piede__colonne > * { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; font-size: 0.9375rem; }
.piede__colonne > .piede__chi { flex: 1 1 280px; gap: 14px; }
.piede__chi p { margin: 0; max-width: 320px; line-height: 1.5; }
.piede__titolo {
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cicl-band-muted);
}
.piede__fondo {
  border-top: 1px solid var(--cicl-band-line);
  padding-top: 20px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  color: var(--cicl-band-muted);
}
.piede__fondo a { color: var(--cicl-band-text); }
/* Ogni link del piede è alto 44 px: le voci si toccano col dito, senza spazio vuoto in mezzo */
.piede__colonne > nav { gap: 0; }
.piede__colonne > nav > .piede__titolo { margin-bottom: 4px; }
.piede__colonne > nav > a { display: flex; align-items: center; min-height: 44px; }
.piede__fondo { align-items: center; }
.piede__fondo a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; }
/* Sul telefono le colonne vanno una sotto l'altra: le voci su due colonne, perché il piede non diventi lunghissimo */
@media (max-width: 600px) {
  .piede__colonne > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .piede__colonne > nav > .piede__titolo { grid-column: 1 / -1; }
}

.wp-block-post-featured-image img {
  border-radius: 2px;
}

/* ===============================================================
   Le pagine: home, articolo, sezioni, pagine redazionali
   =============================================================== */

.etichetta--fluo { color: var(--cicl-fluo); }
.link-mono, .link-mono a {
  font-family: var(--cicl-font-numeri);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.link-mono a:hover { text-decoration: underline; }
.sommario { color: var(--cicl-body); line-height: 1.45; }

/* Le iniziali al posto delle foto (niente Gravatar) */
.iniziali {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cicl-surface);
  border: 1px solid var(--cicl-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cicl-text);
}
.iniziali--grandi { width: 64px; height: 64px; font-size: 1.125rem; }

/* La sezione su fondo fluo, in apertura */
.distintivo { margin: 0; }
.distintivo a {
  display: inline-block;
  background: var(--cicl-fluo);
  color: var(--cicl-on-fluo);
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  text-decoration: none;
  min-height: 0;
}
.distintivo .wp-block-post-terms__separator { display: none; }
.distintivo a + a { display: none; } /* una sola sezione in apertura */

/* La sezione sopra i titoli delle schede: grigia, maiuscoletto (il cobalto è la corsa vissuta) */
.sezione a { color: var(--cicl-muted); }
.sezione { margin-bottom: -0.5rem; }

/* --- Home ------------------------------------------------------- */

.apertura .wp-block-post-title { line-height: 0.98; letter-spacing: -0.02em; }
.apertura .wp-block-post-title a { text-decoration: none; }
.apertura .wp-block-post-featured-image { margin-top: 0.5rem; }
.fascia-filo { border-top: 1px solid var(--cicl-line); padding-top: 3rem; padding-bottom: 4rem; }
.capo-sezione { margin-bottom: 1.75rem; }
.capo-sezione h2 { margin: 0; }
.primo-piano:not(:has(.wp-block-post, .elenco)) { display: none; }
.ultimi:not(:has(.wp-block-post)) { display: none; }

.schede .wp-block-post { display: flex; flex-direction: column; gap: 0.75rem; }
.schede .wp-block-post-featured-image { margin: 0; }
/* La scheda non schiaccia la foto: nella griglia le righe hanno altezze uguali */
.schede .wp-block-post > * { flex-shrink: 0; }
.schede .wp-block-post-featured-image a { height: auto; background: #14171C; }
.schede .wp-block-post-title { margin: 0; line-height: 1.12; }
.schede .wp-block-post-title a { text-decoration: none; }
.schede .wp-block-post-title a:hover { text-decoration: underline; }
.schede .wp-block-post-excerpt { margin: 0; color: var(--cicl-body); font-size: 1rem; line-height: 1.55; }
.schede .wp-block-post-excerpt__excerpt { margin: 0; }
.schede .wp-block-post-date { font-family: var(--cicl-font-numeri); font-size: 0.75rem; color: var(--cicl-muted); }
/* Con pochi pezzi la griglia a tre colonne lasciava una colonna vuota: con due pezzi due colonne, con uno solo la
   scheda larga, la foto a sinistra e il testo accanto */
@media (min-width: 782px) {
  .schede.is-layout-grid:has(> .wp-block-post:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schede.is-layout-grid:has(> .wp-block-post:only-child) { grid-template-columns: minmax(0, 1fr); }
  .schede > .wp-block-post:only-child { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 2rem; align-content: start; }
  .schede > .wp-block-post:only-child > .wp-block-post-featured-image { grid-row: 1 / span 6; }
  .schede > .wp-block-post:only-child > :not(.wp-block-post-featured-image) { grid-column: 2; }
}

.elenco-titoli, .elenco-risultati { border-top: 2px solid var(--cicl-text); }
.elenco-titoli .wp-block-post,
.elenco-risultati .wp-block-post {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
  padding: 18px 0; margin: 0;
  border-bottom: 1px solid var(--cicl-line);
}
.elenco-titoli .wp-block-post-title,
.elenco-risultati .wp-block-post-title { margin: 0; flex: 1 1 20rem; }
.elenco-titoli .wp-block-post-title a,
.elenco-risultati .wp-block-post-title a { text-decoration: none; }
.elenco-risultati .wp-block-post-excerpt { flex-basis: 100%; margin: 0; color: var(--cicl-body); }
.elenco-risultati .wp-block-post-excerpt__excerpt { margin: 0; }
.elenco-risultati .wp-block-post-date { font-family: var(--cicl-font-numeri); font-size: 0.75rem; color: var(--cicl-muted); }

/* La fascia scura del laboratorio */
.laboratorio {
  background: var(--cicl-band);
  color: var(--cicl-band-strong);
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.laboratorio h2, .laboratorio h3 { color: var(--cicl-band-strong); }
.laboratorio h2 { margin: 0.75rem 0 0; line-height: 1.02; }
.laboratorio__link a {
  color: var(--cicl-band-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--cicl-fluo);
  padding-bottom: 4px;
  font-weight: 600;
}
.laboratorio__regole {
  gap: 1px !important;
  background: var(--cicl-band-line);
  border: 1px solid var(--cicl-band-line);
}
.laboratorio__regole .wp-block-column { background: var(--cicl-band); padding: 28px; }
.laboratorio__regole h3 { font-family: var(--cicl-font-testo); font-size: 1.375rem; font-weight: 700; margin: 0.5rem 0; letter-spacing: 0; }
.laboratorio__regole p { color: var(--cicl-band-text); margin: 0; line-height: 1.55; }
.laboratorio__numero { font-family: var(--cicl-font-numeri); font-size: 0.8125rem; color: var(--cicl-fluo) !important; text-transform: uppercase; }

/* --- Testata scura delle sezioni ------------------------------- */

.testata-scura {
  background: var(--cicl-band);
  color: var(--cicl-band-strong);
  padding-top: 4rem;
  padding-bottom: 3.5rem;
}
.testata-scura h1 { color: var(--cicl-band-strong); margin: 0.5rem 0 0; line-height: 0.98; }
.testata-scura .wp-block-term-description,
.testata-scura p:not(.etichetta) { color: var(--cicl-band-text); }
.autore-testata { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--cicl-font-numeri); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.autore-testata__conto { color: var(--cicl-fluo); }

/* --- Articolo ---------------------------------------------------- */

/* Appena sotto la testata (assets/lettura.js le dà il top: il bordo basso della testata, compatta o no). Il margine a 0
   perché WordPress mette lo spazio fra i blocchi anche a lei, e la spostava a metà della testata. */
.barra-lettura {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 49; margin: 0;
  pointer-events: none;
}
.barra-lettura span {
  display: block; height: 100%; width: 100%;
  background: var(--cicl-fluo);
  transform-origin: 0 50%;
  transform: scaleX(var(--letto, 0));
}

.articolo__capo { padding-top: 3rem; }
.articolo__capo .wp-block-post-title { margin: 1rem 0 0; line-height: 0.98; letter-spacing: -0.025em; }
/* Il titolo può uscire dalla colonna del testo: largo, su due righe invece di quattro */
.articolo__capo.is-layout-constrained > .wp-block-post-title { max-width: min(1000px, 100%); font-size: clamp(2.4rem, 1.2rem + 3vw, 4.5rem); text-wrap: balance; }
.articolo .wp-block-post-featured-image { margin-top: 2.5rem; }
.articolo .wp-block-post-featured-image figcaption,
.corpo figcaption,
.wp-element-caption {
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--cicl-muted);
  margin-top: 0.6rem;
}

.corpo { font-size: var(--wp--preset--font-size--lettura); line-height: 1.7; color: var(--cicl-body); margin-top: 2.5rem; }
/* Il capolettera. Le sue misure passano dall'interruttore --capolettera: acceso è vuoto, spento è
   «initial», che rende non valide le dichiarazioni e le riporta al valore ereditato. Si spegne dentro
   un link: la prima lettera eredita dall'elemento che la contiene, così un attacco come «Paul Seixas»
   con il link resta intero, mentre «Il 10 ottobre, a Como, Paul Seixas…» tiene il capolettera. */
.corpo > p:first-of-type { --capolettera: ; }
.corpo > p:first-of-type a { --capolettera: initial; }
.corpo > p:first-of-type::first-letter {
  float: var(--capolettera) left;
  font-family: var(--capolettera) var(--cicl-font-titoli);
  font-size: var(--capolettera) 4.6em;
  line-height: var(--capolettera) 0.82;
  font-weight: var(--capolettera) 600;
  padding: var(--capolettera) 0.06em 0.1em 0 0;
  color: var(--capolettera) var(--cicl-text);
}
.corpo h2 { font-size: var(--wp--preset--font-size--grande); margin-top: 1.6em; margin-bottom: 0.4em; color: var(--cicl-text); }
.corpo h3 { font-size: var(--wp--preset--font-size--medio); margin-top: 1.6em; margin-bottom: 0.3em; color: var(--cicl-text); }
.corpo a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.corpo figure.wp-block-image img { width: 100%; height: auto; }
.corpo .wp-block-pullquote,
.corpo blockquote.wp-block-quote { margin: 2.5rem 0; }
.corpo blockquote cite,
.corpo .wp-block-quote cite {
  display: block; margin-top: 0.75rem;
  font-family: var(--cicl-font-numeri); font-style: normal; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cicl-muted);
}
.corpo table { font-size: 0.9375rem; }

/* Le tabelle (core/table): il filo forte sotto l'intestazione, i fili sottili fra le righe, niente
   fili verticali, le intestazioni allineate come le loro celle (a destra solo dove WordPress mette
   has-text-align-right, come per i tempi). Le strisce non usano il #f0f0f0 di WordPress, che nel tema
   scuro spegneva il testo: sono un velo del colore del testo, così reggono sulla carta, sulla nebbia
   delle Analisi e delle Storie e nel tema scuro. */
.wp-block-table thead { border-bottom: 2px solid var(--cicl-text); }
.wp-block-table tfoot { border-top: 2px solid var(--cicl-text); }
.wp-block-table td,
.wp-block-table th {
  border: 0;
  padding: 0.55em 0.75em;
  vertical-align: baseline;
}
.wp-block-table tbody td,
.wp-block-table tbody th { border-bottom: 1px solid var(--cicl-line); }
.wp-block-table th { color: var(--cicl-text); font-weight: 600; }
.wp-block-table thead th { vertical-align: bottom; }
:where(.wp-block-table) th { text-align: start; }
.wp-block-table.is-style-stripes { border-bottom: 0; }
:root .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--cicl-surface);
  background-color: color-mix(in srgb, var(--cicl-text) 6%, transparent);
}
:root .wp-block-table.is-style-stripes tbody td,
:root .wp-block-table.is-style-stripes tbody th { border-bottom-color: transparent; }
.wp-block-table.is-style-stripes table { border-bottom: 1px solid var(--cicl-line); }

/* I riquadri che la redazione inserisce dai pattern */
.in-sintesi {
  border-top: 2px solid var(--cicl-text);
  border-bottom: 1px solid var(--cicl-line);
  padding: 1rem 0 1.25rem;
  margin: 1.5rem 0 2rem;
}
.in-sintesi ul { margin: 0.5rem 0 0; padding-left: 1.2em; font-size: 1.0625rem; }
.in-sintesi li { margin: 0.35rem 0; }
.in-sintesi li::marker { color: var(--cicl-text); }
/* «Il conto»: l'esempio svolto di una guida, passo per passo, su nebbia (Mnemosyne, blocchi.py) */
.conto {
  background: var(--cicl-surface);
  padding: 1rem 1.25rem 1.1rem;
  margin: 1.75rem 0;
}
.conto ol { margin: 0.5rem 0 0; padding-left: 1.6em; font-size: 1.0625rem; }
.conto li { margin: 0.35rem 0; }
.conto li::marker { font-family: var(--cicl-font-numeri); font-size: 0.875rem; color: var(--cicl-muted); }
.conto .conto__risultato {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cicl-line);
  font-weight: 650;
  color: var(--cicl-text);
}
/* i numeri in colonna non vanno a capo: una forchetta («2,1-2,4») spezzata non si legge */
.wp-block-table td.has-text-align-right { white-space: nowrap; }
.metodo-pezzo {
  background: var(--cicl-surface);
  border-left: 6px solid var(--cicl-fluo);
  padding: 1.25rem 1.5rem;
  margin: 3rem 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.metodo-pezzo p { margin: 0.5rem 0 0; }
.metodo-pezzo .etichetta { margin: 0; color: var(--cicl-text); }
/* «I numeri della corsa»: il riquadro dei dati in fondo alle notizie (laboratorio/numeri_corsa.py) */
.numeri-corsa {
  background: var(--cicl-surface);
  border-left: 6px solid var(--cicl-fluo);
  padding: 1.25rem 1.5rem;
  margin: 3rem 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
}
.numeri-corsa .etichetta { margin: 0; color: var(--cicl-text); }
.numeri-corsa__voci { margin: 0.75rem 0 0; padding: 0; border-top: 2px solid var(--cicl-text); }
.numeri-corsa__voce {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cicl-line);
}
.numeri-corsa dt {
  font-family: var(--cicl-font-numeri);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cicl-muted);
  padding-top: 0.35rem;
}
.numeri-corsa dd { margin: 0; color: var(--cicl-body); }
.numeri-corsa__valore {
  display: block;
  font-family: var(--cicl-font-numeri);
  font-variant-numeric: tabular-nums;
  font-size: var(--wp--preset--font-size--medio);
  line-height: 1.25;
  color: var(--cicl-text);
}
.numeri-corsa__nota { display: block; margin-top: 0.2rem; font-size: 0.9375rem; }
.numeri-corsa .numeri-corsa__metodo { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--cicl-muted); }
@media (max-width: 600px) {
  .numeri-corsa { padding: 1rem; }
  .numeri-corsa__voce { grid-template-columns: minmax(0, 1fr); }
  .numeri-corsa dt { padding-top: 0; }
}
.correzione {
  border: 1px solid var(--cicl-line);
  border-left: 6px solid var(--cicl-cobalt);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  margin: 2rem 0;
}

.articolo__fondo { margin-top: 2.5rem; padding-bottom: 3.5rem; }
.articolo__fondo > * + * { margin-top: 1.5rem; }
.etichette a {
  display: inline-block;
  border: 1px solid var(--cicl-line);
  padding: 6px 12px;
  font-size: 0.875rem;
  text-decoration: none;
  min-height: 0;
  margin: 0 6px 6px 0;
}
.etichette .wp-block-post-terms__separator { display: none; }
.correzioni { font-size: 0.9375rem; color: var(--cicl-muted); }

/* --- I formati: ogni pezzo ha l'aspetto di quello a cui serve ------ */
/* La classe formato-… sta sul body dell'articolo e sulle schede (mu-plugin, inc/articoli.php). Notizia: com'è.
   Vigilia: la tabella di marcia. Analisi: la carta annotata, con le note del fagIAno a margine. Storia: la carta e l'albo. Guida: il manuale. */

.formato-vigilia .articolo__capo,
.formato-analisi .articolo__capo,
.formato-storia .articolo__capo,
.formato-guida .articolo__capo { padding-bottom: 1.25rem; border-bottom: 3px double var(--cicl-text); }
.formato-vigilia .sommario,
.formato-analisi .sommario,
.formato-storia .sommario,
.formato-guida .sommario { font-family: var(--cicl-font-titoli); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.32; color: var(--cicl-text); }

/* Vigilia: le tabelle come la cronotabella dell'organizzatore */
.formato-vigilia .corpo .wp-block-table table { border-top: 3px double var(--cicl-text); }
.formato-vigilia .corpo .wp-block-table thead { border-bottom: 1px solid var(--cicl-text); }
.formato-vigilia .corpo .wp-block-table th { font-family: var(--cicl-font-numeri); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.formato-vigilia .corpo .wp-block-table td { font-variant-numeric: tabular-nums; }
/* Vigilia e Analisi (Paolo, 14/10/2026): i titoletti come le voci di un dossier, in maiuscolo spaziato sotto un filo;
   il titoletto classico resta alle Notizie, il corsivo alle Storie */
.formato-vigilia .corpo h2,
.formato-analisi .corpo h2 { font-family: var(--cicl-font-numeri); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: .9rem; border-top: 1px solid var(--cicl-text); margin-top: 2.75rem; margin-bottom: 1rem; }
/* Sotto il titoletto in maiuscolo, l'H3 non deve pesare di più: Schibsted, poco più grande del testo */
.formato-vigilia .corpo h3,
.formato-analisi .corpo h3 { font-family: var(--cicl-font-testo); font-size: 1.0625rem; font-weight: 650; text-transform: none; letter-spacing: 0; margin-top: 1.75rem; }

/* Guida: il manuale. Ogni sezione è una domanda del lettore, separata da un filo come le voci di un prontuario */
.formato-guida .corpo h2 { padding-top: .9rem; border-top: 1px solid var(--cicl-text); }

/* Analisi: la carta annotata. La foto in bianco e nero, i numeri che contano sottolineati in fluo, le note a margine */
/* La nebbia sotto la pagina, anche nelle Storie: le note a margine tornano sulla carta, per staccarsi dal fondo */
.formato-analisi .wp-site-blocks > main,
.formato-storia .wp-site-blocks > main { background: var(--cicl-surface); }
.formato-analisi .fascia-filo,
.formato-storia .fascia-filo { background: var(--cicl-bg); }
.formato-analisi .corpo > .nota,
.formato-storia .corpo > .nota { background: var(--cicl-bg); }
@media (min-width: 1360px) {
  .formato-analisi .corpo > .nota,
  .formato-storia .corpo > .nota { background: none; }
}
/* Analisi, Notizie e Vigilie: la foto in testa a colori naturali; la trattata (inc/foto-trattate.php) ha lo sfondo e il
   corridore a colori. Niente foto tutte grigie (13/10/2026) */

/* Storia: la carta e l'albo d'oro. Il capolettera più grande, le foto nello sfondo carta, le citazioni in Bodoni */
.formato-storia .corpo > p:first-of-type { font-size: 1.12em; }
.formato-storia .corpo > p:first-of-type::first-letter { font-size: var(--capolettera) 5.6em; font-style: var(--capolettera) italic; }
.formato-storia .wp-block-post-featured-image img:not(.foto--trattata),
.formato-storia .corpo img { filter: url(#fagianata-sfondo-storia); }
.formato-storia .corpo h2 { font-style: italic; font-weight: 500; }
.formato-storia .corpo blockquote,
.formato-storia .corpo .wp-block-pullquote { font-family: var(--cicl-font-titoli); font-style: italic; font-size: 1.3em; line-height: 1.35; border-left: 0; padding: 0; text-align: center; }
.formato-storia .corpo hr { border: 0; text-align: center; margin: 2.5rem 0; }
.formato-storia .corpo hr::after { content: "· · ·"; font-family: var(--cicl-font-titoli); letter-spacing: .6em; color: var(--cicl-muted); }

/* --- Pagine redazionali ---------------------------------------- */

.pagina__capo { padding-top: 3.5rem; }
.pagina__capo .wp-block-post-title { margin: 0; line-height: 0.98; letter-spacing: -0.025em; }
.corpo--pagina > p:first-of-type::first-letter { all: unset; }

/* --- Ricerca e 404 ------------------------------------------------ */

.ricerca .wp-block-search__inside-wrapper { border: 1px solid var(--cicl-text); padding: 0; }
.ricerca .wp-block-search__input { border: 0; height: 52px; padding: 0 16px; font: inherit; font-size: 1rem; background: var(--cicl-bg); color: var(--cicl-text); }
.ricerca .wp-block-search__button { margin: 0; border-radius: 0; padding: 0 22px; }
/* L'etichetta sopra il campo, come le altre etichette del sito, staccata dal riquadro */
.ricerca .wp-block-search__label { display: block; margin-bottom: 10px; font-family: var(--cicl-font-numeri); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cicl-muted); }
/* Un corridore fra i risultati: l'occhiello «Corridore · squadra» al posto della sezione, niente data di pubblicazione */
.elenco-risultati .type-corridore .wp-block-post-date { display: none; }
.elenco-risultati .type-corridore .sezione { font-family: var(--cicl-font-numeri); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cicl-muted); }
/* La 404: i tre pulsanti in una riga sul computer, il campo di ricerca staccato */
.non-trovata .wp-block-buttons { gap: 10px; }
.non-trovata .wp-block-button__link { padding: 12px 18px; font-size: 0.9375rem; }
.non-trovata .ricerca { margin-top: 2rem; }
.fagiano-grande { display: flex; justify-content: center; color: var(--cicl-text); }
.fagiano-grande svg { width: 100%; max-width: 420px; height: auto; transform: scaleX(-1); }
.fagiano-grande .marchio__occhio, .fagiano-grande .marchio__nodo { fill: var(--cicl-fluo); }
.non-trovata h1 { line-height: 0.98; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--cicl-text); color: var(--cicl-text); background: transparent; }

/* --- Paginazione ------------------------------------------------ */

.wp-block-query-pagination { margin-top: 3rem; font-family: var(--cicl-font-numeri); font-size: 0.875rem; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .current { background: var(--cicl-text); color: var(--cicl-bg); padding: 2px 8px; }

/* Lo schema della pagina «Cos'è una fagianata» */
.schema-fagianata { margin: 2.5rem 0; color: var(--cicl-text); }
.schema-fagianata svg { width: 100%; height: auto; display: block; }
.schema-asse { font-family: var(--cicl-font-numeri); font-size: 12px; letter-spacing: 0.12em; fill: var(--cicl-muted); }
.schema-nome { font-family: var(--cicl-font-titoli); font-style: italic; font-size: 22px; fill: currentColor; }

/* Le fonti in fondo a una pagina */
.fonti { border-top: 2px solid var(--cicl-text); margin-top: 3rem; padding-top: 1rem; font-size: 0.875rem; line-height: 1.55; color: var(--cicl-muted); }
.fonti ul { padding-left: 1.1em; }
.fonti li { margin: 0.4rem 0; }

/* Il piede attacca alla fascia della newsletter, quando la pagina finisce così */
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > main:has(> .iscrizione:last-child) + footer .piede { margin-top: 0 !important; }

/* ===============================================================
   Le figure: gli studi del fagiano (assets/marchio/*.svg)
   Il tratto è currentColor; fluo e «carta» passano dai token, così i
   disegni seguono il tema chiaro, quello scuro e le fasce scure.
   =============================================================== */

.svg-acc { fill: var(--cicl-fluo); }
.svg-acc-tratto { stroke: var(--cicl-fluo); }
.svg-carta { fill: var(--cicl-bg); }
.svg-carta-tratto { stroke: var(--cicl-bg); }
.testata-scura .svg-carta, .laboratorio .svg-carta, .piede .svg-carta { fill: var(--cicl-band); }

.figura { margin: 0; color: var(--cicl-text); }
.figura svg, .figura .marchio__fagiano { display: block; width: 100%; height: auto; }
/* Nelle pagine la figura occupa la colonna del testo e il disegno sta a sinistra, allineato al titolo */
.figura--pagina { margin-bottom: 1.25rem; }
.figura--pagina svg { width: 200px; }
.figura--pagina.figura--distintivo svg { width: 150px; }
.figura--pagina.figura--timbro svg { width: 260px; }
/* Il fagiano delle grandi corse, in testa alla colonna della scheda */
.figura--corsa { margin-bottom: 1.25rem; }
.figura--corsa svg { width: 210px; }

.testata-scura__riga { gap: 2rem 3rem; }
.testata-scura__testo { flex: 1 1 28rem; }
.testata-scura .figura { flex: 0 1 300px; color: var(--cicl-band-strong); }
.testata-scura .figura--distintivo { flex-basis: 220px; }
@media (max-width: 700px) {
  .testata-scura .figura { flex-basis: 180px; }
}

/* Il distintivo su fondo scuro diventa fluo, come una toppa */
.testata-scura .figura-svg--distintivo .svg-asfalto,
[data-theme="scuro"] .figura-svg--distintivo .svg-asfalto { fill: var(--cicl-fluo); }
.testata-scura .figura-svg--distintivo .svg-chiaro,
[data-theme="scuro"] .figura-svg--distintivo .svg-chiaro { fill: #0D0F12; }
.testata-scura .figura-svg--distintivo .svg-acc,
[data-theme="scuro"] .figura-svg--distintivo .svg-acc { fill: #2846F0; }
.testata-scura .figura-svg--distintivo .svg-acc-tratto,
[data-theme="scuro"] .figura-svg--distintivo .svg-acc-tratto { stroke: #0D0F12; }
.corpo--campioni { margin-top: 1.5rem; }

/* La riga delle notizie uscite da sole (mnemosyne, scrittore.py): sparisce quando una persona le rilegge */
.nota-automatica { font-family: var(--cicl-font-numeri); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--cicl-muted); }

/* --- «Chiedi al fagIAno» con la domanda pronta (la pagina di una squadra): apre la chat (inc/assistente.php) --- */
.chiedi {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--cicl-text); border: 1.5px solid var(--cicl-text); border-radius: 0; cursor: pointer;
  font-family: var(--cicl-font-testo); font-size: 0.875rem; font-weight: 650; white-space: nowrap;
}
.chiedi:hover { background: var(--cicl-text); color: var(--cicl-bg); }
.chiedi .ia { font-size: 0.85em; }

/* --- Il timbro tondo nel piede: il fagiano al centro, la testata in giro, un po' storto come un timbro vero --- */
.piede .timbro-tondo { width: 150px; height: auto; margin-top: 18px; color: var(--cicl-band-strong); }
.timbro-tondo__giro { font-family: var(--cicl-font-numeri); font-size: 12.4px; font-weight: 600; letter-spacing: 0.16em; }
.timbro-tondo__ia { fill: var(--cicl-fluo); }
.timbro-tondo__sigla { font-family: var(--cicl-font-numeri); font-size: 10px; font-weight: 700; fill: var(--cicl-on-fluo); letter-spacing: 0.04em; }
@media (max-width: 599px) { .piede .timbro-tondo { width: 120px; } }

/* La striscia della lingua (mu-plugin, inc/lingue.php): in cima, sottile, una frase e la chiusura */
.lingua-suggerita {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0 1rem;
  background: var(--cicl-surface);
  border-bottom: 1px solid var(--cicl-line);
  font-family: var(--cicl-font-numeri);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.lingua-suggerita a {
  color: var(--cicl-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.75rem 0;
}
.lingua-suggerita a:hover { color: var(--cicl-cobalt); }
.lingua-suggerita__chiudi {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--cicl-muted);
  font-size: 1.25rem;
  cursor: pointer;
}