@keyframes slidein-header {
	from {
		top: calc(-1 * 2 * var(--header-height));
	}

	to {
		top: 0;
	}
}

.header {
	background: var(--color-white);
	box-shadow: 0 2px 5px 1px rgb(0 0 0 / 10%);
	position: relative;
	z-index: 999;
}

.container--header {
	max-width: var(--content-width);
	padding: 0;
}

.header--sticky {
	top: 0;
	animation: slidein-header 1s var(--animation-timing-function);
	position: sticky;
}

.header__wrap {
	background-color: var(--color-white);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--hr-base-unit);
	padding: 0 var(--hr-spacing-2);
	height: var(--header-height);
}

.header__wrap--navactive {
	background-color: var(--color-dark-gray);
}

.header__logo {
	flex: 0 0 var(--logo-width);
}

.logo {
	object-fit: contain;
}

.logo--white {
	display: none;
}

.header__wrap--navactive .logo {
	display: none;
}

.header__wrap--navactive .logo--white {
	display: block;
}

.header__nav {
	position: relative;
}

@media screen and (min-width: 1000px) {
	.container--header {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 var(--hr-spacing-2);
	}

	.header__wrap {
		display: block;
		flex-flow: unset;
		justify-content: unset;
		align-items: unset;
		gap: unset;
		height: auto;
		padding: 0;
		flex: 0 0 var(--logo-width);
	}

	.header__nav {
		flex: 1 1 auto;
	}

	.header__logo {
		flex: unset;
	}
}

@media screen and (min-width: 1300px) {
	.container--header {
		padding: 0;
	}
}