/* ==========================================
   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
   ========================================== */

/* ====== Variables (opcionales) ====== */
:root {
  --menu-primary-color: #111;
  --menu-primary-color-active: #000;
  --menu-primary-color-hover: #111;
  --menu-primary-bg: transparent;

  --submenu-primary-bg: #fff;
  --submenu-primary-border: rgba(0, 0, 0, 0.08);
  --submenu-primary-link: #222;
  --submenu-primary-link-hover: #111;

  --menu-primary-gap: 1.25rem; /* separación entre items */
  --menu-primary-radius: 0.5rem;
  --menu-primary-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ====== 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 {
}
.menu-depth-1.menu-item--primary {
}
.menu-depth-2.menu-item--primary {
}

/* ====== A (enlaces) ====== */
.menu-link--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--menu-primary-color);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 0.35rem;
  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(--menu-primary-color-hover);
  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(--menu-primary-color-active);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
}

/* 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(--menu-primary-color-active);
  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 {
}


/* ====== ITEM CON SUBMENÚ (caret, etc.) ====== */
.menu-item-has-children > .menu-link--primary::after {
  content: "▾";
  font-size: 0.8em;
  line-height: 1;
  transform: translateY(1px);
}

/* ====== SUBMENÚS ====== */
.submenu--primary {
  display: none; /* oculto por defecto */
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  background: var(--submenu-primary-bg);
  border: 1px solid var(--submenu-primary-border);
  border-radius: var(--menu-primary-radius);
  box-shadow: var(--menu-primary-shadow);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  z-index: 50;
}

/* Mostrar al hover del padre (desktop simple) */
.menu--primary > .menu-item--primary:hover > .submenu--primary {
  display: block;
}

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

.submenu--primary .menu-link--primary {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: var(--submenu-primary-link);
  border-radius: 0.35rem;
  font-weight: 500;
}

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

.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;
}