/**
 * Menu Dropdown - Suporte para Submenus
 * Garante que o hover funcione corretamente
 */

/* Menu item com submenu - grupo para hover */
.nav_menu .menu-item-has-children {
  position: relative;
}

/* Container do submenu - escondido por padrão */
.nav_menu .menu-item-has-children > div {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -0.625rem; /* -left-2.5 = -10px */
  width: fit-content;
  padding-top: 1.5rem; /* pt-6 = 24px */
  transition: all 0.2s ease-in-out;
}

/* Submenu visível no hover do parent */
.nav_menu .menu-item-has-children:hover > div {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

/* Lista do submenu */
.nav_menu .menu-item-has-children > div > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem; /* gap-3 = 12px */
  padding: 0.75rem; /* p-3 = 12px */
  font-size: 0.875rem; /* text-sm = 14px */
  line-height: 1.5; /* leading-[150%] */
  font-weight: 500; /* font-medium */
  white-space: nowrap;
}

/* Links do submenu - hover effect */
.nav_menu .menu-item-has-children > div > ul a {
  transition: color 0.2s ease-in-out;
}

.nav_menu .menu-item-has-children > div > ul a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Esconde submenu em mobile (telas menores que lg) */
@media (max-width: 1023px) {
  .nav_menu .menu-item-has-children a {
    margin: 0 auto;
  }

  .nav_menu .menu-item-has-children > div {
    display: none;
    position: static;
    width: 100%;
    padding-top: 0.5rem;
    text-align: center;
  }

  .nav_menu .menu-item-has-children.is-open > div {
    display: block;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }

  .nav_menu .menu-item-has-children > div > ul {
    background: transparent;
    margin: 0 auto;
  }
}

/* Desktop: garante que o ícone de seta apareça */
@media (min-width: 1024px) {
  .nav_menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 = 12px */
  }

  /* .nav_menu .menu-item-has-children > a > span.material-symbols-rounded {
        transform: rotate(90deg);
    } */
}