/* =============================================================================
   BASE — elementi, tipografia, gabbia.
   Solo fondamenta: nessun componente di pagina. Tutto legge i token semantici.
   ========================================================================== */

/* --- normalizzazione minima -------------------------------------------------
   Blocksy la fornisce, ma il tema figlio non deve dipendere dal padre per
   box-sizing e margine del corpo: senza, ogni .lm-gabbia somma il proprio
   padding alla larghezza e la pagina sfora in orizzontale. */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{ margin: 0; }
img, picture, video, canvas, svg{ display: block; max-width: 100%; }
input, button, textarea, select{ font: inherit; }

body{
  background: var(--lm-fondo);
  color: var(--lm-testo);
  font-family: var(--lm-font-lettura);
  font-size: var(--lm-passo-1);
  line-height: var(--lm-int-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Il tema padre dipinge il fondo con una regola «body» iniettata inline nella
   pagina: stessa specificita' della nostra (0,0,1), ma arriva dopo, quindi
   vinceva lei e il sito girava sul grigio freddo di Blocksy invece che sulla
   nostra carta. Su Rassegna la differenza era quasi invisibile; su Scorie no —
   il registro rimappa i token al fondo scuro e al testo chiaro, ma il fondo
   restava chiaro: l'articolo del libro usciva crema su bianco, 1,78:1. Si
   rilancia con «:root body» (0,0,2), che basta a passare davanti. */
:root body{ background: var(--lm-fondo); }

/* Stessa collisione sui titoli: Blocksy dichiara «h1{ color: … }» (0,0,1) nel
   proprio foglio, che arriva dopo il nostro colore da theme.json — pari
   specificita', vince lui. Sul registro Scorie il titolo restava blu scuro sul
   fondo scuro: 1,28:1. Serve passare davanti a Blocksy SENZA superare le classi
   dei componenti. «html :is(h1,…)» vale (0,0,2): batte l'elemento nudo, perde
   contro qualunque classe (0,1,0). E' l'unico gradino disponibile fra i due. */
html :is(h1, h2, h3, h4, h5, h6){ color: var(--lm-testo); }

/* --- titoli -----------------------------------------------------------------
   :where() azzera la specificità del selettore: la regola vale come se fosse
   scritta sul solo elemento (0,0,1), così qualunque classe di componente la
   vince senza dover rilanciare. Senza questo, «.lm h2» (0,1,1) batteva
   «.lm-scorie__citazione» (0,1,0) e la citazione di Reparto Scorie usciva nel
   carattere dei titoli invece che in quello da manifesto. */
:where(.lm) h1, :where(.lm) h2, :where(.lm) h3, :where(.lm) h4,
:where(.entry-content) h1, :where(.entry-content) h2,
:where(.entry-content) h3, :where(.entry-content) h4{
  font-family: var(--lm-font-titolo);
  font-weight: var(--lm-titolo-peso);
  letter-spacing: var(--lm-titolo-cren);
  text-transform: var(--lm-titolo-trasf);
  line-height: var(--lm-int-stretta);
  text-wrap: balance;
  margin: 0;
}
:where(.lm) h3, :where(.lm) h4,
:where(.entry-content) h3, :where(.entry-content) h4{ line-height: var(--lm-int-media); }

.lm-t-7{ font-size: var(--lm-passo-7); }
.lm-t-6{ font-size: var(--lm-passo-6); }
.lm-t-5{ font-size: var(--lm-passo-5); }
.lm-t-4{ font-size: var(--lm-passo-4); }
.lm-t-3{ font-size: var(--lm-passo-3); }

/* --- occhiello: l'etichetta di rubrica sopra ogni titolo -------------------- */
.lm-occhiello{
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-000);
  font-weight: var(--lm-peso-forte);
  letter-spacing: var(--lm-cren-etichetta);
  text-transform: uppercase;
  color: var(--lm-accento-testo);
  line-height: var(--lm-int-media);
}

/* --- testo di lettura ------------------------------------------------------- */
.lm-lettura{
  font-family: var(--lm-font-lettura);
  font-size: var(--lm-passo-2);
  line-height: var(--lm-int-lettura);
  color: var(--lm-testo-2);
  max-width: var(--lm-misura);
}
.lm-lettura > * + *{ margin-top: var(--lm-sp-4); }
.lm-sommario{
  font-size: var(--lm-passo-3);
  line-height: 1.5;
  color: var(--lm-testo-2);
  max-width: var(--lm-misura-stretta);
}
.lm-meta{
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-00);
  letter-spacing: .04em;
  color: var(--lm-testo-3);
  font-variant-numeric: tabular-nums;
}

