/* =========================================================

   NAVEGACIÓN BASE

========================================================= */



.wp-block-navigation.jg-menu-principal {

	--jg-nav-padding-nivel-1-desktop: 12px 18px;

	--jg-nav-padding-nivel-1-desktop-con-flecha: 0;

	--jg-nav-padding-nivel-1-movil: 14px 16px;

	--jg-nav-padding-submenu-desktop: 10px 16px;

	--jg-nav-padding-submenu-movil: 12px 16px;

	--jg-nav-padding-overlay-movil: 24px;



	--jg-nav-fondo-item: transparent;

	--jg-nav-fondo-item-con-flecha-desktop: transparent;

	--jg-nav-fondo-item-con-flecha-movil: transparent;

	--jg-nav-fondo-hover: transparent;

	--jg-nav-fondo-activo: transparent;



	--jg-nav-fondo-submenu-item: transparent;

	--jg-nav-fondo-submenu-hover: transparent;

	--jg-nav-fondo-submenu-activo: transparent;



	--jg-nav-radio-item: 0;

	--jg-nav-radio-submenu-item: 0;



	--jg-nav-borde-item: 0;

	--jg-nav-color-borde-item: currentColor;

}



/* Base común de enlaces */

.wp-block-navigation.jg-menu-principal .wp-block-navigation-item__content {

	display: block;

	width: 100%;

	box-sizing: border-box;

	background-color: var(--jg-nav-fondo-item);

	border-radius: var(--jg-nav-radio-item);

	transition:

		color var(--jg-transicion-rapida),

		background-color var(--jg-transicion-media);

}



/* Nivel 1 desktop */

.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {

	padding: var(--jg-nav-padding-nivel-1-desktop);

	border-bottom: var(--jg-nav-borde-item) solid var(--jg-nav-color-borde-item);

}



.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {

	padding-right: var(--jg-nav-padding-nivel-1-desktop-con-flecha, 8px);

}



/* Submenú desktop */

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {

	padding: var(--jg-nav-padding-submenu-desktop);

	background-color: var(--jg-nav-fondo-submenu-item);

	border-radius: var(--jg-nav-radio-submenu-item);

}



/* Hover / focus */

.wp-block-navigation.jg-menu-principal .wp-block-navigation-item__content:hover,

.wp-block-navigation.jg-menu-principal .wp-block-navigation-item__content:focus-visible {

	background-color: var(--jg-nav-fondo-hover);

	border-radius: var(--jg-nav-radio-item);

}



/* Activo */

.wp-block-navigation.jg-menu-principal .current-menu-item > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .current-menu-ancestor > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .current_page_item > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .current_page_ancestor > .wp-block-navigation-item__content {

	font-weight: 600;

	background-color: var(--jg-nav-fondo-activo);

	border-radius: var(--jg-nav-radio-item);

}



/* Hover / activo del submenú */

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {

	background-color: var(--jg-nav-fondo-submenu-hover);

	border-radius: var(--jg-nav-radio-submenu-item);

}



.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .current_page_item > .wp-block-navigation-item__content,

.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-container .current_page_ancestor > .wp-block-navigation-item__content {

	background-color: var(--jg-nav-fondo-submenu-activo);

	border-radius: var(--jg-nav-radio-submenu-item);

}



/* =========================================================

   NAVEGACIÓN DESKTOP

========================================================= */



@media (min-width: 782px) {



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__submenu-icon {

		width: auto;

	}



	/* Fondo común del item con flecha */

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child {

		position: relative;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child::before {

		content: "";

		position: absolute;

		inset: 0;

		z-index: 0;

		pointer-events: none;

		background-color: var(--jg-nav-fondo-item-con-flecha-desktop);

		border-radius: var(--jg-nav-radio-item);

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {

		position: relative;

		z-index: 1;

		background: transparent !important;

		border-radius: 0;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {

		margin: 0;

		padding: 0 10px;

		border: 0;

		box-shadow: none;

		color: inherit;

		background-image: none;

	}



	/* Hover / activo del item con flecha */

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover::before,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within::before {

		background-color: var(--jg-nav-fondo-hover);

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child.current-menu-item::before,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child.current-menu-ancestor::before,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child.current_page_item::before,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__container > .wp-block-navigation-item.has-child.current_page_ancestor::before {

		background-color: var(--jg-nav-fondo-activo);

	}

}



/* =========================================================

   NAVEGACIÓN MÓVIL OVERLAY

========================================================= */



@media (max-width: 781px) {



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-open:not(.always-shown) {

		display: flex;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container:not(.is-menu-open) {

		display: none;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open {

		display: flex;

	}



	.wp-block-navigation.jg-menu-principal {

		--jg-nav-borde-item: 1px;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-close {

		display: flex;

		align-items: center;

		justify-content: center;

		min-width: 44px;

		min-height: 44px;

		padding: 0;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content {

		width: 100%;

		padding: var(--jg-nav-padding-overlay-movil);

		box-sizing: border-box;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {

		display: flex;

		flex-direction: column;

		width: 100%;

		max-width: none;

		gap: 0 !important;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container .wp-block-navigation-item,

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {

		width: 100%;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {

		position: relative;

		box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 18%, transparent);

	}



	/* Item padre con submenú */

	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child {

		display: grid;

		grid-template-columns: minmax(0, 1fr) 44px;

		grid-template-rows: auto auto;

		align-items: stretch;

		column-gap: 0;

		row-gap: 0;

		position: relative;

		width: 100%;

		border-radius: var(--jg-nav-radio-item);

		overflow: hidden;

		isolation: isolate;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child::before {

		content: "";

		grid-column: 1 / -1;

		grid-row: 1;

		z-index: 0;

		pointer-events: none;

		background-color: var(--jg-nav-fondo-item-con-flecha-movil);

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {

		display: flex;

		align-items: center;

		grid-column: 1;

		grid-row: 1;

		min-width: 0;

		width: 100%;

		min-height: 44px;

		position: relative;

		z-index: 1;

		background: transparent !important;

		border-radius: 0;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {

		display: flex;

		align-items: center;

		justify-content: center;

		grid-column: 2;

		grid-row: 1;

		justify-self: stretch;

		align-self: stretch;

		width: 44px;

		min-height: 44px;

		padding: 0;

		position: relative;

		z-index: 1;

		background: transparent;

		border-radius: 0;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle::before {

		content: "";

		position: absolute;

		inset: -10px;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {

		grid-column: 1 / -1;

		grid-row: 2;

		width: 100%;

		max-height: 0;

		opacity: 0;

		overflow: hidden;

		padding: 0;

		margin: 0;

		transition:

			max-height 0.32s ease,

			opacity var(--jg-transicion-rapida);

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {

		max-height: 500px;

		opacity: 1;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle svg {

		transition: transform 0.22s ease;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {

		transform: rotate(180deg);

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {

		padding: var(--jg-nav-padding-nivel-1-movil);

		border-bottom: 0;

	}



	.wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {

		padding: var(--jg-nav-padding-submenu-movil);

		opacity: 0.85;

		background-color: var(--jg-nav-fondo-submenu-item);

		border-radius: var(--jg-nav-radio-submenu-item);

	}

}