/* ==========================================================================
   Full Screen Menu styles
   ========================================================================== */

#qodef-fullscreen-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: $semi-transparent-background-color;
	overflow-x: hidden !important;
	visibility: hidden;
	opacity: 0;
	z-index: 99; /* smaller than header, bigger than content */
	
	.qodef-content-grid {
		height: 100%;
		
		.qodef-fullscreen-menu {
			width: 100%;
		}
	}
	
	.qodef-fullscreen-menu-animate--in & {
		animation: qode-fade-in .25s linear both;
	}
	
	.qodef-fullscreen-menu-animate--out & {
		animation: qode-fade-out .25s linear both;
	}
}

#qodef-fullscreen-area-inner {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
}

$menu-top-bottom-spacing: 27px 0 8px;
$menu-level-two-top-bottom-spacing: 11px 0 0;
$menu-level-two-left-spacing: 20px;

.qodef-fullscreen-menu {
	position: relative;
	top: 0;
	margin: 0 auto;
	text-align: center;
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		
		li {
			position: relative;
			margin: 0;
			padding: 0;
			
			&.qodef--hide-link {
				
				> a {
					cursor: default;
				}
			}
		}
		
		&.sub-menu {
			display: none;
		}
	}
	
	.qodef-menu-item-icon {
		margin-right: 5px;
	}
	
	.qodef-mega-menu-widget-holder {
		display: none;
	}
	
	> ul {
		
		> li {
			margin: 30px 0;
			
			> a {
				@include qodefMenuLevelOneInitialStyle(h1, #fff, 7px, 7px);
				
				&:hover {
					@include qodefMenuLevelOneHoverStyle();
				}
			}
			
			&.current-menu-ancestor,
			&.current-menu-item {
				
				> a {
					@include qodefMenuLevelOneHoverStyle();
				}
			}
		}
	}
	
	.qodef-drop-down-second-inner {
		
		> ul {
			padding: $menu-top-bottom-spacing;

			ul {
				padding: $menu-level-two-top-bottom-spacing;
			}
		}
		
		ul {
			
			li {
				margin: 11px 0;

				&:first-of-type {
					margin-top: 0;
				}

				&:last-of-type {
					margin-bottom: 0;
				}
				
				> a {
					@include qodefMenuLevelOneInitialStyle(h7, #fff);

					&:hover {
						@include qodefMenuLevelOneHoverStyle();
					}
				}
				
				&.current-menu-ancestor,
				&.current-menu-item {
					
					> a {
						@include qodefMenuLevelOneHoverStyle();
					}
				}
			}
		}
	}
}

#menu-fullscreen-menu {
	>li {
		opacity: 0;
		transform: translateY(10px);
		transition-duration: .5s;
		transition-timing-function: cubic-bezier(0.24, 0.55, 0.2, 0.91);
	}
}

.qodef-fullscreen-menu--opened {

	#menu-fullscreen-menu {
		>li {
			opacity: 1;
			transform: translateY(0);
			transition-duration: 1s;

			@for $i from 2 to 10 {

				&:nth-child(#{$i}) { 
					transition-delay: ($i - 1) * 0.1s;
				}
			}
		}
	}
}