//
// Header Menu //
//
.header {
	top: 0;
	z-index: 990;
	overflow: visible;
	background: $color-white;
	width: 100%;
	height: 80px;
	@include transition(ease-in-out 0.2s);
	&.hide {
		@include transform(translateY(-100%));
	}
	.container, .container-fluid {
		@include display-flex;
	    justify-content: space-between;
	    align-items: center;
	    height: 100%;
	}
	.logo {
		display: inline-block;
		.logo-light {
			display: none;
		}
		* {
			@include transition(linear 0.1s);
		}
		h1,h2,h3,h4,h5,h6 {
			margin: 0;
		}
		img {
			width: auto;
			height: 52px;
			max-height: 52px;
		}
		a {
			color: $color-dark;
			&:hover { color: $color-dark; }
		}
	}
	.m-toggle {
		position: relative;
		display: inline-block;
		width: 28px;
		height: 28px;
		span {
			position: absolute;
			top: 50%;
			left: 0;
			@include transform(translateY(-50%));
			background: $color-dark;
			width: 100%;
			height: 2px;
			border-radius: 2px;
			@include transition(linear 0.1s);
			&:before, &:after {
				content: '';
				position: absolute;
				left: 0;
				background: $color-dark;
				width: 100%;
				height: 2px;
				border-radius: 2px;
				@include transition(linear 0.1s);
			}
			&:before { top: -7px; }
			&:after { bottom: -7px; }
		}
		&:hover {
			span {
				&:before { width: 90%; }
				&:after { width: 70%; }
			}
		}
	}
}
.header-menu-wrapper {
	display: inline-block;
	font-size: 14px;
	.header-menu {
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style-type: none;
		margin: 0;
		padding: 0;
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		.m-item {
			.m-link {
				font-family: $font-family-secondary;
				letter-spacing: -0.2px;
				&.m-dropdown-toggle {
					position: relative;
					padding-right: 13px;
					&:before, &:after {
						content: '';
						position: absolute;
						top: 50%;
						background: $color-primary;
						width: 6px;
						height: 2px;
						@include transition(linear 0.1s);
					}
					&:before {
						right: 3px;
						@include transform(translateY(-50%) rotate(45deg));
					}
					&:after {
						right: 0;
						@include transform(translateY(-50%) rotate(-45deg));
					}
					&:hover {
						&:before, &:after {
							background: $color-dark;
						}
					}
				}
			}
			.m-dropdown {
				.m-dropdown-item {
					.m-dropdown-link {
						&.m-subdropdown-toggle {
							position: relative;
							padding-right: 27px;
							&:before, &:after {
								content: '';
								position: absolute;
								top: 50%;
								right: 15px;
								background: $color-primary;
								width: 6px;
								height: 2px;
								@include transition(linear 0.1s);
							}
							&:before {
								@include transform(translateY(-50%) rotate(45deg));
								margin-top: -3px;
							}
							&:after {
								@include transform(translateY(-50%) rotate(-45deg));
								margin-bottom: -3px;
							}
							&:hover {
								&:before, &:after {
									background: $color-dark;
								}
							}
						}
					}
				}
			}
		}
		&.font-2 {
			.m-item {
				.m-link {
					font-size: 13px;
					font-weight: 400;
					letter-spacing: 1px;
					text-transform: uppercase;
				}
			}
		}
	}
	.close-button {
		position: fixed;
		top: 10px;
		right: 10px;
		display: inline-block;
		visibility: hidden;
		opacity: 0.8;
		background: $bg-gray;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		@include transition(linear 0.1s);
		span {
			&:before, &:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				background: $color-dark;
				width: 14px;
				height: 2px;
				border-radius: 2px;
				@include transition(linear 0.1s);
			}
			&:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
			&:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
		}
		&:hover {
			opacity: 1;
		}
	}
}

//
// Header Positions //
//
.header {
	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		@include box-shadow(0 0 38px 0 rgba(24,27,30,0.14));
	}
	&.sticky {
		position: fixed;
		top: 0;
		left: 0;
		@include box-shadow(0 0 38px 0 rgba(24,27,30,0.14));
	}
}

//
// Header BG Colors //
//
.header {
	&.absolute-dark, &.absolute-light, 
	&.absolute-dark.dark, &.absolute-light.dark, 
	&.absolute-dark.black, &.absolute-light.black {
		&:not(.fixed, .sticky) {
			position: absolute;
			top: 0;
			left: 0;
		}
		background: transparent;
		@include box-shadow(none);
	}
	&.absolute-light {
		.logo {
			.logo-dark {
				display: none;
			}
			.logo-light {
				display: inline-block;
			}
			h1,h2,h3,h4,h5,h6 { color: $color-white; }
			a {
				color: $color-white;
				&:hover { color: $color-white; }
			}
		}
		.m-toggle {
			span {
				background: $color-white;
				&:before, &:after { background: $color-white; }
			}
		}
	}
	&.absolute-light, &.dark, &.black {
		&.border-top, &.border-bottom {
			border-color: $color-white-01 !important;
		}
	}
	&.dark, &.black {
		&:not(.absolute-dark) {
			.logo {
				.logo-dark {
					display: none;
				}
				.logo-light {
					display: inline-block;
				}
				h1,h2,h3,h4,h5,h6 { color: $color-white; }
				a {
					color: $color-white;
					&:hover { color: $color-white; }
				}
			}
			.m-toggle {
				span {
					background: $color-white;
					&:before, &:after { background: $color-white; }
				}
			}
		}
	}
	&.dark { background: $bg-dark; }
	&.black { background: $color-black; }
}

