/* ==========================================================================
   Mobile Offcanvas Navigation
   ========================================================================== */

html.offnav_active {
	overflow: hidden;
}

/* Wrapper ------------------------------------------------------------ */

#offnav_wrapper {
	display: none;
}

/* Toggle Button ------------------------------------------------------ */

#offnav_btn {
	position: fixed;
	top: env(safe-area-inset-top, 0);
	right: 0;

	width: 60px;
	height: 60px;

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

	font: 400 34px/1 'offont';
	color: var(--green);

	background: none;
	border: 0;
	cursor: pointer;

	z-index: 9999;
}

#offnav_btn::before {
	content: "\f0c9";
	display: block;
	transition: color .25s ease, transform .25s ease;
}

.offnav_active #offnav_btn::before {
	content: "\f00d";
	color: var(--text-color-light);
	transform: rotate(90deg);
}

#offnav_btn:hover,
#offnav_btn:hover::before,
.offnav_active #offnav_btn:hover::before {
	color: var(--text-color);
}

.dark #offnav_btn {
	color: var(--text-color-light);
}

/* Offcanvas ---------------------------------------------------------- */

#offnav_container {
	position: fixed;
	inset: 0;

	width: 100%;
	height: 100dvh;

	background: var(--green);

	z-index: 1001;

	transform: translateY(-100%);
	transition: transform .45s ease;

	pointer-events: none;
}

.offnav_active #offnav_container {
	transform: translateY(0);
	pointer-events: auto;
}

/* Content ------------------------------------------------------------ */

#offnav_content {
	position: relative;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: calc(5rem + env(safe-area-inset-top, 0))
			 0
			 calc(2rem + env(safe-area-inset-bottom, 0));
}

/* Lists -------------------------------------------------------------- */

#offnav_content ul,
#offnav_content li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#offnav_content > ul,
#offnav_content nav > ul {
	padding: 2rem 0;
}

#offnav_content .sub-menu {
	padding: 0;
}

#offnav_content li {
	width: 100%;
}
#offnav_content li:before {
	content: "";
}
#offnav_content #menu-footer-navigation {
	padding-top: 4em;
}


/* Links -------------------------------------------------------------- */

#offnav_content a {
	display: block;

	padding: .65rem clamp(2.5rem, 5vw, 3rem);

	font-family: var(--font-primary), sans-serif;
	font-size: var(--font-size-m);
	line-height: var(--line-height-m);
	font-weight: 700;

	letter-spacing: .02em;
	text-decoration: none;

	color: var(--text-color-light);

	hyphens: auto;
	word-break: break-word;

	transition: color .2s ease;
}

#offnav_content .sub-menu a,
#offnav_content #menu-footer-navigation a {
	font-size: var(--font-size-s);
}

#offnav_content a:hover,
#offnav_content a:focus-visible,
#offnav_content .anchor-active {
	color: var(--blue);
	text-decoration: none;
	outline: none;
}

#offnav_content .nav_active,
#offnav_content .current-menu-item > a {
	color: var(--pale-blue);
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {

	#offnav_wrapper {
		display: block;
	}

	#main-navigation {
		display: none;
	}

}

@media (prefers-reduced-motion: reduce) {

	#offnav_container,
	#offnav_btn::before,
	#offnav_content a {
		transition: none;
	}

}