// HEADER
// 
// Layout
.tm-header {
	// .transition(all, ease-out, .3s);
	position: relative;
	z-index: 100;
	.tm-header-inner {
		height: 100px;
		.transition(all, ease-out, .3s);
	}
	&.headroom {
		@media @sm {
			position: absolute;
			top: 0;
		}
	}
	&.headroom--top {
		.site-title {
			a {
			}
		}
	}
	&.headroom--not-top,
	&.is-sticky {
		.tm-header-inner {
			height: 60px;
		}
		@media @sm {
			position: fixed;
			.box_shadow(3px, 5px, 10px, 0, rgba(0,0,0,0.175));
			.main-navigation {
				> ul,
				.menu > ul {
					> li {
						> a {
							line-height: 60px;
							padding: 0 10px;
						}
					}
					// Sub-menu level 1
					> li {
						> .sub-menu,
						> .children {
							top: 60px;
						}
					}
				}
			}
			.site-title {
				height: 60px;
				a {
					height: 60px;
					width: 60px;
				}
				span {
					line-height: 60px;
				}
			}
			.mobile-nav-toggle {
				top: 7px;
			}
			.gadgets {
				@media (max-width: @screen-sm-max) {
					display: none;
				}
				.g-button {
					line-height: 60px;
					a {
						border: 1px solid;
						.border_radius(3px);
						padding: 10px 15px;
						&.cart-only {
							border: none;
						}
					}
				}
			}
		}
	}
	&.box {
		&.headroom--top {
			.tm-header-inner {
				&:extend(.container);
				.container {
					max-width: 100%;
					padding: 0;
				}
			}
		}
	}
	&.fluid {
		&.headroom--top {
			.tm-header-inner {
				&:extend(.container-fluid);
				.container {
					max-width: 100%;
					padding: 0;
				}
			}
		}
	}
}

