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

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) & {
		&:before {
			opacity: 0;
		}
		&:after {
			opacity: 0;
		}
	}

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

.header-logo {
	width: 111px;
	margin-right: auto;

	body:not(.has-banner) & {
		.is-2 {
			display: none;
		}
	}

	.has-banner:not(.scrolled-xs-top) & {
		.is-1 {
			display: none;
		}
	}
	.has-banner.scrolled-xs-top & {
		.is-2 {
			display: none;
		}
	}
}

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

	.has-banner:not(.scrolled-xs-top) & {
		.btn.has-outline {
			color: $co-base-1 !important;
		}
		.link-alpha {
			color: $co-base-1 !important;
		}
	}
}

@include mediaQ(smMax) {
	.header-item {
		.btn {
			padding: $sp-1 $sp-4; // bit sm
			font-size: $font-size-small;
		}
	}
}

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

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

	.header-logo {
		width: auto;
		transform: scale3d(1,1,1);
		transform-origin: 0 150%;
		transition: transform 0.3s ease-in-out;
		.scrolled-xs-top & { transform: scale3d(.78,.78,1); }
	}

	.header-item {
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scrolled-xs-top & { transform: translate3d(0,2.2rem,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,2.2rem,0); }
	}

	.header-item {
		&-lang {
			margin-left: $sp-4;
		}
	}
}