/* =============================================
   03_WIDGETS / w-menu
   Навигационное меню (desktop + мобильное).
   ============================================= */

.menu__link {
	transition: color 0.3s;
}
.icon-menu {
	display: none;
}

/* ── Responsive (mobile) ── */

@media (max-width: 63.99875em) {
	.menu__body {
		position: fixed;
		width: 100%;
		height: 100svh;
		left: -100%;
		top: 0;
		overflow: auto;
		padding: 104px 10px 30px 10px;
		transition: left 0.3s;
		z-index: 4;
		display: flex;
		flex-direction: column;
		background-color: var(--grayColor);
	}
	.menu__body::before {
		content: "";
		position: fixed;
		width: 100%;
		height: 64px;
		left: -100%;
		top: 0;
		transition: left 0.3s;
		z-index: 2;
		background-color: var(--whiteColor);
	}
	[data-fls-menu-open] .menu__body {
		left: 0;
	}
	[data-fls-menu-open] .menu__body::before {
		left: 0;
	}
	.menu__list {
		flex: 1 1 auto;
	}
	.menu__list:not(:last-child) {
		margin-bottom: 30px;
	}
	.menu__item:not(:last-child) {
		margin-bottom: 14px;
	}
	.menu__link {
		font-size: 16px;
		line-height: 125%;
	}
	.menu__socs:not(:last-child) {
		margin-bottom: 40px;
	}
	.menu__loginlink {
		width: 100%;
	}
	.icon-menu {
		display: block;
		position: relative;
		width: 44px;
		height: 44px;
		z-index: 5;
		background-color: var(--grayColor);
		border-radius: 10px;
	}
	.icon-menu span, .icon-menu::before, .icon-menu::after {
		content: "";
		transition: all 0.3s ease 0s;
		right: 12px;
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #000;
		border-radius: 2px;
	}
	.icon-menu::before {
		top: 15px;
	}
	.icon-menu::after {
		bottom: 15px;
	}
	.icon-menu span {
		top: calc(50% - 1px);
	}
	[data-fls-menu-open] .icon-menu span {
		width: 0;
	}
	[data-fls-menu-open] .icon-menu::before {
		top: calc(50% - 1px);
		transform: rotate(-45deg);
	}
	[data-fls-menu-open] .icon-menu::after {
		bottom: calc(50% - 1px);
		transform: rotate(45deg);
	}
}
@media (max-width: 63.99875em) and (any-hover: none) {
	.icon-menu {
		cursor: default;
	}
}

/* ── Responsive (desktop) ── */

@media (min-width: 63.99875em) {
	.menu__list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 10px;
		column-gap: 32px;
	}
	.menu__link {
		font-size: 12px;
		line-height: 125%;
	}
	.menu__bottom {
		display: none;
	}
}
@media (min-width: 74.99875em) {
	.menu__list {
		column-gap: 20px;
	}
	.menu__link {
		font-size: 16px;
		line-height: 125%;
	}
}
@media (min-width: 89.99875em) {
	.menu__list {
		column-gap: 40px;
	}
}

/* ── Hover ── */

@media (any-hover: hover), (pointer: fine) {
	html:not([data-fls-touch]) .menu__link:hover {
		color: var(--greenColor4);
	}
}