/*--------------------------------------------------------------
## Dropdown navigation for header Menus
--------------------------------------------------------------*/
.header-navigation ul ul.sub-menu,
.header-navigation ul ul.submenu {
	display: none;
	position: absolute;
	top: 100%;
	flex-direction: column;
	background: #fff;
	margin-left: 0;
	box-shadow: 0 2px 13px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
.header-navigation ul ul.quadmenu-row {
	flex-direction: row;
}
body:not(.hide-focus-outline)
	.header-navigation
	li.menu-item--has-toggle
	> a:focus
	.dropdown-nav-toggle {
	opacity: 0.2;
}
// Hide divider for last item.
.header-navigation ul ul.sub-menu > li:last-child,
.header-navigation ul ul.submenu > li:last-child {
	border-bottom: 0;
}
.header-navigation ul ul.sub-menu.sub-menu-edge {
	left: auto;
	right: 0;
}
.header-navigation ul ul ul.sub-menu.sub-menu-edge {
	left: auto;
	right: 100%;
}
// Handle Reveal Animation
.header-navigation[class*="header-navigation-dropdown-animation-fade"] {
	ul ul.sub-menu,
	ul ul.submenu {
		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 0, 0);
		transition: all 0.2s ease;
		display: block;
		clip: rect(1px, 1px, 1px, 1px);
		height: 1px;
		overflow: hidden;
	}
}
.header-navigation[class*="header-navigation-dropdown-animation-fade"]:not(.click-to-open) {
	ul li:hover > ul,
	ul li.menu-item--toggled-on > ul,
	ul li:not(.menu-item--has-toggle):focus > ul {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
		clip: auto;
		height: auto;
		overflow: visible;
	}
}
// Handle Reveal Animation on click to open
.header-navigation[class*="header-navigation-dropdown-animation-fade"].click-to-open {
	ul li > ul.opened,
	ul li.menu-item--toggled-on > ul,
	ul li:not(.menu-item--has-toggle):focus > ul {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
		clip: auto;
		height: auto;
		overflow: visible;
	}
}
.header-navigation.header-navigation-dropdown-animation-fade-up {
	ul ul.sub-menu,
	ul ul.submenu {
		transform: translate3d(0, 10px, 0);
	}
}
.header-navigation.header-navigation-dropdown-animation-fade-down {
	ul ul.sub-menu,
	ul ul.submenu {
		transform: translate3d(0, -10px, 0);
	}
}
/*--------------------------------------------------------------
## Submenu Toggles for Header Menus
--------------------------------------------------------------*/
.wp-site-blocks .nav--toggle-sub .dropdown-nav-special-toggle {
	position: absolute !important;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	margin-right: -0.1em !important;
	border: 0 !important;
	width: 0.9em;
	top: 0;
	bottom: 0;
	height: auto;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent !important;
	display: block;
	left: auto;
	right: calc(1.4em / 2);
	pointer-events: none;
}
.wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle {
	width: 2.6em;
	margin: 0 !important;
	right: 0;
}
.nav--toggle-sub .dropdown-nav-special-toggle:focus {
	z-index: 10;
}
.nav--toggle-sub .dropdown-nav-toggle {
	display: block;
	background: transparent;
	position: absolute;
	right: 0;
	top: 50%;
	width: 0.7em;
	height: 0.7em;
	font-size: inherit;
	width: 0.9em;
	height: 0.9em;
	font-size: 0.9em;
	display: inline-flex;
	line-height: inherit;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	transform: translateY(-50%);
	overflow: visible;
	transition: opacity 0.2s ease;
}
.nav--toggle-sub ul ul .dropdown-nav-toggle {
	right: 0.2em;
}

.nav--toggle-sub ul ul .dropdown-nav-toggle .kadence-svg-iconset {
	transform: rotate(-90deg);
}
.nav--toggle-sub li.menu-item-has-children {
	position: relative;
}
.nav-drop-title-wrap {
	position: relative;
	padding-right: 1em;
	display: block;
}
/*
* If the dropdown toggle is active with JS, then
* we'll take care of showing the submenu with JS.
*/
.nav--toggle-sub:not(.click-to-open) li:hover > ul,
.nav--toggle-sub li.menu-item--toggled-on > ul,
.nav--toggle-sub li:not(.menu-item--has-toggle):focus > ul,
.nav--toggle-sub.click-to-open li.menu-item--has-toggle > ul.opened {
	display: block;
}

