/* @group Site Nav
------------------------------------ */

:root {
	--heightSiteNav: 15rem;
}

.site-nav {
	position: fixed;
	z-index: var(--z-index-site-nav);
	top: 0;
	width: 100%;
	background: var(--background);
	

	/* General */
	--transitionDelay: .4s;
	/* Background */
	--background: var(--bodyBackground);
	/* Links Menú */
	--gapLinksMainMenu: 3.5rem;
	--gapLinksSecondaryMenu: 10rem;
	--gapLinksLateralMenu: 3rem;
	--colorLinks: var(--noir);
	color: var(--colorLinks);
	/* CTA */
	--buttonText: var(--noir);
	--buttonBackground: transparent;
	--buttonBorder: var(--noir); 
	--buttonTextHover: var(--brown);
	--buttonBackgroundHover: var(--cream);
	--buttonBorderHover: var(--brown); 
	--buttonHeight: 2.6rem;
	--buttonPadding: .8rem 1.2rem .3rem;
	/* Logo */
	--widthLogo: 14.6rem;
	transition:
        all var(--transitionDelay),
		background-color .4s ease,
		color .4s ease;
}
body:not(:has(.error404, .main-header)) .site-nav + .container {
	padding-top: var(--heightSiteNav);
}
.site-nav .row {
	height: var(--heightSiteNav);
}
.site-nav a {
	text-decoration: none;
	font: inherit;
	--transitionDelay: .3s;
	transition: color .25s ease;
}

.site-nav .logo {
	width: var(--widthLogo);
	height: auto;
	transition: width .3s ease;
}
.site-nav .logo img {
	object-fit: contain;
}

.site-nav .main-menu-col .button-menu {
	color: inherit;
	transition: color .25s ease; 
}
.site-nav .main-menu-col .button-menu p::before {
	content: attr(data-content-closed);
	text-transform: uppercase;
	--fs: 1.4rem;
	--ls: 0.1em;
	--lh: normal;
	pointer-events: none;
}
.site-nav .main-menu-col .main-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gapLinksMainMenu);
}
.site-nav .main-menu-col .main-menu li {
	text-transform: uppercase;
	--fs: 2rem;
	--lh: 1.25em;
}
.site-nav .main-menu-col .secondary-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gapLinksSecondaryMenu);
	margin-top: 8.5rem;
}
.site-nav .main-menu-col .secondary-menu li {
	text-transform: uppercase;
	--fs: 1.8rem;
	--lh: 1.25em;
}

.site-nav :is(.main-menu-col, .secondary-menu-col) ul li:not(.bp-button) {
	position: relative;
}
.site-nav :is(.main-menu-col, .secondary-menu-col) ul li:not(.bp-button)::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	height: 1px;
	width: 0;
	background-color: var(--scarlet);
	transition: all var(--transitionDelay);
}
.site-nav :is(.main-menu-col, .secondary-menu-col) ul li.current_page_item::before {
	width: 100%;
}

