/*
Theme Name:  Layer3
Theme URI:   https://www.layertre.it/
Author:      Layer3 S.r.l.
Description: Block theme di Layer3. Direzione "Giger": fondo scuro, Schibsted Grotesk + JetBrains Mono, accento salvia.
Version:     0.12.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: layertre
*/

:root{
  /* Dice al browser che qui e tutto scuro: barre di scorrimento, menu a
     tendina e caselle di sistema smettono di essere bianchi in mezzo al
     nero. E una riga, e si vede su ogni pagina. */
  color-scheme: dark;

  --l3-wrap: 1360px;
  /* Il margine laterale di tutto il sito. A 390px erano 20px e il testo
     sembrava incollato al vetro; adesso sono 24, e salgono con lo schermo
     fino ai 48 del disegno originale. Lo usano la testata, le sezioni
     convertite dalle artboard e gli strumenti: un valore solo, cosi' le
     colonne di testo cominciano tutte sulla stessa riga verticale. */
  --l3-gutter: clamp(24px, 5vw, 48px);
}

body{ -webkit-font-smoothing: antialiased; }
/* La testata resta in alto mentre si scorre: senza questo, i collegamenti
   interni (#indice, #stato) porterebbero il titolo della sezione sotto la
   barra. */
html{ scroll-padding-top:86px; }
::selection{ background:#9fd3b8; color:#0b0c0d; }

/* ---------- sfondo animato ----------
   Due canvas fissi: uno dietro al contenuto, uno davanti. Il contenuto sta
   sopra al primo grazie allo z-index sul wrapper del tema. */
.l3-tail{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:0; }
.l3-tail--front{ z-index:30; }
.wp-site-blocks{ position:relative; z-index:1; }

/* Chi ha chiesto meno animazioni non deve vederla MUOVERE, ma l'elemento
   grafico resta: nasconderlo del tutto toglieva un segno identitario a chi
   ha solo chiesto meno movimento. Il fermo immagine lo fa tail.js. */

/* ---------- impaginato ----------
   .l3-section centra soltanto. NON aggiunge padding verticale: le sezioni
   convertite dalle artboard portano gia' il proprio (di solito 96px sopra,
   0 sotto). Sommarli raddoppiava gli spazi fra una sezione e l'altra. */
.l3-section{ max-width:var(--l3-wrap); margin-inline:auto; }

/* Le sezioni convertite dalle artboard hanno dentro un blocco che porta gia'
   il proprio margine laterale. Quelle scritte a mano - l'informativa - no, e
   il testo finiva a filo del bordo. Il :has distingue i due casi senza dover
   ricordarsi di aggiungere una classe ogni volta che si scrive una pagina. */
.l3-section:not(:has(> .wp-block-group)){ padding-inline:var(--l3-gutter); }
.l3-prose{ padding-inline:var(--l3-gutter); }

/* Quella regola non puo' coprire i blocchi disposti a colonne: una griglia
   e' anche lei un gruppo, quindi la sezione che la contiene resta senza
   margine e le colonne finiscono a filo del bordo. In una pagina scritta a
   mano si aggiunge .l3-pad al blocco che deve stare dentro il margine.
   Nelle pagine convertite dalle artboard non serve: il margine ce l'ha gia'
   il contenitore che il convertitore si porta dietro. */
.l3-pad{ padding-inline:var(--l3-gutter); }
.l3-section--tight{ padding-block:var(--wp--preset--spacing--50); }
.l3-section--flush{ padding-top:0; }

/* ---------- tipografia di servizio ---------- */
.l3-eyebrow{
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wp--preset--color--dim); margin:0 0 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.l3-eyebrow .sep{ width:26px; height:1px; background:var(--wp--preset--color--border); flex:none; }
.l3-lead{ font-size:21px; line-height:1.45; color:var(--wp--preset--color--muted); max-width:600px; }
.l3-body{ font-size:16.5px; color:var(--wp--preset--color--muted-2); max-width:560px; }
.l3-hl{ color:var(--wp--preset--color--accent); }

/* ---------- griglie ---------- */
.l3-grid{ display:grid; gap:var(--wp--preset--spacing--50); }
.l3-grid--2{ grid-template-columns:repeat(2,1fr); }
.l3-grid--3{ grid-template-columns:repeat(3,1fr); }
.l3-grid--4{ grid-template-columns:repeat(4,1fr); }
.l3-grid--split{ grid-template-columns:1.1fr 1fr; }
@media (max-width:900px){
  .l3-grid--2,.l3-grid--3,.l3-grid--4,.l3-grid--split{ grid-template-columns:1fr; gap:var(--wp--preset--spacing--40); }
}

/* ---------- schede servizio ---------- */
.l3-card{ border-top:1px solid var(--wp--preset--color--border); padding-top:22px; }
.l3-card__num{ font-family:var(--wp--preset--font-family--mono); font-size:12px; color:var(--wp--preset--color--dim-2); letter-spacing:.18em; }
.l3-card__title{ font-size:24px; font-weight:500; letter-spacing:-.02em; margin:14px 0 10px; }
.l3-card__title a{ color:inherit; }
.l3-card__text{ font-size:16px; color:var(--wp--preset--color--muted-2); }
.l3-card ul{ list-style:none; padding:0; margin:18px 0 0; }
.l3-card li{ font-size:15px; color:var(--wp--preset--color--muted); padding:9px 0; border-bottom:1px solid var(--wp--preset--color--border-dim); }
.l3-more{ display:inline-block; margin-top:18px; font-family:var(--wp--preset--font-family--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--accent); }

/* ---------- citazioni / sintomi ---------- */
.l3-quotes{ display:flex; flex-direction:column; }
.l3-quotes > *{ font-size:17px; padding:20px 0; border-bottom:1px solid var(--wp--preset--color--border); color:var(--wp--preset--color--contrast); margin:0; }

/* ---------- metriche ---------- */
.l3-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--wp--preset--spacing--40); border-top:1px solid var(--wp--preset--color--border); padding-top:28px; }
.l3-metric__value{ font-size:40px; font-weight:400; letter-spacing:-.04em; color:var(--wp--preset--color--contrast); display:block; line-height:1.1; }
.l3-metric__label{ font-family:var(--wp--preset--font-family--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--dim); display:block; margin-top:8px; }
@media (max-width:760px){ .l3-metrics{ grid-template-columns:repeat(2,1fr); } }

