// Landing page header (resources/views/front/partials/landing-header.blade.php).
// Translucent logo/phone bar over the hero photo, tagline at the bottom of the photo,
// thin sage edge under the photo.
.landing-header {
	position: relative;
	// Space between the hero and the three service links below it.
	margin-bottom: 1.5rem;

	@include media-breakpoint-up(lg) {
		margin-bottom: 3rem;
	}

	// The site-wide "* { color: grey }" rule would turn the phone number and tagline grey.
	* { color: inherit; }

	&__bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .35);
		color: $white;
	}

	&__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 72px;

		// Wider than the 1140px content container: logo and phone sit 6% in from the screen edges.
		@include media-breakpoint-up(lg) {
			height: 140px;
			max-width: none;
			padding-left: 6%;
			padding-right: 6%;
		}
	}

	&__logo img {
		display: block;
		width: 150px;
		height: auto;

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

	&__phone {
		display: flex;
		align-items: center;
		color: $white;
		font-family: $primary-font;
		font-weight: 300;
		font-size: 1rem;
		letter-spacing: .02em;
		white-space: nowrap;

		// public/uploads/images/icons/Icon awesome-phone-alt.svg (its own sage colour).
		&-icon {
			display: block;
			width: .9em;
			height: .9em;
			margin-right: .5em;
		}

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

		@include media-breakpoint-up(lg) {
			font-size: 2rem;
		}
	}

	&__hero {
		position: relative;
		border-bottom: 12px solid $primary;
	}

	&__image {
		display: block;
		width: 100%;
		object-fit: cover;

		// Phones and tablets (below 992px): nearly the full screen height, cropped to fill.
		// svh = the screen height with the browser's address bar showing, so the hero doesn't
		// jump when that bar slides away; vh is the fallback for older browsers.
		@include media-breakpoint-down(md) {
			height: 85vh;
			height: 85svh;
			min-height: 420px;
		}

		@include media-breakpoint-up(lg) {
			height: 48vw;   // about 925px tall on a 1920px screen, as in the design
			max-height: none;
		}
	}

	&__tagline {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4%;
		text-align: center;
		color: $white;

		h1 {
			margin: 0;
			color: $white;
			font-family: $primary-font;
			font-weight: 300;
			font-size: 1.375rem;
			line-height: 1.25;
			text-transform: none;
			letter-spacing: normal;
			text-shadow: 0 1px 10px rgba(0, 0, 0, .35);

			@include media-breakpoint-up(lg) {
				font-size: 2.75rem;
			}
		}

		strong, b {
			font-weight: 500;
		}
	}
}