@import "widgets/jet-custom-menu";

@mixin font-awesome-icon {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.jet-menu-container {
	position: relative;
	width: 100%;
}

.jet-menu {
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: stretch;

	@media (min-width: 768px) {
		flex-flow: row wrap;
	}

	.jet-mobile-menu-active & {
		flex-flow: column wrap;
	}

	.jet-desktop-menu-active & {
		flex-flow: row wrap;
	}

	> .jet-menu-item {
		display: flex;

		> a {
			width: 100%;
			margin: 0;
			//white-space: nowrap;
			padding: 10px;
		}
	}

	ul {
		left: 0;
	}

}

.jet-menu-item {
	position: relative;

	> a {
		display: block;
		text-decoration: none;
		width: auto;
	}

	&.jet-mega-menu-item {
		position: static;

		&.jet-mega-menu-position-relative-item {
			position: relative;
		}
	}

	.top-level-link {
		display: flex;
	}

	&-desc {
		white-space: normal;
	}

	.jet-sub-menu {
		display: block;
		min-width: 200px;
		margin: 0;
		background-color: white;
		list-style: none;
		left: 0;
		top: 0;
		position: relative;
		padding: 0;
		z-index: auto;

		.rtl & {
			left: auto;
			right: 0;
		}

		@media (min-width: 768px) {
			position: absolute;
		}

		.jet-mobile-menu-active & {
			position: relative;
		}

		.jet-desktop-menu-active & {
			position: absolute;
			top: 100%;
			left: 0;
			right: auto;
			box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
			z-index: 999;
			pointer-events: none;

			&.inverse-side {
				right: 0;
				left: auto;
			}

			.jet-sub-menu {
				top: 0;
				left: 100%;
				right: auto;

				&.inverse-side {
					right: 100%;
					left: auto;
				}
			}
		}

		.jet-desktop-menu-active.rtl & {
			left: auto;
			right: 0;

			&.inverse-side {
				right: auto;
				left: 0;
			}

			.jet-sub-menu {
				left: auto;
				right: 100%;

				&.inverse-side {
					right: auto;
					left: 100%;
				}
			}
		}

		> li {
			display: block;

			> a {
				padding: 10px;
			}
		}
	}
}

.jet-menu-item-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	.jet-menu-icon {
		align-self: center;
		margin-right: 10px;

		.label-hidden & {
			margin-right: 0;
			margin-left: 0;
		}
	}

	.jet-dropdown-arrow {
		align-self: center;
		margin-left: 10px;
	}

	.jet-menu-badge {
		display: none;
		align-self: flex-start;
		text-align: center;
		width: 0;

		&.jet-hide-mobile {
			.jet-mobile-menu-active & {
				.jet-menu-badge__inner {
					display: none;
				}
			}
		}

		&__inner {
			display: inline-block;
		}
	}
}


.jet-menu-inner {
	@media ( max-width: 767px ) {
		display: none;
	}

	.jet-desktop-menu-active & {
		display: block;
	}
}

