/* ==========================================================================
   LPS Mega Menu – Estilos para Divi child theme
   Colocar en la raíz del child theme junto a lps-mega-menu.php
   ========================================================================== */


/* ------------------------------------------------------------------
   DESKTOP (≥ 981px — breakpoint de Divi)
   ------------------------------------------------------------------ */
@media (min-width: 981px) {

	/* El contenedor del header se vuelve la referencia de posición */
	#main-header .et_menu_container {
		position: relative;
	}

	/* El <li> mega pierde posición propia para que el panel
	   se ancle al contenedor completo */
	#top-menu li.lps-has-mega {
		position: static !important;
	}

	/* ---- El panel desplegable ---- */
	#top-menu li.lps-has-mega > ul.sub-menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		z-index: 9999;

		/* Visual */
		background: #ffffff;
		border-top: 3px solid #d1001f;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);

		/* Layout: 2 columnas como Novanta */
		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		padding: 28px 32px;

		/* Divi overrides */
		float: none !important;
		border: none;
	}

	/* Quitar pseudo-elementos de Divi */
	#top-menu li.lps-has-mega > ul.sub-menu::before,
	#top-menu li.lps-has-mega > ul.sub-menu::after {
		display: none !important;
	}

	/* Resetear estilos de Divi en cada <li> hijo */
	#top-menu li.lps-has-mega > ul.sub-menu > li {
		margin: 0;
		padding: 0;
		width: auto !important;
		float: none !important;
		background: none;
		border: none;
	}
	#top-menu li.lps-has-mega > ul.sub-menu > li::before {
		display: none !important;
	}

	/* ---- La tarjeta (enlace) ---- */
	#top-menu li.lps-has-mega .lps-mega-card {
		position: relative;
		display: block;
		height: 200px;
		padding: 0 !important;
		text-decoration: none;
		border-radius: 12px;
		overflow: hidden;
		background: #111;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		width: 100%;
	}
	#top-menu li.lps-has-mega .lps-mega-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	}

	/* ---- Imagen de fondo: ocupa toda la tarjeta ---- */
	#top-menu li.lps-has-mega .lps-mega-thumb {
		position: absolute;
		inset: 0;
		display: block;
		overflow: hidden;
		border-radius: 12px;
	}
	#top-menu li.lps-has-mega .lps-mega-thumb img,
	#top-menu li.lps-has-mega .lps-mega-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.45s ease;
		opacity: 0.85;
	}
	#top-menu li.lps-has-mega .lps-mega-card:hover .lps-mega-img {
		transform: scale(1.07);
		opacity: 0.75;
	}

	/* ---- Overlay degradado oscuro en la parte inferior ---- */
	#top-menu li.lps-has-mega .lps-mega-card::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 12px;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.05) 0%,
			rgba(0, 0, 0, 0.55) 60%,
			rgba(0, 0, 0, 0.80) 100%
		);
		pointer-events: none;
	}

	/* ---- Texto superpuesto — abajo a la izquierda ---- */
	#top-menu li.lps-has-mega .lps-mega-body {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 20px 22px 22px;
	}
	#top-menu li.lps-has-mega .lps-mega-title {
		display: block;
		font-weight: 700;
		font-size: 20px;
		line-height: 1.2;
		color: #ffffff;
		text-shadow: 0 1px 4px rgba(0,0,0,0.4);
	}
	#top-menu li.lps-has-mega .lps-mega-desc {
		display: block;
		font-weight: 400;
		font-size: 13px;
		line-height: 1.45;
		color: rgba(255, 255, 255, 0.85);
	}

	/* ---- Variante sin imagen ---- */
	#top-menu li.lps-has-mega .lps-mega-card:not(:has(.lps-mega-thumb)) {
		background: #1a1a1a;
		height: 200px;
	}
	#top-menu li.lps-has-mega .lps-mega-card:not(:has(.lps-mega-thumb)) .lps-mega-body {
		justify-content: flex-end;
	}

	/* ---- Transición de apertura ---- */
	#top-menu li.lps-has-mega > ul.sub-menu {
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
}


/* ------------------------------------------------------------------
   Si el menú tiene muchos ítems, podés pasar a 3 columnas:

   #top-menu li.lps-has-mega > ul.sub-menu {
       grid-template-columns: repeat(3, 1fr);
   }
   ------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   MOBILE (≤ 980px)
   ------------------------------------------------------------------ */
@media (max-width: 980px) {

	.et_mobile_menu .lps-mega-thumb,
	.et_mobile_menu .lps-mega-desc {
		display: none !important;
	}
	.et_mobile_menu .lps-mega-card {
		display: block !important;
		padding: 0 !important;
		height: auto !important;
		background: none !important;
	}
	.et_mobile_menu .lps-mega-card::after {
		display: none !important;
	}
	.et_mobile_menu .lps-mega-body {
		position: static !important;
		padding: 0 !important;
	}
	.et_mobile_menu .lps-mega-title {
		font-weight: 400;
		color: inherit !important;
		font-size: 14px !important;
		text-shadow: none !important;
	}
}