/* Wrapper del modulo menu che hai marcato con classe modulo = mega-nav */
.mega-nav { position: relative; }

/* Livello 1 (radice) */
.mega-nav ul.nav, 
.mega-nav ul.menu { /* compatibilità template diversi */
  display:flex; gap:20px; align-items:center; list-style:none; margin:0; padding:0;
}

/* La voce "Prodotti" è parent: apre il pannello */
.mega-nav li.parent { position:relative; }

/* Ponte invisibile tra voce principale e dropdown:
   evita il "buco" hover mentre il mouse scende verso il megamenu */
#mainMenu > .mod-menu > li.parent::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 14px;
}

/* Pannello mega di primo livello: usiamo il <ul> sotto la voce principale */
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub,
.mega-nav > ul > li.parent > ul {
  position:absolute; left:0; top:100%;
  width:min(400px, 92vw);
  display:grid;
  grid-template-columns: repeat(1, minmax(200px,1fr));
  align-items:start;
  gap:0px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  padding:20px;
  margin:12px 0 0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index:99;
}

/* Nel megamenu desktop il terzo livello non deve comportarsi come un dropdown:
   resta sempre espanso sotto la voce di secondo livello */
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub,
.mega-nav li.parent > ul > li.deeper.parent > ul {
  position: static;
  width: auto;
  max-width: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  margin-top: 0;
  z-index: auto;
}

/* Variante manuale: dalla voce parent di primo livello in Joomla
   assegna la classe CSS del link = submenu-full */
.mega-nav > ul > li.parent:has(> a.submenu-full) > ul,
.mega-nav > ul > li.parent:has(> span.submenu-full) > ul {
  left: calc(-1 * var(--submenu-full-offset, 0px));
  width: 100vw;
  max-width: 100vw;
  column-count: 2;
  column-gap: 40px;
  box-sizing: border-box;
  padding-inline: clamp(24px, 4vw, 48px);
  border-radius: 0;
  transform: translateY(10px);
}

#mainMenu > .mod-menu > li.parent:has(> a.submenu-full) > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> span.submenu-full) > ul.mod-menu__sub {
  left: calc(-1 * var(--submenu-full-offset, 0px));
  width: 100vw;
  max-width: 100vw;
  column-count: 2;
  column-gap: 40px;
  box-sizing: border-box;
  padding-inline: clamp(24px, 4vw, 48px);
  border-radius: 0;
  transform: translateY(10px);
}

/* Sottomenu lunghi: passa automaticamente a 2 colonne.
   Puoi forzarlo da Joomla aggiungendo "mega-2col" alla classe CSS del link parent. */
.mega-nav li.parent:has(> ul > li:nth-child(10)) > ul,
.mega-nav li.parent:has(> a.mega-2col) > ul,
.mega-nav li.parent:has(> span.mega-2col) > ul {
  width:min(760px, 92vw);
  column-count:2;
  column-gap:28px;
}

/* Variante manuale per menu molto ricchi: classe CSS link parent = "mega-3col". */
.mega-nav li.parent:has(> a.mega-3col) > ul,
.mega-nav li.parent:has(> span.mega-3col) > ul {
  width:min(1040px, 92vw);
  grid-template-columns: repeat(3, minmax(240px,1fr));
  column-gap:28px;
}

/* Mostra al passaggio */
#mainMenu > .mod-menu > li.parent:hover > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent > a:focus + ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent > span:focus + ul.mod-menu__sub,
.mega-nav > ul > li.parent:hover > ul,
.mega-nav > ul > li.parent > a:focus + ul,
.mega-nav > ul > li.parent > span:focus + ul {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}

