/* base.css — reset minimale, font self-hosted (OFL, spediti nel tema in assets/fonts/), tipografia
   e accessibilita' di base. home_linen_store.
   I token vivono in tokens.css: qui si consumano, non si ridichiarano colori. */

/* --- Font self-hosted (no Google Fonts, zero-live). theme.json dichiara le stesse famiglie/pesi. --- */
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
/* ⚠ `scroll-behavior: smooth` rompe ogni oracolo che scorre con scrollBy e fotografa: sotto
   reduced-motion torna istantaneo, ed e' in quella modalita' che si misura. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

/* Display geometrico (Jost): la gerarchia la fanno taglia e tracciatura, non il colore.
   ⚠⚠ `text-wrap: balance` sui titoli NON si usa: pareggia le righe e lascia la meta' destra vuota — un
   capoverso bilanciato largo 1248px rende due righe da 669, e un misuratore che guarda il RIQUADRO
   dichiara 100% mentre l'inchiostro si ferma a meta'. E' il difetto «il testo resta a sinistra».
   Si usa `pretty`, che evita solo la vedova. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-display); text-wrap: pretty; color: var(--ink); }
h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); line-height: 1.2; }
p { text-wrap: pretty; }

/* --- Layout --- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
/* overflow-x: clip (mai hidden: hidden romperebbe lo sticky dell'intestazione) */
.section { padding-block: var(--section-y); overflow-x: clip; position: relative; }
.section.alt { background: var(--surface); }
.section--tight { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); }

/* ⭐ LA MISURA DI LETTURA STA SUI PARAGRAFI, non sul contenitore, non sulla riga di una griglia e non
   sulla piastra di un titolo: messa su un elemento di LAYOUT lascia il telaio largo e l'inchiostro
   stretto, che e' esattamente la meta' pagina bianca. Ed e' in `rem`, non in `ch`: `ch` si risolve sul
   font del CONTENITORE e non su quello reso, quindi 68ch possono valere 97-108 caratteri veri. */
.prose > p, .prose > ul, .prose > ol { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
/* ⭐ Una sezione SENZA fotografia cambia TELAIO: il testo prende tutta l'area e va a capo da solo, in due
   colonne quando c'e' spazio. Non lo stesso telaio con una meta' vuota. */
.prose--full > p, .prose--full > ul { max-width: none; }
@media (min-width: 1100px) {
  .prose--full { columns: 2; column-gap: var(--space-8); }
  /* ⚠ Un capoverso solo NON si mette in due colonne: si spezzerebbe a meta' frase e le due colonne
     finirebbero ad altezze diverse. Una colonna sola, piena, un corpo piu' grande. */
  .prose--full:has(> p:only-child) { columns: 1; font-size: var(--text-md); }
}

/* Le bande a tutta larghezza sono figlie del flow-layout di WordPress (block-gap fra i figli): senza
   azzerarlo compare una striscia del fondo del body fra una banda e l'altra. Va tolto anche ai figli
   DIRETTI delle bande, perche' il margine del primo figlio collassa attraverso la banda e la trascina giu'. */
.wp-block-post-content > * { margin-block: 0; }
.hero > *, .section > *, .cta-band > * { margin-block: 0; }

/* WordPress avvolge ogni parte di template in un <div>: quel wrapper diventa il contenitore dello sticky.
   `display: contents` lo toglie di mezzo senza toccarne i figli — l'intestazione resta davvero in cima. */
.wp-block-template-part { display: contents; }

/* --- Accessibilita' --- */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius);
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: var(--space-3); z-index: 100; background: var(--paper);
  color: var(--ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }