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

:root {
	--heightSiteNav: 8.5rem;
}

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-index-site-nav);
	--color: var(--fresh-lawn);
	--bgColor: transparent;
	color: var(--color);
	background: var(--bgColor);
	transition: all var(--anim-delay);
	transform: translateY(var(--heightPromotional));
}

.siteNavOpened.showPromobar .site-nav {
	transform: translateY(0px);
}

.site-nav .row {
	height: var(--heightSiteNav);
	align-items: center;
	justify-content: space-between;
}

.site-nav li:not([class*="has-heading-"]) {
	font: unset;
	color: inherit;
}

.site-nav a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s;
}

/* Color Background */
body.linen.pinedHeader .site-nav {
	--bgColor: rgba(247, 238, 229, 1);
	backdrop-filter: blur(20px);
}

body.mist.pinedHeader .site-nav {
	--bgColor: rgba(211, 222, 208, 1);
	backdrop-filter: blur(20px);
}

body.sunrise-bliss.pinedHeader .site-nav {
	--bgColor: rgba(227, 199, 191, 1);
	backdrop-filter: blur(20px);
}

.site-nav .logo-col {
	z-index: var(--z-index-lowest);
}

.site-nav .logo-col .logo {
	width: 18rem;
	height: auto;
}

.site-nav .logo-col .logo.white {
	display: none;
}

.site-nav .menu-col {
	position: static;
}

.site-nav .menu-col .fixed-menu {
	color: var(--fresh-lawn);
	position: absolute;
	transform: translate3d(100%, 0px, 0px);
	opacity: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow-y: auto;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	background-image: url("../../img/global/nav/background-mobile.png");
	padding: 16vh 0 24.8vh;
	padding: 16svh 0 24.8svh;
	transition: all var(--anim-delay);
}

.site-nav .menu-col .fixed-menu .main-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.site-nav .menu-col .fixed-menu .main-menu li:not(:last-of-type) {
	margin: 0 0 4.57vh;
	margin: 0 0 4.57svh;
}

.site-nav .main-menu a {
	--_offset: 1.5rem;
	position: relative;
	padding-bottom: var(--_offset);
}

.site-nav .main-menu a::after {
	content: "";
	left: 0;
	bottom: 0;
	right: 100%;
	position: absolute;
	background: url("../../img/global/nav/nav-wave.svg");
	height: 1rem;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	overflow: hidden;
	transition: 0.5s;
}

.site-nav .main-menu a:hover::after {
	inset-inline: -0.5rem;
}

.site-nav .menu-col .toggle-wrapper [data-comp="toggleFixedMenu"] {
	position: relative;
	z-index: var(--z-index-lowest);
}

.site-nav .menu-col .toggle-wrapper .icon-menu {
	pointer-events: none;
	transition: color 0.3s;
}

.site-nav:not(.opend) .menu-col .toggle-wrapper .icon-menu {
	color: var(--color);
}

.site-nav.opened .menu-col .fixed-menu {
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
}

.site-nav.opened .menu-col .toggle-wrapper .icon-menu {
	font-size: 3.5rem;
}

.site-nav.opened .menu-col .toggle-wrapper .icon-menu:before {
	content: "\e904";
}