/* ---------- passi di processo ---------- */
.l3-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--wp--preset--spacing--40); }
.l3-step{ border-top:1px solid var(--wp--preset--color--border); padding-top:20px; }
.l3-step__num{ font-family:var(--wp--preset--font-family--mono); font-size:12px; color:var(--wp--preset--color--accent); letter-spacing:.18em; }
.l3-step h3{ font-size:19px; margin:12px 0 8px; }
.l3-step p{ font-size:15.5px; color:var(--wp--preset--color--muted-2); }
@media (max-width:900px){ .l3-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .l3-steps{ grid-template-columns:1fr; } }

/* ---------- confronto prima/dopo ---------- */
.l3-versus{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px 24px; align-items:center; }
.l3-versus__bad{ color:var(--wp--preset--color--dim); font-size:16px; text-align:right; }
.l3-versus__arrow{ color:var(--wp--preset--color--border); font-family:var(--wp--preset--font-family--mono); }
.l3-versus__good{ color:var(--wp--preset--color--contrast); font-size:16px; }
@media (max-width:700px){ .l3-versus{ grid-template-columns:1fr; } .l3-versus__bad{ text-align:left; } .l3-versus__arrow{ display:none; } }

/* ---------- fascia CTA ---------- */
.l3-cta{ border-top:1px solid var(--wp--preset--color--border); border-bottom:1px solid var(--wp--preset--color--border); padding-block:var(--wp--preset--spacing--50); display:flex; justify-content:space-between; align-items:flex-end; gap:var(--wp--preset--spacing--40); flex-wrap:wrap; }
.l3-cta h2{ font-size:clamp(28px,4vw,46px); max-width:14ch; }

/* ---------- testata ----------
   Una barra sola al posto delle tre di prima. Topbar + testata + nav
   secondaria si prendevano 190px di cromatura prima del titolo su desktop,
   e su mobile diventavano tre strisce da scorrere di lato: tante voci
   visibili, nessuna comoda da centrare col pollice.
   Ora le voci secondarie stanno sotto «Altro» e su mobile la stessa barra
   apre un pannello. E' lo stesso HTML in tutti e due i casi: cambia solo
   come viene disposto, cosi' non esistono due menu da tenere allineati. */
/* Lo sticky va sull'involucro, non sulla barra: il blocco template-part e'
   alto quanto la testata, e un elemento appiccicato dentro un genitore
   della sua stessa altezza non ha spazio per muoversi - resta fermo e
   sembra che la regola sia sbagliata. */
header.wp-block-template-part:has( > .l3-head ){ position:sticky; top:0; z-index:40; }
.l3-head{
  position:relative;
  background:var(--wp--preset--color--base);
  border-bottom:1px solid var(--wp--preset--color--border-dim);
}
.l3-head__bar{
  max-width:var(--l3-wrap); margin-inline:auto;
  padding:13px var(--l3-gutter);
  display:flex; align-items:center; gap:28px;
}
.l3-head__logo{ flex:none; display:flex; }
.l3-head__logo img{ height:30px; width:auto; display:block; }

