/*
 * menu-icon-grid.css
 * Griglia icone menu — tema myboat
 * Posizione: themes/custom/myboat/css/menu-icon-grid.css
 */

/* ─── Contenitore nav_main fuori dalla navbar ─── */
.nav-main-wrap {
  width: 100%;
  padding: 4px 0;
}

/* ─── Wrapper del singolo blocco menu ─── */
.mbi-wrapper {
  display: block;
  width: 100%;
}

/* ══════════════════════════════════════════════════
   HAMBURGER — sempre visibile, sempre uguale
   ══════════════════════════════════════════════════ */
.mbi-toggle {
  /* !important: sovrascrive qualsiasi regola Bootstrap */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* stile */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 4px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.mbi-toggle:hover,
.mbi-toggle:focus-visible {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  outline: none;
}

/* Tre barrette CSS — no immagine, no SVG esterno */
.mbi-toggle-bars {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: background .2s;
}
.mbi-toggle-bars::before,
.mbi-toggle-bars::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.mbi-toggle-bars::before { top: -6px; }
.mbi-toggle-bars::after  { top:  6px; }

/* X quando aperto */
.mbi-wrapper.mbi-open .mbi-toggle-bars          { background: transparent; }
.mbi-wrapper.mbi-open .mbi-toggle-bars::before  { top: 0; transform: rotate(45deg); }
.mbi-wrapper.mbi-open .mbi-toggle-bars::after   { top: 0; transform: rotate(-45deg); }

/* Su navbar chiara: barrette scure */
.navbar-light .mbi-toggle,
.bg-light .mbi-toggle,
.bg-white .mbi-toggle {
  border-color: rgba(0,0,0,.35);
}
.navbar-light .mbi-toggle-bars,
.navbar-light .mbi-toggle-bars::before,
.navbar-light .mbi-toggle-bars::after,
.bg-light .mbi-toggle-bars,
.bg-light .mbi-toggle-bars::before,
.bg-light .mbi-toggle-bars::after,
.bg-white .mbi-toggle-bars,
.bg-white .mbi-toggle-bars::before,
.bg-white .mbi-toggle-bars::after {
  background: rgba(0,0,0,.7);
}
.navbar-light .mbi-wrapper.mbi-open .mbi-toggle-bars,
.bg-light .mbi-wrapper.mbi-open .mbi-toggle-bars,
.bg-white .mbi-wrapper.mbi-open .mbi-toggle-bars {
  background: transparent;
}

/* ══════════════════════════════════════════════════
   GRIGLIA — chiusa di default, aperta con .mbi-open
   ══════════════════════════════════════════════════ */
.mbi-grid-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
  width: 100%;
}
.mbi-wrapper.mbi-open .mbi-grid-wrap {
  max-height: 2000px;
}

/* ══════════════════════════════════════════════════
   GRIGLIA ICONE
   display:grid !important: resiste a qualsiasi
   flex container genitore
   ══════════════════════════════════════════════════ */
.mbi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .9rem .6rem;
  padding: .75rem 0;
  width: 100%;
  margin: 0;
  list-style: none;
}

/* ══════════════════════════════════════════════════
   SINGOLA VOCE
   ══════════════════════════════════════════════════ */
.mbi-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none !important;
  color: inherit;
  transition: transform .18s ease;
}
.mbi-item:hover,
.mbi-item:focus-visible {
  transform: translateY(-3px) scale(1.07);
  color: inherit;
  outline: none;
}

/* ══════════════════════════════════════════════════
   RIQUADRO ICONA
   Mostra solo l'<i>/SVG, nasconde .link-text
   ══════════════════════════════════════════════════ */
.mbi-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bs-primary, #0d6efd);
  border: 2px solid rgba(255,255,255,.8);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transition: filter .18s, box-shadow .18s;
  flex-shrink: 0;
  overflow: hidden;
}
.mbi-item:hover .mbi-icon-box {
  filter: brightness(1.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.mbi-item.mbi-item--active .mbi-icon-box {
  box-shadow: 0 0 0 3px rgba(255,255,255,.65), 0 4px 10px rgba(0,0,0,.2);
}
.mbi-icon-box svg,
.mbi-icon-box i {
  width: 1.75rem !important;
  height: 1.75rem !important;
  font-size: 1.75rem;
  flex-shrink: 0;
  display: block !important;
}
.mbi-icon-box .link-text {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   ETICHETTA sotto il box
   Mostra solo .link-text, nasconde icona
   ══════════════════════════════════════════════════ */
.mbi-label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  max-width: 80px;
  word-break: break-word;
  color: inherit;
}
.mbi-label svg,
.mbi-label i {
  display: none !important;
}
.mbi-label .link-text {
  display: block !important;
}

/* Testo bianco su sfondi scuri/colorati */
.bg-primary .mbi-item,
.bg-dark    .mbi-item,
.text-light .mbi-item {
  color: #fff;
}

/* ─── Wrapper nav_main + nav_additional fuori dalla navbar ─── */
.nav-icons-wrap {
  width: 100%;
  padding: 2px 0;
}

/* Hamburger allineato a destra */
.mbi-toggle {
  margin-left: auto !important;
}

/* La griglia si apre sotto, a larghezza piena */
.mbi-grid-wrap {
  width: 100%;
}