:root {
	--header-height: 7.4rem;
	--header-visible-height: 7.4rem;
}

body {
	padding-top: var(--header-height);
	&.has-banner {
		padding-top: 0;
	}
}

.header {
	// position: sticky; // causes scoll on offcanvas menu dismiss
	position: fixed;
	z-index: $z-index-header;
	top: 0;
	left: 0;
	right: 0;
	padding: $sp-2 0;
	min-width: $content-min-width;

	&:after {
		content:"";
		position: absolute;
		z-index: -1;
		top: 100%;
		left: 0;
		right: 0;
		height: $sp-4;
		max-width: 130rem;
		margin-left: auto;
		margin-right: auto;
		pointer-events: none;
		background: radial-gradient(ellipse at top, rgba(#000, .15), transparent 70%);
	}

	&:before {
		content:"";
		position: absolute;
		z-index: -1;
		inset: 0;
		background-color: $co-beta;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
	}

	body.has-banner:not(.scrolled-xs-top) &:after,
	body.has-banner:not(.scrolled-xs-top) &:before {
		opacity: 0;
	}

	> .container {
		display: flex;
		align-items: center;
	}
}

.header-logo {
	position: relative;
	width: 88px;
	margin-right: auto;
	margin-bottom: -30px;

	&:after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -$sp-2;
		background-color: $co-beta;
		border-radius: 50%;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
	}

	body.has-banner:not(.scrolled-xs-top) &:after {
		opacity: 0;
	}
}

.header-item {
	margin-left: $sp-2;
}


@include mediaQ(smMax) {
	.header-item-cta {
		.btn {
			padding: $sp-2 $sp-3;
			font-size: $font-size-xsmall;
		}
	}
}

@include mediaQ(sm) {
	:root {
		--header-height: 15.8rem;
		--header-visible-height: 8.8rem;
	}

	.header {
		padding: $sp-5 0;
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scrolled-xs-top & { transform: translate3d(0,-7rem,0); }
	}

	.header-logo {
		width: var(--logo-width);
		margin-bottom: -105px;
		transform: scale3d(1,1,1);
		transform-origin: 0 50%;
		transition: transform 0.3s ease-in-out;
		.scrolled-xs-top & { transform: scale3d(.5,.5,1); }

		&:after {
			inset: -$sp-4;
		}
	}

	.header-item {
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scrolled-xs-top & { transform: translate3d(0,3.5rem,0); }
		body.has-banner:not(.scrolled-xs-top) & { transform: translate3d(0,6rem,0); }
	}
}

@include mediaQ(bp) {
	.header-menu {
		margin-right: $sp-6;
		transform: translate3d(0,0,0);
		transition: transform .3s ease-in-out;
		.scrolled-xs-top & { transform: translate3d(0,3.5rem,0); }
		body.has-banner:not(.scrolled-xs-top) & { transform: translate3d(0,6rem,0); }
	}
}