/**
 * BIT Inline Submenu — Estilos
 *
 * Carregado via wp_enqueue_style em bit-inline-submenu.php.
 * Para customizar cores, sobrescreva as variáveis no child theme:
 *
 *   .menu-submenu-inline {
 *     --bis-bg:                 #0F4C5C;
 *     --bis-text:               rgba(255,252,247,0.75);
 *     --bis-text-hover:         #FFFCF7;
 *     --bis-text-hover-weight:  600;
 *     --bis-text-active:        #FFFCF7;
 *     --bis-border-active:      rgba(255,252,247,0.70);
 *   }
 */

/* ── 1. Suprimir dropdown nativo do Elementor (apenas desktop) ─────────────── */
/* No desktop usamos barras próprias — escondemos o clone do Elementor.
   No mobile (hamburger) o clone é o painel de navegação — não esconder. */
@media (min-width: 1025px) {
  .menu-submenu-inline .elementor-nav-menu--dropdown {
    display: none !important;
  }

  /* Ocultar caret dos itens com filhos — apenas desktop */
  .menu-submenu-inline .elementor-item-after {
    display: none !important;
  }
}

/* ── 2. Posicionamento dos containers ─────────────────────────────────────── */
.menu-submenu-inline,
.menu-submenu-inline .elementor-nav-menu--main {
  overflow: visible !important;
  position: static !important;
}

.menu-submenu-inline .elementor-nav-menu > li.menu-item-has-children {
  position: static;
}

/* ── 3. Variáveis de cores (defaults) ──────────────────────────────────────── */
.menu-submenu-inline {
  --bis-bg:                 #d6f395;
  --bis-bg-hover:           #d6f395;
  --bis-text:               #174538;
  --bis-text-hover:         #0e4a5c;
  --bis-text-hover-weight:  700;
  --bis-text-active:        #0e4a5c;
  --bis-border-active:      #0e4a5c;
  --bis-diamond:            var(--bis-bg);
}

/* ── 4. Barra hover overlay (div.bit-hover-bar no body) ────────────────────── */
/* Criada via JS — não usa .sub-menu do Elementor, sem conflito de CSS.
   position:fixed ancorada abaixo do header, desliza de trás do header. */
.bit-hover-bar {
  position: fixed;
  top: var(--bit-submenu-top, 80px);
  left: 0;
  width: 100%;
  z-index: 9990;

  /* Layout horizontal */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;

  /* Altura fixa */
  height: var(--bit-submenu-height, 72px);
  padding: 0 16px;
  box-sizing: border-box;
  overflow: visible;

  background: var(--bis-bg);

  /* Fechado: desliza para cima (por trás do header) */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.15s ease;
}

.bit-hover-bar ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ── 5. Ativar barra hover ──────────────────────────────────────────────────── */
.bit-hover-bar.bit-hover-bar--active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── 5b. Diamante indicador no hover ───────────────────────────────────────── */
/* Losango na borda superior da barra, metade oculta atrás do header (z-index maior).
   Posição horizontal via --bit-arrow-x calculado pelo JS no centro do item pai. */
.bit-hover-bar.bit-hover-bar--active::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--bit-arrow-x, 120px);
  width: 14px;
  height: 14px;
  background: var(--bis-diamond);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ── 6. Barra in-flow (página ativa) ───────────────────────────────────────── */
/* .bit-subnav-bar injetado via JS após o header — rola com a página naturalmente */
.bit-subnav-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--bis-bg);
  height: var(--bit-submenu-height, 72px);
  padding: 0 16px;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 9990;
}

.bit-subnav-bar ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ── 7. Itens das barras (hover e in-flow) ──────────────────────────────────── */
.bit-hover-bar li a,
.bit-subnav-bar li a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: var(--bit-submenu-height, 72px);
  color: var(--bis-text);
  font-size: 0.875rem;
  font-family: var(--e-global-typography-text-font-family, Roboto), sans-serif;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.bit-hover-bar li a:hover,
.bit-subnav-bar li a:hover {
  color: var(--bis-text-hover);
  font-weight: var(--bis-text-hover-weight, 700);
  background-color: var(--bis-bg-hover);
}

.bit-subnav-bar li.current-menu-item a {
  color: var(--bis-text-active);
  font-weight: var(--bis-text-hover-weight, 700);
  background-color: transparent;
  border-bottom: 2px solid var(--bis-border-active);
}

/* ── 7b. Item ativo do menu principal — mesmo peso que o submenu ───────────── */
.menu-submenu-inline .elementor-nav-menu > li:is(
  .current-page-ancestor,
  .current-menu-ancestor,
  .current-menu-parent,
  .current-menu-item,
  .current-page-parent,
  .current_page_parent,
  .current_page_ancestor
) > a {
  font-weight: var(--bis-text-hover-weight, 700) !important;
  background-color: transparent !important;
}

/* ── 8. Mobile — ocultar barras abaixo do breakpoint desktop (hamburger) ── */
@media (max-width: 1024px) {
  .bit-hover-bar,
  .bit-subnav-bar {
    display: none !important;
  }
}

/* ── 9. Ocultar barra in-flow durante hover ─────────────────────────────── */
/* Evita "duas barras verdes" simultâneas. visibility:hidden preserva o layout. */
body:has(.bit-hover-bar--active) .bit-subnav-bar {
  visibility: hidden;
}