@include breakpoint-above(lg) {
	.header {
		&.absolute-light {
			.header-menu-wrapper {
				.header-menu {
					.m-item {
						.m-link {
							color: $color-white-07;
							&:hover, &:focus { color: $color-white; }
							&.m-dropdown-toggle {
								&:before, &:after {
									background: $color-white-07;
								}
								&:hover {
									&:before, &:after {
										background: $color-white;
									}
								}
							}
						}
					}
				}
			}
			.header-menu-extra {
				a {
					&:not(.button, .button-circle) {
						color: $color-white-07;
						&:hover, &:focus { color: $color-white; }
					}
				}
			}
		}
		&.dark, &.black {
			&:not(.absolute-dark) {
				.header-menu-wrapper {
					.header-menu {
						.m-item {
							.m-link {
								color: $color-white-07;
								&:hover, &:focus { color: $color-white; }
								&.m-dropdown-toggle {
									&:before, &:after {
										background: $color-white-07;
									}
									&:hover {
										&:before, &:after {
											background: $color-white;
										}
									}
								}
							}
						}
					}
				}
				.header-menu-extra {
					a {
						&:not(.button, .button-circle) {
							color: $color-white-07;
							&:hover, &:focus { color: $color-white; }
						}
					}
				}
			}
		}
		.m-toggle {
			display: none;
		}
	}
	.header-menu-wrapper {
		.header-menu {
			height: 100%;
			.m-item {
				position: relative;
				display: inline-block;
				height: 100%;
				margin: 0 0 0 20px;
				&:first-child {
					margin-left: 0;
				}
				.m-link {
					display: inline-block;
					line-height: 80px;
				}
				.m-dropdown {
					position: absolute;
					top: 84px;
					left: 0;
					@include transform(translateY(10px));
					z-index: 990;
					visibility: hidden;
					opacity: 0;
					background: $color-white;
					width: 240px;
					@include box-shadow(0 6px 38px -4px rgba(24,27,30,0.14));
					border-radius: 0.375em;
					padding: 15px 0;
					@include transition(ease-out 0.14s);
					.m-dropdown-item {
						position: relative;
						display: block;
						margin: 0;
						padding: 0 15px;
						.m-dropdown-link {
							display: block;
							border-radius: 0.375em;
							padding: 8px 15px;
							&:hover {
								background: $bg-light-gray;
							}
						}
						.m-subdropdown {
							position: absolute;
							top: -15px;
							left: 244px;
							visibility: hidden;
							opacity: 0;
							background: $color-white;
							width: 240px;
							@include box-shadow(0 6px 38px -4px rgba(24,27,30,0.14));
							border-radius: 0.375em;
							padding: 15px;
							@include transition(linear 0.06s);
							.m-subdropdown-item {
								display: block;
								margin: 0;
								.m-subdropdown-link {
									display: block;
									border-radius: 0.375em;
									padding: 8px 15px;
									&:hover {
										background: $bg-light-gray;
									}
								}
							}
						}
						&:hover {
							.m-subdropdown {
								visibility: visible;
								opacity: 1;
							}
						}
					}
				}
				&:last-child, 
				&:nth-last-child(2) {
					.m-dropdown {
						right: 0;
						left: auto;
						.m-dropdown-item {
							.m-subdropdown {
								right: 244px;
								left: auto;
							}
						}
					}
				}
				&:hover {
					.m-dropdown {
						@include transform(translateY(0));
						visibility: visible;
						opacity: 1;
					}
				}
			}
		}
		.header-menu-extra {
			margin-left: 30px;
		}
	}
	.header-menu-extra {
		display: inline-block;
	}
	.container-fluid {
		.header-menu-wrapper {
			.header-menu {
				.m-item {
					&:not(:nth-child(1)) {
						.m-dropdown {
							right: 0;
							left: auto;
							.m-dropdown-item {
								.m-subdropdown {
									right: 244px;
									left: auto;
								}
							}
						}
					}
				}
			}
		}
	}
}
@include breakpoint-less(md) {
	.header {
		height: 70px;
	}
	.header-menu-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		@include transform(translateX(100%));
		z-index: 992;
		background: $color-white;
		width: 300px;
		height: 100%;
		@include box-shadow(0 0 40px 0 rgba(24,27,30,0.14));
		padding: 70px 30px 30px;
		@include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
		&.show {
			@include transform(translateX(0));
		}
		.header-menu {
			overflow-y: auto;
			width: 100%;
			max-height: 400px;
			.m-item {
				display: block;
				width: 100%;
				margin: 0 0 12px;
				&:last-child {
					margin: 0;
				}
				.m-link {
					&.m-dropdown-toggle {
						display: block;
						width: 100%;
					}
					&.active {
						color: $color-dark;
					}
				}
				.m-dropdown {
					display: none;
					background: $bg-light-gray;
					border-radius: 4px;
					margin-top: 4px;
					padding: 14px 20px;
					&.show {
						display: block;
					}
					.m-dropdown-item {
						margin: 0 0 8px;
						&:last-child {
							margin: 0;
						}
						.m-dropdown-link {
							&.m-subdropdown-toggle {
								display: block;
								width: 100%;
								padding-right: 13px;
								&:before {
									right: 3px;
									@include transform(translateY(-50%) rotate(45deg));
									margin-top: auto;
								}
								&:after {
									right: 0;
									@include transform(translateY(-50%) rotate(-45deg));
									margin-bottom: auto;
								}
							}
							&.active {
								color: $color-dark;
							}
						}
						.m-subdropdown {
							display: none;
							padding-top: 8px;
							padding-left: 16px;
							&.show {
								display: block;
							}
						}
					}
				}
			}
		}
		.header-menu-extra {
			position: absolute;
			right: 30px;
			bottom: 30px;
			left: 30px;
		}
		.close-button {
			visibility: visible;
		}
	}
	.header {
		&.absolute-light {
			&:not(.header-menu-wrapper .header-menu-extra) {
				.header-menu-extra {
					a {
						&:not(.button, .button-circle) {
							color: $color-white-07;
							&:hover, &:focus { color: $color-white; }
						}
					}
				}
			}
		}
	}
}

