/* ==========================================================================
   Velas Velia — Header: MEGA-MENÚ de la banda de navegación (camel)
   --------------------------------------------------------------------------
   Estilos del dropdown (escritorio) y del acordeón (móvil) del menú de
   categorías de WooCommerce. Convive con .vv-header__nav / .vv-header__menu
   definidos en parts/layout.css; aquí SOLO se añade lo específico del
   mega-menú. Consume EXCLUSIVAMENTE tokens de tokens.css y conserva la
   estética del header (banda camel, texto claro --text-on-brand, hover sutil).
   ========================================================================== */

/* --- Item de primer nivel ------------------------------------------------- */
.vv-megamenu .vv-megamenu__item {
	position: relative; /* Ancla del dropdown posicionado debajo. */
}

/* Enlace de categoría top: hereda tipografía del header, añade la flecha. */
.vv-megamenu__top-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.vv-megamenu__caret {
	display: inline-flex;
	transition: transform var(--dur) var(--ease-out);
}

/* --- Dropdown (escritorio) ------------------------------------------------ */
.vv-megamenu__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 220px;
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	/* Fondo claro sobre la banda camel, con sombra del sistema de diseño. */
	background: var(--white);
	border: var(--border-w) solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	/* Oculto por defecto; se revela con hover/focus de forma accesible. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 60; /* Por encima del header sticky (z-index:50). */
	transition: opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out),
		visibility var(--dur) var(--ease-out);
}

.vv-megamenu__sub-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vv-megamenu__sub-link {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	/* En el dropdown claro el texto es oscuro (no el claro de la banda camel). */
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	color: var(--ink-700) !important; /* Anula color del tema padre. */
	white-space: nowrap;
	transition: background var(--dur) var(--ease-out), color var(--dur);
}

.vv-megamenu__sub-link:hover,
.vv-megamenu__sub-link:focus-visible {
	background: var(--gold-100);
	color: var(--gold-900) !important;
}

/* Apertura por hover (escritorio) y por foco interno (teclado, accesible). */
@media (min-width: 861px) {
	.vv-megamenu__item--has-children:hover > .vv-megamenu__dropdown,
	.vv-megamenu__item--has-children:focus-within > .vv-megamenu__dropdown {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}

	/* Gira la flecha cuando el dropdown está abierto. */
	.vv-megamenu__item--has-children:hover > .vv-megamenu__top-link .vv-megamenu__caret,
	.vv-megamenu__item--has-children:focus-within > .vv-megamenu__top-link .vv-megamenu__caret {
		transform: rotate(180deg);
	}
}

/* --- Acordeón (móvil <= 860px) ------------------------------------------- */
@media (max-width: 860px) {
	/* Cada categoría con hijos se apila en bloque dentro del desplegable. */
	.vv-megamenu .vv-megamenu__item {
		position: static;
		border-bottom: var(--border-w) solid rgba(255, 255, 255, 0.14);
	}

	.vv-megamenu .vv-megamenu__item:last-child {
		border-bottom: 0;
	}

	/* El enlace top conserva el estilo claro de la banda camel. */
	.vv-megamenu .vv-megamenu__top-link {
		justify-content: center;
	}

	/* Subcategorías: COLAPSADAS por defecto; se despliegan en acordeón al
	   abrir su categoría (.is-open). Un solo grupo abierto a la vez (JS). */
	.vv-megamenu__dropdown {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		background: rgba(0, 0, 0, 0.06);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		/* Estado colapsado. */
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: max-height 0.34s var(--ease-out), opacity 0.22s var(--ease-out), visibility 0s linear 0.34s;
	}

	.vv-megamenu__item.is-open > .vv-megamenu__dropdown {
		max-height: 80vh;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		margin: 0 0 var(--space-2);
		transition: max-height 0.34s var(--ease-out), opacity 0.22s var(--ease-out);
	}

	.vv-megamenu__sub-link {
		text-align: center;
		padding-block: var(--space-2);
		border-radius: 0;
		/* Sobre la banda camel el subitem va con texto claro atenuado. */
		color: var(--text-on-brand) !important;
		opacity: 0.85;
	}

	/* "Ver todo en {categoría}": primer ítem, un poco destacado. */
	.vv-megamenu__sub-link--all {
		font-style: italic;
		opacity: 1;
	}

	.vv-megamenu__sub-link:hover,
	.vv-megamenu__sub-link:focus-visible {
		background: rgba(255, 255, 255, 0.10);
		color: #fff !important;
		opacity: 1;
	}

	/* La flecha indica el estado del acordeón y gira al abrir. */
	.vv-megamenu__caret {
		display: inline-flex;
		transition: transform 0.24s var(--ease-out);
	}

	.vv-megamenu__item.is-open > .vv-megamenu__top-link .vv-megamenu__caret {
		transform: rotate(180deg);
	}
}