/* Megamenu Styles for Flashgiovani Subtheme */
@media (min-width: 768px) {
  .d-lg-none {
    display: none !important;
  }
}

/* Base Megamenu Container Setup */
#mainmenu {
  position: relative;
}

/* Override globale hover/focus/active di Bootstrap sui link del megamenu */
#mainmenu .dropdown-menu>li>a:hover,
#mainmenu .dropdown-menu>li>a:focus,
#mainmenu .dropdown-menu>li>a:active,
#mainmenu .dropdown-menu>li.active>a,
#mainmenu .dropdown-menu>li.active>a:hover,
#mainmenu .dropdown-menu>li.active>a:focus,
#topmenu .dropdown-menu>li>a:hover,
#topmenu .dropdown-menu>li>a:focus,
#topmenu .dropdown-menu>li>a:active,
#topmenu .dropdown-menu>li.active>a,
#topmenu .dropdown-menu>li.active>a:hover,
#topmenu .dropdown-menu>li.active>a:focus {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* Override stato expanded/open Bootstrap: rimuove il background grigio dalla voce padre quando il dropdown è aperto */
#mainmenu .navbar-nav>li.open>a,
#mainmenu .navbar-nav>li.open>a:hover,
#mainmenu .navbar-nav>li.open>a:focus,
#mainmenu .navbar-default .navbar-nav>.open>a,
#mainmenu .navbar-default .navbar-nav>.open>a:hover,
#mainmenu .navbar-default .navbar-nav>.open>a:focus,
#topmenu .navbar-nav>li.open>a,
#topmenu .navbar-nav>li.open>a:hover,
#topmenu .navbar-nav>li.open>a:focus,
#topmenu .navbar-default .navbar-nav>.open>a,
#topmenu .navbar-default .navbar-nav>.open>a:hover,
#topmenu .navbar-default .navbar-nav>.open>a:focus,
.menu--navbar-secondaria > li.open > a,
.menu--navbar-secondaria > li.open > a:hover,
.menu--navbar-secondaria > li.open > a:focus {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- DESKTOP STYLING (>= 768px) --- */
@media (min-width: 768px) {

  /* Il contenitore (ul) diventa il punto di riferimento per le coordinate assolute (largo da prima all'ultima voce) */
  #mainmenu .navbar-nav,
  #topmenu .nav {
    position: relative !important;
  }

  /* Rimuoviamo position relative dai singoli li per far sì che la tendina si riferisca all'intero menu (ul) */
  #mainmenu .navbar-nav>li,
  #topmenu .nav>li,
  #mainmenu .navbar-nav>li.dropdown,
  #topmenu .nav>li.dropdown {
    position: static !important;
  }

  /* Secondary menu top bar styling */
  #topmenu #block-navbarsecondaria .nav>li>a {
    color: #22498d;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 14px;
  }

  /* Megamenu dropdown container - Si estende per tutta la larghezza dell'ul contenitore (da prima a ultima voce) */
  #mainmenu .navbar-nav>li>.dropdown-menu,
  #topmenu .nav>li>.dropdown-menu,
  #mainmenu .dropdown-menu.megamenu-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* Si espande da left:0 a right:0 */
    max-width: none !important;
    min-width: 0 !important;
    top: 100% !important;
    background-color: #1b66b3 !important;
    border: none !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    padding: 20px 30px !important;
    margin-top: 0 !important;
    z-index: 1050 !important;
    float: none !important;
  }

  /* Contenitore lista megamenu: CSS Columns per scorrere dall'alto in basso per colonna */
  .megamenu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    column-count: 2 !important;       /* 2 colonne */
    column-gap: 40px !important;       /* spazio tra colonne */
    width: 100% !important;
    display: block !important;         /* override di eventuali display:grid da mobile */
  }

  /* Evita che un link venga spezzato tra le due colonne */
  .megamenu-list > li.megamenu-item {
    break-inside: avoid !important;
    display: block !important;        /* forza block anche nel contesto di #topmenu */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .megamenu-list > li.megamenu-item > a {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    padding: 4px 0 !important;
    display: block !important;
    text-decoration: underline !important;
    word-break: break-word !important;
  }

  .megamenu-list > li.megamenu-item > a:hover,
  .megamenu-list > li.megamenu-item > a:focus {
    background: transparent !important;
    color: #cce5ff !important;
  }

  /* Prima voce (titolo): si estende su ENTRAMBE le colonne con column-span */
  .megamenu-list > li.megamenu-item.megamenu-item-main {
    column-span: all !important;       /* occupa tutta la larghezza */
    margin-bottom: 8px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  .megamenu-list>li.megamenu-item.megamenu-item-main>a {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

  /* Icona casetta FontAwesome prima del link principale (desktop) */
  .megamenu-list>li.megamenu-item.megamenu-item-main>a::before {
    /* content: '\f015'; */
    /* fa-house */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
  }

  .megamenu-list>li.megamenu-item.megamenu-item-main>a:hover,
  .megamenu-list>li.megamenu-item.megamenu-item-main>a:focus {
    background: transparent !important;
    color: #e0e0e0 !important;
  }
}

/* --- MOBILE STYLING (< 768px) --- */
@media (max-width: 767px) {
  #block-flashgiovani-navbarsecondaria {
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    padding-top: 10px;
    margin-top: 10px;
  }

  /* Full screen or full width collapsed menu background */
  #mainmenu .navbar-collapse {
    background-color: #1b66b3;
    border-top: none;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
    padding: 15px 20px 30px 20px;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Clean up list spacing in mobile overlay */
  #mainmenu .navbar-nav,
  #mainmenu .navbar-collapse ul {
    float: none;
    margin: 0;
    padding: 0;
    width: 100% !important;
  }

  #mainmenu .navbar-nav>li,
  #mainmenu .navbar-collapse ul li {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.15); */
  }

  /* Top-level item accordion titles on mobile */
  #mainmenu .navbar-nav>li>a,
  #mainmenu .navbar-collapse ul>li>a {
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 14px 10px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Pallino SOLO per le sotto-voci del megamenu (non per il titolo principale, non per il primo livello) */
  .megamenu-list>li.megamenu-item:not(.megamenu-item-main) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
  }

  .megamenu-list>li.megamenu-item:not(.megamenu-item-main):before {
    content: '';
    width: 5px;
    height: 5px;
    min-width: 5px;
    background: #fff;
    border-radius: 999px;
    margin-right: 8px;
  }

  /* Secondary menu divider on mobile when merged */
  .mobile-secondary-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 15px 0;
  }

  /* Submenu lists on mobile */
  #mainmenu .dropdown-menu,
  #mainmenu .megamenu-dropdown {
    position: static !important;
    float: none !important;
    width: 100% !important;
    background-color: #165292 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  /* Il container della lista: padding ridotto, i li gestiranno il loro allineamento */
  .megamenu-list {
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Voce principale: bordo separatore sul li (più affidabile dell'a) */
  .megamenu-list>li.megamenu-item-main {
    list-style: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
  }

  /* Casetta + testo allineati a sinistra */
  .megamenu-list>li.megamenu-item-main>a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    border: none !important;
  }

  /* Icona casetta: larghezza fissa 20px per allineare il testo con i sub-link */
  .megamenu-list>li.megamenu-item-main>a::before {
    content: '\f015';
    /* fa-house */
    font-family: 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
  }

  /* Sub-voci con pallino: stessa indentazione della casetta (pallino 5px + gap 8px = 13px; casa ~14px + gap 8px = 22px; differenza ~9px compensata con padding-left) */
  .megamenu-list>li.megamenu-item:not(.megamenu-item-main) {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
  }

  /* Pallino: stessa larghezza totale dell'icona casa (20px) per allineare i testi */
  .megamenu-list>li.megamenu-item:not(.megamenu-item-main)::before {
    content: '';
    width: 5px;
    height: 5px;
    min-width: 5px;
    background: #fff;
    border-radius: 999px;
    margin-right: 8px;
    margin-left: 7px;
    /* 7px + 5px bullet + 8px gap = 20px gap totale, uguale alla casetta */
    flex-shrink: 0;
  }

  /* Link testo delle sotto-voci */
  .megamenu-list>li.megamenu-item>a {
    color: #dbeaff !important;
    font-size: 15px !important;
    padding: 6px 0 !important;
    display: block !important;
    background: transparent !important;
  }
}