/* ============================================================
 * Auris Reader - Mobile Menu
 *
 * Extraido de components.css en theme v1.0.11 para mantener
 * components.css por debajo del limite de 600 LOC del proyecto.
 *
 * Cubre: toggle hamburguesa (boton + animacion icono open/close)
 * + dropdown desplegable del menu mobile. Tambien gestiona el
 * mostrar/ocultar del menu desktop vs mobile segun viewport.
 *
 * Defensas frente al parent hello-elementor v3.4.9
 * --------------------------------------------------
 * hello-elementor/header-footer.css define con alta especificidad:
 *   .site-navigation-dropdown ul.menu      -> background:#fff + position:absolute
 *   .site-navigation-dropdown ul.menu li a -> background:#fff + color:#55595c
 * Esos selectores ganan en cascada cuando el child no los pisa,
 * dando al menu un look "WordPress 2010" totalmente fuera de la
 * paleta brand (fondo blanco + links grises subrayados). Los
 * bloques "Defensa parent" mas abajo los neutralizan forzando
 * bg transparente, tipografia/color brand y text-decoration:none.
 * ============================================================ */

/* ------------------------------------------------------------
 * Visibilidad menu desktop vs mobile segun viewport
 * Breakpoint: 768px (mobile <=, desktop >=).
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
  .site-header .site-navigation {
    display: none;
  }
}

@media (min-width: 769px) {
  .site-header .site-navigation-toggle-holder,
  .site-header .site-navigation-dropdown {
    display: none !important;
  }
}

/* ------------------------------------------------------------
 * Boton hamburguesa (estado cerrado por defecto)
 * ------------------------------------------------------------ */
.site-header .site-navigation-toggle {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.site-header .site-navigation-toggle:hover {
  background: var(--bg-secondary);
}

.site-header .site-navigation-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-header .site-navigation-toggle-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.site-header .site-navigation-toggle-icon::before,
.site-header .site-navigation-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.site-header .site-navigation-toggle-icon::before { top: -7px; }
.site-header .site-navigation-toggle-icon::after  { top:  7px; }

/* ------------------------------------------------------------
 * Animacion del icono: hamburguesa -> X cuando aria-expanded=true
 *
 * hello-elementor JS togglea aria-expanded="true|false" en el
 * <button> al abrir/cerrar el dropdown. Usamos ese atributo como
 * hook CSS-only para animar las tres barras: la del medio se
 * vuelve transparente (fade out), las dos exteriores caen al
 * centro y rotan a +/-45 grados formando la X.
 * ------------------------------------------------------------ */
.site-header .site-navigation-toggle-icon,
.site-header .site-navigation-toggle-icon::before,
.site-header .site-navigation-toggle-icon::after {
  transition: top var(--transition-fast),
              transform var(--transition-fast),
              background var(--transition-fast);
}

.site-header .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon {
  background: transparent;
}

.site-header .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header .site-navigation-toggle[aria-expanded="true"] .site-navigation-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
 * Dropdown del menu mobile
 *
 * Defensa parent: hello-elementor 3.4.9 pone `bottom: 0` en
 * .site-navigation-dropdown ademas de position:absolute. Si no
 * lo pisamos, la combinacion top:100% + bottom:0 hace que el
 * navegador calcule la altura como (parent_h - 100% - 0) ≈ 0,
 * dejando el dropdown colapsado al padding y los items se salen
 * hacia abajo sin el fondo oscuro detras. Forzamos `bottom:auto`
 * para que la altura sea la natural del contenido.
 * ------------------------------------------------------------ */
.site-header .site-navigation-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-6);
}

/* Defensa parent: hello-elementor 3.4.9 pone position:absolute +
 * background:#fff al ul.menu interno. Volvemos a flow normal +
 * transparente para que herede el bg oscuro del dropdown. */
.site-header .site-navigation-dropdown .menu {
  position: static;
  background: transparent;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

/* Defensa parent: hello-elementor 3.4.9 pone bg:#fff + color:#55595c
 * al <a>. Tambien hereda text-decoration:underline del UA. Forzamos
 * los tres a la paleta brand (texto blanco sobre fondo oscuro,
 * sin subrayado, hover amarillo brand). */
.site-header .site-navigation-dropdown .menu-item a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.site-header .site-navigation-dropdown .menu-item a:hover,
.site-header .site-navigation-dropdown .menu-item.current-menu-item > a,
.site-header .site-navigation-dropdown .menu-item.current-menu-parent > a,
.site-header .site-navigation-dropdown .menu-item.current-menu-ancestor > a {
  color: var(--accent);
}

.site-header .site-navigation-dropdown .menu-item a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.site-header .site-navigation-dropdown .menu-item:last-child a {
  border-bottom: none;
}