/*
 * Reemplazo de dcMegaMenu.
 *
 * El plugin original (Design Chemical, 2012) ya no esta disponible ni se
 * distribuye. El walker del tema emite la misma estructura que el plugin
 * generaba por JavaScript, asi que menu.css sigue aplicando sin cambios y aca
 * solo se resuelve el mostrar y ocultar, ahora en CSS.
 */

#mega-menu-1 {
	margin: 0;
	padding: 0;
}

#mega-menu-1 > li {
	float: left;
	position: relative;
	list-style: none;
}

/* El panel arranca oculto y se despliega al pasar el mouse o al tabular. */
#mega-menu-1 li .sub-container {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 1000;
}

#mega-menu-1 > li:hover > .sub-container,
#mega-menu-1 > li:focus-within > .sub-container {
	display: block;
}

/* Margen de seguridad: sin esto, el panel se cierra al cruzar el hueco que
   deja el margin-top de .sub y el desplegable resulta imposible de usar. */
#mega-menu-1 li .sub-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
}

/* Ancho del panel.
   dcMegaMenu recibia rowItems:3 y calculaba el ancho por JavaScript. Sin el
   plugin, el panel se estiraba hasta el borde y dejaba un hueco a la derecha.
   menu.css da 250px a cada columna mas 10px de margen, asi que dos columnas
   entran en 520 y el contenido queda ajustado. */
#mega-menu-1 li .sub-container,
#mega-menu-1 li .sub-container.mega {
	width: 562px;
}

#mega-menu-1 li .sub-container .sub,
#mega-menu-1 li .sub-container.mega .sub {
	width: 530px;
	box-sizing: content-box;
}

/* Cada columna ocupa la mitad util del panel. */
#mega-menu-1 li .sub li.mega-hdr {
	width: 250px;
}

/* menu.css define .mega-hdr.last; con :last-child no hace falta marcarlo
   desde PHP. */
#mega-menu-1 li .sub li.mega-hdr:last-child {
	margin-right: 0;
}

/* Alternancia entre el menu de escritorio y el movil.
   estilo.css trae los estilos de slicknav pero no la regla que lo muestra u
   oculta, asi que el corte en 800px se define aca. */
.slicknav_menu {
	display: none;
}

@media (max-width: 800px) {
	#mega-menu-1 {
		display: none;
	}
	#mega-menu-1 li .sub-container {
		display: none !important;
	}
	.slicknav_menu {
		display: block;
	}
}