/* =========================================================================
   Fondazione per il Duomo di Monza — base
   Token, reset, tipografia, elementi condivisi, header, footer.
   Gli stili di sezione vivono in blocks/<nome>/style.css
   ========================================================================= */

/* ----------------------- FONT ------------------------- */
@font-face{
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ----------------------- TOKEN ------------------------- */
:root{
  --blu:         #384867;
  --blu-deep:    #27334a;
  --oro:         #B38954;
  --oro-l:       #D4B078;
  --oro-i:       #96672A; /* oro intenso: hover dei link nel testo */
  --marmo:       #E4DDCE;
  --marmo-l:     #F1ECE0;
  /* Più chiaro del marmo chiaro: fondo delle card chiare che stanno sopra
     al marmo chiaro della pagina (news, eventi, interventi). */
  --carta:       #FEFBF3;
  --ink:         #171921;
  --muted:       #6b6f78;
  --line:        rgb(17 59 128 / 18%);

  /* Testata: a riposo 28 + 80 di marchio + 28; mentre si scorre si stringe
     a 12 + 54 + 12. È fissa, quindi tutto quello che si appiccica scorrendo
     deve fermarsi sotto di lei, o le finisce dietro. */
  --header-h:     136px;
  --header-h-min: 78px;
  --sticky-top:   calc(var(--header-h-min) + 24px);
}
/* Da collegati la barra di amministrazione spinge giù anche la testata.
   Sotto i 1024px non serve: lì niente resta appiccicato. */
body.admin-bar{ --sticky-top: calc(var(--header-h-min) + 24px + 32px); }

/* ----------------------- RESET ------------------------- */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{
  scroll-behavior: smooth;
  /* La testata è fissa: un ancoraggio che si fermasse a 20px finirebbe
     sotto di essa. */
  scroll-padding-top: 130px;
}
html, body{ background: var(--marmo-l); color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
section[id]{ scroll-margin-top: 130px; }

body{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }

/* Link nel testo: oro, senza sottolineatura. I blocchi core inseriti
   direttamente in pagina non stanno dentro un blocco del tema e senza
   questa regola erediterebbero il nero del testo. */
main > p a,
main > ul a,
main > ol a,
main > blockquote a{
  color: var(--oro);
  transition: color .2s ease;
}
main > p a:hover,
main > ul a:hover,
main > ol a:hover,
main > blockquote a:hover{ color: var(--oro-i); }

/* focus visibile — assente nel mockup */
:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--blu);
  color: var(--marmo-l);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus{ left: 0; }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap{
  width: min(1240px, 92vw);
  margin: 0 auto;
}

/* ----------------------- REVEAL ------------------------- */
/* Nascondiamo il contenuto solo se il JavaScript è attivo: senza la
   classe .js (script bloccato, errore, crawler) le sezioni restano
   visibili invece di sparire per sempre. */
.js .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
.reveal--delay-1{ transition-delay: .08s; }
.reveal--delay-2{ transition-delay: .16s; }
.reveal--delay-3{ transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ----------------------- EYEBROW ------------------------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--marmo-l);
  font-weight: 600;
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 44px;
  height: 1px;
  background: var(--marmo-l);
}
/* niente italic mai negli eyebrow */
.eyebrow, .eyebrow em,
.block__eyebrow, .block__eyebrow em{
  font-style: normal !important;
}

/* ----------------------- ELENCHI ------------------------- */
/* Il punto elenco è sempre un trattino lungo dorato, dovunque compaia un
   elenco puntato: nel testo di una pagina, dentro una colonna, nel racconto
   di un intervento o dentro i blocchi del tema. */
ul.wp-block-list,
.entry-content ul{
  padding-left: 0;
  list-style: none;
}
ul.wp-block-list li,
.entry-content ul li{
  position: relative;
  padding: 3px 0 3px 30px;
  line-height: 1.8;
}
ul.wp-block-list li::before,
.entry-content ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(3px + 1.8em / 2);
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: var(--oro);
}
/* Gli elenchi numerati tengono il numero, che lì porta l'informazione:
   dorato come il trattino. */
