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

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

.header {
	// position: sticky; // causes scoll on offcanvas menu dismiss
	position: fixed;
	z-index: $z-index-header;
	top: 0;
	left: 0;
	right: 0;
	padding: $sp-3 0;
	min-width: $content-min-width;
	background-color: rgba($co-base-1, .95);

	&: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%);
	}

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

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

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

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

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

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

	.header-item {
		transform: translate3d(0,0,0);
		transition: transform 0.3s ease-in-out;
		.scolled-xs-top & { transform: translate3d(0,$sp-3,0); }
	}
}

@include mediaQ(bp) {
	.header-menu {
		transform: translate3d(0,0,0);
		transition: transform .3s ease-in-out;
		.scolled-xs-top & { transform: translate3d(0,$sp-3,0); }
	}
}