.he-site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	border-bottom: 1px solid var(--he-color-border-light);
	background: var(--he-color-header-backdrop);
	backdrop-filter: blur(var(--he-space-4));
	-webkit-backdrop-filter: blur(var(--he-space-4));
}

.he-site-header__container {
	max-width: 80rem;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--he-space-16);
	padding-left: var(--he-space-16);
}

.he-site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--he-space-80);
}

.he-primary-navigation {
	display: none;
	align-items: center;
	gap: var(--he-space-32);
}

.he-mobile-navigation {
	display: block;
	padding-top: var(--he-space-16);
	padding-bottom: var(--he-space-16);
	border-top: 1px solid var(--he-color-border-light);
	background-color: var(--he-color-background);
}

.he-mobile-navigation[hidden] {
	display: none;
}

.site-main {
	display: block;
}

@media (min-width: 640px) {
	.he-site-header__container {
		padding-right: var(--he-space-24);
		padding-left: var(--he-space-24);
	}
}

@media (min-width: 768px) {
	.he-primary-navigation {
		display: flex;
	}

	.he-mobile-navigation {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.he-site-header__container {
		padding-right: var(--he-space-32);
		padding-left: var(--he-space-32);
	}
}