ol.wp-block-list,
.entry-content ol{ padding-left: 26px; }
ol.wp-block-list li,
.entry-content ol li{ padding: 3px 0; line-height: 1.8; }
ol.wp-block-list li::marker,
.entry-content ol li::marker{ color: var(--oro); }

/* ----------------------- BOTTONI ------------------------- */
.btn-row{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: transform .2s ease, background .25s ease, color .25s ease;
  cursor: pointer;
  border: none;
}
.btn-primary{
  background: var(--oro);
  color: var(--marmo-l);
}
.btn-primary:hover{ background: var(--oro-l); }
.btn-ghost{
  color: var(--marmo-l);
  border: 1px solid rgba(241,236,224,0.55);
  background: transparent;
}
.btn-ghost:hover{ background: rgba(241,236,224,0.1); }
/* variante scura, per le pagine interne dove lo sfondo è chiaro */
.btn-outline{
  color: var(--blu);
  border: 1px solid var(--line);
  background: transparent;
}
.btn-outline:hover{ background: var(--blu); color: var(--marmo-l); border-color: var(--blu); }
.btn .arr{ transition: transform .2s ease; }
.btn:hover .arr{ transform: translateX(4px); }

/* ----------------------- TESTATE DI SEZIONE ------------------------- */
.block{ padding: 90px 0; }

/* Spazio verticale regolabile in modo indipendente sopra e sotto: serve a
   far combaciare due sezioni consecutive come nel progetto grafico. */
.pt-wide  { padding-top: 120px; }
.pt-medium{ padding-top: 60px; }
.pt-small { padding-top: 30px; }
.pt-none  { padding-top: 0; }
.pb-wide  { padding-bottom: 120px; }
.pb-medium{ padding-bottom: 60px; }
.pb-small { padding-bottom: 30px; }
.pb-none  { padding-bottom: 0; }

.block__head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 40px;
}
.block__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 600;
  margin-bottom: 10px;
}
.block__eyebrow::before{
  content: "";
  width: 36px;
  height: 1px;
  background: var(--oro);
}
h2.block__title,
.block__title{
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 50px);
  line-height: 1.12;
  color: var(--blu);
}
h2.block__title em,
.block__title em{
  font-style: italic;
  color: var(--oro);
  font-weight: 400;
}
.block__lede{
  font-size: 15px;
  color: var(--muted);
  max-width: 400px;
  line-height: 1.75;
}

/* ----------------------- FONDO CON TEXTURE ------------------------- */
/* Condiviso da più blocchi (card, fondo aperto): sta qui perché due
   sezioni con texture consecutive devono combaciare anche quando i
   rispettivi fogli di blocco non sono entrambi caricati. */
.textured-wrap{
  position: relative;
  background-color: var(--marmo);
  overflow: hidden;
}
.textured-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/texture.svg");
  background-repeat: repeat;
  background-size: 2607px auto;
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}
.textured-wrap > .wrap{
  position: relative;
  z-index: 1;
  background: var(--marmo-l);
  padding: 60px;
  box-shadow: 0 16px 40px -30px rgba(39,51,74,0.18);
}
/* Lo stacco fra due sezioni con texture consecutive si regola dal pannello
   "Spaziatura" del blocco: nessuna regola automatica, altrimenti sovrascriverebbe
   in silenzio la scelta fatta in redazione. */

@media (max-width: 720px){
  .textured-wrap > .wrap{ padding: 36px 24px; }
}

/* ----------------------- HEADER ------------------------- */
/* La testata resta in vista mentre si scorre. Sopra l'apertura è
   trasparente e sta sulla fotografia; appena la pagina si muove prende il
   blu del tema, si stringe e il marchio rimpicciolisce. La classe
   .is-scrolled la accende assets/js/header-sticky.js. */
