/*
 * Liquid Glass — Header / navegación
 *
 * CORREGIDO: el sitio NO usa el header nativo de Astra (#masthead,
 * .ast-mobile-header-wrap, etc.) — usa el Header/Footer Builder de
 * ElementsKit vía Elementor. Selectores reales confirmados en producción:
 *   - nav.hfe-nav-menu__layout-horizontal → barra de navegación horizontal
 *   - ul.hfe-nav-menu                     → lista de items del menú
 *   - .hfe-nav-menu__toggle               → botón de menú móvil (hamburguesa)
 *   - .hfe-nav-menu-icon                  → ícono dentro del botón de toggle
 *   - #hfe-site-header-cart / .hfe-site-header-cart → carrito en el header
 *
 * No se copia ninguna plantilla PHP ni se toca Elementor/ElementsKit: solo
 * CSS sobre las clases que esos widgets ya imprimen.
 *
 * Submenús desplegables: ".sub-menu" es la clase que WordPress genera
 * automáticamente en CUALQUIER menú (wp_nav_menu) para los items anidados,
 * así que es seguro apuntarle sin depender de una clase específica de
 * ElementsKit — se estiliza más abajo.
 *
 * CORRECCIÓN DE BUG (toda la página se veía borrosa en el sitio en vivo):
 *   1. Se quitó "backdrop-filter" de la lista de "transition" de la barra.
 *      Animar backdrop-filter es una propiedad experimental con bugs de
 *      renderizado documentados en varios navegadores (puede desenfocar
 *      TODA la pestaña, no solo el elemento) — el efecto de scroll ahora
 *      solo anima fondo/sombra (propiedades seguras de animar), y el radio
 *      de blur queda FIJO desde la carga, sin cambiar nunca.
 *   2. Se quitó "backdrop-filter" de elementos ANIDADOS dentro de la barra
 *      (toggle, carrito, submenú, panel móvil) — blur dentro de blur ya
 *      desenfocado es otro patrón conocido de artefactos visuales. Esos
 *      elementos ahora usan un fondo sólido translúcido sin blur propio,
 *      ya que están sobre la barra que sí tiene blur.
 *
 * Breakpoints: ver assets/css/liquid-glass.css (móvil ≤544px, tablet ≤976px).
 */

/* --- Barra de navegación horizontal (desktop): ÚNICO elemento con blur --- */
nav.hfe-nav-menu__layout-horizontal {
	background: var(--glass-bg-fallback);
	border-bottom: 1px solid var(--glass-border);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	nav.hfe-nav-menu__layout-horizontal {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

/* --- Estado "scrolleado" (clase añadida por liquid-glass.js): solo fondo/sombra, sin tocar el blur --- */
nav.hfe-nav-menu__layout-horizontal.is-scrolled {
	box-shadow: var(--glass-shadow);
	background: var(--glass-highlight);
}

/* --- Botón de menú móvil (hamburguesa) como pastilla — sin blur propio (ya está sobre la barra con blur) --- */
.hfe-nav-menu__toggle {
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.55);
}

.hfe-nav-menu__toggle .hfe-nav-menu-icon {
	color: inherit;
}

/* --- Carrito del header como pastilla — sin blur propio --- */
#hfe-site-header-cart,
.hfe-site-header-cart {
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: rgba(255, 255, 255, 0.55);
}

/* --- Items del menú: color de marca en hover/activo --- */
ul.hfe-nav-menu > li > a:hover,
ul.hfe-nav-menu > li.current-menu-item > a {
	color: var(--brand-blue-deep, #004d93);
}

/* --- Submenús desplegables (".sub-menu": clase estándar de wp_nav_menu) — sin blur propio --- */
ul.hfe-nav-menu .sub-menu {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: calc(var(--glass-radius) - 8px);
	box-shadow: var(--glass-shadow);
	padding: 6px;
}

ul.hfe-nav-menu .sub-menu li a {
	border-radius: calc(var(--glass-radius) - 14px);
}

ul.hfe-nav-menu .sub-menu li a:hover {
	background: rgba(82, 113, 255, 0.1);
	color: var(--brand-blue-deep, #004d93);
}

/*
 * --- Móvil: el menú (ul.hfe-nav-menu) pasa a comportarse como panel
 * desplegable — sin blur propio (evita blur anidado dentro de la barra).
 */
@media (max-width: 544px) {
	ul.hfe-nav-menu {
		background: var(--glass-bg-fallback);
		border: 1px solid var(--glass-border);
		border-radius: 0 0 var(--glass-radius) var(--glass-radius);
		box-shadow: var(--glass-shadow);
	}
}