/* ===========================================
   ESTILOS ESPECÍFICOS PARA O MENU E SUBMENUS
   Garantindo que os estilos sejam aplicados corretamente
   =========================================== */

/* Container principal do menu */
.offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 55, 113, 0.4) transparent;
  overflow-y: auto;
  padding-right: 0px;
  padding-left: 0px;
}

/* Remove espaçamentos entre itens de menu */
.new-menu,
.new-menu ul,
.new-menu ol {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  list-style: none !important;
}

.new-menu li {
  margin: 0 !important;
  padding: 0 !important;
  border-spacing: 0 !important;
  gap: 0 !important;
}

.new-menu a {
  margin: 0 !important;
  border-spacing: 0 !important;
}

/* Estilo da barra de rolagem para WebKit (Chrome, Safari, Edge) */
.offcanvas-body::-webkit-scrollbar {
  width: 8px;
}

.offcanvas-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 0;
}

.offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(29, 55, 113, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.offcanvas-body::-webkit-scrollbar-thumb:hover {
  background: rgba(29, 55, 113, 0.5);
}

/* Estilo para navegadores Firefox */
.offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 55, 113, 0.3) transparent;
}

/* Melhorias visuais para submenus */
.new-menu .sub-menu,
.new-menu .children {
  position: relative;
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  margin-left: 15px;
  padding-left: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}

/* Quando o submenu está ativo/aberto */
.new-menu .menu-item-active > .sub-menu,
.new-menu .menu-item-active > .children,
.new-menu .page_item_has_children.current-menu-item > .children {
  max-height: 2000px;
  opacity: 1;
  visibility: visible;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Indicador visual para itens com submenu - Removido pois já é controlado pelo JavaScript */
.menu-item-has-children > a,
.page_item_has_children > a {
  position: relative;
  padding-right: 30px !important;
}

/* Destaque para o item ativo - itens finais com fundo branco */
.new-menu .current-menu-item > a,
.new-menu .current-page-item > a,
.new-menu .menu-item-active > a {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--bs-uenf-blue, #1d3771) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--bs-uenf-blue, #1d3771) !important;
  padding-left: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 1;
  transition: all 0.2s ease !important;
}

/* Containers ativos mantêm fundo azul */
.new-menu .current-menu-ancestor > a {
  background: linear-gradient(135deg, var(--bs-uenf-blue, #1d3771) 0%, rgba(29, 55, 113, 0.95) 100%) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 700 !important;
  border-left: 4px solid rgba(255, 255, 255, 0.8) !important;
  padding-left: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 1;
  transition: all 0.2s ease !important;
}

.new-menu .current-menu-item > a:hover,
.new-menu .current-page-item > a:hover,
.new-menu .menu-item-active > a:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--bs-uenf-blue, #1d3771) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--bs-uenf-blue, #1d3771) !important;
  padding-left: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 1;
  transition: all 0.2s ease !important;
}

/* Setas azuis no hover dos itens ativos */
.new-menu .current-menu-item > a:hover::after,
.new-menu .current-page-item > a:hover::after,
.new-menu .menu-item-active > a:hover::after {
  color: var(--bs-uenf-blue, #1d3771) !important;
}

.new-menu .current-menu-ancestor > a:hover {
  background: linear-gradient(135deg, var(--bs-uenf-blue, #1d3771) 0%, rgba(29, 55, 113, 0.95) 100%) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 700 !important;
  border-left: 4px solid rgba(255, 255, 255, 0.8) !important;
  padding-left: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 1;
  transition: all 0.2s ease !important;
}


/* Efeito de hover para itens de nível 1 - fundo branco 70%, texto azul, seta azul */
.new-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--bs-uenf-blue, #1d3771) !important;
  padding-left: 25px !important;
  transition: all 0.3s ease;
}

/* Setas azuis no hover dos itens de nível 1 */
.new-menu > li > a:hover::after {
  color: var(--bs-uenf-blue, #1d3771) !important;
}

/* Efeito de hover para subitens - mantém 60% */
.new-menu .sub-menu > li > a:hover,
.new-menu .children > li > a:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--bs-uenf-blue, #1d3771) !important;
  padding-left: 25px !important;
  transition: all 0.3s ease;
}

/* Hover para containers de nível 1 - fundo branco 70%, texto azul, seta azul */
.new-menu > li.menu-item-has-children > a:hover,
.new-menu > li.page_item_has_children > a:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--bs-uenf-blue, #1d3771) !important;
  padding-left: 25px !important;
  transition: all 0.3s ease;
}

/* Setas azuis no hover dos containers de nível 1 */
.new-menu > li.menu-item-has-children > a:hover::after,
.new-menu > li.page_item_has_children > a:hover::after {
  color: var(--bs-uenf-blue, #1d3771) !important;
}

/* Ajustes para telas menores */
@media (max-width: 1920px) {
  .offcanvas-body {
    padding-right: 5px;
  }
  
  .offcanvas-body::-webkit-scrollbar {
    width: 6px;
  }
}