/*
 * Desplegable de ancho completo para la navegación clásica de Kadence.
 *
 * Kadence mantiene el estado de hover/foco y la animación del desplegable.
 * Este archivo modifica únicamente la geometría del primer nivel para que
 * pueda ocupar todo el ancho visible de la pantalla.
 */

@media screen and (min-width: 1025px) {
	#masthead .header-navigation,
	#masthead .header-navigation .header-menu-container,
	#masthead .header-navigation .header-menu-container > ul {
		overflow: visible;
	}

	/* Permite que el encabezado sea el contenedor del panel de ancho completo. */
	#masthead .header-navigation .header-menu-container > ul > li.menu-item-has-children {
		position: static;
	}

	#masthead .header-navigation .header-menu-container > ul > li.menu-item-has-children > ul.sub-menu {
		left: 0;
		right: 0;
		width: 100vw;
		display: flex !important;
		flex-direction: column;
		max-width: none;
		padding-left: max(var(--global-edge-spacing, 1.5rem), calc((100vw - var(--global-content-width, 1290px)) / 2));
		padding-right: max(var(--global-edge-spacing, 1.5rem), calc((100vw - var(--global-content-width, 1290px)) / 2));
		box-sizing: border-box;
		z-index: 1000;
		background-color: #161616 !important;
		color: #ffffff;
	}

	/* La clase propia controla la visibilidad del panel sin depender del hover de Kadence. */
	#masthead .header-navigation .header-menu-container > ul > li.menu-item-has-children.encuero-menu-item-open > ul.sub-menu {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translate3d(0, 0, 0) !important;
		clip: auto !important;
		height: auto !important;
		overflow: visible !important;
	}

	#masthead .header-navigation .header-menu-container > ul > li.menu-item-has-children > ul.sub-menu > li {
		width: 100%;
		border-bottom: 0 !important;
	}

	/* El submenú abierto reemplaza el degradado transparente de Kadence. */
	#masthead.encuero-submenu-header-open,
	#masthead.encuero-submenu-header-open #main-header,
	#masthead.encuero-submenu-header-open .site-main-header-wrap,
	#masthead.encuero-submenu-header-open .site-main-header-wrap .site-header-row-container,
	#masthead.encuero-submenu-header-open .site-main-header-wrap .site-header-row-container-inner,
	#masthead.encuero-submenu-header-open .site-main-header-wrap .site-container {
		background-color: #161616 !important;
		background-image: none !important;
	}

	#masthead.encuero-submenu-header-open .header-navigation .header-menu-container > ul > li.menu-item-has-children > ul.sub-menu a {
		color: #ffffff !important;
		background-color: #161616 !important;
	}

	/*
	 * FiboSearch puede agregar body.dgwt-wcas-full-width cuando activa su modo
	 * de ancho completo. En este header la clase no siempre se agrega, por eso
	 * se modifica directamente el contenedor real de resultados:
	 * .dgwt-wcas-suggestions-wrapp.
	 */
	body.dgwt-wcas-full-width .dgwt-wcas-suggestions-wrapp,
	.dgwt-wcas-suggestions-wrapp {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border-radius: 0;
	}
}