.l3-head__nav{ flex:1; display:flex; align-items:center; gap:24px; font-size:14px; }
.l3-head__nav > a{ color:var(--wp--preset--color--muted); white-space:nowrap; }
.l3-head__nav > a:hover{ color:var(--wp--preset--color--contrast); }

.l3-head__more{ position:relative; flex:none; }
.l3-head__more-btn{
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  font:inherit; color:var(--wp--preset--color--muted); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
}
.l3-head__more-btn:hover{ color:var(--wp--preset--color--contrast); }
/* Il segno di apribile e' disegnato col bordo invece che con un carattere:
   il font arriva da fuori e una freccia mancante lascerebbe un rettangolo. */
.l3-head__more-btn::after{
  content:""; width:5px; height:5px; margin-top:-3px; opacity:.7;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.l3-head__more.is-open .l3-head__more-btn{ color:var(--wp--preset--color--contrast); }
.l3-head__more.is-open .l3-head__more-btn::after{ margin-top:2px; transform:rotate(-135deg); }

.l3-head__more-panel{
  position:absolute; top:calc(100% + 13px); left:-18px; z-index:2;
  display:flex; flex-direction:column; gap:15px; min-width:238px; padding:18px;
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--border);
  font-family:var(--wp--preset--font-family--mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.l3-head__more-panel a{ color:var(--wp--preset--color--muted); }
.l3-head__more-panel a:hover{ color:var(--wp--preset--color--contrast); }
.l3-head__lbl{ color:var(--wp--preset--color--dim-2); }
.l3-head__more-panel a.l3-head__assistenza{
  color:var(--wp--preset--color--accent);
  border-top:1px solid var(--wp--preset--color--border-dim); padding-top:15px;
}

/* La riga «servizi gestiti: operativi» della vecchia topbar era scritta a
   mano nel tema: diceva "operativi" anche mentre un fornitore era giu'.
   Questa pastiglia la sostituisce e la accende con i dati veri del plugin
   di monitoraggio; senza plugin resta un collegamento neutro. */
.l3-head__stato{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--wp--preset--font-family--mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--dim);
}
.l3-head__stato:hover{ color:var(--wp--preset--color--muted); }
.l3-head__stato .dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--wp--preset--color--accent);
}
/* Sulla barra larga si legge il messaggio per esteso; la versione corta
   esiste solo per il telefono e qui sta nascosta. */