/*
* "focus-within" is an alternative to focus class for
* supporting browsers (all but IE/Edge) for no-JS context
* (e.g. AMP) See https://caniuse.com/#feat=css-focus-within
*
* This selector needs to stay separated, otherwise submenus
* will not be displayed with IE/Edge.
*/
.nav--toggle-sub li:not(.menu-item--has-toggle):focus-within > ul {
	display: block;
}
// This makes the dropdowns work a little better on a touch device.
@media (hover: none) {
	.wp-site-blocks
		.nav--toggle-sub
		.menu-item--has-toggle:not(.menu-item--toggled-on)
		.dropdown-nav-special-toggle {
		left: 0;
		right: 0 !important;
		margin-right: 0 !important;
		width: 100%;
		pointer-events: all;
	}
	.wp-site-blocks
		.nav--toggle-sub
		.menu-item--has-toggle:not(.menu-item--toggled-on)
		> a {
		pointer-events: none;
	}
}
.rtl .nav--toggle-sub .dropdown-nav-toggle {
	right: auto;
	left: 0;
}
.rtl .primary-menu-container > ul > li.menu-item .dropdown-nav-special-toggle {
	right: auto;
	left: calc(1.4em / 2);
}
.rtl .wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle {
	left: 0;
	right: auto;
}
.rtl .nav--toggle-sub ul ul .dropdown-nav-toggle .kadence-svg-iconset {
	transform: rotate(-270deg);
}
.rtl .header-navigation ul ul ul.sub-menu,
.rtl .header-navigation ul ul ul.submenu {
	right: 100%;
	left: auto;
}
.rtl .nav-drop-title-wrap {
	padding-left: 1em;
	padding-right: 0;
}
.wp-site-blocks
	.nav--toggle-sub
	.kadence-menu-mega-enabled
	.sub-menu
	.dropdown-nav-special-toggle {
	display: none;
}
/*--------------------------------------------------------------
## Header navigation top item styling
--------------------------------------------------------------*/
.header-navigation-style-underline-fullheight,
.header-navigation-style-fullheight {
	height: 100%;
	align-items: center;
	.header-menu-container {
		height: 100%;
		align-items: center;
		> ul {
			height: 100%;
			align-items: center;
			> li {
				display: flex;
				height: 100%;
				align-items: center;
				> a {
					display: flex;
					height: 100%;
					align-items: center;
				}
			}
		}
	}
}
.header-navigation[class*="header-navigation-style-underline"] {
	.header-menu-container {
		> ul > li {
			> a {
				position: relative;
				&:after {
					content: "";
					width: 100%;
					position: absolute;
					bottom: 0px;
					height: 2px;
					right: 50%;
					background: currentColor;
					transform: scale(0, 0) translate(-50%, 0);
					transition: transform 0.2s ease-in-out, color 0s ease-in-out;
				}
				&:hover:after {
					transform: scale(1, 1) translate(50%, 0);
				}
			}
			&.current-menu-item,
			&.current-page-item {
				> a:after {
					transform: scale(1, 1) translate(50%, 0);
				}
			}
		}
	}
}

