/* ==========================================
   STICKY NAVIGATION
========================================== */

.sticky-nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;

	background:rgba(15,15,15,.9);
	backdrop-filter:blur(14px);

	transform:translateY(-100%);
	opacity:0;

	transition:
		transform .3s ease,
		opacity .3s ease;
}

.sticky-nav.is-visible{
	transform:translateY(0);
	opacity:1;
}

/* Match Casper spacing */

.sticky-nav .site-nav{
	padding:24px 40px 50px
}

/* ==========================================
   HAMBURGER
========================================== */

.menu-toggle{
	display:none;

	width:42px;
	height:42px;

	padding:0;
	margin:0;

	border:0;
	background:none;

	cursor:pointer;
}

.menu-toggle span{
	display:block;
	width:28px;
	height:2px;
	margin:4px auto;
	background:#fff;
	transform-origin:center;
	transition:
		transform .3s ease,
		opacity .3s ease;
}

/* ==========================================
   MOBILE MENU
========================================== */

.mobile-menu{
	position:fixed;
	inset:0;

	display:flex;
	align-items:center;
	justify-content:center;

	background:rgba(15,15,15,.95);
	backdrop-filter:blur(16px);

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		opacity .3s ease,
		visibility .3s ease;

	z-index:9999;
}

.mobile-menu.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.mobile-menu-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:56px;
}

/* ==========================================
   MOBILE NAVIGATION
========================================== */

.mobile-menu .nav{
	display:flex;
	flex-direction:column;
	align-items:center;

	gap:28px;

	margin:0;
	padding:0;

	list-style:none;
}

.mobile-menu .nav li{
	margin:0;
}

.mobile-menu .nav a{
	color:#fff;

	font-size:1.25rem;
	font-weight:500;

	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:.14em;

	transition:opacity .2s ease;
}

.mobile-menu .nav a:hover{
	opacity:.75;
}

/* ==========================================
   MOBILE SOCIALS
========================================== */

.mobile-menu .social-links{
	display:flex;
	align-items:center;
	justify-content:center;

	gap:28px;
}

.mobile-menu .social-link img,
.mobile-menu .social-link svg{
	width:24px;
	height:24px;
}

/* ==========================================
   CLOSE BUTTON
========================================== */

.mobile-toggle{
	position:absolute;

	top:32px;
	right:32px;

	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

/* ==========================================
   HAMBURGER -> X
========================================== */

.menu-toggle span{
	transition:
		transform .3s ease,
		opacity .3s ease;
}

.menu-toggle.is-active span:nth-child(1){
	transform:translateY(13px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
	opacity:0;
}

.menu-toggle.is-active span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg);
}

/* ==========================================
   BODY LOCK
========================================== */

body.menu-open{
	overflow:hidden;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:700px){

	/* Hide Casper navigation */

	.site-nav-left,
	.site-nav-right{
		display:none;
	}

	/* Show hamburger */

	.menu-toggle{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}

	/* Hero */

	.site-nav{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:18px;
        height: 80px
	}

	.site-title{
		display:flex;
		justify-content:center;
	}

	.site-logo{
		max-height:70px;
	}

	/* Sticky */

	.sticky-nav .site-nav{
		gap:12px;
		padding:18px 24px;
	}

	.sticky-nav .site-logo{
		max-height:56px;
	}
}

/* ==========================================
   DESKTOP
========================================== */

@media (min-width:701px){

	.mobile-menu{
		display:none;
	}

	.menu-toggle{
		display:none;
	}
}