header.site{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 28px 0;
  transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
}
header.site.is-scrolled{
  padding: 12px 0;
  background: var(--blu-deep);
  box-shadow: 0 12px 34px -26px rgba(12,20,34,0.9);
}
/* Da collegati la barra di amministrazione sta anch'essa in cima: senza
   questo scarto la testata le finisce sotto. Sotto i 600px WordPress la
   lascia scorrere via con la pagina e lo scarto non serve più. */
body.admin-bar header.site{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar header.site{ top: 46px; }
}
@media (max-width: 600px){
  body.admin-bar header.site{ top: 0; }
}
header.site .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand{ display: flex; align-items: center; flex: 0 0 auto; }
/* Il logo ha altezza fissa e larghezza libera: senza queste due righe la
   regola globale img{max-width:100%} lo comprime in orizzontale quando la
   testata si stringe, e il marchio risulta stirato. */
.brand img{
  height: 80px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  transition: height .3s ease;
}
header.site.is-scrolled .brand img{ height: 54px; }
@media (prefers-reduced-motion: reduce){
  header.site,
  .brand img{ transition: none; }
}
nav.menu{
  display: flex;
  align-items: center;
  gap: 36px;
}
nav.menu ul{
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
nav.menu a{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marmo-l);
  position: relative;
  padding-bottom: 4px;
  transition: color .2s ease;
}
nav.menu a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--oro-l);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
nav.menu a:hover{ color: var(--oro-l); }
nav.menu a:hover::after{ transform: scaleX(1); }
nav.menu .current-menu-item > a,
nav.menu .current_page_item > a{ color: var(--oro-l); }
nav.menu .current-menu-item > a::after,
nav.menu .current_page_item > a::after{ transform: scaleX(1); }

.cta-top{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(241,236,224,0.6);
  color: var(--marmo-l);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.cta-top:hover{ background: var(--oro); border-color: var(--oro); color: var(--marmo-l); }
.cta-top--mobile{ display: none; }

/* --- toggle menu mobile (assente nel mockup) --- */
.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--marmo-l);
  flex: 0 0 auto;
  transition: color .25s ease;
}
.nav-toggle:hover{ color: var(--oro-l); }
.nav-toggle__label{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-toggle__bars{
  position: relative;
  display: block;
  width: 20px; height: 1px;
  background: currentColor;
  transition: background .2s ease;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1px;
  background: currentColor;
  transition: transform .28s ease;
}
.nav-toggle__bars::before{ transform: translateY(-6px); }
.nav-toggle__bars::after{ transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform: rotate(-45deg); }

/* ----------------------- FOOTER ------------------------- */
footer.site{
  position: relative;
  z-index: 2;
  background: var(--blu-deep);
  color: rgba(241,236,224,0.82);
  padding: 90px 0 36px;
}
footer.site .grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 56px;
  margin-bottom: 64px;
}
footer.site h4{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--marmo-l);
  margin-bottom: 22px;
  letter-spacing: 0.2px;
}
footer.site img.logo{
  height: 110px;
  width: auto;
  margin-bottom: 26px;
}
footer.site p{
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(241,236,224,0.7);
  margin-bottom: 14px;
}
footer.site ul{ list-style: none; }
footer.site ul li{
  font-size: 13.5px;
  color: rgba(241,236,224,0.75);
  margin-bottom: 10px;
}
footer.site ul li.with-icon{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
footer.site ul li.with-icon svg{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--oro-l);
}
footer.site a,
footer.site ul li.with-icon a{
  color: var(--oro-l);
  font-weight: 600;
  transition: color .2s ease;
}
footer.site a:hover,
footer.site ul li.with-icon a:hover{ color: var(--marmo-l); }
footer.site ul li a:hover{ color: var(--oro-l); }

