.he-site-header__controls {
	display: flex;
	align-items: center;
	gap: var(--he-space-16);
}

.he-header-utilities {
	display: flex;
	align-items: center;
	gap: var(--he-space-8);
}

.he-header-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: var(--he-space-8);
	color: var(--he-color-text-dark);
	border-radius: 999px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.he-header-icon:hover,
.he-header-icon:focus-visible,
.he-primary-navigation__more > summary:hover,
.he-primary-navigation__more > summary:focus-visible,
.he-mobile-navigation__toggle:hover,
.he-mobile-navigation__toggle:focus-visible {
	background-color: var(--he-color-surface-soft);
}

.he-header-icon:hover,
.he-header-icon:focus-visible {
	transform: translateY(-1px);
}

.he-header-icon svg,
.he-primary-navigation__more svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.he-header-icon__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--he-color-amber);
	color: var(--he-color-background);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

[data-he-theme-icon="sun"] {
	display: none;
}

html[data-theme="dark"] [data-he-theme-icon="moon"] {
	display: none;
}

html[data-theme="dark"] [data-he-theme-icon="sun"] {
	display: block;
}

.he-primary-navigation__menu {
	align-items: center;
	gap: var(--he-space-24);
}

.he-primary-navigation__item {
	position: relative;
}

.he-primary-navigation__item > a,
.he-primary-navigation__more > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--he-space-8);
	padding: var(--he-space-8) 0;
	color: var(--he-color-text-dark);
	border-bottom: 2px solid transparent;
	font-family: var(--he-font-body);
	font-size: var(--he-type-nav-size);
	font-weight: 500;
	line-height: var(--he-type-nav-line-height);
	letter-spacing: var(--he-type-nav-letter-spacing);
	text-transform: uppercase;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.he-primary-navigation__item.is-current > a,
.he-primary-navigation__item > a:hover,
.he-primary-navigation__item > a:focus-visible,
.he-primary-navigation__more[open] > summary,
.he-primary-navigation__more > summary:hover,
.he-primary-navigation__more > summary:focus-visible {
	color: var(--he-color-amber);
	border-bottom-color: var(--he-color-amber);
}

.he-primary-navigation__more {
	position: relative;
}

.he-primary-navigation__more > summary {
	list-style: none;
	cursor: pointer;
}

.he-primary-navigation__more > summary::-webkit-details-marker {
	display: none;
}

.he-primary-navigation__overflow-menu {
	position: absolute;
	top: calc(100% + var(--he-space-12));
	right: 0;
	min-width: 13rem;
	padding: var(--he-space-12);
	border: 1px solid var(--he-color-border-light);
	border-radius: calc(var(--he-radius-base) * 1.5);
	background-color: var(--he-color-background);
	box-shadow: 0 20px 50px rgba(17, 24, 39, 0.16);
}

.he-primary-navigation__overflow-menu li + li {
	margin-top: var(--he-space-4);
}

.he-primary-navigation__overflow-menu a {
	display: block;
	padding: var(--he-space-10) var(--he-space-12);
	border-radius: var(--he-space-8);
	color: var(--he-color-text-secondary);
	font-size: var(--he-type-body-small-size);
	line-height: var(--he-type-body-small-line-height);
}

.he-primary-navigation__overflow-menu li.is-current a,
.he-primary-navigation__overflow-menu a:hover,
.he-primary-navigation__overflow-menu a:focus-visible {
	background-color: var(--he-color-surface-amber);
	color: var(--he-color-amber);
}

.he-mobile-navigation__menu > li.is-current > a {
	color: var(--he-color-amber);
	background-color: var(--he-color-surface-amber);
}

@media (max-width: 767px) {
	.he-site-header__controls {
		gap: var(--he-space-8);
	}

	.he-header-utilities {
		gap: var(--he-space-4);
	}

	.he-header-icon {
		width: 36px;
		height: 36px;
	}
}
