/* =====================================================================
 * BilanceOnline — megamenu.css
 * Pattern Decathlon: blocco unico + pannelli OVERLAY (no accordion).
 * ===================================================================== */

.megamenu{
  position:relative;
  background:#fff;
  z-index:50;
}

/* ===== BAR (sempre visibile) ===== */
.megamenu-bar{
  background:#fff;
  position:relative;
  z-index:52;
}
.megamenu-bar .container{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:nowrap;gap:16px;
}

.megamenu-tabs,
.megamenu-tabs-right{
  display:flex;list-style:none;margin:0;padding:0;gap:0;align-items:center;
}

/* ===== TAB ===== */
.mm-tab{
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:0.9rem;color:var(--ink);
  text-decoration:none;
  padding:14px 18px;
  display:inline-flex;align-items:center;gap:4px;
  position:relative;
}
/* Primo tab del menubar a sinistra: niente padding-left, così il testo si allinea
   col logo e con il breadcrumb (stessa X del container). */
.megamenu-tabs > li:first-child > .mm-tab{padding-left:0}
/* Underline del current/expanded sul primo tab parte da 0 invece che da 18px */
.megamenu-tabs > li:first-child > .mm-tab.current::after,
.megamenu-tabs > li:first-child > .mm-tab[aria-current="page"]::after,
.megamenu-tabs > li:first-child > .mm-tab[aria-expanded="true"]::after{
  left:0 !important;right:18px !important;
}
/* Ultimo tab del menu destro: niente padding-right per allineare al bordo del container */
.megamenu-tabs-right > li:last-child > a{padding-right:0}
.mm-tab:hover{color:var(--bo-red)}
.mm-tab:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:3px}

/* Chevron freccia */
.mm-tab i.ti-chevron-down{
  font-size:0.875rem;
  color:var(--ink-3);
  transition:transform .2s, color .15s;
}
.mm-tab:hover i.ti-chevron-down{color:var(--bo-red)}

/* Stato "aperto" (aria-expanded="true") */
.mm-tab[aria-expanded="true"]{color:var(--bo-red)}
.mm-tab[aria-expanded="true"] i.ti-chevron-down{
  transform:rotate(180deg);
  color:var(--bo-red);
}
.mm-tab[aria-expanded="true"]::after{
  content:"";position:absolute;
  left:18px;right:18px;bottom:6px;
  height:3px;background:var(--bo-red);
  border-radius:2px;z-index:53;
}

/* Stato CURRENT (pagina attiva): SOLO colore rosso + underline rossa.
   Mantiene lo stesso font-weight degli altri tab (600). */
.mm-tab.current,
.mm-tab[aria-current="page"]{
  color:var(--bo-red) !important;
  font-weight:600 !important;
}
.mm-tab.current::after,
.mm-tab[aria-current="page"]::after{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  bottom:6px !important;
  height:3px !important;
  background:var(--bo-red) !important;
  border-radius:2px !important;
}

/* Voce "Offerte": nera come gli altri tab (niente styling speciale) */

/* Nav-right (Chi siamo / Contatti) */
.megamenu-tabs-right a{
  display:inline-block;
  padding:14px 12px;
  color:var(--ink-2);text-decoration:none;
  font-weight:600;font-size:0.8125rem;
  position:relative;
}
.megamenu-tabs-right a:hover{color:var(--bo-red)}
.megamenu-tabs-right a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:3px}
.megamenu-tabs-right a.current,
.megamenu-tabs-right a[aria-current="page"]{
  color:var(--bo-red) !important;
  font-weight:600 !important;
  position:relative;
}
.megamenu-tabs-right a.current::after,
.megamenu-tabs-right a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:6px;
  height:3px;background:var(--bo-red);
  border-radius:2px;
}

/* ===== PANELS (OVERLAY assoluto — NON occupa altezza nel flusso) ===== */
.megamenu-panels{
  position:absolute;
  top:100%;left:0;right:0;
  background:#fff;
  z-index:51;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  /* Stato chiuso: invisibile, non interagibile, niente spazio */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
  max-height:80vh;
  overflow-y:auto;
}
.megamenu.is-open .megamenu-panels{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear 0s;
}

.mm-panel{padding:28px 0 36px}
.mm-panel[hidden]{display:none}

.mm-panel-title{
  font-size:1.125rem;font-weight:800;
  margin:0 0 22px;
  letter-spacing:-0.015em;color:var(--ink);
}
.mm-panel-title a{color:inherit;text-decoration:none}
.mm-panel-title a:hover{color:var(--bo-red);text-decoration:underline}

.mm-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 32px}
.mm-col-h{
  font-size:0.875rem;font-weight:800;
  margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--line);
  color:var(--ink);
}
.mm-col-h a{color:inherit;text-decoration:none}
.mm-col-h a:hover{color:var(--bo-red)}
.mm-col ul{list-style:none;margin:0;padding:0}
.mm-col li{margin:0}
.mm-col li a{
  display:block;padding:5px 0;
  font-size:0.84rem;color:var(--ink-2);text-decoration:none;line-height:1.4;
}
.mm-col li a:hover{color:var(--bo-red);padding-left:4px;transition:padding .12s}
.mm-col li a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}

/* ===== BACKDROP (sopra al contenuto pagina, sotto al megamenu) ===== */
body.mm-open::after{
  content:"";
  position:fixed;left:0;right:0;bottom:0;
  top:var(--mm-bottom, 200px);
  background:rgba(0,0,0,.35);
  z-index:49;
  pointer-events:none;
  animation:mm-fade-in .18s ease-out;
}
@keyframes mm-fade-in{ from{opacity:0} to{opacity:1} }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .mm-panel-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .megamenu{display:none}    /* mobile drawer separato */
}
@media (max-width:640px){
  .mm-panel-grid{grid-template-columns:1fr}
}