.header-navigation {
	display: inline-flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 30px;
	min-width: 0;

	& .header-navigation__item {
		position: relative;
	}

	& .header-link.text--4 {
		font-weight: 400;
		line-height: 1.2;
	}

	/* Невидимый «мост» в зазоре между ссылкой и подменю — сохраняет :hover без смены внешнего вида */
	& .header-navigation__item:has(.header-navigation__item-submenu)::before {
		content: '';
		position: absolute;
		left: 0;
		top: 100%;
		width: 250px;
		height: 12px;
		z-index: 1;
	}

	& .header-navigation__item-submenu {
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		z-index: 2;

		display: flex;
		width: 250px;
		padding: 20px;
		flex-direction: column;
		gap: 8px;
		background-color: #ffffff;
		box-shadow: 0px 2px 3px rgba(0, 11, 48, 0.15);
		border-radius: 1px;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity .2s ease-out, transform .2s ease-out;
	}

	@media (hover: hover) {
		& .header-navigation__item:hover {
			& .header-navigation__item-submenu {
				visibility: visible;
				opacity: 1;
				pointer-events: auto;
				transform: translateY(0);
			}
		}

		& .header-navigation__item-submenu:hover {
			visibility: visible;
			opacity: 1;
			pointer-events: auto;
			transform: translateY(0);
		}
	}
}

@media (max-width: 1400px) and (min-width: 961px) {
	.header-navigation {
		gap: 14px;
	}
}

@media (max-width: 1180px) and (min-width: 961px) {
	.header-navigation {
		gap: 8px;
	}

	.header-navigation .header-link.text--4 {
		font-size: 13px;
	}
}

@media (max-width: 960px) {
	.header-navigation {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;

		& .header-navigation__item {
			width: 100%;
		}

		& .header-navigation__item:has(.header-navigation__item-submenu)::before {
			content: none;
		}

		& .header-navigation__item-submenu {
			position: static;
			display: flex;
			width: 100%;
			padding: 12px 0 0 16px;
			gap: 10px;
			background: transparent;
			box-shadow: none;
			border-radius: 0;
			visibility: visible;
			opacity: 1;
			pointer-events: auto;
			transform: none;
		}

		& .header-link {
			font-size: 24px !important;
			font-style: normal;
			font-weight: 400;
			line-height: 1.3 !important;
		}

		& .header-link::after {
			bottom: -4px;
		}

		& .header-sublink {
			font-size: 18px !important;
			font-style: normal;
			font-weight: 300;
			line-height: 1.35 !important;
			color: rgba(255, 255, 255, 0.72);
		}
	}
}