.l3-head__stato .corto{ display:none; }
.l3-head__stato[data-stato="DEGRADATO"] .dot{ background:#f0b357; }
.l3-head__stato[data-stato="DISSERVIZIO"] .dot{ background:#f87171; }

.l3-head__tel{
  flex:none; white-space:nowrap;
  font-family:var(--wp--preset--font-family--mono); font-size:13px;
  color:var(--wp--preset--color--muted);
}
.l3-head__burger{ display:none; }

/* Senza JavaScript il pannello resta aperto: si vede tutto il menu, come
   prima. Le regole che lo chiudono valgono solo se lo script e' partito. */
@media (min-width:901px){
  .l3-js .l3-head__more-panel{ display:none; }
  .l3-js .l3-head__more.is-open .l3-head__more-panel{ display:flex; }
}

/* ---------- testata su schermi stretti ----------
   Barra da 54px: marchio, numero di telefono (che su un telefono e' il
   collegamento piu' usato, non va sepolto in un pannello) e il tasto menu.
   Tutto il resto scende nel pannello, con righe alte 48px da centrare
   col pollice invece di una striscia da scorrere di lato. */
@media (max-width:900px){
  .l3-head__bar{ padding:10px var(--l3-gutter); gap:14px; }
  .l3-head__tel{ margin-left:auto; font-size:12.5px; }

  .l3-head__burger{
    display:inline-flex; align-items:center; gap:9px; flex:none;
    appearance:none; -webkit-appearance:none; cursor:pointer;
    padding:9px 13px; min-height:38px;
    background:none; border:1px solid var(--wp--preset--color--border);
    font-family:var(--wp--preset--font-family--mono);
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--wp--preset--color--contrast);
  }
  .l3-head__burger-i{
    position:relative; display:block; width:14px; height:11px;
    border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  }
  .l3-head__burger-i::before{
    content:""; position:absolute; left:0; right:0; top:4px;
    border-top:1px solid currentColor;
  }
  .l3-head.is-open .l3-head__burger-i{ border-color:transparent; }
  .l3-head.is-open .l3-head__burger-i::before{ transform:rotate(45deg); }
  .l3-head.is-open .l3-head__burger-i::after{
    content:""; position:absolute; left:0; right:0; top:4px;
    border-top:1px solid currentColor; transform:rotate(-45deg);
  }

  .l3-head__nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:0 var(--l3-gutter) 18px;
    background:var(--wp--preset--color--base);
    border-bottom:1px solid var(--wp--preset--color--border-dim);
    max-height:calc(100dvh - 59px); overflow-y:auto; overscroll-behavior:contain;
  }
  .l3-head__nav > a{
    padding:14px 0; font-size:16px;
    color:var(--wp--preset--color--contrast);
    border-top:1px solid var(--wp--preset--color--border-dim);
  }
  .l3-js .l3-head__nav{ display:none; }
  .l3-js .l3-head.is-open .l3-head__nav{ display:flex; }

  .l3-head__more{ position:static; }
  .l3-head__more-btn{ display:none; }
  .l3-head__more-panel{
    position:static; display:flex; flex-flow:row wrap; gap:14px 18px;
    min-width:0; padding:16px 0 0; background:none; border:0;
    border-top:1px solid var(--wp--preset--color--border-dim);
  }
  .l3-head__more-panel a.l3-head__assistenza{
    flex-basis:100%; border-top:0; padding-top:0;
  }
  /* La pastiglia dello stato adesso sta nella barra e non piu' dentro il menu
     a scomparsa: dentro, su un telefono, esisteva solo dopo aver toccato
     «Menu» - e lo stato dei servizi e' proprio la cosa che si cerca quando
     qualcosa non funziona, non dopo due tocchi. Nella barra lo spazio e'
     poco, quindi resta il pallino colorato e la parola corta; il nome per
     esteso ce l'ha il collegamento, per chi legge con la voce. */
  .l3-head__stato{ margin:0 0 0 auto; letter-spacing:.1em; min-width:0; }
  /* Il testo corto, e comunque tagliato se non ci sta: nella barra ci sono
     logo, pastiglia, numero e pulsante del menu, e il messaggio dal vivo
     puo' essere lungo. Meglio «1 servizio degra...» che un menu fuori
     dallo schermo - che e' quello che succedeva. */
  .l3-head__stato .lungo{ display:none; }
  .l3-head__stato .corto{ display:inline; }
  .l3-head__stato .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .l3-head__bar{ gap:14px; flex-wrap:nowrap; }
  .l3-head__bar > *{ min-width:0; }
  .l3-head__burger{ flex:none; }
}

/* Sotto i 600px il numero di telefono lascia il posto: e' gia' nel piede,
   nella pagina contatti e dentro il menu, mentre lo stato dei servizi si
   vede solo qui. La soglia era 420px ed era troppo bassa - su un telefono
   grande il numero restava e spingeva fuori il menu. */
@media (max-width:600px){
  .l3-head__tel{ display:none; }
}

@media (max-width:820px){
  /* Un figlio di griglia non puo' scendere sotto il proprio contenuto
     minimo: se dentro c'e' una parola lunga o un blocco a larghezza fissa
     ereditato dall'artboard, la colonna resta piu' larga dello schermo e la
     pagina scorre in orizzontale. min-width:0 glielo consente. */
  .l3-grid > *, [class*="l3-s"] > *{ min-width:0; }
}

/* Su schermi stretti la colonna di testo arriva fin dove passa la coda, e i
   tratti disegnati sulla canvas davanti finiscono sopra le parole. Sotto i
   1024px resta solo il livello di dietro: la coda si vede ancora tutta, ma
   non copre mai niente. Sono pochi tratti a opacita' 0.05, si perde un
   dettaglio e si guadagna la leggibilita'. */
@media (max-width:1024px){
  .l3-tail--front{ display:none; }
}

/* Sotto i 420px una parola lunga di un titolo puo' essere piu' larga dello
   schermo: "responsabilita'" a corpo display misura 324px su 320 di
   viewport, e da sola fa scorrere la pagina in orizzontale. La sillabazione
   funziona perche' <html> dichiara lang="it". break-word resta come rete
   per i casi che il dizionario non spezza (sigle, indirizzi). */