/* Sezione libera sotto ai contatti: stessa gerarchia delle altre colonne,
   staccata dall'elenco che ha sopra. Senza testo il titolo è il
   collegamento, e prende il bianco degli altri titoli. */
footer.site .footer-extra{ margin-top: 30px; }
footer.site .footer-extra h4{ margin-bottom: 0; }
footer.site .footer-extra h4 a{ color: var(--marmo-l); font-weight: inherit; }
footer.site .footer-extra h4 a:hover{ color: var(--oro-l); }
footer.site .footer-extra h4 + p{ margin-top: 14px; }
footer.site .footer-extra p{ margin-bottom: 0; }

footer.site a.partner{
  display: inline-flex;
  /* Su due righe l'icona resta in alto, allineata alla prima riga. */
  align-items: flex-start;
  gap: 6px;
  color: var(--oro-l);
  font-weight: 600;
  transition: color .2s ease;
}
footer.site a.partner:hover{ color: var(--marmo-l); }
footer.site a.partner .ext{
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--oro-l);
  opacity: 1;
  flex: 0 0 auto;
}

footer.site .bottom{
  border-top: 1px solid rgba(241,236,224,0.15);
  padding-top: 28px;
  display: flex;
  align-items: center;
  /* Copyright a sinistra, link legali a destra; da telefono vanno in colonna. */
  justify-content: space-between;
  text-align: left;
  gap: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(241,236,224,0.55);
  text-transform: uppercase;
}
footer.site .legal,
footer.site .legal__list{
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}
footer.site .legal li{ margin-bottom: 0; }
footer.site .legal a{
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(241,236,224,0.65);
  text-transform: uppercase;
  font-weight: 400;
  transition: color .2s ease;
}
footer.site .legal a:hover{ color: var(--oro-l); }

/* Bottone piccolo del footer: stessa forma del "Dona ora" in testata. */
.cta-top--mini{
  padding: 8px 16px;
  font-size: 11px;
  gap: 8px;
  letter-spacing: 0.2em;
}
.cta-top--mini .arr{ width: 14px; height: 14px; }
footer.site .footer-extra .cta-top--mini{ color: var(--marmo-l); }