.jet-mobile-menu-active {

	.jet-mobile-menu-toggle-button {
		display: block;
	}

	.jet-menu {
		background-image: none;
	}

	.jet-menu-container.jet-mobile-menu {
		position: fixed;
		top: 0;
		right: -80%;
		z-index: 998;
		max-width: 80%;
		height: 100vh;
		background-color: white;
		transition: right .3s cubic-bezier(.35,.19,.45,.91);
	}

	.jet-menu-inner {
		overflow-y: scroll;
		display: block;
		height: 100vh;
	}

	.jet-menu {
		.jet-menu-item {
			flex-flow: column nowrap;
			max-width: 100%;

			> a.top-level-link,
			> a.sub-level-link {
				border-radius: 0;
				border-left: none;
				border-right: none;
				border-bottom-width: 1px;

				.jet-menu-item-wrapper {}

				.jet-dropdown-arrow {
					width: 25px;
					height: 25px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			& > .jet-sub-menu {
				border-radius: 0;
				box-shadow: none;
			}

			& > .jet-sub-mega-menu {
				border-radius: 0;
				box-shadow: none;
			}

			&.jet-menu-hover {
				& > .jet-sub-menu {
					height: auto;
					pointer-events: auto;
				}

				& > .jet-sub-mega-menu {
					height: auto;
					pointer-events: auto;
				}
			}

			&:not(.jet-menu-hover) {
				& > .jet-sub-menu {
					padding: 0 !important;
					border: none !important;
					margin: 0  !important;
				}

				& > .jet-sub-mega-menu {
					padding: 0 !important;
					border: none !important;
					margin: 0  !important;
				}
			}
		}
	}

	.jet-sub-menu {
		height: 0;
		opacity: 1;
		overflow: hidden;
		visibility: visible;
	}

	.jet-mega-menu-item .jet-sub-mega-menu {
		height: 0;
		opacity: 1;
		overflow: hidden;
		visibility: visible;
		max-width: 100% !important;
		left: 0 !important;
		width: 100% !important;
	}

	.jet-menu-item-has-children {
		& > .jet-sub-menu {
			padding-left: 20px;
		}
	}
}

.jet-mobile-menu-toggle-button {
	width: 35px;
	height: 35px;
	display: none;
	position: absolute;
	padding: 0;
	border-width: 0;
	left: -45px;
	top: 10px;

	.jet-menu-toggle__icon {
		@include font-awesome-icon;
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;

		&::after {
			top: .75em;
			content: '\f0c9';
		}
	}

	.jet-mobile-menu-visible & {
		.jet-menu-toggle__icon {
			&::after {
				content: '\f00d';
			}
		}
	}
}

.jet-mobile-menu-cover {
	position: fixed;
	display: block;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	background-color: rgba( 0, 0, 0, 0.75 );
	z-index: 997;
	transition: opacity .3s cubic-bezier(.5,.12,.46,.88),
				visibility .1s linear;
}

.jet-sub-mega-menu {
	width: 100%;
	display: block;
	position: relative;
	background-color: white;
	pointer-events: none;

	@media (min-width: 768px) {
		position: absolute;
	}

	.jet-mobile-menu-active & {
		position: relative;
	}

	.jet-desktop-menu-active & {
		width: 100%;
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
		z-index: 999;
	}

	.jet-mega-menu-position-relative-item & {
		left: 0 !important;
	}
}

.jet-responsive-menu {
	> li {
		&[hidden] {
			display: none;
		}
	}

	&-available-items {
		&[hidden] {
			display: none;
		}
	}
}

body.jet-mobile-menu-visible {
	overflow: hidden;
	width: 100%;
	height: auto;

	.jet-mobile-menu-cover {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .3s cubic-bezier(.5,.12,.46,.88),
					visibility .1s linear;
	}

	.jet-menu-container.jet-mobile-menu {
		right: 0;
		transition: all .5s cubic-bezier(.35,.19,.45,.91);
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
	}
}

.admin-bar.jet-mobile-menu-active {
	.jet-mobile-menu-toggle-button {
		top: 56px;
	}
	.jet-menu {
		margin-top: 46px;
	}
}

// FIX showing sub-menu and sub-mega-menu when loading a page.
.jet-sub-menu,
.jet-sub-mega-menu {
	opacity: 0;
	visibility: hidden;
}

.jet-desktop-menu-active {
	.jet-menu--animation-type-none {

		.jet-sub-menu {
			opacity: 0;
			visibility: hidden;
		}

		.jet-sub-mega-menu {
			opacity: 0;
			visibility: hidden;
		}

		.jet-simple-menu-item {

			&.jet-menu-hover {
				& > .jet-sub-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}

			li {
				&.jet-menu-hover {
					& > .jet-sub-menu {
						top: 0;
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
					}
				}
			}
		}

		.jet-mega-menu-item {
			&.jet-menu-hover {
				.jet-sub-mega-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}
		}

	}

	.jet-menu--animation-type-fade {

		.jet-sub-menu {
			opacity: 0;
			visibility: hidden;
			transition: opacity .3s cubic-bezier(.48,.01,.5,.99),
						visibility .1s linear;
		}

		.jet-sub-mega-menu {
			opacity: 0;
			visibility: hidden;
			transition: opacity .3s cubic-bezier(.48,.01,.5,.99),
						visibility .1s linear;
		}

		.jet-simple-menu-item {

			&.jet-menu-hover {
				& > .jet-sub-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}

			li {
				&.jet-menu-hover {
					& > .jet-sub-menu {
						top: 0;
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
					}
				}
			}
		}

		.jet-mega-menu-item {
			&.jet-menu-hover {
				.jet-sub-mega-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}
		}

	}

	.jet-menu--animation-type-move-up {

		.jet-sub-menu {
			opacity: 0;
			top: 130%;
			visibility: hidden;
			transition: top .2s cubic-bezier(.48,.01,.5,.99) .1s,
						opacity .2s cubic-bezier(.48,.01,.5,.99) .1s,
						visibility 1s linear;
		}

		.jet-sub-mega-menu {
			opacity: 0;
			top: 130%;
			visibility: hidden;
			transition: top .3s cubic-bezier(.48,.01,.5,.99) .1s,
						opacity .3s cubic-bezier(.48,.01,.5,.99) .1s,
						visibility 1s linear;
		}

		.jet-simple-menu-item {

			&.jet-menu-hover {
				& > .jet-sub-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
					transition: top .3s cubic-bezier(.48,.01,.5,.99),
								opacity .3s cubic-bezier(.48,.01,.5,.99),
								visibility 1s linear;
				}
			}

			li {
				&.jet-menu-hover {
					& > .jet-sub-menu {
						top: 0;
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
						transition: top .3s cubic-bezier(.48,.01,.5,.99),
									opacity .3s cubic-bezier(.48,.01,.5,.99),
									visibility 1s linear;
					}
				}
			}
		}

		.jet-mega-menu-item {
			&.jet-menu-hover {
				.jet-sub-mega-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}
		}

	}

	.jet-menu--animation-type-move-down {
		.jet-sub-menu {
			opacity: 0;
			top: 80%;
			visibility: visible;
			transition: top .3s cubic-bezier(.48,.01,.5,.99),
						opacity .3s cubic-bezier(.48,.01,.5,.99),
						visibility 1s linear;
		}

		.jet-sub-mega-menu {
			opacity: 0;
			top: 80%;
			visibility: hidden;
			transition: top .3s cubic-bezier(.48,.01,.5,.99),
						opacity .3s cubic-bezier(.48,.01,.5,.99),
						visibility 1s linear;
		}

		.jet-simple-menu-item {

			&.jet-menu-hover {
				& > .jet-sub-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}

			li {
				&.jet-menu-hover {
					& > .jet-sub-menu {
						top: 0;
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
					}
				}
			}
		}

		.jet-mega-menu-item {
			&.jet-menu-hover {
				.jet-sub-mega-menu {
					top: 100%;
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}
			}
		}
	}
}

// Prevent duplicate sub-menu and mega-menu when the section is sticky
.jet-desktop-menu-active {
	.elementor-sticky--active + .elementor-sticky {
		.jet-sub-menu,
		.jet-sub-mega-menu {
			display: none;
		}
	}
}

// if iphone and safari
.jet-mobile-menu .jet-menu.jet-menu--iphone-mode {
	margin-bottom: 75px;
}