@media (max-width:420px){
  main h1, main h2, main h3{ overflow-wrap:break-word; hyphens:auto; }
}
/* ---------- partner + footer ---------- */
.l3-partners{ border-top:1px solid var(--wp--preset--color--border); }
.l3-partners__in{ max-width:var(--l3-wrap); margin-inline:auto; padding:26px var(--l3-gutter); display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--wp--preset--font-family--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--dim); }
.l3-partners .sep{ color:#3a3c3e; }
.l3-partners .right{ margin-left:auto; color:var(--wp--preset--color--accent); }

.l3-foot{ background:var(--wp--preset--color--deep); border-top:1px solid var(--wp--preset--color--border-dim); }
.l3-foot__in{ max-width:var(--l3-wrap); margin-inline:auto; padding:var(--wp--preset--spacing--50) var(--l3-gutter); display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--wp--preset--spacing--40); }
.l3-foot img{ height:34px; width:auto; margin-bottom:18px; }
.l3-foot h4{ font-family:var(--wp--preset--font-family--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--dim-2); margin:0 0 14px; font-weight:400; }
.l3-foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.l3-foot a{ font-size:14px; color:var(--wp--preset--color--muted); }
.l3-foot .legal{ font-size:12.5px; line-height:1.7; color:var(--wp--preset--color--dim-2); }
@media (max-width:1000px){ .l3-foot__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .l3-foot__in{ grid-template-columns:1fr; } }

/* ---------- news ---------- */
.l3-news__item{ border-top:1px solid var(--wp--preset--color--border); padding:26px 0; display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:baseline; }
.l3-news__date{ font-family:var(--wp--preset--font-family--mono); font-size:12px; color:var(--wp--preset--color--dim); letter-spacing:.14em; }
.l3-news__title{ font-size:22px; font-weight:500; letter-spacing:-.02em; }
.l3-news__cat{ font-family:var(--wp--preset--font-family--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--wp--preset--color--dim-2); }
@media (max-width:760px){ .l3-news__item{ grid-template-columns:1fr; gap:8px; } }

/* ---------- form ---------- */
.l3-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; }
.l3-form label{ display:block; font-family:var(--wp--preset--font-family--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--dim); margin-bottom:8px; }
.l3-form input, .l3-form textarea, .l3-form select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--wp--preset--color--border);
  color:var(--wp--preset--color--contrast); font-family:inherit; font-size:16px; padding:10px 0;
}
.l3-form input:focus, .l3-form textarea:focus{ outline:none; border-bottom-color:var(--wp--preset--color--accent); }
.l3-form .full{ grid-column:1 / -1; }
@media (max-width:700px){ .l3-form{ grid-template-columns:1fr; } }

/* ---------- utilita ---------- */
.l3-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- celle di griglia ---------- */
.l3-cell{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.l3-cell > *{ margin:0; }

/* ---------- pagine redazionali (informativa, condizioni) ----------
   Le pagine convertite dalle artboard hanno una larghezza da vetrina. Un
   testo lungo letto su una riga da 1200px si perde: 68 caratteri e' la
   misura oltre la quale l'occhio fatica a ritrovare l'inizio della riga
   successiva. */
.l3-prose{ max-width:68ch; padding-block:var(--wp--preset--spacing--50); }
.l3-prose h2{ font-size:clamp(22px,2.4vw,28px); font-weight:500; letter-spacing:-.02em; margin:2.2em 0 .6em; }
.l3-prose h3{ font-size:clamp(18px,2vw,21px); font-weight:500; margin:1.8em 0 .5em; }
.l3-prose p, .l3-prose li{ font-size:16.5px; line-height:1.65; color:var(--wp--preset--color--muted); }
.l3-prose .l3-lead{ font-size:19px; color:var(--wp--preset--color--muted-2); }
.l3-prose strong{ color:var(--wp--preset--color--contrast); font-weight:500; }
.l3-prose a{ color:var(--wp--preset--color--accent); }
.l3-prose ul{ padding-left:1.2em; }
.l3-prose li{ margin-bottom:.5em; }
.l3-prose code{
  font-family:var(--wp--preset--font-family--mono); font-size:.88em;
  background:var(--wp--preset--color--surface); padding:2px 6px; border-radius:2px;
}
.l3-prose__rev{
  margin-top:2.5em; padding-top:1.2em;
  border-top:1px solid var(--wp--preset--color--border-dim);
  font-family:var(--wp--preset--font-family--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--dim-2);
}

/* ---------- elenco delle news ----------
   Una riga per articolo, separate da un filo come le righe della board:
   data e categoria in mono piccolo, poi il titolo, poi il sommario. Niente
   riquadri e niente miniature: gli articoli qui sono pochi e lunghi, e una
   griglia di schede mezze vuote farebbe sembrare la sezione piu' povera di
   quello che e'. */
.l3-news{ margin-top:var(--wp--preset--spacing--40); }
.l3-news .wp-block-post{
  padding-block:var(--wp--preset--spacing--30);
  border-top:1px solid var(--wp--preset--color--border);
}
.l3-news .wp-block-post:last-child{ border-bottom:1px solid var(--wp--preset--color--border); }
.l3-news .wp-block-post-template{ margin:0; padding:0; list-style:none; }
.l3-news__meta{
  display:flex; gap:14px; align-items:center;
  font-family:var(--wp--preset--font-family--mono);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--dim);
}
.l3-news__meta a{ color:var(--wp--preset--color--accent); }
.l3-news__title{ font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-.03em; margin:10px 0 0; }
.l3-news__title a{ color:var(--wp--preset--color--contrast); text-decoration:none; }
.l3-news__title a:hover{ color:var(--wp--preset--color--accent); }
.l3-news__excerpt{ margin:10px 0 0; max-width:70ch; color:var(--wp--preset--color--muted); }
.l3-news__excerpt a{ display:inline-block; margin-top:8px; color:var(--wp--preset--color--accent); }

