.o-header {
	@include z(z-header);
	@include template(logo, primary, toggle, dropdown, search, account, cart);
	position: relative;
	display: flex;
	min-height: 160px;
	flex-direction: column;
	color: palette(neutral, 0);

	@include mq($bp-header-2) {
		min-height: 264px;
	}

	&.is-sticky {
		min-height: auto; // Reset from normal header
		opacity: 0;
		position: fixed;
		z-index: 50;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -5px 30px black;
		transform: translateY(-100%);
		transition-property: transform, opacity;
		transition-duration: 300ms;
		transition-delay: 0s, 300ms;
		transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

		.is-sticky-header-visible & {
			opacity: 1;
			transform: none;
			transition-delay: 0s;
		}
	}

	&.is-header-clean {
		min-height: auto;
	}
}





// Background image
.o-header__bg {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: palette(neutral, 400);
	background-position: center top;
	background-size: cover;
	clip-path: ellipse(75vmax 100% at 50% 0);

	background-image: url('/img/headers/default/hero-900.jpg');
	@include mq(950) { background-image: url('/img/headers/default/hero-1400.jpg'); }
	@include mq(1500) { background-image: url('/img/headers/default/hero.jpg'); }

	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
	}
	// small shade on the top for readability nav items
	&::before {
		height: 18.89%;
		width: 100%;
		opacity: 0.5;
		background-image: linear-gradient(180deg, #000000 37%, rgba(0,0,0,0.00) 100%);
	}
	// full width shade to darken image
	&::after {
		height: 100%;
		width: 100%;
		opacity: 0.2;
		background-color: #000000;
	}

	.is-header-clean & {
		display: none;
	}

	&.o-header__bg--has-other-image {
		background-image: none;
	}
}

.o-header__bg-image {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.o-header__bg-image--large {
	@include mq(1500) {
		display: block;
	}
}

.o-header__bg-image--medium {
	@include mq(900, 1500) {
		display: block
	}
}

.o-header__bg-image--small {
	@include mq($max: 900) {
		display: block;
	}
}


.o-header__bg--red {
	background-image: none;
	background-color: palette(primary);

	&::before,
	&::after {
		display: none;
	}
}


.o-header__main {
	@include contain;
	display: grid;
	position: relative;
	justify-content: space-between;
	align-items: center;
	padding-bottom: space(2);

	@include mq($max: $bp-header-2) {
		grid-template-columns: auto 1fr auto auto;
		grid-template-rows: auto auto;
		grid-gap: space(1);
		grid-template-areas:
			"toggle logo cart"
			"search search search";
		padding-top: space(2);
	}

	@include mq($bp-header-2) {
		grid-template-columns: auto auto 1fr auto auto;
		grid-template-rows: auto 1fr;
		grid-column-gap: space(1);
		grid-template-areas:
			"logo primary primary primary"
			"logo dropdown search cart";
	}
	@include mq($bp-header-3) {
		grid-column-gap: space(3);
	}
}


.o-header__logo {
	color: palette(neutral, 0);
	transition: all $site-header-light-speed ease-in-out;

	@include mq($max: $bp-header-2) {
		& > svg {
			max-width: 85px;
			max-height: 48px;
		}
	}

	@include mq($bp-header-2) {
		width: 141px;
		margin-top: space(2);
		margin-right: space(3);
	}

	// When header is hovered link color needs to change also
	.is-header-light & {
		color: palette(primary);
	}

	&:hover {
		opacity: 0.7;
	}
}


.o-header__img {
	max-height: space(6);
	width: 100px;
}

.o-header__toggle {
	display: flex;
	justify-content: center;

	@include mq($bp-header-2) {
		display: none;
	}
}


// When hovering over the top of the header we make it white
// Some text colors need to be reset also
.o-header__top {
	position: relative;
	z-index: 2;
	transition: all $site-header-light-speed ease-in-out;

	.is-header-light & {
		background-color: palette(neutral, 0);
		color: palette(neutral, 1000);
	}

	.is-header-clean & {
		background-color: transparent;
		color: palette(text);
	}
}


.o-header__primary {
	display: none;

	@include mq($bp-header-2) {
		display: block;
	}
}


.o-header__secondary {
	display: flex;
}


.o-header__dropdown {
	display: none;

	@include mq($bp-header-2) {
		display: block;
	}
}


.o-header__search {
	flex: 1;
	align-self: stretch;
}


.o-header__button {
	@include border-radius(s);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: space(6);
	height: space(6);
	color: palette(neutral, 0);
	background-color: rgba(palette(neutral, 100), 0.2);
	text-decoration: none;
	transition: all $site-header-light-speed ease-in-out;

	@include mq($bp-header-1) {
		width: space(9);
	}

	// When header is hovered link color needs to change also
	.is-header-light & {
		color: palette(neutral, 1000);
		background-color: palette(neutral, 100);
	}

	&:hover {
		background-color: palette(neutral, 200);
	}
}


// Modifier for the homepage
.o-header--home {
	min-height: 400px; // for small viewport
	height: 50vw; // for large viewport
	max-height: 720px;

	.o-header__bg {
		clip-path: ellipse(100% 100% at 50% 0);
	}
}


// Optional content part of the header
.o-header__content {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: space(3);
}


.o-header__headline {
	@include font-size(xl);
	@include font-weight('bold');
	text-align: center;
	text-shadow: 0 0 40px rgba(0,0,0,0.80);

	@include mq(530){
		@include font-size(xxl);
	}
	@include mq(m){
		@include font-size(xxxl);
	}
	@include mq(l){
		@include font-size(xxxxl);
	}
}


.o-header__cta {
	margin-top: space(4);
}

.o-header__shopping-cart {
  position: relative;

  &[data-items] {
    &:before {
      content: attr(data-items);
      position: absolute;
      left: calc(100% - 5px);
      bottom: calc(100% - 10px);

      display: flex;
      justify-content: center;
      align-items: center;
      height: 20px;
      padding: 0 7px;
      background-color: palette(primary);

      color: white;
      text-align: center;
      border-radius: 10px;
      @include font-size(xs);
      @include font-weight('bold');
    }
  }
}

// Custom backgrounds for specific pages
//.o-header__bg {
//	#about & {
//		background-image: url('/img/header-about.jpg');
//	}
//	#caterers & {
//		background-image: url('/img/header-caterers.jpg');
//	}
//	#contact & {
//		background-image: url('/img/header-contact.jpg');
//	}
//	#workflow & {
//		background-image: url('/img/header-workflow.jpg');
//	}
//	#references & {
//		background-image: url('/img/header-references.jpg');
//	}
//}