/* ============================================================
   AutoAI Header Fix — aiworkflowsguide.com
   v18 — basado en el HTML real inspeccionado
   ============================================================

   Hay DOS <nav class="main-navigation"> en el header:

   1) #mobile-menu-control-wrapper
      -> contiene su PROPIO <button class="menu-toggle">.
         Es redundante: no aporta nada que no haga el botón
         real del punto 2.

   2) #site-navigation
      -> el nav real. Contiene OTRO <button class="menu-toggle">
         y el contenedor #primary-menu con la lista <ul class="menu">.

   Ambos botones comparten aria-controls="primary-menu", así que
   el JS de GeneratePress los trata igual: podemos ocultar el
   wrapper nº1 sin perder funcionalidad — el botón de dentro de
   #site-navigation sigue abriendo/cerrando el menú normalmente.

   La visibilidad del panel móvil se ata al aria-expanded real
   del botón (que GeneratePress sí actualiza al hacer clic), y
   el propio contenedor #site-navigation solo pasa a ocupar todo
   el ancho cuando el menú está abierto (:has), para que en
   reposo el botón quede alineado junto al título, a la derecha.
   ============================================================ */

/* 1) Eliminar el toggle duplicado por completo */
#mobile-menu-control-wrapper {
  display: none !important;
}

/* 2) Limpiar el aspecto del botón real: icono compacto, sin
      fondo, sin el texto "Menu" — válido en cualquier ancho */
#site-navigation .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px !important;
  color: var(--awg-text, #F5F7FA) !important;
}

#site-navigation .menu-toggle .mobile-menu,
#site-navigation .menu-toggle .screen-reader-text {
  display: none !important;
}

#site-navigation .menu-toggle svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

/* 3) A partir de 769px: menú siempre en fila horizontal,
      toggle oculto. Usamos el ID #primary-menu (el contenedor
      real de la lista) para ganar siempre al CSS del tema. */
@media (min-width: 769px) {
  #site-navigation .menu-toggle {
    display: none !important;
  }

  #primary-menu.main-nav {
    display: flex !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #primary-menu.main-nav > ul.menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: auto !important;
  }

  #primary-menu.main-nav > ul.menu > li {
    width: auto !important;
    float: none !important;
  }

  #primary-menu.main-nav > ul.menu > li > a {
    white-space: nowrap !important;
    padding: 8px 10px !important;
  }

  .site-header .inside-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* 4) Por debajo de 769px: en reposo el botón comparte fila con
      el título (alineado a la derecha); solo cuando el menú
      está realmente abierto el contenedor pasa a ocupar todo
      el ancho para desplegar el panel debajo del header. */
@media (max-width: 768px) {
  #site-navigation .menu-toggle {
    display: inline-flex !important;
  }

  .site-header .inside-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Reposo: botón alineado a la derecha del título */
  #site-navigation {
    order: 0 !important;
    width: auto !important;
    flex-basis: auto !important;
    margin-left: auto !important;
  }

  #site-navigation .inside-navigation {
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Abierto: el nav ocupa toda la fila, debajo del header */
  #site-navigation:has(.menu-toggle[aria-expanded="true"]) {
    order: 3 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }

  #site-navigation:has(.menu-toggle[aria-expanded="true"]) .inside-navigation {
    width: 100% !important;
  }

  /* Panel oculto por defecto */
  #primary-menu.main-nav {
    display: none !important;
    width: 100% !important;
    background: var(--awg-surface, #131826) !important;
    border-top: 1px solid var(--awg-border, #242C3F) !important;
    margin-top: 12px !important;
  }

  /* Solo visible cuando el botón indica que el menú está abierto */
  #site-navigation .menu-toggle[aria-expanded="true"] ~ #primary-menu.main-nav {
    display: block !important;
  }

  #primary-menu.main-nav > ul.menu {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
  }

  #primary-menu.main-nav > ul.menu > li {
    width: 100% !important;
    border-bottom: 1px solid var(--awg-border, #242C3F) !important;
  }

  #primary-menu.main-nav > ul.menu > li:last-child {
    border-bottom: none !important;
  }

  #primary-menu.main-nav > ul.menu > li > a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    color: var(--awg-text, #F5F7FA) !important;
  }

  #primary-menu.main-nav > ul.menu > li > a:hover,
  #primary-menu.main-nav > ul.menu > li.current-menu-item > a {
    background: var(--awg-surface-2, #1B2233) !important;
    color: var(--awg-blue, #3B7BF8) !important;
  }

  #site-navigation .menu-toggle[aria-expanded="true"] svg {
    color: var(--awg-text, #F5F7FA) !important;
  }
}