/* =====================================================
   HEADER / TOPBAR
   ===================================================== */

/* Allineamento moduli */
#sp-position1 {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: center;
}

#sp-position1 > * {
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    gap: 25px;
}


/* =====================================================
   FLUID BACKGROUND
   ===================================================== */

/* Contenitore reale del topbar */
#sp-header-topbar {
    position: relative;
    overflow: hidden;
}

/* Canvas WebGL come background */
#sp-header-topbar > canvas#header-fluid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Tutto il contenuto sopra al canvas */
#sp-header-topbar > :not(canvas) {
    position: relative;
    z-index: 1;
}

/* =====================================================
   MOBILE + TABLET
   Header desktop + logo centrato + burger menu
   ===================================================== */

@media (max-width: 1024px) {

 
    /* Usa sempre il topbar desktop e azzera il margine */
    #sp-header-topbar {
      display: block !important;
      margin: 0px 0px;
    }

    /* Azzera il padding del topbar */
    #sp-header-topbar .container-inner {
      padding: 0px;
    }
  
    /* Nasconde solo il logo nell'header mobile alternativo */
    #sp-header #sp-logo {
        display: none !important;
    }

    /* Contenitore header */
    #sp-header-topbar .container-inner,
    #sp-header-topbar .row {
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    /* Logo centrato */
    #sp-header-topbar #sp-logo {
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        position: static !important;
        height: auto !important;
        width: auto !important;
    }
 }

/* Inserisco effetto ombra al titolo, la classe la creo qui e la richiamo direttamente nel CSS dell'elemento da PageBuilder */
.effettoombratesto {
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}


/* Sottomenu */
.sp-megamenu-parent .sp-dropdown {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

/* Hover */
.sp-megamenu-parent > li:hover > .sp-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Per modificare il blocco del sottomenu */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  box-shadow: 0 0 0 0;
  padding: 0px;
  background: transparent !important;
}

/* Hover voci */
.sp-dropdown-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.sp-dropdown-inner a {
  padding: 10px !important;
  width: 110%;
  margin: 2px 0;   /* ⬅ spazio tra le voci */
  display: inline-block !important;
  background-color: #faf0cd;
}

.sp-dropdown-inner a:hover {
  background-color: #ffffff;
}


/* Definisco la dimensione, l'interlinea e il colore delle voci del sottomenù offcanvas su cell */

.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a {
  font-size: 18px;
  line-height: 30px;
  color: #9b9b9b;
}