.l3-news__pag{
  margin-top:var(--wp--preset--spacing--40);
  font-family:var(--wp--preset--font-family--mono); font-size:12px; letter-spacing:.14em;
}
.l3-news__pag a{ color:var(--wp--preset--color--accent); }

/* Il titolo di un articolo non e' il titolo di una pagina.
   L'h1 del tema e' pensato per tre parole a schermo intero: maiuscolo, 104px,
   interlinea stretta. Un titolo di sessanta caratteri, con quelle regole,
   diventa un muro alto mezzo schermo che si legge a fatica. Qui torna a
   essere un titolo: piu' piccolo, con le maiuscole dove le ha messe chi
   l'ha scritto. */
.l3-prose h1{
  font-size:clamp(30px,4.4vw,52px);
  text-transform:none;
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:22ch;
}
.l3-prose .wp-block-post-date{ margin-bottom:18px; }

/* Testo giustificato: senza sillabazione, su una colonna stretta, il
   giustificato apre buchi bianchi in mezzo alle righe - su telefono diventa
   illeggibile. `hyphens` risolve, ma lavora solo se conosce la lingua, e la
   lingua la dichiara <html lang>: su un sito italiano e' a posto. */
.has-text-align-justify{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }

/* --- Corpo degli articoli: respiro fra i blocchi ---
   I paragrafi avevano dimensione e interlinea ma nessun margine: uno sotto
   l'altro sembravano un blocco unico, e per capire dove finiva un pensiero e
   cominciava il successivo bisognava rileggere. Con interlinea 1.65 un margine
   di 1.35em separa senza sfilacciare. */
.l3-prose p{ margin:0 0 1.35em; }
.l3-prose p:last-child{ margin-bottom:0; }

/* Gli elenchi numerati non erano previsti: senza padding le cifre finivano
   fuori dalla colonna del testo. Il margine e' un filo maggiore di quello dei
   paragrafi, perche' un elenco e' un blocco a se'. */
.l3-prose ul,
.l3-prose ol{ margin:0 0 1.5em; padding-left:1.3em; }
.l3-prose ol{ list-style:decimal; }
.l3-prose ol li::marker{ color:var(--wp--preset--color--dim); }

/* Le immagini degli articoli, con la firma del fotografo sotto: piccola e
   smorzata, perche' e' un dovuto e non parte del discorso. */
.l3-prose figure.wp-block-image{ margin:2em 0; }
.l3-prose figure.wp-block-image img{ display:block; width:100%; height:auto; border-radius:3px; }
.l3-prose figcaption{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--wp--preset--color--dim);
}
.l3-prose figcaption a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* --- Larghezza dell'articolo ---
   ATTENZIONE, I NUMERI DI QUI SOTTO STANNO ANCHE IN assets/editor.css, che
   veste la schermata di modifica: la tela dell'editor non carica questo
   foglio, e le classi del tema (.l3-article) dentro non ci sono, quindi le
   stesse regole vanno scritte una seconda volta con selettori nudi. Se
   cambiate una misura qui, cambiatela anche la': tools/prove-editor.sh
   controlla che siano uguali, e se no si scrive vedendo una cosa e si
   pubblica un'altra.
   .l3-prose e' nata per l'informativa e le condizioni: 68 caratteri, la
   misura oltre la quale l'occhio fatica a ritrovare l'inizio della riga dopo.
   Su un articolo, in mezzo a un sito largo 1360px, quella colonna sembra un
   ritaglio incollato al centro della pagina.
   Allargare la riga e basta non si puo': i caratteri per riga hanno un
   limite fisico, e portare la colonna alla larghezza del sito darebbe righe
   da centosessanta caratteri, cioe' un articolo che nessuno finisce. Si
   allarga insieme al corpo del testo: 18px invece di 16.5 e 780px invece dei
   620 dei 68 caratteri lasciano quasi gli stessi caratteri per riga, ma la
   colonna occupa la pagina invece di galleggiarci dentro. Il resto della
   larghezza la prendono le foto, che escono dalla colonna (sotto).
   box-sizing dichiarato: cosi' 780px e' la misura del testo e non del testo
   piu' i margini laterali, che cambiano con la finestra. */