//
// Header Sizes //
//
@include breakpoint-above(lg) {
	.header-lg {
		height: 100px;
		.container-fluid {
			padding: 0 50px;
		}
		.logo {
			img {
				height: 72px;
				max-height: 72px;
			}
		}
		.header-menu-wrapper {
			.header-menu {
				.m-item {
					.m-link {
						line-height: 100px;
					}
					.m-dropdown {
						top: 104px;
					}
				}
			}
		}
	}
	.header-xl {
		height: 120px;
		.container-fluid {
			padding: 0 60px;
		}
		.logo {
			img {
				height: 90px;
				max-height: 90px;
			}
		}
		.header-menu-wrapper {
			.header-menu {
				.m-item {
					.m-link {
						line-height: 120px;
					}
					.m-dropdown {
						top: 124px;
					}
				}
			}
		}
	}
}
//
// Dropdown BG Colors //
//
@include breakpoint-above(lg) {
	.header-menu-wrapper {
		.header-menu {
			&.dropdown-transparent-white {
				.m-item {
					.m-dropdown {
						background: $color-white-09;
						.m-dropdown-item {
							.m-subdropdown {
								background: $color-white-09;
							}
						}
					}
				}
			}
			&.dropdown-black {
				.m-item {
					.m-dropdown {
						background: $color-black;
						.m-dropdown-item {
							.m-dropdown-link {
								&:hover {
									background: $color-white-01;
								}
							}
							.m-subdropdown {
								background: $color-black;
								.m-subdropdown-item {
									.m-subdropdown-link {
										&:hover {
											background: $color-white-01;
										}
									}
								}
							}
						}
					}
				}
			}
			&.dropdown-dark {
				.m-item {
					.m-dropdown {
						background: $bg-dark;
						.m-dropdown-item {
							.m-dropdown-link {
								&:hover {
									background: $color-white-01;
								}
							}
							.m-subdropdown {
								background: $bg-dark;
								.m-subdropdown-item {
									.m-subdropdown-link {
										&:hover {
											background: $color-white-01;
										}
									}
								}
							}
						}
					}
				}
			}
			&.dropdown-transparent-dark {
				.m-item {
					.m-dropdown {
						background: $color-dark-09;
						.m-dropdown-item {
							.m-dropdown-link {
								&:hover {
									background: $color-white-01;
								}
							}
							.m-subdropdown {
								background: $color-dark-09;
								.m-subdropdown-item {
									.m-subdropdown-link {
										&:hover {
											background: $color-white-01;
										}
									}
								}
							}
						}
					}
				}
			}
			&.dropdown-black, 
			&.dropdown-dark, 
			&.dropdown-transparent-dark {
				.m-item {
					.m-dropdown {
						color: $color-white-07;
						h1,h2,h3,h4,h5,h6 { color: $color-white; }
						a {
							&:not(.button, .button-circle) {
								color: $color-white-08;
								&:hover, &:focus { color: $color-white; }
							}
						}
						.m-dropdown-item {
							.m-dropdown-link {
								&.m-subdropdown-toggle {
									&:before, &:after {
										background: $color-white-07;
									}
									&:hover {
										&:before, &:after {
											background: $color-white;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

//
// Placeholder for Sticky Header //
//
.header-placeholder { height: 80px; }
.header-placeholder-lg { height: 100px; }
.header-placeholder-xl { height: 120px; }
@include breakpoint-less(md) {
	.header-placeholder, .header-placeholder-lg, .header-placeholder-xl { height: 70px; }
}