.site-nav .main-menu-col .menu-wrapper {
	position: fixed;
	top: var(--heightSiteNav);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-index-site-nav);
	background: var(--background);
	padding-inline: var(--_row-extra-pad);
	padding-block: 8.5rem;
	overflow-y: auto;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity .3s;
}
.site-nav .main-menu-col :is(.menu-main-menu-container, .menu-secondary-menu-container) {
    max-width: calc(var(--row-default) + var(--_row-extra-pad)) !important;
	margin: 0 auto;
}
body[data-menu="openedMenu"] .site-nav .main-menu-col .menu-wrapper {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
body[data-menu="openedMenu"] .site-nav .main-menu-col .button-menu p::before {
	content: attr(data-content-opened);
}


.site-nav .lateral-menu {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: var(--gapLinksLateralMenu);
}
.site-nav .lateral-menu li {
	text-transform: uppercase;
	--fs: 1.4rem;
	--lh: normal;
	--ls: 0.1em;
}
.site-nav .lateral-menu .bp-button {
	--lh: 1em;
	color: var(--buttonText);
	background: none var(--buttonBackground);
	border: 1px solid var(--buttonBorder);
	padding: var(--buttonPadding);
}

/* Light Version
------------------------------------ */
body:is(.has-noir-bg, .error404):not( .home) .site-nav,
body:is(.home):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav {
	--colorLinks: var(--blossom);
	--buttonBackground: rgba(18, 18, 18, 0.20);
	--buttonText: var(--blossom);
	--buttonBorder: var(--blossom); 
	--buttonTextHover: var(--brown);
	--buttonBackgroundHover: var(--cream);
	--buttonBorderHover: var(--brown); 
}
body:is(.has-noir-bg, .error404) .site-nav .light,
body:not(.has-noir-bg, .error404) .site-nav .dark {
	display: inline-block;
}
body:not(.has-noir-bg, .error404) .site-nav .light,
body:is(.has-noir-bg, .error404) .site-nav .dark {
	display: none;
}

body:is(.home):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav {
	background: transparent;
}
body:is(.home):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav .light,
body:is(.home):is(.pinedHeader, [data-menu="openedMenu"]) .site-nav .dark {
	display: inline-block;
}
body:is(.home):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav .dark, 
body:is(.home):is(.pinedHeader, [data-menu="openedMenu"]) .site-nav .light {
	display: none;
}

body.scrollhidden .site-nav {
    translate: 0 calc(var(--navHeight) * -1.3);
}

@media only screen 
and (min-width: 961px) {

	:root {
		--heightSiteNav: 16rem;
	}

	.site-nav {
		--gapLinksMainMenu: 3.38vh;
		--widthLogo: 16.6rem;
	}
	body:is(.pinedHeader) .site-nav {
		--widthLogo: 15.6rem;
		--heightSiteNav: 15rem;
		/* --buttonPadding: .5rem .9rem .1rem; */
	}

	body:is(.home:not(.pinedHeader)) .site-nav {
		--heightSiteNav: 19rem;
		--widthLogo: 20rem;
	}

	.site-nav .row {
		transition: height .3s ease;
		align-items: flex-start;
		padding-top: 4rem;
	}

	.site-nav .logo {
		top: -.5rem;
	}

	.site-nav .main-menu-col ul li:hover::before,
	.site-nav .secondary-menu-col ul li:not(.bp-button):hover::before {
		width: 100%;
	}
	.site-nav .main-menu-col .button-menu p::before {
		--fs: 1.6rem;
	}
	.site-nav .main-menu-col .main-menu li {
		--fs: 3.4vh;
	}
	.site-nav .main-menu-col .secondary-menu {
		margin-top: 7.25vh;
	}
	.site-nav .main-menu-col .secondary-menu li {
		--fs: 2.4vh;
	}
	.site-nav .main-menu-col .menu-wrapper {
		padding-block: 7vh 9vh;
	}

	.site-nav .secondary-menu-col .lateral-menu .bp-button {
		margin-left: .5rem;
	}
	.site-nav .secondary-menu-col .lateral-menu .bp-button:hover {
		color: var(--buttonTextHover);
		background: none var(--buttonBackgroundHover);
		border-color: var(--buttonBorderHover);
	}

	.site-nav :is(.lateral-menu .bp-button, .main-menu-col .button-menu p) {
		--fs: 1.4rem;
		--lh: 1em;
		--ls: 0.1em;
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 960px) {
	.site-nav > :is(.row, #important) {
		flex-direction: row;
	}
	.site-nav :is(.main-menu-col, .secondary-menu-col, #important) {
		max-width: 27.5%;
		padding-top: 4rem;
	}
	.site-nav :is(.logo-col, #important) {
		max-width: 45%;
		padding-top: 4rem;
	}
	.site-nav .logo {
		left: -.7rem;
	}
	.site-nav .secondary-menu-col .lateral-menu li:not(.bp-button) {
		display: none;
	}
	body:is(.home, .has-noir-bg) .site-nav :is(a, .button-menu, .button-menu p, #important) {
		transition: none;
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 450px) {
	.site-nav .logo {
		left: -1.75rem;
	}
}

/* @end */