.l3-article{ box-sizing:content-box; max-width:780px; }
.l3-article p,
.l3-article li{ font-size:18px; line-height:1.7; }
.l3-article .l3-lead{ font-size:21px; }

/* Le foto escono dalla colonna del testo. E' questo che rompe la sequenza di
   paragrafi tutti larghi uguali, e da' alla pagina la larghezza del resto del
   sito senza allungare le righe di una lettera.
   Solo quando c'e' posto: sotto i 1200px la colonna occupa quasi tutta la
   finestra e il margine negativo mangerebbe il margine laterale della pagina,
   mandando le foto a filo del vetro. */
@media (min-width:1200px){
  .l3-article figure.wp-block-image{
    max-width:none;
    margin-inline:-110px;
  }
}

/* Fra un paragrafo e il successivo, una riga vuota vera.
   1.35em erano 24px su un'interlinea di 30: separava, ma poco, e a leggere
   di fila i paragrafi sembravano ancora un blocco unico. 1.8em sono 32px,
   cioe' appena piu' di una riga: lo stacco si vede senza sfilacciare il
   discorso. Vale per gli articoli e non per l'informativa, che e' un testo
   di consultazione e sta bene piu' compatto. */
.l3-article p{ margin-bottom:1.8em; }

/* --- L'invito in fondo all'articolo ---
   Sta nel modello e non nel testo: cosi' compare sotto tutti gli articoli,
   compresi quelli importati dal sito vecchio, si cambia in un posto solo, e
   non c'e' modo che una riscrittura del testo se lo porti via.
   Il filo sopra serve: senza, l'invito sembra l'ultimo paragrafo
   dell'articolo, e chi legge non capisce dove finisce il discorso e dove
   comincia l'azienda che parla di se'. */
.l3-article__cta{
  margin-top:var(--wp--preset--spacing--50);
  padding-top:var(--wp--preset--spacing--40);
  border-top:1px solid var(--wp--preset--color--border);
}
/* Il titolo dell'invito non e' quello di una sezione dell'articolo: piu'
   piccolo dei sottotitoli grossi del sito, che in una colonna di testo
   urlerebbero, e senza il margine di 2.2em degli h2 - il distacco lo da'
   gia' il filo. */
.l3-article__cta h2{ font-size:clamp(22px,2.6vw,30px); margin:0 0 .5em; max-width:24ch; }
.l3-article__cta p{ margin-bottom:1.2em; }
.l3-article__cta .wp-block-buttons{ margin-bottom:1em; }

/* Il pulsante va vestito qui, e la ragione vale la pena scriverla.
   Tutti i pulsanti del sito arrivano dalle artboard e hanno una classe loro
   in grids.css, che gli da' fondo panna e testo scuro. Questo pulsante e'
   scritto a mano, quindi quella classe non ce l'ha, e restava con i colori
   di theme.json: fondo panna, e sopra passavano due regole che lo
   rovinavano. «.l3-prose a» colora d'accento tutti i collegamenti di un
   articolo - e un pulsante e' un collegamento - mentre theme.json, al
   passaggio del mouse, mette l'accento anche sul fondo. Testo e fondo dello
   stesso verde: il pulsante spariva, e prima di sparire era verde salvia su
   panna, che non e' un accostamento che qualcuno abbia scelto.
   Qui i colori sono dichiarati per intero, testo compreso, e col mouse
   sopra cambia solo il fondo. Le misure sono quelle dei pulsanti delle
   artboard: alto 54, raggio 2, panna. */
.l3-article__cta .wp-block-button__link{
  display:inline-flex; align-items:center;
  height:54px; padding:0 28px;
  border-radius:2px;
  background:var(--wp--preset--color--button);
  color:var(--wp--preset--color--base);
  font-size:16px; font-weight:500; text-decoration:none;
}
.l3-article__cta .wp-block-button__link:hover,
.l3-article__cta .wp-block-button__link:focus-visible{
  background:var(--wp--preset--color--accent);
  color:var(--wp--preset--color--base);
}
.l3-article__cta-nota{
  font-size:13.5px; line-height:1.5;
  color:var(--wp--preset--color--dim); margin-bottom:0;
}



