/* ==========================================
   Menú: PRIMARY
   Ganchos disponibles (añadidos por tu módulo):
   - <ul> principal:            .menu.menu--primary
   - <ul> de submenú:           .submenu.submenu--primary
   - <li> item:                 .menu-item.menu-item--primary
   - <a> enlace:                .menu-link.menu-link--primary
   - Profundidad:               .menu-depth-0, .submenu-depth-1, ...
   - Estados WP:                .current-menu-item, .current-menu-ancestor,
                                .current_page_parent, .current_page_ancestor
   - Estado extra (módulo):     .is-active  +  [aria-current="page"]
   - Item con hijos:            .menu-item-has-children
   ========================================== */
@font-face {
  font-family: "Roboto Flex";
  src: url("/public_html/wp-content/themes/gp-child/assets/fonts/RobotoFlex.ttf")
    format("truetype");
}

/* ====== UL PRINCIPAL ====== */
.menu--primary {
  display: flex;
  align-items: center;
  gap: var(--menu-primary-gap);
  background: var(--menu-primary-bg);
  /* opcional: reset */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ====== LI (nivel 0 y siguientes) ====== */
.menu-item--primary {
  position: relative; /* necesario para dropdowns posicionados */
}

/* Profundidad útil para estilos granulares */
.menu-depth-0.menu-item--primary {
  padding: 8px;
}
/* .menu-depth-1.menu-item--primary {
}
.menu-depth-2.menu-item--primary {
} */

/* ====== A (enlaces) ====== */
.menu-link--primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #4e6170;
  font-weight: 400;
  font-family: "Roboto Flex", sans-serif;
  font-size: 15px;
  line-height: 20px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease;
}

/* Hover / Focus */
.menu-link--primary:hover,
.menu-link--primary:focus {
  color: var(--color-primary);
  outline: none;
}

/* Focus visible (accesibilidad) */
.menu-link--primary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ====== ESTADO ACTIVO ======
   Puedes usar cualquiera de estos ganchos (todos apuntan a lo mismo):
   - .is-active (clase extra que añadiste en el filtro)
   - [aria-current="page"] (accesible)
   - .current-menu-item (clase nativa de WP aplicada al <li>)
   - .current-menu-ancestor, .current_page_parent, etc. (para padres) */
.menu-link--primary.is-active,
.menu-link--primary[aria-current="page"],
.current-menu-item > .menu-link--primary {
  color: var(--color-primary);
  font-weight: 600;
}

/* Padre activo (cuando estás en una subpágina) */
.current-menu-ancestor > .menu-link--primary,
.current_page_parent > .menu-link--primary,
.current_page_ancestor > .menu-link--primary {
  color: var(--color-primary);
  font-weight: 600;
}

/* sobre el <a> */
.menu-link--primary.is-active {
}
.menu-link--primary[aria-current="page"] {
}

/* o sobre el <li> actual afectando al <a> hijo */
.current-menu-item > .menu-link--primary {
}
.current-menu-ancestor > .menu-link--primary {
}

.menu--primary > .menu-item--primary {
  position: relative;
}

/* puente desde el borde inferior del <li> hasta el submenú */
.menu--primary > .menu-item--primary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* altura = la separación que pongas en el top del submenú */
  height: 16px; /* si usas top: calc(100% + 16px) */
  top: 100%;
  pointer-events: auto; /* asegura que siga habiendo hover en el <li> */
}

/* ====== ITEM CON SUBMENÚ (caret, etc.) ====== */
.menu-item-has-children > .menu-link--primary::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 0.25em;
  background: no-repeat center / contain
    url("/wp-content/themes/gp-child/assets/icons/menu.svg");
  vertical-align: middle;
  transform: translateY(1px);
}

/* ====== SUBMENÚS ====== */
.submenu--primary {
  display: none; /* oculto por defecto */
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(10px); /* se ve separado 10px */
  min-width: 546px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-75);
  border-radius: var(--balinot-nav-radius-lg, 16px);
  padding: 8px 16px;
  list-style: none;
  z-index: 50;
  opacity: 0.9999;
}

/* Mostrar al hover del padre (desktop simple) */
.menu--primary > .menu-item--primary:hover > .submenu--primary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  opacity: 1;
}

/* Itens internos del submenú */
.submenu--primary .menu-item--primary {
  position: relative;
}

.submenu--primary .menu-link--primary {
  padding: 8px;
  width: 100%;
  color: var(--color-primary);
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}

/* Hover/activo en submenú */
.submenu--primary .menu-link--primary:hover,
.submenu--primary .menu-link--primary:focus {
  color: var(--color-primary-400);
}

.submenu--primary .menu-item--primary.current-menu-item > .menu-link--primary {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

/* Sub-submenú (profundidad siguiente) */
.submenu--primary .menu-item-has-children > .submenu--primary {
  top: 0;
  left: calc(100% + 0.5rem);
}

/* ====== RESPONSIVE (ejemplo) ====== */
@media (max-width: 1024px) {
  .menu--primary {
    gap: 0.75rem;
  }
  /* Si el menú en móvil pasa a vertical, puedes forzar display: block; etc. */
}

/* ====== Utilidades extra (opcional) ====== */
.menu--primary .is-hidden {
  display: none !important;
}