/* Regole strutturali dei blocchi WordPress: già scritte confinate a mano.
   Un blocco messo dentro una Sezione eredita da lei la misura di pagina, uno
   messo da solo se la dà da sé — senza questa distinzione o resta a filo dei
   bordi o prende il doppio del margine. */
.sicim--inner{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--pad);
}
.sicim .container .sicim--inner{max-width:none;padding-inline:0}

/* Nell'editor i blocchi sono impilati senza la pagina attorno: un minimo di
   respiro evita che si tocchino. */
.wp-admin .sicim--inner{padding-block:4px}

/* I testi dentro una Sezione sono blocchi WordPress normali — paragrafo,
   titolo — così si scrivono sul posto. Qui prendono l'aspetto della landing
   senza dover essere blocchi nostri. */
.sicim .section > .container > p{
  max-width:74ch;margin:0 0 1.1em;
  line-height:1.75;color:var(--ink);
}
.sicim .section > .container > p:last-of-type{margin-bottom:0}
.sicim .section > .container > .wp-block-heading{
  font-family:var(--f-title);font-weight:700;letter-spacing:-.01em;
}
.sicim .section > .container > h3.wp-block-heading{
  margin:clamp(30px,4vw,44px) 0 14px;
  font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;color:var(--blu);
}
.sicim .section > .container > ul{max-width:74ch;line-height:1.75}
.sicim .section--dark > .container > p{color:rgba(255,255,255,.86)}

/* Rete di sicurezza: l'impaginazione originale dà per scontato che i titoli
   ereditino il colore dal contesto (bianchi sull'hero, blu sul chiaro).
   Qualunque foglio esterno con un `h1,h2,…{color:…}` lo romperebbe, perché un
   selettore diretto batte sempre l'ereditarietà. */
.sicim h1,.sicim h2,.sicim h3,.sicim h4,.sicim h5,.sicim h6{color:inherit}

/* `body{background:#fff}` confinato è diventato `.sicim{background:#fff}`: ogni
   involucro di blocco si dipingeva di bianco, e dentro una sezione scura si
   vedevano i rettangoli. Il fondo della pagina lo mette page.css sul body. */
.sicim{background:transparent}

/* `position:sticky` si muove solo dentro il proprio contenitore. L'involucro
   del blocco è alto quanto la barra, quindi la corsa disponibile era zero: la
   barra restava appiccicata a un contenitore che scorreva via insieme a lei, e
   nella pagina sembrava semplicemente sparita.
   Con `display:contents` l'involucro non genera un box e la barra torna figlia
   del flusso della pagina. Il confinamento del CSS non ne risente: dipende dai
   selettori (`.sicim .nav`), non dalle scatole disegnate. */
.sicim--flow{display:contents}

/* Da loggati la barra di WordPress è fissa in cima e la barra della landing le
   scivolerebbe sotto: chi rilegge la pagina in bozza la vedrebbe tagliata.
   Sotto i 600px la barra di WordPress torna a scorrere con la pagina, quindi
   lo scostamento va tolto. */
body.admin-bar .sicim .nav{top:32px}
@media (max-width:782px){body.admin-bar .sicim .nav{top:46px}}
@media (max-width:600px){body.admin-bar .sicim .nav{top:0}}

/* Nella pagina statica le barre si riempivano quando lo script di comparsa
   aggiungeva .is-visible. Qui i blocchi non passano da quel meccanismo, quindi
   la larghezza va data subito: la transizione resta, se .is-visible arriva. */
.sicim .stat__bar i{width:var(--v)}