/* --------------------------------------------------------------
Mobile Menu CSS
Slideout Settings (Customizable)
File:         mobile-menu.css
Description:  Dreyfuss Mobile Menu CSS
Author:       Dreyfuss
Version:      1.0
-------------------------------------------------------------- */

@media (max-width: 767px) {
  body.menu-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
  }
}

:root {
/* 	--df-menu-width: 72vw; */
	--df-menu-width: 100vw;
	--df-menu-bg: #000;
	--df-menu-link-hover-color: #39a6ff;
	--df-menu-top-offset: 9rem;
}

/* Hamburger */
#df-hamburger {
	width: 32px;
	height: 24px;
	position: relative;
	cursor: pointer;
	z-index: 10001;
	background: transparent;
	border: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

#df-hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	transition: 0.3s ease;
}

#df-hamburger span:nth-child(1) { top: 0; }
#df-hamburger span:nth-child(2) { top: 10px; }
#df-hamburger span:nth-child(3) { top: 20px; }

#df-hamburger.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
#df-hamburger.active span:nth-child(2) { opacity: 0; }
#df-hamburger.active span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* Slideout menu */
#df-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--df-menu-width);
	background: var(--df-menu-bg);
	z-index: 10000;
	padding: var(--df-menu-top-offset) 0px 20px 30px;
	transform: translateX(-100%); /* hidden by default */
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Prevent menu itself from causing page scroll */
}

/* Open state */
#df-mobile-menu.open {
  transform: translateX(0);
}

/* Menu links */
#df-mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;          /* list grows to fill space */
	overflow-y: auto;
	overflow: hidden; /* no scrollbar */
	-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
#df-mobile-menu li {
	margin-bottom: 0.75rem;
}
#df-mobile-menu a {
	position: relative;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	font-size: 2rem;
	letter-spacing: 0.06rem;
	transition: color 0.3s;
}

#df-hamburger:focus,
#df-hamburger:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Underline animation */
#df-mobile-menu > ul a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 2px;
	background: var(--df-menu-link-hover-color);
	transition: width 0.3s;
}
#df-mobile-menu > ul a:hover::after {
	width: 100%;
}

#df-mobile-menu .menu-footer {
	text-align: left;
	padding-bottom: 20px;
}
#df-mobile-menu .menu-footer img {
	max-width: 10rem;
	height: auto;
}
/* Overlay */
#df-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 9999;
}
#df-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}