#mainMenu > .mod-menu > li.parent:has(> a.submenu-full):hover > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> a.submenu-full) > a.submenu-full:focus + ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> span.submenu-full):hover > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> span.submenu-full) > span.submenu-full:focus + ul.mod-menu__sub,
.mega-nav > ul > li.parent:has(> a.submenu-full):hover > ul,
.mega-nav > ul > li.parent:has(> a.submenu-full) > a.submenu-full:focus + ul,
.mega-nav > ul > li.parent:has(> span.submenu-full):hover > ul,
.mega-nav > ul > li.parent:has(> span.submenu-full) > span.submenu-full:focus + ul,
.mega-nav > ul > li.parent:has(> a.mega-2col):hover > ul,
.mega-nav > ul > li.parent:has(> a.mega-2col) > a.mega-2col:focus + ul,
.mega-nav > ul > li.parent:has(> span.mega-2col):hover > ul,
.mega-nav > ul > li.parent:has(> span.mega-2col) > span.mega-2col:focus + ul {
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}

.mega-nav > ul > li.parent:has(> a.submenu-full):hover > ul,
.mega-nav > ul > li.parent:has(> a.submenu-full) > a.submenu-full:focus + ul,
.mega-nav > ul > li.parent:has(> span.submenu-full):hover > ul,
.mega-nav > ul > li.parent:has(> span.submenu-full) > span.submenu-full:focus + ul {
  transform: translateY(0);
}

#mainMenu > .mod-menu > li.parent:has(> a.submenu-full):hover > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> a.submenu-full) > a.submenu-full:focus + ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> span.submenu-full):hover > ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent:has(> span.submenu-full) > span.submenu-full:focus + ul.mod-menu__sub {
  transform: translateY(0);
}

/* Colonne = voci di livello 2 (li del sotto-ul) */
.mega-nav li.parent > ul > li {
  display:flex; flex-direction:column; gap:6px;
  align-self:start;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 0;
}