/* --- collegamenti ----------------------------------------------------------- */
a{ color: var(--lm-accento-testo); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover{ text-decoration-thickness: 2px; }
.lm-lettura a{ color: var(--lm-testo); text-decoration-color: var(--lm-accento); }
.lm-lettura a:hover{ color: var(--lm-accento-testo); }
/* Anello di focus a due strati.
   Il contorno resta sempre dell'accento, perche' e' li' che deve contrastare:
   con outline-offset cade sul fondo INTORNO all'elemento, non sul suo.
   Il problema era un altro: su un bottone pieno d'accento il contorno si
   fondeva col riempimento attraverso i 2px di stacco. L'anello interno riempie
   quel varco col colore del fondo e separa le due superfici.

   QUESTA REGOLA NON USA :where(). Ovunque nel tema :where() serve ad azzerare
   la specificita', cosi' che i componenti vincano sulla base. Qui vale il
   contrario: sull'anello di focus non deve vincere nessuno. Blocksy dichiara
   «a:focus-visible{outline:2px solid var(--theme-palette-color-1)}», che a
   (0,1,1) batteva la nostra a (0,1,0): sul sito reale il contorno usciva blu
   — il colore del tema padre — invece dell'accento. Con :root e :is() si sale
   a (0,3,0) e la questione si chiude, senza !important. */
:root :is(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--lm-accento-testo);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--lm-fondo);
  border-radius: var(--lm-raggio-1);
}

/* --- citazione -------------------------------------------------------------- */
.lm-citazione{
  font-family: var(--lm-font-titolo);
  font-size: var(--lm-passo-4);
  font-style: italic;
  line-height: 1.24;
  color: var(--lm-testo);
  max-width: var(--lm-misura-stretta);
  margin: var(--lm-sp-6) 0;
  padding-left: var(--lm-sp-5);
  border-left: var(--lm-bordo-forte) solid var(--lm-accento);
}
/* Anton non ha corsivo: nel registro Scorie la citazione cambia trattamento */
.registro-scorie .lm-citazione{
  font-style: normal;
  font-size: var(--lm-passo-5);
  line-height: 1.06;
  border-left: 0;
  padding-left: 0;
  color: var(--lm-accento);
}

/* --- capolettera: solo in rassegna, mai nelle pagine professionali ---------- */
.registro-rassegna .lm-capolettera::first-letter{
  font-family: var(--lm-font-titolo);
  font-size: 3.6em;
  float: left;
  line-height: .82;
  padding: .06em .28em 0 0;
  color: var(--lm-accento);
}

/* --- gabbia ------------------------------------------------------------------ */
.lm-gabbia{ width: 100%; max-width: var(--lm-larghezza); margin-inline: auto; padding-inline: var(--lm-grondaia); }
.lm-gabbia-stretta{ width: 100%; max-width: var(--lm-larghezza-stretta); margin-inline: auto; padding-inline: var(--lm-grondaia); }
.lm-sezione{ padding-block: calc(var(--lm-sp-7) * var(--lm-densita)); }
.lm-sezione + .lm-sezione{ border-top: var(--lm-bordo) solid var(--lm-riga); }

/* --- pila e griglia: spaziatura con gap, mai con margini a mano -------------- */
.lm-pila{ display: flex; flex-direction: column; gap: var(--lm-sp-4); }
.lm-fila{ display: flex; flex-wrap: wrap; gap: var(--lm-sp-4); align-items: center; }
.lm-griglia{ display: grid; gap: var(--lm-sp-5); grid-template-columns: repeat(var(--lm-col, 3), minmax(0, 1fr)); }
@media (max-width: 1024px){ .lm-griglia{ --lm-col: 2; } }
@media (max-width: 768px){  .lm-griglia{ --lm-col: 1; } }

/* --- superfici ---------------------------------------------------------------- */
.lm-scheda{
  background: var(--lm-superficie);
  border: var(--lm-bordo) solid var(--lm-riga);
  border-radius: var(--lm-raggio);
  box-shadow: var(--lm-ombra-scheda);
}
.lm-filetto{ height: var(--lm-bordo); background: var(--lm-riga); border: 0; margin: 0; }

/* --- bottone ------------------------------------------------------------------ */
.lm-bottone{
  display: inline-flex; align-items: center; gap: var(--lm-sp-2);
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-000);
  font-weight: var(--lm-peso-forte);
  letter-spacing: var(--lm-cren-etichetta);
  text-transform: uppercase;
  padding: var(--lm-sp-3) var(--lm-sp-5);
  background: var(--lm-accento-solido);
  color: var(--lm-su-accento);
  border: var(--lm-bordo) solid var(--lm-accento-solido);
  border-radius: var(--lm-raggio);
  text-decoration: none;
  transition: opacity var(--lm-tempo-1) var(--lm-curva);
}
.lm-bottone:hover{ opacity: .88; color: var(--lm-su-accento); }
.lm-bottone--vuoto{
  background: transparent;
  color: var(--lm-testo);
  border-color: var(--lm-riga);
}
.lm-bottone--vuoto:hover{ border-color: var(--lm-accento); color: var(--lm-accento-testo); }

/* --- immagini ------------------------------------------------------------------ */
:where(.lm, .entry-content) img{ max-width: 100%; height: auto; display: block; }
.lm-figura figcaption{
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-00);
  color: var(--lm-testo-3);
  padding-top: var(--lm-sp-2);
  border-top: var(--lm-bordo) solid var(--lm-riga-tenue);
  margin-top: var(--lm-sp-3);
}

/* --- contenuto largo: mai scroll orizzontale sul corpo pagina ------------------ */
.lm-lettura table, .entry-content table,
.lm-scorrevole{ display: block; max-width: 100%; overflow-x: auto; }

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