$o-header-logo-horizontal-offset: 		60px + 163px; // + logo width
$o-header-logo-horizontal-offset-large:	100px + 163px; // + logo width

.o-header {
	@include z(z-header);
	flex: 0;
	position: relative;
	background: palette(neutral, 800); // fallback
	background: linear-gradient(
			0deg,
			transparent 0,
			transparent #{$site-header-bg-offset},
			palette(neutral, 800) #{$site-header-bg-offset},
			palette(neutral, 800) 100%
	);

	&.is-sticky {
		opacity: 0;
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		background: palette(neutral, 800);
		box-shadow: 0 -5px 30px black;
		transform: translateY(-100%);
		transition-property: transform, opacity;
		transition-duration: 500ms;
		transition-delay: 0s, 500ms;
		transition-timing-function: cubic-bezier(0.73, 0.35, 0.44, 0.88);

		@include mq($max: mainnav) {
			.is-sticky-header-visible & {
				opacity: 1;
				transform: none;
				transition-delay: 0s;
			}
		}
	}
}


.o-header__main {
	@include contain;
	padding: space(3) 0 space(3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


// left side white overlay over logo with red image
.o-header__decoration {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(#{$o-header-logo-horizontal-offset} + (100% - (100% / #{$site-columns + 2}) * #{$site-columns})/2);
	background: url('/img/wave.jpg');
	background-size: cover;

	@include mq($bp-max){
		width: calc(#{$o-header-logo-horizontal-offset} + ((100% - #{$site-max-width}px)/2));
	}

	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		background-repeat: no-repeat;
	}

	// Top side angle (white)
	&::before {
		top: 0;
		left: 0;
		background-image: linear-gradient(0deg, #fff, #fff 100%),
						  url('/img/headerAngleTop.svg');
		background-size: 100% 144px, contain;
		background-position: 0 0, 0 143px;
	}

	// Right side angle (dark blue)
	&::after {
		bottom: 0;
		right: 0;
		background-image: url('/img/headerAngleRight.svg');
		background-size: cover;
	}
}


.o-header__logo {
	flex: none;
	height: 96px;
	margin-right: auto;

	&:focus {
		outline-offset: 2px;
		outline-color: palette(action);
	}
}


.o-header__secondary-nav {
	display: none;

	@include mq(mainnav) {
		display: block;
		margin-bottom: space(3);
		margin-left: auto;
	}
}


.o-header__main-nav {
	display: none;

	@include mq(mainnav) {
		display: block;
		margin-left: auto;
	}
}


.o-header__toggle {
	@include mq(mainnav) {
		display: none;
	}
}


// Gets replaced with o-header__hero when variable is set to $heroIsActive
.o-header__intro {
	@include contain;
	@include template(content, visual);
	margin-bottom: -$site-header-bg-offset;
	display: grid;
	grid-column-gap: column(0.5,12);
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"content"
		"visual";

	// Set side by side from medium viewports and up
	@include mq($o-detail-intro-bp1) {
		grid-template-columns: 6fr 5.5fr;
		grid-template-rows: auto;
		grid-template-areas: "content visual"
	}

	// extra background below intro element
	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		bottom: 0;
		left: 0;
		right: column(1);
		height: $site-header-bg-offset;
		background-color: palette(neutral, 800);

		@include mq($bp-max){
			right: calc(((100% - #{$site-max-width}px)/2));
		}
	}
}


.o-header__content {
	@include vspacing('padding-bottom' 1);
	padding-top: space(12);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: palette(neutral, 0);
}


.o-header__visual {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}


// Gets replaced with o-header__intro when not set
.o-header__hero {
	position: relative;

	.o-header--hero-large & {
		position: relative;
		background-size: 50% 100%;
		background-position: right;
		background-repeat: no-repeat;
		background-image: linear-gradient(
			0deg,
			palette(neutral, 100) 0,
			palette(neutral, 100) 50%,
			palette(neutral, 800) 50%,
			palette(neutral, 800) 100%
		);
	}
}


// Simple version without nav & other styling
.o-header.is-simple {
	overflow: hidden;
	background: palette(neutral, 800);

	.o-header__decoration {
		background: palette(neutral, 0);
		width: calc(#{$o-header-logo-horizontal-offset-large} + (100% - (100% / #{$site-columns + 2}) * #{$site-columns})/2);

		@include mq($bp-max){
			width: calc(#{$o-header-logo-horizontal-offset-large} + ((100% - #{$site-max-width}px)/2));
		}

		&::before {
			background-image: url('/img/wave.jpg');
			transform: skewX(-20deg) translateX(calc(100% - 30px));
		}
		&::after {
			display: none;
		}
	}

	// Only used in simple header
	.o-header__info {
		display: none;

		@include mq(624) {
			display: block;
		}
	}
}