/*--------------------------------------------------------------
## Header navigation menus
--------------------------------------------------------------*/
.header-navigation,
.header-menu-container {
	display: flex;
}
.header-navigation li.menu-item > a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--global-palette4);
	transition: all 0.2s ease-in-out;
	transform: translate3d(0, 0, 0);
}
.header-navigation li.menu-item > a:hover,
.header-navigation li.menu-item > a:focus {
	color: var(--global-palette-highlight);
}
.header-navigation ul.sub-menu,
.header-navigation ul.submenu {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header-navigation ul li.menu-item > a {
	padding: 0.6em 0.5em;
}
.header-navigation ul ul li.menu-item > a {
	padding: 1em;
}
.header-navigation ul ul li.menu-item > a {
	width: 200px;
}
.header-navigation ul ul ul.sub-menu,
.header-navigation ul ul ul.submenu {
	top: 0;
	left: 100%;
	right: auto;
	min-height: 100%;
}
.header-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
/*--------------------------------------------------------------
## Trigger
--------------------------------------------------------------*/
.menu-toggle-open {
	display: flex;
	background: transparent;
	align-items: center;
	box-shadow: none;
	.menu-toggle-label {
		padding-right: 5px;
	}
	.menu-toggle-icon {
		display: flex;
	}
	.menu-toggle-label:empty {
		padding-right: 0px;
	}
	&:hover,
	&:focus {
		border-color: currentColor;
		background: transparent;
		box-shadow: none;
	}
	&.menu-toggle-style-default {
		border: 0;
	}
}
.wp-site-blocks .menu-toggle-open {
	box-shadow: none;
}
/*--------------------------------------------------------------
## Mobile Menu
--------------------------------------------------------------*/
.mobile-navigation {
	width: 100%;
}
.mobile-navigation a {
	display: block;
	width: 100%;
	text-decoration: none;
	padding: 0.6em 0.5em;
}
.mobile-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.drawer-nav-drop-wrap {
	display: flex;
	position: relative;
	a {
		color: inherit;
	}
	.drawer-sub-toggle {
		background: transparent;
		color: inherit;
		padding: 0.5em 0.7em;
		display: flex;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		line-height: normal;
	}
	.drawer-sub-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
}
.mobile-navigation.drawer-navigation-parent-toggle-true
	.drawer-nav-drop-wrap
	.drawer-sub-toggle {
	position: absolute;
	left: 0;
	z-index: 10;
	top: 0;
	bottom: 0;
	justify-content: flex-end;
	width: 100%;
}
// .mobile-navigation ul li .drawer-nav-drop-wrap a[href="#"] + button {
// 	position: absolute;
// 	z-index: 10;
// 	left:0;
// 	right:0;
// 	top:0;
// 	bottom:0;
// 	width: 100%;
//     justify-content: flex-end;
// }
.mobile-navigation ul ul {
	padding-left: 1em;
	transition: all 0.2s ease-in-out;
}
.mobile-navigation ul.has-collapse-sub-nav ul.sub-menu {
	display: none;
}
body[class*="amp-mode-"] .mobile-navigation ul ul {
	display: block;
}
.mobile-navigation ul ul ul ul ul ul {
	padding-left: 0;
}
.mobile-navigation ul.has-collapse-sub-nav .sub-menu.show-drawer {
	display: block;
}
/*--------------------------------------------------------------
## Drawer
--------------------------------------------------------------*/
.popup-drawer {
	position: fixed;
	display: none;
	top: 0;
	bottom: 0;
	left: -99999rem;
	right: 99999rem;
	transition: opacity 0.25s ease-in, left 0s 0.25s, right 0s 0.25s;
	z-index: 100000;
	.drawer-overlay {
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
	}
	.drawer-inner {
		width: 100%;
		transform: translateX(100%);
		max-width: 90%;
		right: 0;
		top: 0;
		overflow: auto;
		background: #090c10;
		color: #fff;
		bottom: 0;
		opacity: 0;
		position: fixed;
		box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
			opacity 0.25s cubic-bezier(0.77, 0.2, 0.05, 1);
	}
	.drawer-header {
		padding: 0 1.5em;
		display: flex;
		justify-content: flex-end;
		// Fixes safair bug.
		min-height: calc(1.2em + 24px);
		.drawer-toggle {
			background: transparent;
			border: 0;
			font-size: 24px;
			line-height: 1;
			padding: 0.6em 0.15em;
			color: inherit;
			display: flex;
			box-shadow: none;
			border-radius: 0;
			&:hover {
				box-shadow: none;
			}
		}
	}
	.drawer-content {
		padding: 0 1.5em 1.5em;
	}
}
.popup-drawer-layout-sidepanel.popup-drawer-side-left {
	.drawer-inner {
		transform: translateX(-100%);
		right: auto;
		left: 0;
	}
}
@media screen and (max-width: $tablet-minus-query) {
	.showing-popup-drawer-from-right.animate-body-popup #inner-wrap,
	.showing-popup-drawer-from-right.animate-body-popup #colophon,
	.showing-popup-drawer-from-right.animate-body-popup .site-header-row {
		transform: translateX(-200px);
	}
	.showing-popup-drawer-from-left.animate-body-popup #inner-wrap,
	.showing-popup-drawer-from-left.animate-body-popup #colophon,
	.showing-popup-drawer-from-left.animate-body-popup .site-header-row {
		transform: translateX(200px);
	}
	.animate-body-popup #inner-wrap,
	.animate-body-popup .site-header-row,
	.animate-body-popup #colophon {
		transform: none;
		transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
	}
}
.popup-drawer-animation-scale.popup-drawer-layout-fullwidth .drawer-inner {
	transform: scale(0);
	transform-origin: top right;
	transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
		opacity 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.popup-drawer-animation-scale.popup-drawer-layout-fullwidth.popup-drawer-side-left
	.drawer-inner {
	transform-origin: top left;
}
.popup-drawer-animation-scale.popup-drawer-layout-fullwidth.active
	.drawer-inner {
	transform: scale(1);
}
#mobile-drawer.popup-drawer-animation-slice.popup-drawer-layout-fullwidth
	.drawer-overlay,
#mobile-drawer.popup-drawer-animation-slice.popup-drawer-layout-fullwidth
	.drawer-inner {
	background: transparent;
}

.popup-drawer .drawer-header .drawer-toggle {
	width: 1em;
	position: relative;
	height: 1em;
	box-sizing: content-box;
	font-size: 24px;
}
.drawer-toggle .toggle-close-bar {
	width: 0.75em;
	height: 0.08em;
	background: currentColor;
	transform-origin: center center;
	position: absolute;
	margin-top: -0.04em;
	opacity: 0;
	border-radius: 0.08em;
	left: 50%;
	margin-left: -0.375em;
	top: 50%;
	transform: rotate(45deg) translateX(-50%);
	transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
		opacity 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
	transition-delay: 0.2s;
}
.drawer-toggle .toggle-close-bar:last-child {
	transform: rotate(-45deg) translateX(50%);
}
.popup-drawer.active {
	.drawer-toggle .toggle-close-bar {
		transform: rotate(45deg);
		opacity: 1;
	}
	.drawer-toggle .toggle-close-bar:last-child {
		transform: rotate(-45deg);
		opacity: 1;
	}
}
.popup-drawer .drawer-content.content-valign-middle {
	min-height: calc(100% - (1.2em + 24px));
	display: flex;
	justify-content: safe center;
	flex-direction: column;
	padding-bottom: calc(1.2em + 24px);
	//max-height: calc(100% - (1.2em + 24px));
	overflow: auto;
}
.popup-drawer .drawer-content.content-valign-bottom {
	min-height: calc(100% - (1.2em + 24px));
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	padding-bottom: calc(1.2em + 24px);
	max-height: calc(100% - (1.2em + 24px));
	overflow: auto;
	.site-header-item-mobile-navigation {
		display: block;
		overflow: auto;
		max-height: calc(100% - (1.2em + 24px));
	}
}
.popup-drawer .drawer-content.content-align-center {
	text-align: center;
}
.popup-drawer .drawer-content.content-align-center .site-header-item {
	justify-content: center;
}
.popup-drawer .drawer-content.content-align-right {
	text-align: right;
}
.popup-drawer .drawer-content.content-align-right .site-header-item {
	justify-content: flex-end;
}
.popup-drawer-layout-fullwidth.popup-drawer-animation-slice {
	.drawer-inner {
		transform: none;
	}
	.pop-slice-background {
		transform-origin: center;
		transform: none;
		position: absolute;
		display: flex;
		flex-flow: column;
		align-items: stretch;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
	.pop-portion-bg {
		flex: 1 1 100%;
		background: rgba(9, 12, 16, 0.97);
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1);
	}
	.pop-portion-bg:nth-child(odd) {
		transform: translateX(100%);
	}
	.drawer-content {
		transform: translateY(20px);
		opacity: 0;
		transition: all 0.4s ease;
	}
}
.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.active {
	.pop-portion-bg {
		transform: translateX(0);
	}
	.drawer-content {
		transform: translateY(0px);
		opacity: 1;
		transition: all 0.4s ease;
		transition-delay: 0.2s;
	}
}

@media screen and (max-width: $tablet-minus-query) {
	.popup-drawer-layout-sidepanel.popup-mobile-drawer-side-right {
		.drawer-inner {
			transform: translateX(100%);
			right: 0;
			left: auto;
		}
	}
	.popup-drawer-layout-sidepanel.popup-mobile-drawer-side-left {
		.drawer-inner {
			transform: translateX(-100%);
			right: auto;
			left: 0;
		}
	}
}
body.admin-bar .popup-drawer {
	top: 46px;
	.drawer-inner {
		top: 46px;
	}
}
@media screen and (min-width: 783px) {
	body.admin-bar .popup-drawer {
		top: 32px;
		.drawer-inner {
			top: 32px;
		}
	}
}
.popup-drawer.show-drawer {
	display: block;
}
.popup-drawer.active {
	left: 0;
	opacity: 1;
	right: 0;
	transition: opacity 0.25s ease-out;
	.drawer-inner {
		opacity: 1;
		transform: translateX(0%);
	}
	.drawer-overlay {
		opacity: 1;
		cursor: pointer;
	}
}
body[class*="showing-popup-drawer-"] {
	overflow: hidden;
}