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

.site-nav {
	position: fixed;
	z-index: var(--z-index-site-nav);
	top: 0;
	width: 100%;
	background: var(--background);
	padding-block: var(--paddingBlock);
	transition: all var(--transitionDelay);

	/* General */
	--paddingBlock: 2.5rem;
	--transitionDelay: .6s;
	/* Background */
	--background: rgba(173, 204, 223, 0.65);
	--backgroundBlur: blur(20px);
	/* Links Menú */
	--gapLinksMenu: 3.5rem;
	--colorLinks: var(--green);
	--colorLinksHover: var(--blue);
	--colorLinkActive: var(--green);
	/* Icon Menu */
	--colorIconMenu: var(--blue);
}
/* LOGO */
.site-nav .logo img {
	width: auto;
	height: 4rem;
}
.site-nav .logo img:is(.fixedMobile) {
	display: none;
	height: 7rem;
}
/* MAIN MENU */
.site-nav .main-menu {
	display: flex;
	flex-direction: column;
	gap: var(--gapLinksMenu);
}
.site-nav .main-menu li {
	color: var(--colorLinks);
	--transitionDelay: .25s;
}
.site-nav .main-menu li a {
	font-size: 2.5rem;
	font-family: var(--robotoFont);
	font-weight: 500;
	letter-spacing: .01em;
}
body:not(.home) .site-nav .main-menu li:is(.current_page_item) {
	color: var(--colorLinkActive);
}
/* Menu Mobile */
.site-nav .button-menu i {
	color: var(--colorIconMenu);
	font-size: 2rem;
}
body[data-menu="openLightbox"] { overflow: hidden; }
@media only screen 
and (min-width: 961px) {
	.site-nav {
		--paddingBlock: 3rem;
		--background: transparent;
		pointer-events: none;
	}
	.site-nav :is(.logo img, .main-menu) {
		pointer-events: all;
	}
	/* LOGO */
	.site-nav .logo img {
		height: 2.5rem;
	}
	/* MENU */
	.site-nav .menu-col {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.site-nav .main-menu {
		border-radius: 1rem;
		position: relative;
		border-radius: 10px;
		background: rgba(173, 204, 223, 0.65);
		backdrop-filter: var(--backgroundBlur);
		-webkit-backdrop-filter: var(--backgroundBlur);
		padding-inline: 1.5rem;
		flex-direction: row;
	}
	.site-nav .main-menu li:hover {
		color: var(--colorLinksHover);
	}
	.site-nav .main-menu li a {
		padding-block: 1.5rem;
		font-size: 1.6rem;
	}
	.site-nav .main-menu li.current-page-item a:hover {
		color: var(--colorLinksHover);
	}
	/* Sticky Version on Home 
	------------------------------------ */ 
	body:has(.page-banner:not(.small)):not(.pinedHeader) .site-nav {
		--backgroundBlur: blur(0px);
		--colorLinks: var(--white);
		--colorLinksHover: var(--white);
	}
	body:has(.page-banner:not(.small)):not(.pinedHeader) .site-nav .main-menu {
		background: transparent;
	}
	body:has(.page-banner:not(.small)):not(.pinedHeader) .site-nav .logo img {
		opacity: 0;
		pointer-events: none;
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 960px) {
	.site-nav {
		transition: all .5s;
	}
	.site-nav .logo-col {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
    .site-nav::before {
        content: '';
        position: absolute;
        inset: 0;
		height: 100%;
        background: var(--background);
		backdrop-filter: var(--backgroundBlur);
        -webkit-backdrop-filter:var(--backgroundBlur);
        pointer-events: none;
		transition: background .5s;
    }
	body[data-menu="openedMenu"] .site-nav::before {
		--background: rgba(255, 255, 255, 0.65);
		height: 100vh;
	}
	.site-nav .logo-col {
		z-index: 2;
	}
	.site-nav .menu-col {
		position: absolute;
        top: 0;
		left: 0;
		right: 0;
        height: 100svh;
		padding-inline: var(--row-mobile-padding)!important;
		padding-block: 7rem;
        overflow-y: auto;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
		z-index: 1;
	}
	.site-nav .menu-main-menu-container {
		padding-top: 16vh;
	}
	body[data-menu="openedMenu"] .site-nav .menu-col {
		opacity: 1;
        visibility: visible;
        pointer-events: all;
	}
	body[data-menu="openedMenu"] .site-nav::before {
		opacity: 1;
	}
	body[data-menu="openedMenu"] .site-nav .logo img:is(.fixedMobile) {
		display: inline-block;
	}
	body[data-menu="openedMenu"] .site-nav .logo img:not(.fixedMobile) {
		display: none;
	}
	body[data-menu="openedMenu"] .site-nav .icon-menu:before {
		content: "\e906";
		font-size: 2.7rem;
	}

	/* Sticky Version on Home 
	------------------------------------ */ 
	body:has(.page-banner:not(.small)):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav {
		--background: transparent;
		--backgroundBlur: blur(0px);
		--colorIconMenu: var(--gray);
	}
	body:has(.page-banner:not(.small)):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav .logo img {
		opacity: 0;
		pointer-events: none;
	}
}

/* @end */