/*
 * Estilos simplificados para o menu UENF
 * Mesmo menu para mobile e desktop
 */

/* Reset e estilos base */
.menu-principal,
.new-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

/* Itens do menu principal */
.menu-principal > li,
.new-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Links do menu */
.menu-principal a,
.new-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* Hover e foco */
.menu-principal a:hover,
.menu-principal a:focus,
.new-menu a:hover,
.new-menu a:focus {
  background-color: #f5f5f5;
  color: #000;
}

/* Submenus */
.sub-menu,
.children {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #f9f9f9;
  overflow: hidden;
}

/* Itens de submenu */
.sub-menu li,
.children li {
  border-top: 1px solid #eee;
}

/* Links de submenu */
.sub-menu a,
.children a {
  padding-left: 30px;
  color: #555;
}

/* Submenus aninhados */
.sub-menu .sub-menu a,
.children .children a {
  padding-left: 45px;
}

/* Toggle de submenu */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s;
}

/* Ícone do toggle */
.submenu-toggle::before {
  content: '+';
  display: block;
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s;
}

/* Ícone do toggle quando o submenu está aberto */
.menu-item-active > a > .submenu-toggle::before {
  content: '-';
}

/* Esconde o texto do leitor de tela */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Estilos base para mobile (até 1920px) */
.menu-principal.is-mobile,
.new-menu.is-mobile {
  /* Garante que o menu ocupe toda a largura */
  width: 100%;
}

/* Estilos específicos para desktop - Acima de 1920px */
@media (min-width: 1921px) {
  .menu-principal,
  .new-menu {
    display: flex;
    flex-wrap: wrap;
  }

  .menu-principal > li,
  .new-menu > li {
    border: none;
    position: relative;
  }

  .menu-principal > li > a,
  .new-menu > li > a {
    padding: 15px 20px;
  }

  /* Submenus no desktop */
  .menu-principal .sub-menu,
  .menu-principal .children,
  .new-menu .sub-menu,
  .new-menu .children {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 4px 4px;
    border-top: 2px solid #e74c3c;
  }

  /* Submenus aninhados no desktop */
  .menu-principal .sub-menu .sub-menu,
  .menu-principal .children .children,
  .new-menu .sub-menu .sub-menu,
  .new-menu .children .children {
    top: 0;
    left: 100%;
    border-top: none;
    border-left: 2px solid #e74c3c;
    border-radius: 0 4px 4px 4px;
  }

  /* Esconde o toggle no desktop */
  .is-desktop .submenu-toggle {
    display: none !important;
  }

  /* Mostra submenus no hover no desktop */
  .is-desktop .menu-principal > li:hover > .sub-menu,
  .is-desktop .menu-principal > li:hover > .children,
  .is-desktop .new-menu > li:hover > .sub-menu,
  .is-desktop .new-menu > li:hover > .children {
    display: block !important;
    opacity: 1 !important;
    max-height: none !important;
    visibility: visible !important;
  }
}