/* --- Cerca fra gli articoli ---
   Il registro delle ricerche c'era da mesi e aveva raccolto una voce sola:
   non perche' nessuno cercasse, ma perche' l'unico campo di ricerca del sito
   stava nella pagina 404. Adesso sta nell'archivio degli articoli e nella
   pagina dei risultati, che e' dove uno cerca. Quello che la gente cerca e
   NON trova e' il miglior suggerimento su cosa scrivere. */
.l3-cerca{ max-width:560px; margin-top:28px; }
.l3-cerca .wp-block-search__inside-wrapper{
  border:1px solid var(--wp--preset--color--border); border-radius:2px;
  background:var(--wp--preset--color--surface); overflow:hidden;
}
.l3-cerca .wp-block-search__input{
  border:0; background:transparent; color:var(--wp--preset--color--contrast);
  /* 16px: sotto, iOS ingrandisce la pagina da solo quando si tocca il campo. */
  font:inherit; font-size:16px; padding:0 14px; height:48px;
}
.l3-cerca .wp-block-search__input:focus{ outline:none; }
.l3-cerca .wp-block-search__input::placeholder{ color:var(--wp--preset--color--dim-2); }
.l3-cerca .wp-block-search__button{
  border:0; border-radius:0; margin:0; height:48px; padding:0 22px;
  background:var(--wp--preset--color--button); color:var(--wp--preset--color--base);
  font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition:background .15s ease;
}
.l3-cerca .wp-block-search__button:hover{ background:var(--wp--preset--color--accent); }
/* Il contorno del fuoco lo prende il contenitore, non il campo: dentro, il
   campo non ha bordi suoi e chi naviga da tastiera non vedrebbe dove si
   trova. */
.l3-cerca:focus-within .wp-block-search__inside-wrapper{ border-color:var(--wp--preset--color--accent); }

/* --- La lente in testata ---
   Un'icona e non un campo fisso, ed e' una misura: a 1440px come a 1100px in
   quella barra restano 180 pixel liberi, e un campo in cui si scrive davvero
   ne vuole almeno 220. L'icona ne occupa 40. */
.l3-head__cerca{ position:relative; display:flex; align-items:center; }
.l3-head__cerca-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:2px;
  color:var(--wp--preset--color--muted); text-decoration:none;
  transition:color .15s ease, background .15s ease;
}
.l3-head__cerca-btn:hover,
.l3-head__cerca.is-open .l3-head__cerca-btn{
  color:var(--wp--preset--color--contrast); background:var(--wp--preset--color--surface);
}
.l3-head__cerca-panel{
  display:flex; gap:0; align-items:stretch;
  border:1px solid var(--wp--preset--color--border); border-radius:2px;
  background:var(--wp--preset--color--surface); overflow:hidden;
}
.l3-head__cerca-in{
  border:0; background:transparent; color:var(--wp--preset--color--contrast);
  /* 16px: sotto, iOS ingrandisce la pagina appena si tocca il campo. */
  font:inherit; font-size:16px; padding:0 12px; height:42px; width:230px; min-width:0;
}
.l3-head__cerca-in:focus{ outline:none; }
.l3-head__cerca-in::placeholder{ color:var(--wp--preset--color--dim-2); }
.l3-head__cerca-go{
  border:0; border-radius:0; padding:0 16px; cursor:pointer; font:inherit; font-size:14px;
  background:var(--wp--preset--color--button); color:var(--wp--preset--color--base);
}
.l3-head__cerca-go:hover{ background:var(--wp--preset--color--accent); }

/* Senza JavaScript il pannello non si vede e la lente resta il collegamento
   all'archivio, dove il campo c'e' per davvero. Con JavaScript si apre qui,
   sopra la pagina: in mezzo alla barra sposterebbe tutto il resto. */
.l3-js .l3-head__cerca-panel{ display:none; }
.l3-js .l3-head__cerca.is-open .l3-head__cerca-panel{
  display:flex; position:absolute; top:calc(100% + 8px); right:0; z-index:30;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
/* Sui telefoni il pannello prende tutta la larghezza utile invece di
   sporgere dal bordo destro: 230 pixel di campo piu' il pulsante non ci
   stanno in 390. */
@media (max-width:560px){
  .l3-js .l3-head__cerca.is-open .l3-head__cerca-panel{
    position:fixed; left:var(--l3-gutter); right:var(--l3-gutter); top:64px;
  }
  .l3-head__cerca-in{ width:auto; flex:1; }
}