@media only screen and (min-width: 961px) {
    :root {
        --heightSiteNav: 7.5rem;
    }

	.site-nav {
		width: 100vw;
	}

	.site-nav .logo-col .logo {
		width: 20rem;
	}

	.site-nav .menu-col {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.site-nav .menu-col .fixed-menu {
		padding: 14.4vh 0 5vh;
		padding: 14.4svh 0 5vh;
		background-image: url("../../img/global/nav/background.jpg");
	}

	.site-nav .menu-col .secondary-menu {
		position: relative;
		z-index: var(--z-index-lowest);
		color: var(--color);
	}

	.site-nav .menu-col .secondary-menu li {
		font-weight: 700;
		font-size: 2rem;
		line-height: 1em;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		display: inline-block;
		margin: 0 1.5rem;
	}

	.site-nav .menu-col .toggle-wrapper {
		margin-left: 1.5rem;
		margin-top: 0.5rem;
		width: 5rem;
	}

	.site-nav:not(.opened) .menu-col .toggle-wrapper .icon-menu {
		font-size: 1.8rem;
	}
}

@media only screen and (min-width: 0) and (max-width: 960px) {
	.site-nav .row {
		flex-direction: row;
	}

	.site-nav :is(.logo-col, .menu-col) {
		flex: 0 1 50%;
		max-width: 50%;
	}

	.site-nav .menu-col .toggle-wrapper {
		text-align: right;
	}

	.fixed-menu .secondary-menu {
		display: flex;
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		top: auto;
		z-index: var(--z-index-site-nav);
		transition: all var(--anim-delay);
	}

	.fixed-menu .secondary-menu li {
		flex: 0 1 50%;
		width: 50%;
	}

	.fixed-menu .secondary-menu li a {
		width: 100%;
		height: 5.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 2rem;
		line-height: 1.35em;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--sprout);
		border: 1px solid var(--fresh-lawn);
		background: rgba(247, 238, 229, 0.7);
		backdrop-filter: blur(10px);
	}
}

/* @end */

/* @group Promo Bar
------------------------------------ */
.promo-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--midnight-musings);
	color: var(--linen);
	z-index: var(--z-index-site-nav);
	/* STATE */
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.7s;
}

.showPromobar .promo-bar {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.siteNavOpened.showPromobar .promo-bar {
	transform: translateY(-100%);
}

.promo-bar .row {
	position: relative;
	justify-content: center;
	align-items: center;
	padding-block: 0.5rem;
}

.promo-bar .col-text {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
}

.promo-bar .col-text .has-paragraph-subheader-font-size {
	text-transform: uppercase;
}

.promo-bar .col-text p:not(.has-paragraph-subheader-font-size) {
	padding-right: 4rem;
}

.promo-bar .bttn-close {
	position: absolute;
	right: 3rem;
	top: 50%;
	transform: translate(0, -50%);
	font-size: 3.5rem;
	color: var(--linen);
}

@media only screen and (min-width: 961px) {
	.promo-bar .row {
		padding-block: 0.85rem;
	}

	.promo-bar .col-text {
		justify-content: center;
	}

	.promo-bar .bttn-close {
		right: calc(1 * var(--row-default) / 36);
		margin-right: 1rem;
	}
}

@media only screen and (max-width: 960px) {
    .promo-bar .col-text p {
        margin-inline: auto;
        padding-inline: 0;
    }
}

/* @end */

/* Main Header */

body:has(.main-header:is([data-state="initial"], [data-state="start"]))
	:is(.site-nav, .promo-bar, .mobile .secondary-menu) {
	opacity: 0;
	pointer-events: none;
}

body:has(.main-header:not(.is-banner-full)) .site-nav.site-nav {
	--bgColor: transparent;
	backdrop-filter: blur(0px);
}

/* body:has(.main-header:is(.is-banner-full)) .site-nav:not(.opened) .logo.green {
    display: none;
}

body:has(.main-header:is(.is-banner-full)) .site-nav:not(.opened) .logo.white {
    display: inline-block;
} */

body:has(.main-header:is(.is-banner-full)).linen .site-nav {
	--bgColor: rgba(247, 238, 229, 1);
	backdrop-filter: blur(20px);
}

body:has(.main-header:is(.is-banner-full)).mist .site-nav {
	--bgColor: rgba(211, 222, 208, 1);
	backdrop-filter: blur(20px);
}

body:has(.main-header:is(.is-banner-full)).sunrise-bliss .site-nav {
	--bgColor: rgba(227, 199, 191, 1);
	backdrop-filter: blur(20px);
}