.tm-header {
	z-index: 10;
	width: 100% !important;
	-webkit-backface-visibility: hidden;
	&:extend(.header-color);
	.tm-header-inner {
		.clearfix();
		position: relative;
		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			opacity: 1;
			.transition(opacity, .3s, ease-out);
			&:extend(.header-bg-color);
		}
	}
	.site-title,
	.main-navigation,
	.gadgets {
		position: relative;
		z-index: 2;
	}
	.mobile-nav-toggle-wrapper {
		display: none;
		text-align: right;
		@media (max-width: @screen-sm-max) {
			width: 50%;
			float: left;
			display: block;
		}
	}
	.mobile-nav-toggle {
		@media (min-width: @screen-md-min) {
			display: none;
		}
		z-index: 2;
		border: none;
		background-color: transparent;
		background-image: none;
		cursor: pointer;
		padding: 0;
		margin: 0;
		position: relative;
		top: 28px;
		right: 5px;
		&:focus {
		  	outline: none;
		}
		.screen-reader-text {
			font-size: 0;
		}
		// Bars
		.icon-bar {
			.transition();
			display: block;
			width: 30px;
			height: 4px;
			margin: 5px 0;
			position: relative;
			top: 0;
			background: rgba(23,22,22,.5);
		}
		&.is-open {
			.icon-bar {
			}
			.icon-bar-2 {
			  	.opacity(0);
			}
			.icon-bar-1 {
				.transform(rotate(45deg));
				top: 9px;
			}
			.icon-bar-3 {
				.transform(rotate(-45deg));
				top: -10px;
			}
		}
	}
	.site-branding {
		@media (max-width: @screen-sm-max) {
			width: 50%;
			float: left;
		}
	}
	.site-title {
		position: relative;
		display: block;
		.clearfix;
		height: 100px;
		.transition;
		a {
			display: inline-block;
			height: 100px;
			width: 100px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			img {
				max-height: 100%;
				max-width: 100%;
				vertical-align: middle;
				position: relative;
				display: inline-block;
			}
		}
		span {
			display: none;
			line-height: 100px;
			text-transform: uppercase;
		}
		@media (max-width: @screen-sm-max) {
			span {
				font-size: 0;
			}
		}
	}
	.main-navigation {
		// Menu ground level
		@media (max-width: @screen-sm-max) {
			display: none;
		}
		ul {
			li {
				list-style: none;
			}
			padding: 0;
		}
		> ul,
		.menu > ul {
			text-align: right;
			> li {
				display: inline-block;
				position: relative;
				> a {
					line-height: 100px;
					padding: 0 15px;
					display: block;
					letter-spacing: .5px;
					&:extend(.header-color);
				}
				&.menu-item-has-children {
					> a {
						&:after {
							.font-awesome("\f107");
							margin-left: 5px;
							.opacity(.8);
							.transition(top, ease-in, .1s);
							position: relative;
							top: 0;
						}
					}
					&:hover {
						> a:after {
							top: 3px;
						}
					}
				}
			}
			// General sub-menu
			ul {
				display: none;
				text-align: left;
				li {
					position: relative;
					padding: 0 15px;
					&.menu-item-has-children {
						> a {
							&:after {
								.font-awesome("\f101");
								margin-left: 5px;
								.opacity(.8);
								.transition(left, ease-in, .1s);
								position: relative;
								left: 0;
							}
							&:before {
								content: '';
								display: block;
								width: 0;
								height: 0;
								border-left: 8px solid transparent;
								border-right: 8px solid transparent;
								border-bottom: 10px solid #222;
								position: absolute;
								bottom: 0;
								margin-left: -8px;
								left: 50%;
								.transition(opacity, .3s, ease-out);
								.opacity(0);
							}
						}
						&:hover {
							> a:after {
								left: 3px;
							}
						}
					}
					a {
						display: block;
						line-height: 40px;
						border-bottom: 1px solid rgba(255, 255, 255, 0.1);
						position: relative;
						&:extend(.header-color);
						&:before {
							content: '';
							display: block;
							width: 100%;
							height: 1px;
							background: rgba(0, 0, 0, 0.1);
							position: absolute;
							bottom: 0;
							left: 0;
						}
					}
					&:last-child {
						a {
							border-bottom: none;
							&:before {
								display: none;
							}
						}
					}
				}
			}
			// Sub-menu level 1
			> li {
				> .sub-menu,
				> .children {
					position: absolute;
					width: 250px;
					left: 0;
					top: 100px;
					margin-top: -20px;
					// Sub-menu level 2
					> li { 
						position: relative;
						> .sub-menu,
						> .children {
							position: absolute;
							width: 250px;
							left: 250px;
							top: 0;
						}
					}
				}
				&:nth-last-child(1),
				&:nth-last-child(2) {
					> .sub-menu,
					> .children {
						position: absolute;
						width: 250px;
						left: auto;
						right: 0;
						// Sub-menu level 2
						> li { 
							position: relative;
							> .sub-menu,
							> .children {
								position: absolute;
								width: 250px;
								left: -250px;
								top: 0;
							}
						}
					}
				}
			}
		}
	}
	.gadgets {
		@media (max-width: @screen-sm-max) {
			display: none;
		}
		.gadget {
			.transition(line-height, ease-out, .3s);
			a {
				.transition(color, ease-out, .3s);
			}
		}
		.g-button {
			line-height: 100px;
			a {
				border: 1px solid;
				.border_radius(3px);
				padding: 10px 15px;
				&.cart-only {
					border: none;
				}
			}
		}
		.g-search {
			display: inline-block;
			form {
				cursor: pointer;
				display: inline-block;
				position: relative;
				height: 35px;
				width: 30px;
				top: 10px;
				&:before {
					.font-awesome("\f002");
					line-height: 38px;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 2;
					width: 30px;
					text-align: center;
				}
			}
			input {
				background: transparent;
				display: inline-block;
				position: absolute;
				top: 0;
				right: 0;
				box-shadow: none !important;
				padding: 0 10px;
				.border_radius(3px);
				height: 40px;
				width: 30px;
				border: 1px solid;
				.border_radius(3px);
				.transition();
				&::-webkit-input-placeholder {
					color: fade(@tm-primary, 0);
				}
				&:-moz-placeholder {
					color: fade(@tm-primary, 0);
				}
				&::-moz-placeholder {
					color: fade(@tm-primary, 0);
				}
				&:-ms-input-placeholder {
					color: fade(@tm-primary, 0);
				}
			}
			button {
				display: none;
				position: absolute;
				top: 0;
				right: 0;
				margin: 0;
				padding: 0;
				font-size: 13px;
				height: 39px;
				border: none;
				width: 30px;
				background: transparent;
				&:focus {
					outline: none;
				}
			}
			form {
				&.is-open {
					input {
						width: 200px;
						background: #f7f7f7 !important;
						color: fade(@tm-primary, 100%);
						&::-webkit-input-placeholder {
							color: fade(@tm-primary, 100%);
						}
						&:-moz-placeholder {
							color: fade(@tm-primary, 100%);
						}
						&::-moz-placeholder {
							color: fade(@tm-primary, 100%);
						}
						&:-ms-input-placeholder {
							color: fade(@tm-primary, 100%);
						}
					}
				}
			}
		}
	}
}

