/* 05.02. Header */
.site-header {
	position: relative;
	z-index: 999;
	margin-bottom: ptr(80);

	.page-template-template-front-page-slider-alt & {
		margin-bottom: 0;
	}
}

.header {
	display: flex;
	flex-flow: row wrap;
	align-items: center;

	@include media-breakpoint-up(lg) {
		align-items: stretch;
	}

	&__container {
		position: relative;
		background-color: #ffffff;
		box-shadow: 0 2px 4px #e2e2e2;
		z-index: 99;

		.page-template-template-front-page-slider & {
			box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
		}
	}

	// Logo
	&__logo {
		order: 1;
		width: calc(100% - #{ptr(110)});
		margin: ptr(30) 0;

		@include media-breakpoint-up(lg) {
			order: 2;
			width: 36%;
			text-align: center;
		}

		h1 {
			font-family: $tertiary-font;
			letter-spacing: $tertiary-font-letter-spacing;
			text-transform: uppercase;
			margin-bottom: 0;
			font-size: ptr(26);

			@include media-breakpoint-up(lg) {
				margin-top: ptr(30);
				margin-bottom: ptr(5);
				font-size: ptr(30);
			}
		}

		a {
			color: $gray-dark;

			&:focus,
			&:hover {
				text-decoration: none;
			}
		}

		img {
			width: auto;

			@include media-breakpoint-up(lg) {
				margin: 0 auto;
			}
		}
	}

	&__tagline {
		font-size: ptr(14);
	}

	&__navigation {
		order: 2;
		width: 100%;

		@include media-breakpoint-up(lg) {
			order: 4;
			width: 100%;
			border-top: 1px solid rgba(0, 0, 0, .1);
		}

		@at-root {
			// Sticky Navigation, .is-sticky-nav is added via JS (StickyNavbar.js)
			// scss-lint:disable SelectorFormat
			@include media-breakpoint-up(lg) {
				.is-sticky-nav {
					.header__navigation {
						position: fixed;
						top: 0;
						left: 0;
						z-index: 5;
						background-color: #ffffff;
						padding-left: 30px;
						box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
					}

					.header__navigation-widgets ~ .header__navigation {
						width: 100%;
						left: 0;
					}

					.header--no-nav-widgets {
						margin-top: 90px;
					}

					&.admin-bar {
						.header__navigation {
							top: 32px;
						}
					}
				}
			}

			@include media-breakpoint-up(xl) {
				.is-sticky-nav {
					.header__navigation {
						left: 0;
						width: 100%;
					}
				}
			}
		}
	}

	// All header widgets
	&__left-widgets,
	&__right-widgets,
	&__navigation-widgets {
		.widget {
			vertical-align: top;
			margin-bottom: ptr(23);
			text-align: center;

			@include media-breakpoint-up(lg) {
				margin-bottom: 0;
				text-align: inherit;
				display: inline-block;
			}
		}

		.btn {
			width: 100%;

			@include media-breakpoint-up(lg) {
				width: inherit;
			}
		}
	}

	// Header left widgets
	&__left-widgets {
		order: 3;
		width: 100%;

		@include media-breakpoint-up(lg) {
			order: 1;
			width: 32%;
			margin: ptr(60) 0;
		}

		.widget {
			@include media-breakpoint-up(lg) {
				margin-right: ptr(30);
			}

			&:last-of-type {
				@include media-breakpoint-up(lg) {
					margin-right: 0;
				}
			}
		}
	}

	// Header right widgets
	&__right-widgets {
		order: 4;
		width: 100%;

		@include media-breakpoint-up(lg) {
			order: 3;
			width: 32%;
			margin: ptr(60) 0;
			text-align: right;
		}

		.widget {
			@include media-breakpoint-up(lg) {
				margin-right: ptr(30);
			}

			&:last-of-type {
				@include media-breakpoint-up(lg) {
					margin-right: 0;
				}
			}
		}
	}

	// Navigation widgets
	&__navigation-widgets {
		order: 5;
		width: 100%;

		@include media-breakpoint-up(lg) {
			width: 20%;
			text-align: right;
			border-top: 1px solid rgba(0, 0, 0, .1);
			padding: ptr(22.5) 0;
		}

		.widget {
			@include media-breakpoint-up(lg) {
				display: inline-block;
				border-left: 1px solid rgba(0, 0, 0, .1);
				padding-left: ptr(30);
				margin-right: ptr(30);
			}

			&:last-of-type {
				@include media-breakpoint-up(lg) {
					margin-right: 0;
				}
			}
		}

		~ .header__navigation {
			@include media-breakpoint-up(lg) {
				width: 80%;
			}
		}
	}

	// Navbar Toggler
	&__navbar-toggler {
		order: 2;
		height: ptr(60);
		width: ptr(110);
		padding: 0;
	}
}

// scss-lint:disable SelectorFormat

// Header with logo on left side
.header--left-logo {
	.header__logo {
		@include media-breakpoint-up(lg) {
			text-align: center;
			width: 100%;
			margin: ptr(15) 0;
		}

		@include media-breakpoint-up(xl) {
			text-align: left;
			width: 30%;
		}

		img {
			@include media-breakpoint-up(xl) {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}

	.header__right-widgets {
		@include media-breakpoint-up(lg) {
			text-align: center;
			width: 100%;
			margin: ptr(45) 0;
		}

		@include media-breakpoint-up(xl) {
			text-align: right;
			width: 70%;
		}
	}
}