/* ----------------------- RESPONSIVE ------------------------- */
@media (max-width: 1024px){
  footer.site .grid{ grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
}

/* Sopra questa soglia le voci stanno su una riga sola, ma con poco margine:
   qui si stringono un po' invece di andare a capo. */
@media (min-width: 1200px) and (max-width: 1400px){
  nav.menu{ gap: 26px; }
  nav.menu ul{ gap: 26px; }
}

/* Sotto i 1200px le quattro voci più il bottone Dona non stanno più su una
   riga: andrebbero a capo e la testata si spaginerebbe. Si passa al pulsante
   Menu, che regge sia il laptop da 1024 sia il tablet in verticale. */
@media (max-width: 1199px){
  header.site{ padding: 18px 0; }
  .nav-toggle{ display: inline-flex; }
  .cta-top--desktop{ display: none; }

  nav.menu{
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: var(--blu-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  nav.menu.is-open{
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  nav.menu ul{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  nav.menu a{
    display: block;
    padding: 16px 24px;
    font-size: 15px;
  }
  nav.menu a::after{ display: none; }
  nav.menu .cta-top--mobile{
    display: inline-flex;
    margin-top: 26px;
  }
  /* il toggle resta sopra al pannello aperto */
  .nav-toggle{ position: relative; z-index: 50; }
  body.nav-open{ overflow: hidden; }
}

@media (max-width: 720px){
  .brand img{ height: 62px; }
  header.site.is-scrolled .brand img{ height: 46px; }
  /* La scorciatoia qui sotto riscrive sopra e sotto insieme, e sta dopo le
     regole generali delle spaziature: tutte le scelte del pannello vanno
     quindi ripetute qui, "Nessuna" compresa. Senza le due righe finali una
     sezione con lo spazio azzerato se lo ritrovava da telefono. */
  .block{ padding: 64px 0; }
  .pt-wide{ padding-top: 80px; }
  .pb-wide{ padding-bottom: 80px; }
  .pt-medium{ padding-top: 64px; }
  .pb-medium{ padding-bottom: 64px; }
  .pt-small{ padding-top: 24px; }
  .pb-small{ padding-bottom: 24px; }
  .pt-none{ padding-top: 0; }
  .pb-none{ padding-bottom: 0; }
  .block__head{ grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
  footer.site{ padding: 64px 0 28px; }
  footer.site .grid{ grid-template-columns: 1fr; gap: 36px; }
  footer.site .bottom{ flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
}

/* ----------------------- SFONDO DELLE SEZIONI ------------------------- */
/* Una classe per ogni colore della palette. Vale sia per i blocchi del tema
   sia per quelli nativi, che ricevono le stesse classi dall'editor. */
.fdm-bg-blu     { background: var(--blu); }
.fdm-bg-blu-deep{ background: var(--blu-deep); }
.fdm-bg-oro     { background: var(--oro); }
.fdm-bg-oro-l   { background: var(--oro-l); }
.fdm-bg-marmo   { background: var(--marmo); }
.fdm-bg-marmo-l { background: var(--marmo-l); }
.fdm-bg-ink     { background: var(--ink); }
.fdm-bg-muted   { background: var(--muted); }
.fdm-bg-bianco  { background: var(--marmo-l); }

/* Sui fondi scuri il testo del progetto grafico sarebbe illeggibile: passa al
   bianco, con i corsivi e i sopratitoli in oro chiaro come nella hero. */
.fdm-su-scuro,
.fdm-su-scuro p,
.fdm-su-scuro li,
.fdm-su-scuro h1, .fdm-su-scuro h2, .fdm-su-scuro h3, .fdm-su-scuro h4,
.fdm-su-scuro .block__title,
.fdm-su-scuro .gov-col__title,
.fdm-su-scuro .text-section__body,
.fdm-su-scuro .intro__text{ color: var(--marmo-l); }
.fdm-su-scuro .block__eyebrow,
.fdm-su-scuro .block__title em,
.fdm-su-scuro .gov-col__title em,
.fdm-su-scuro a{ color: var(--oro-l); }
.fdm-su-scuro .block__eyebrow::before{ background: var(--oro-l); }

/* ----------------------- BLOCCHI NATIVI IN PAGINA ------------------------- */
/* Le sezioni del tema portano con sé la larghezza di lettura e lo spazio
   verticale; i blocchi nativi messi direttamente in pagina no.

   Gliela diamo qui, e sempre a filo di finestra: la colonna di lettura la
   fa il padding, mai la larghezza dell'elemento. Non è una preferenza
   estetica ed è la regola da non rompere. L'apertura della pagina è
   appiccicata in cima (`position: sticky` in pages.css) e il contenuto le
   scorre sopra: un blocco più stretto della finestra lascerebbe affiorare
   la fotografia ai due lati, dove il suo fondo non arriva.

   Il selettore prende qualunque cosa stia sotto <main>, compresi i blocchi
   che oggi non esistono ancora. Le uniche esclusioni sono l'apertura stessa
   e le sezioni del tema, che sono già a tutta larghezza e hanno il proprio
   `.wrap` interno: darebbero il padding due volte. */
main > .fdm-section,
main > :not(.page-hero):not(.hero):not(.block):not([class*="wp-block-fdm-"]){
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* La stessa colonna di lettura di .wrap, che è min(1240px, 92vw): metà
     di 92vw è 46vw. Con 44vw i blocchi nativi restavano 4vw più stretti
     delle sezioni del tema e il testo partiva più a destra — impercettibile
     sul desktop, 7,5px di disallineamento su uno schermo da 375. */
  padding-left: calc(50% - min(620px, 46vw));
  padding-right: calc(50% - min(620px, 46vw));
}
/* Spazio verticale. Un blocco nativo che apre una serie porta la fascia
   piena del tema — 90px, come una sezione — perché è lì che la pagina si
   stacca dall'apertura o dalla fascia precedente; senza, il testo resta
   appiccicato alla testata anche con le spaziature su "Normale", che nel
   pannello vale appunto 90px. Fra due blocchi nativi consecutivi basta
   invece lo stacco fra paragrafi.
   È sempre padding e mai margine: un margine aprirebbe una riga scoperta
   fra un fondo e l'altro, e da lì si tornerebbe a vedere l'apertura.
   Chi sceglie una spaziatura dal pannello prende la classe .block e le sue
   regole, che restano fuori da qui. */
main > :not(.page-hero):not(.hero):not(.block):not([class*="wp-block-fdm-"]){
  padding-top: 90px;
  padding-bottom: 90px;
}
main > :not(.page-hero):not(.hero):not(.block):not([class*="wp-block-fdm-"])
     + :not(.block):not([class*="wp-block-fdm-"]){
  padding-top: 18px;
}
main > :not(.page-hero):not(.hero):not(.block):not([class*="wp-block-fdm-"]):has(
       + :not(.block):not([class*="wp-block-fdm-"])){
  padding-bottom: 0;
}

/* Una pagina che contiene una frase sola non deve ridursi a una striscia
   fra l'apertura e la chiusura. Il caso è questo: un unico blocco nativo
   subito sotto l'apertura, e poi la chiusura o niente. Lì il blocco tiene
   comunque l'altezza di una fascia. Con più blocchi la pagina ha già un
   corpo suo e la regola non entra in gioco. */
main > .page-hero + :not(.block):not([class*="wp-block-fdm-"]):last-child,
main > .hero + :not(.block):not([class*="wp-block-fdm-"]):last-child,
main > .page-hero + :not(.block):not([class*="wp-block-fdm-"]):has(+ [class*="wp-block-fdm-"]),
main > .hero + :not(.block):not([class*="wp-block-fdm-"]):has(+ [class*="wp-block-fdm-"]){
  min-height: min(34vh, 320px);
}

/* Colonne native: reggono le sezioni affiancate (governance, board, coppie
   di contenuti). Il distacco è quello del progetto grafico; sotto i 1024px
   si impilano, prima della soglia di WordPress, perché a quella larghezza
   il testo su due colonne diventa già troppo stretto. */
.wp-block-columns{ gap: 100px; }

@media (max-width: 1024px){
  .wp-block-columns{ flex-wrap: wrap; gap: 56px; }
  .wp-block-columns > .wp-block-column{ flex-basis: 100% !important; }
}

/* ----------------------- INGRANDIMENTO IMMAGINI ------------------------- */
/* Sfondo scuro ma trasparente: la pagina resta intravedibile sotto. */
.fdm-lightbox{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
  background: rgba(23, 25, 33, 0.86);
  backdrop-filter: blur(6px);
}
.fdm-lightbox.is-open{ display: flex; }
body.fdm-lightbox-aperta{ overflow: hidden; }

.fdm-lightbox__figura{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.fdm-lightbox__img{
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
}
.fdm-lightbox__didascalia{
  max-width: 720px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
  color: rgba(241,236,224,0.85);
}

.fdm-lightbox__chiudi,
.fdm-lightbox__nav{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: rgba(241,236,224,0.12);
  color: var(--marmo-l);
  cursor: pointer;
  transition: background .25s ease;
}
.fdm-lightbox__chiudi:hover,
.fdm-lightbox__nav:hover{ background: rgba(241,236,224,0.28); }
.fdm-lightbox__chiudi{ top: 24px; right: 24px; }
.fdm-lightbox__nav{ top: 50%; transform: translateY(-50%); }
.fdm-lightbox__nav--prec{ left: 24px; }
.fdm-lightbox__nav--succ{ right: 24px; }
.fdm-lightbox__nav--succ svg{ transform: scaleX(-1); }

/* L'immagine ingrandibile lo dice al passaggio del mouse. */
.fdm-ingrandibile{ cursor: zoom-in; }

@media (max-width: 720px){
  .fdm-lightbox{ padding: 4vh 4vw; }
  .fdm-lightbox__chiudi{ top: 12px; right: 12px; }
  .fdm-lightbox__nav--prec{ left: 8px; }
  .fdm-lightbox__nav--succ{ right: 8px; }
}

/* ----------------------- CORNICE DELLE IMMAGINI ------------------------- */
/* Una linea color marmo chiaro disegnata dentro l'immagine con outline a scarto
   negativo: non serve un contenitore in più e non tocca le didascalie.
   Ne restano fuori il confronto prima/dopo, dove il cursore ha già la sua
   linea, e l'immagine di testata delle pagine.
   Le immagini che si ingrandiscono al passaggio del mouse (gallerie, schede
   di news e interventi) si porterebbero dietro la cornice: lì la linea è
   disegnata dal contenitore, che resta fermo. */
figure.wp-block-image img,
.wp-block-gallery img,
.carosello__slide img,
.intervento-gallery__img,
.intro__image__slide{
  outline: 1px solid var(--marmo-l);
  outline-offset: -15px;
}
/* Nelle gallerie il tema avvolge ogni foto in .fdm-cornice (inc/blocks.php). */
.wp-block-gallery .fdm-cornice img{ outline: none; }
.fdm-cornice{
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
}
.fdm-cornice img{ width: 100%; }
.entry__media{ position: relative; display: block; }
.fdm-cornice::after,
.intervento-card__media::after,
.entry__media::after{
  content: "";
  position: absolute;
  z-index: 1;
  border: 1px solid var(--marmo-l);
  pointer-events: none;
}
.fdm-cornice::after{ inset: 15px; }
.intervento-card__media::after,
.entry__media::after{ inset: 11px; }

/* ----------------------- STILI DEI BLOCCHI NATIVI ------------------------- */
/* Le due formattazioni che stavano nel blocco "Testo con elenco": ora si
   scelgono dal pannello Stili di un paragrafo o di un separatore, e servono
   a rifare quella sezione con la Testata e le Colonne native. */
/* Un titolo di WordPress a cui si dà la misura "Grande" vale quanto i titoli
   delle sezioni del tema: è la misura con cui si apre una fascia, e serve
   poterla usare anche dentro il testo di una pagina.

   WordPress stampa `font-size: var(--wp--preset--font-size--large) !important`
   sulla classe. Invece di rincorrere quell'!important con un altro, qui si
   ridefinisce la variabile sul titolo stesso: il valore che ne esce è già
   quello giusto, e la regola di WordPress resta quella che comanda. */
:where(h1, h2, h3, h4, h5, h6).has-large-font-size{
  --wp--preset--font-size--large: clamp(38px, 3.4vw, 50px);
  line-height: 1.12;
}
@media (max-width: 720px){
  :where(h1, h2, h3, h4, h5, h6).has-large-font-size{
    --wp--preset--font-size--large: 32px;
  }
}

.is-style-fdm-evidenza{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 22px;
  line-height: 1.45;
  color: var(--blu);
}
.is-style-fdm-evidenza em{ font-style: italic; color: var(--oro); }

.wp-block-separator.is-style-fdm-linea{
  height: 0;
  margin: 28px 0;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  opacity: 1;
}


/* ----------------------- TITOLI DA TELEFONO ------------------------- */
/* Sotto i 720px la stessa misura pesa molto di più: i titoli grandi
   mangiano lo schermo e spezzano le parole. Qui scendono di un filo.
   I titoli che appartengono a un blocco hanno la loro riga nel CSS del
   blocco, così la regola sta insieme a quella che corregge. */
@media (max-width: 720px){
  h2.block__title,
  .block__title{ font-size: 32px; }
}