/* 05.02. Header */
.header {
	display: flex;
	flex-flow: row wrap;
	line-height: 1.6;

	&__container {
		position: relative;
		z-index: 1;
		background-color: #2f538a;

		&::after {
			@media (min-width: $screen-md-min) {
				position: absolute;
				content: '';
				right: 0;
				bottom: -50px;
				width: calc(50% - #{($container-desktop - $grid-gutter-width) / 2});
				height: 100px;
				background-color: #ffffff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
			}

			@media (min-width: $screen-lg-min) {
				width: calc(50% - #{($container-large-desktop - $grid-gutter-width) / 2});
			}
		}
	}

	&__logo {
		order: 1;
		width: 100%;
		padding-top: 20px;

		@media (min-width: $screen-md-min) {
			height: 120px;
			width: 25%;
		}

		img {
			display: inline-block;
			width: 60%;

			@media (min-width: 400px) {
				width: auto;
			}
		}

		h1 {
			display: inline-block;
			color: #ffffff;
		}
	}

	&__widgets {
		order: 3;
		width: 100%;

		@media (min-width: $screen-md-min) {
			display: flex;
			padding: 30px 0;
			justify-content: flex-end;
			order: 2;
			width: 75%;
		}

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

			&:last-of-type {
				margin-bottom: 20px;

				@media (min-width: $screen-md-min) {
					margin-bottom: 0;
				}
			}
		}

		.btn {
			width: 100%;

			@media (min-width: $screen-md-min) {
				width: auto;
			}
		}
	}

	&__navigation {
		order: 2;
		width: 100%;
		background-color: #ffffff;
		border-radius: 2px;

		@media (min-width: $screen-md-min) {
			order: 3;
			margin-bottom: -50px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
			width: 80%;
			min-height: 100px;
		}

		@at-root {
			// Sticky Navigation, .is-sticky-nav is added via JS (StickyNavbar.js)
			// scss-lint:disable SelectorFormat
			@media (min-width: $screen-md-min) {
				.is-sticky-nav {
					.header__navigation {
						position: fixed;
						top: 0;
						left: calc(50% - #{($container-md / 2) - 15px});
						width: ($container-md - 30px);
						z-index: 5;
						border-radius: 0 0 2px 2px;
					}

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

					.header__navigation-widgets::before {
						display: none;
					}

					.header--no-nav-widgets {
						.header__navigation {
							position: fixed;
							width: ($container-md - 30px);
						}

						.header__logo {
							margin-bottom: 50px;
						}
					}
				}
			}

			@media (min-width: $screen-lg-min) {
				.is-sticky-nav {
					.header__navigation,
					.header--no-nav-widgets .header__navigation {
						left: calc(50% - #{($container-lg / 2) - 15px});
						width: ($container-lg - 30px);
					}
				}
			}
		}
	}

	@media (min-width: $screen-md-min) {
		&--no-nav-widgets {
			.header__navigation {
				width: 100%;
				position: relative;

				// hide shadow on the right
				&::after {
					position: absolute;
					content: '';
					right: 0;
					width: 5px;
					background-color: #ffffff;
					top: 0;
					bottom: 0;
					z-index: 2;
				}
			}
		}
	}

	&__navigation-widgets {
		order: 4;
		z-index: 1;
		position: relative;
		width: 100%;

		@media (min-width: $screen-md-min)  {
			display: flex;
			justify-content: flex-end;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
			width: 20%;
			margin-bottom: -50px;
			background-color: #ffffff;
			padding: 19px 0;
		}

		.widget {
			&:last-of-type {
				margin-bottom: 20px;

				@media (min-width: $screen-md-min) {
					margin-bottom: 0;
				}
			}
		}

		&::before,
		&::after {
			@media (min-width: $screen-md-min) {
				position: absolute;
				content: '';
				background-color: #ffffff;
				top: 0;
				height: 100%;
				width: 3px;
			}
		}

		&::before {
			@media (min-width: $screen-md-min) {
				left: -3px;
			}
		}

		&::after {
			@media (min-width: $screen-md-min) {
				right: -3px;
			}
		}
	}

	.widget {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid rgba(250, 250, 250, .1);

		@media (min-width: $screen-md-min) {
			margin-top: 0;
			padding-top: 0;
			border-top: 0;
		}
	}
}

.header__widgets + .header__navigation-widgets {
	.widget {
		&:first-of-type {
			margin-top: 0;
		}
	}
}