// Preset / Logo center
.tm-header.logo-center {
	.site-title {
		@media (min-width: @screen-md-min) {
			margin-top: 30px;
			display: block;
			text-align: center;
		}
		span {
			display: none !important;
		}
	}
	.tm-header-inner {
		height: auto;
	}
	&.headroom--not-top,
	&.is-sticky {
		.site-title {
			display: none;
		}
	}
	.main-navigation {
		> ul {
			text-align: center;
		}
	}
}

/* Mobile menu
--------------------------- */
body {
	.transition(right, ease-out, .3s);
	right: 0;
	position: relative;
	&.mobile-menu-is-open {
		@media (max-width: @screen-sm-max) {
			right: 80%;
		}
	}
	&.admin-bar {
		@media @sm {
			.tm-header {
				&.headroom--not-top {
					margin-top: 32px;
				}
			}
		}
		.tm-mobile-menu {
			// top: 46px;
		}
	}
	#wpadminbar {
		// top: 0;
		position: fixed;
	}
}

.tm-top-bar {
  	height: 40px;
  	&.disabled {
  		display: none;
  	}
  	&.box {
		&:extend(.container);
		.container {
			max-width: 100% !important;
		}
  	}
  	&.wide {
		&:extend(.container-fluid);
		.container {
			max-width: 100% !important;
		}
  	}
}

.tm-mobile-menu {
	position: fixed;
	z-index: 11;
	width: 80%;
	height: 100%;
	top: 0;
	right: -80%;
	background: #111;
	padding: 15px;
	overflow: scroll;
	.transition(right, ease-out, .3s);
	&.is-open {
		box-shadow: -3px 0 5px rgba(0, 0, 0, .1);
		right: 0;
	}
}

.tm-mobile-menu {
	.search-form {
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,.1);
		padding-bottom: 15px;
		color: #555;
		input {
			box-shadow: none !important;
			padding: 6px 12px 6px 40px;
			.border_radius(3px);
			display: block;
			width: 100%;
			height: 34px;
			font-size: 14px;
			border: none;
			background: #f1f1f1;
			color: #555;
			input[type="text"] {
				&::-webkit-input-placeholder {
					color: #aaa;
				}
				&:-moz-placeholder {
					color: #aaa;
				}
				&::-moz-placeholder {
					color: #aaa;
				}
				&:-ms-input-placeholder {
					color: #aaa;
				}
			}
		}
		button {
			margin: 0;
			padding: 0 0 0 15px;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 20px;
			height: 34px;
			border: none;
			background: transparent;
			i {
				position: relative;
				top: -6px;
			}
		}
	}
}

.tm-mobile-menu .mobile-nav {
	// Root menu list
	> ul {
		margin: 0;
		padding: 0;
		li {
			border-bottom: 1px solid rgba(255,255,255,.1);
			position: relative;
			.sub-menu-toggle {
				display: none;
				.font-awesome("\f078");
				margin-left: 10px;
				color: rgba(255,255,255,.3);
				position: absolute;
				right: 0;
				top: 0;
				line-height: 40px;
				cursor: pointer;
				border-left: 1px solid rgba(255,255,255,.05);
				padding: 0 15px;
				display: none;
			}
			a {
				display: block;
				line-height: 40px;
				color: #ccc;
			}
			ul {
				display: none;
				padding-left: 15px;
			}
			&.menu-item-has-children {
				> .sub-menu-toggle {
					display: block;
				}
				// sub-menu opening state
				&.is-open {
					> a {
					}
					> .sub-menu-toggle {
						&:before {
							content: '\f077';
						}
					}
				}
			}
		}
		// Level 1 menu
		> li {
			> a {
			}
			// Level 2 menu
			> ul {
			//display: none;
				li {
					&:last-child {
						border-bottom: none;
					}
					// Level 3 menu
					> ul {
					}
				}
			}
		}
	}
}