// Here is your main header stylings. You can modify all other, but in general
// try to keep the header stylings in here.
//
// Menu stylings file be found in components/mobile-menu


$header-widget-color: #666;
$header-toggle-background: #6c6c6c;
$fa-border-radius: 3px;

.site-header {
	position: relative;
	// height: $layout-header-height;

	.top {
		padding: 10px 0;
		background-color: #ff0045;
		background: linear-gradient(to right, #ff0045 0%, #ff5800 100%);
		height: auto;
		position: relative;
		min-height: 48px;

		.site-title {
			font-size: 1.2em;
			line-height: 1.2em;

			a {
				color: #FFF;
				font-weight: bold;
			}

			.site-description {
				color: #FFF;
			}
		}
	}

	.middle {
		background: #f7f7f7;

		.header-widgets {
			flex: 100%;
			display: none;

			.widget-area {
				display: flex;
				justify-content: space-between;
				flex-flow: row wrap;
				flex: 1;
				padding: 25px 0;
				margin-bottom: 15px;

				.widget {
					flex-basis: calc(33% - 15px);
					color: $header-widget-color;
					font-size: 14px;
					margin-bottom: 20px;

					@media (max-width: $breakpoint-small) {
						flex: 1 1 100%;
						margin: 10px 0px;
						padding: 0;
					}

					.rounded {
						font-size: 1.2em;
						margin-bottom: 10px;
					}

					abbr {
						text-decoration: none;
						border-bottom: none;
					}
				}
			}
		}

		.toggle-button {
			color: #95989A;
			cursor: pointer;
			transition: transform 1s;
			position: absolute;
			bottom: 0;
			right: 0;

			i {
				padding: 5px 10px;
				margin-top: 1px; //TODO: Test toggle button on retina display
				background: #fff;

				@media (max-width: $breakpoint-small) {
					background: none;
				}
			}

			.flip {
				transform: rotate(-180deg);
			}

			.description.toggled {
				display: none;
			}

			&.toggled {
				top: -1px;

				@media(max-width: $breakpoint-small) {
					top: auto;
					bottom: -42px;
					right: 10px;
					color: #FFF;
					background: $header-toggle-background;
					border-radius: 6px;
					padding-bottom: 1px;
				}

				@media (min-width: $breakpoint-small) {
					i {
						background: #eeeeee;
						color: #898989;
						border-bottom-right-radius: $fa-border-radius;
						border-bottom-left-radius: $fa-border-radius;
					}
				}
			}
		}
	}
}

.page-header {
	margin-bottom: 40px;
}

.site-branding {
	display: inline-block;

	&.hidden {
		opacity: 0;
		visibility: hidden;
	}
}

.site-search {
	display: inline-block;
	color: #FFF;

	.search-form {
		display: inline-block;

		.search-field {
			color: #FFF;
			background: transparent;
			transition: 0.3s all ease-in-out;
			border: none;

			&::placeholder {
				color: #FFF;
			}

			&::selection {
				background: #252525;
			}

			&:active,
			&:focus {
				color: #FFF;
				outline: none;
				border: none;
			}
		}
	}

	.search-submit {
		display: none;
	}
}

.is-open {
	display: block;
}

.is-hidden {
	display: none;
}