/*!
 * ## - Header
 */
// @package Jarvis

.site-header {

	position: relative;
	padding-bottom: $grid-line-height * 3;
	background-size: cover;
	background-position: center;

	@include for-tablet {

		padding-bottom: $grid-line-height * 4;

	}

	@include for-desktop {

		padding-bottom: $grid-line-height * 8;

	}

	.has-header-image & {

		--foreground-color: #fff;
		--foreground-contrast-color: #000;

		margin-bottom: $grid-line-height * 3;

		&:before {

			display: block;
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: rgba( black, 0.3 );

		}

	}

	.site-header-content {

		z-index: layer( header_content );
		position: relative;
		padding: $grid-line-height $grid-gutter;

		> * + * {

			margin-top: ( $grid-line-height / 2 );

		}

	}

	.custom-logo-link {

		img {

			width: auto;

		}

	}

	.branding {

		.site-title a,
		.site-title {

			font-family: var( --font-title );
			@include modular-scale( delta, 1.2 );
			font-weight: bold;
			margin: 0;

		}

		.site-title a {

			text-decoration: none;

			&:focus,
			&:hover {

				text-decoration: underline;

			}

		}

		.site-description {

			@include post-meta-data();
			margin: 0;

		}

	}

	.search-link {

		display: flex;
		align-items: center;
		padding: ( $grid-line-height ) ( $grid-gutter * 2 );
		background: $black;
		color: $white;

		.icon {

			height: $grid-line-height;
			width: $grid-gutter;
			margin-inline-end: ( $grid-gutter / 2 );

		}

		@include for-tablet {

			justify-content: center;
			color: $black;

			width: $grid-gutter * 2;
			height: $grid-line-height * 2;
			margin: 0;

			position: absolute;
			top: $grid-line-height;
			right: $grid-gutter;
			left: auto;

			background: transparent;
			padding: 0;

			span {

				display: none;

			}

			.icon {

				margin: 0;

			}

		}

	}

	.menu-toggle {

		text-align: start;
		display: block;
		width: 100%;

		@include for-tablet {

			display: none;

		}

	}

}

