/* ==========================================================================
   EVOX — Mega Menú (comportamiento)
   Solo lo funcional: mostrar/ocultar paneles y el estado activo del rail.
   El diseño (tipografías, espaciados, cards, slider) se controla en Bricks.
   ========================================================================== */

/* Paneles: solo el activo es visible */
[data-evox-mega] [data-evox-menu-panel] {
	display: none;
}
[data-evox-mega] [data-evox-menu-panel].is-active {
	display: block;
	width: 100%;
	min-width: 0; /* permite que el slider interno se encoja sin desbordar */
}

/* Item del rail: interactivo + acento de marca al estar activo */
[data-evox-mega] [data-evox-menu-cat] {
	cursor: pointer;
	transition: color 0.2s ease;
}
[data-evox-mega] [data-evox-menu-cat].is-active,
[data-evox-mega] [data-evox-menu-cat].is-active a,
[data-evox-mega] [data-evox-menu-cat].is-active .brxe-text-basic {
	color: var(--evox-verde);
}

/* ==========================================================================
   DISEÑO POR DEFECTO
   La banda del dropdown va de borde a borde (bajo el header), pero el
   CONTENIDO se centra con ancho máximo. Rail 30% / paneles 70%.
   Todo es sobreescribible desde Bricks si se quiere ajustar algo puntual.
   ========================================================================== */

/* La "banda" del dropdown: fondo blanco + sombra + línea superior */
.brx-dropdown-content:has([data-evox-mega]) {
	background: #fff;
	border-top: 1px solid var(--evox-borde);
	box-shadow: 0 24px 48px rgba(0, 43, 112, 0.10);
	padding: 0;
}

/* Contenido centrado al ancho maestro del sitio (1440px), banda al 100%.
   Los !important garantizan el centrado aunque el Div tenga un width/max-width
   propio puesto en Bricks (sus estilos por elemento ganan en especificidad). */
[data-evox-mega] {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	width: 100% !important;
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 36px 32px 44px;
}

/* Rail (primer hijo) 30% — paneles (último hijo) el resto */
[data-evox-mega] > *:first-child {
	flex: 0 0 20%;
	max-width: 20%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
[data-evox-mega] > *:last-child {
	flex: 1 1 auto;
	min-width: 0; /* imprescindible: deja que el slider se encoja sin desbordar */
}

/* Items del rail: tipografía cómoda y aire entre líneas */
[data-evox-mega] [data-evox-menu-cat],
[data-evox-mega] [data-evox-menu-cat] a {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--evox-cuerpo);
	text-decoration: none;
	line-height: 1.4;
}
[data-evox-mega] [data-evox-menu-cat] {
	padding: 7px 0;
}

/* -------- Cards de subcategoría: compactas, con padding y proporción fija */
[data-evox-menu-panel] .splide__slide {
	padding: 14px 14px 16px;
	border: 1px solid var(--evox-fondo-2);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	/* Todas las cards con la MISMA altura aunque el texto varíe: se estiran
	   a la altura del más alto del carrusel y su contenido fluye en columna. */
	height: auto;
	display: flex;
	flex-direction: column;
}
[data-evox-menu-panel] .splide__list {
	align-items: stretch;
}
[data-evox-menu-panel] .splide__slide:hover {
	border-color: var(--evox-borde-fuerte);
	box-shadow: 0 8px 20px rgba(0, 43, 112, 0.06);
}
[data-evox-menu-panel] .splide__slide img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--evox-fondo);
	border-radius: 10px;
	display: block;
	margin-bottom: 10px;
}

/* Descripción bajo el título (único texto de largo variable en esta card):
   recortada a 2 líneas con "…" para que no estire su card frente a las demás. */
[data-evox-menu-panel] .splide__slide p {
	margin: 4px 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

/* En móvil el mega menú no aplica (se usa el menú offcanvas del sitio):
   los paneles se apilan visibles por si el dropdown llegara a renderizarse. */
@media (max-width: 991px) {
	[data-evox-mega] [data-evox-menu-panel] {
		display: block;
	}
	[data-evox-mega] {
		flex-direction: column;
		gap: 24px;
		padding: 20px;
	}
	[data-evox-mega] > *:first-child {
		flex-basis: auto;
		max-width: 100%;
	}
}

/* ==========================================================================
   SUBMENÚ DE CATEGORÍAS — [evox_subcategories]
   Usado en el menú móvil (dentro de cada ítem de acordeón). Estilos mínimos:
   el resto se controla desde Bricks en el contenedor del shortcode.
   ========================================================================== */
.evox-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.evox-submenu__item a {
	display: block;
	padding: 9px 0;
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--evox-cuerpo);
	text-decoration: none;
	transition: color 0.2s ease;
}
.evox-submenu__item a:hover,
.evox-submenu__item a:focus-visible {
	color: var(--evox-verde);
}
/* "Ver todo …" — primer enlace, en el azul de marca */
.evox-submenu__item--all a {
	font-weight: 700;
	color: var(--evox-azul);
}