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

:root {
	--heightSiteNav: 6rem;
}

.site-nav {
	/* position: fixed;
	z-index: var(--z-index-site-nav);
	top: 0; */
	width: 100%;
	/* background: var(--background); */
	transition: all var(--transitionDelay);
	/* General */
	--paddingBlock: 1.9rem 1.3rem;
	--paddingInline: 2rem;
	--transitionDelay: .6s;
	/* Background */
	--background: var(--periwinkleBackground);
	/* Logo */
	--widthLogo: 11rem;
}
.site-nav a {
	text-decoration: none;
	font: inherit;
	--transitionDelay: .3s;
}
.site-nav > .row {
	height: var(--heightSiteNav);
	padding-block: var(--paddingBlock);
	padding-inline: var(--paddingInline);
	position: relative;
}
.site-nav > .row::before {
	content: '';
	width: 0;
	height: 1px;
	position: absolute;
	pointer-events: none;
	left: 0;
	bottom: 0;
	transition: width .6s;
	background-color: var(--periwinkle);
}
.site-nav.animateActive > .row::before {
	width: 100%;
}

.site-nav .logo {
	width: var(--widthLogo);
	height: auto;
	margin: 0 auto;
}
.site-nav .logo img {
	object-fit: contain;
}

@media only screen 
and (min-width: 961px) {
	:root {
		--heightSiteNav: 9.2rem;
	}
	.site-nav {
		--widthLogo: 17.7rem;
		--paddingBlock: 2.4rem 2.3rem;
	}
	.site-nav :is([class*="col-"], #important) {
		--_row-col-size: calc(100% / 12);
	}
	.site-nav .texts {
		display: flex;
	}
	.site-nav .texts p:first-of-type::after {
		content: ',';
		display: inline-block;
		margin-inline: -1px .5rem;
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 960px) {
	.site-nav :is(.row, #important) {
		flex-direction: row;
		justify-content: space-between;
	}
	.site-nav :is(.row, #important) [class*="col-"] {
		flex: 0 1 32%;
	}
	.site-nav .right {
		z-index: var(--z-index-lowest);
	}
	.site-nav .fixed-text {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		height: 6rem;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: var(--z-index-site-nav);
		background: var(--white);
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 400px) {
	.site-nav {
		--widthLogo: 9.5rem;
	}
	.site-nav :is(.row, #important) [class*="col-"]:nth-child(1) {
		flex: 0 1 28%;
	}
	.site-nav .texts .has-label-button-font-size {
		--fs: 1.4rem;
	}
}
/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .site-nav [class*="col-"] {
	opacity: 0;
	--duration: .5s;
}
:where(#wrapper) .site-nav.animateActive [class*="col-"] {
	animation: fade var(--duration) forwards;
	animation-delay: var(--delay, 0);
}
:where(#wrapper) .site-nav.animateActive :is([class*="col-"]:nth-child(2)) {
    --delay: 0.2s;
}
:where(#wrapper) .site-nav.animateActive :is([class*="col-"]:nth-child(1), [class*="col-"]:nth-child(3)) {
    --delay: 0.4s;
}