@media only screen and (max-width: 640px) {
 h1 {
     font-size: 32px !important;
     line-height: 36.8px !important;
 }
 h2 {
     font-size: 32px !important;
     line-height: 38.4px !important;
 }
}


.button-default:hover, .fusion-button:hover, .fusion-button-default:hover {border-radius: 18px;}

/* === Off Canvas menu: cambio immagini al passaggio sulle voci === */

/* A. Il contenitore occupa tutta la larghezza dell'Off Canvas */
.off-canvas-content:has(> .oc-menu),
.off-canvas-content > .oc-menu {
  width: 100%;
  align-self: stretch;
}

/* B. Punto di riferimento per gli sfondi: il riquadro interno della colonna destra */
.oc-destra { overflow: hidden; }
.oc-destra > .fusion-column-wrapper { position: relative; }

/* Gli elementi Immagine che contengono foto sovrapposte non fanno da riferimento */
.oc-destra .fusion-image-element:has(> .oc-bg),
.oc-fg-wrap .fusion-image-element:has(> .oc-fg:not(.oc-default)) {
  position: static;
  margin: 0;
}

/* C. Sfondi alternativi: coprono tutta la colonna, senza il limite dei 540px */
.oc-destra .oc-bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}
.oc-destra .oc-bg img { width: 100%; height: 100%; object-fit: cover; }

/* D. Primo piano: il riquadro prende le misure dell'immagine predefinita */
.oc-fg-wrap { position: relative; z-index: 1; }
/* Il riquadro dell'immagine centrale: largo come l'immagine e centrato */
.oc-fg-wrap {
  justify-content: center;
  align-items: center;
}
.oc-fg-wrap > .fusion-column-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.oc-fg-wrap .oc-default { display: block; }
.oc-fg-wrap .oc-fg:not(.oc-default) {
  position: absolute !important;
  inset: 0;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}
.oc-fg-wrap .oc-fg:not(.oc-default) img { width: 100%; height: 100%; object-fit: cover; }

/* E. Nascoste di default, con dissolvenza */
.oc-destra .oc-bg,
.oc-fg-wrap .oc-fg:not(.oc-default) {
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* F. Voce attiva (mouse o tastiera) → mostra le sue due immagini */
.oc-menu:has(.voce-esposizione:is(:hover, :focus-within)) .oc-esposizione,
.oc-menu:has(.voce-storia:is(:hover, :focus-within))      .oc-storia,
.oc-menu:has(.voce-dove:is(:hover, :focus-within))        .oc-dove {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .oc-destra .oc-bg,
  .oc-fg-wrap .oc-fg { transition: none; }
}