/* Le "Intestazione menu" (level-2) come heading colonna */
.mega-nav li.parent > ul > li > a,
.mega-nav li.parent > ul > li > span {
  /*font-weight: 700;*/
  text-transform: uppercase;
  color: #0a5898;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

/* <li> con bordo + underline animato */
.mega-nav li.parent > ul > li {
  position: relative;
  padding: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.mega-nav li.parent > ul > li > a,
.mega-nav li.parent > ul > li > span {
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
}

#mainMenu .mod-menu__sub > li > a.menu-link-row,
#mainMenu .mod-menu__sub > li > span.mod-menu__heading {
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
}

/* underline animato */
.mega-nav li.parent > ul > li::after {
  display: none;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > a.menu-link-row .menu-text,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > .menu-row .mod-menu__heading,
.mega-nav li.parent > ul > li > a.menu-link-row .menu-text,
.mega-nav li.parent > ul > li > .menu-row .mod-menu__heading {
  position: relative;
  display: inline-block;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > a.menu-link-row .menu-text::after,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > .menu-row .mod-menu__heading::after,
.mega-nav li.parent > ul > li > a.menu-link-row .menu-text::after,
.mega-nav li.parent > ul > li > .menu-row .mod-menu__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #0a5898;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:hover > a.menu-link-row .menu-text::after,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:hover > .menu-row .mod-menu__heading::after,
.mega-nav li.parent > ul > li:hover > a.menu-link-row .menu-text::after,
.mega-nav li.parent > ul > li:hover > .menu-row .mod-menu__heading::after {
  transform: scaleX(1);
}

/* Le famiglie con figli di terzo livello non devono avere la lineetta animata */
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent::after,
.mega-nav li.parent > ul > li.deeper.parent::after {
  display: none;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > a.menu-link-row .menu-text::after,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > .menu-row .mod-menu__heading::after,
.mega-nav li.parent > ul > li.deeper.parent > a.menu-link-row .menu-text::after,
.mega-nav li.parent > ul > li.deeper.parent > .menu-row .mod-menu__heading::after {
  display: none;
}

/* Voci di livello 3 (link reali) */
.mega-nav li.parent > ul > li > ul {
  list-style:none; margin:6px 0 0; padding:0;
  display:grid; gap:6px;
}
.mega-nav li.parent > ul > li > ul a {
  display:flex; align-items:center; gap:.5rem;
  padding:6px 0;
  text-decoration:none; color:#222;
  line-height:1.3;
}
.mega-nav li.parent > ul > li > ul a:hover { color:#0a5898; text-decoration:underline; }
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > ul.mod-menu__sub a,
.mega-nav li.parent > ul > li > ul a {
  text-decoration: none;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > ul.mod-menu__sub a:hover,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > ul.mod-menu__sub a:focus,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > ul.mod-menu__sub a:active,
.mega-nav li.parent > ul > li > ul a:focus,
.mega-nav li.parent > ul > li > ul a:active {
  text-decoration: none !important;
}

/* Famiglie espanse nel megamenu:
   se una voce di secondo livello ha un terzo livello, mostrala come famiglia
   con figli subito sotto e più rientrati */
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > .menu-row,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > a.menu-link-row,
.mega-nav li.parent > ul > li.deeper.parent > .menu-row,
.mega-nav li.parent > ul > li.deeper.parent > a.menu-link-row {
  padding-bottom: 10px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > a.menu-link-row + ul.mod-menu__sub,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > .menu-row + ul.mod-menu__sub,
.mega-nav li.parent > ul > li > a.menu-link-row + ul,
.mega-nav li.parent > ul > li > .menu-row + ul {
  margin-top: 0;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 2px solid rgba(10, 88, 152, 0.18);
  display: grid;
  gap: 10px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub,
.mega-nav li.parent > ul > li.deeper.parent > ul {
  margin-left: 22px;
  padding-left: 18px;
  border-left: 2px solid rgba(10, 88, 152, 0.22);
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub > li,
.mega-nav li.parent > ul > li.deeper.parent > ul > li {
  border-bottom: 0;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub,
.mega-nav li.parent > ul > li.deeper.parent > ul {
  margin-bottom: 10px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > a.menu-link-row + ul.mod-menu__sub a,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > .menu-row + ul.mod-menu__sub a,
.mega-nav li.parent > ul > li > a.menu-link-row + ul a,
.mega-nav li.parent > ul > li > .menu-row + ul a {
  font-size: 15px;
  line-height: 1.35;
  padding-left: 2px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub > li > a.menu-link-row,
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li.deeper.parent > ul.mod-menu__sub > li > span.mod-menu__heading,
.mega-nav li.parent > ul > li.deeper.parent > ul > li > a,
.mega-nav li.parent > ul > li.deeper.parent > ul > li > span {
  padding: 8px 0;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > .menu-row .mod-menu__heading,
.mega-nav li.parent > ul > li > .menu-row .mod-menu__heading {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #0a5898;
  opacity: 1;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li > a.menu-link-row .menu-text,
.mega-nav li.parent > ul > li > a.menu-link-row .menu-text {
  font-weight: 600;
}

/* Gruppi interni al megamenu:
   usa un separator come intestazione testuale e sotto i suoi figli reali */
#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul.mod-menu__sub),
.mega-nav li.parent > ul > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul) {
  padding-top: 0;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul.mod-menu__sub) > .menu-row,
.mega-nav li.parent > ul > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul) > .menu-row {
  padding: 20px 0 10px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul.mod-menu__sub) > .menu-row .mod-menu__heading,
.mega-nav li.parent > ul > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul) > .menu-row .mod-menu__heading {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #0a5898;
  opacity: 1;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul.mod-menu__sub) > ul.mod-menu__sub,
.mega-nav li.parent > ul > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul) > ul {
  margin-top: 0;
  padding-left: 30px;
  gap: 10px;
}

#mainMenu > .mod-menu > li.parent > ul.mod-menu__sub > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul.mod-menu__sub) > ul.mod-menu__sub a,
.mega-nav li.parent > ul > li:has(> .menu-row > .menu-col > span.mod-menu__heading):has(> ul) > ul a {
  font-size: 15px;
  line-height: 1.35;
}

/* Icone se usi "Immagine voce di menu" 
.mega-nav img { max-height:18px; width:auto; }*/

/* Icone se usi "Classe CSS del link" tipo .icon-adesivi */
.mega-nav a.icon-adesivi::before { content:""; width:18px; height:18px; background:url(/media/icons/adesivi.svg) no-repeat center/contain; display:inline-block; }

/* Accessibilità caret per il parent (opzionale, dipende dal tuo template) */
.mega-nav > ul > li.parent > a::after {
  content:""; border:6px solid transparent; border-top-color:currentColor; margin-left:.4rem; display:inline-block; transform:translateY(2px);
}

/* Mobile: trasformalo in blocchi impilati */
@media (max-width: 992px){
  .mega-nav li.parent > ul {
    position:static; width:100%;
    grid-template-columns:1fr; gap:12px; padding:14px; margin:8px 0 0;
    box-shadow:none; border-radius:12px;
    opacity:1; visibility:visible; transform:none; /* aperto di default o gestisci con JS del template */
  }
}
/* Nota sotto al titolo (megamenu e mobile) */
.menu-item-note{
  display:block;
  margin-top:4px;
  font-size:14px;
  line-height:1.4 !important;
  color:#333 !important;      /* colore richiesto */
  text-decoration:none;
  cursor:pointer;
  text-transform: none !important;
  padding-top: 0 !important;
}

/* In header/overlay scuri puoi forzare bianco solo se serve leggibilità */
/* #mobileMenuOverlay .menu-item-note{ color:#fff; } */

.menu-item-note-btn{
  background:none;
  border:0;
  padding:0;
  text-align:left;
  width:100%;
}

#mobileMenuOverlay .menu-item-note{ color:#fff !important; opacity:.9; }

/* Struttura con icona a sinistra nelle VOCI DI SOTTOMENU */
#mainMenu .mod-menu__sub > li > a,
#mainMenu .mod-menu__sub > li > span.mod-menu__heading,
#mobileMenuOverlay .mod-menu__sub > li > a,
#mobileMenuOverlay .mod-menu__sub > li > span.mod-menu__heading{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Icona */
.menu-icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
}

/* Testo + titolo */
.menu-text{
  display: inline-block;
}

/* Riga icona + titolo/nota (solo sottovoci) */
.menu-row{
  display:flex;
  align-items:flex-start;
  gap:25px;
}
.menu-icon-lg{
  width:36px;          /* più grande */
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
}
.menu-col{
  display:flex;
  flex-direction:column;
  min-width:0; /* evita overflow del testo lungo */
}

.menu-item-note-btn{
  background:none; border:0; padding:0; text-align:left; cursor:pointer;
}

/* Mobile: rendi le icone bianche su overlay blu */
@media (max-width: 992px){
  #mobileMenuOverlay .menu-icon-lg{
    filter: brightness(0) invert(1);
  }
  /* Se preferisci NASCONDERLE su mobile:
     #mobileMenuOverlay .menu-icon-lg{ display:none; } */
}
/* Desktop (header chiaro): uppercase + colore brand */
.mega-nav .menu-row .menu-col > a,
.mega-nav .menu-row .menu-col > span.mod-menu__heading{
  text-transform: uppercase;
  color: #0a5898;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
}

/* Hover desktop: stessa palette del mega */
.mega-nav .menu-row .menu-col > a:hover{
  color: #0a5898;
  text-decoration: underline;
}

/* Mobile overlay (sfondo blu): titolo bianco, sempre uppercase */
@media (max-width: 992px){
  #mobileMenuOverlay .menu-row .menu-col > a,
  #mobileMenuOverlay .menu-row .menu-col > span.mod-menu__heading{
    color: #fff !important;
    text-transform: uppercase;
  }
  #mobileMenuOverlay .menu-text {
	  font-weight: 300;
	  font-size: 16px;
  }
  #mobileMenuOverlay .menu-item-note {
	  font-weight: 300;
	  font-size: 14px;
  }
}