/**
 * Меню калькуляторов.
 * Десктоп (≥960px): синяя прямоугольная кнопка «Калькуляторы» с бутербродом
 * (как красная «Каталог» у grandline) + белые выпадающие списки категорий и страниц.
 * Мобайл (<960px): бутерброд справа, панель выезжает, категории — аккордеон.
 * Брейкпоинт 960px совпадает с UIkit @m у конкурента (calcstroy.ru).
 *
 * Цвета и радиусы — переменные из assets/css/cl-design.css (там же обвязка сайта).
 */

/* ================= База (общая) ================= */
.cl-nav { position: relative; display: flex; justify-content: flex-end; }
.cl-menu ul { list-style: none; margin: 0; padding: 0; }
.cl-menu li { margin: 0; }
.cl-menu a {
	display: block;
	text-decoration: none;
	color: inherit;
	font-size: 15px;
}
.cl-menu a:hover { text-decoration: none; }
.cl-nav__burger { display: none; }
.cl-nav__backdrop { display: none; }

/* ================= Десктоп ≥960px ================= */
@media (min-width: 960px) {
	.cl-menu__root { display: flex; justify-content: flex-end; gap: 0; }

	/* Верхний пункт «Калькуляторы» — синяя прямоугольная кнопка */
	.cl-menu__root > .menu-item {
		position: relative;
		background-color: var(--cl-accent, #2b5876);
		border-radius: var(--cl-r, 4px);
	}
	.cl-menu__root > .menu-item:hover { background-color: var(--cl-accent-dark, #1f4159); }
	.cl-menu__root > .menu-item > a {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 18px;
		color: #fff;
		font-weight: 600;
		white-space: nowrap;
	}
	/* Бутерброд перед надписью — три полоски одним элементом через box-shadow. */
	.cl-menu__root > .menu-item > a::before {
		content: "";
		flex: none;
		width: 16px;
		height: 2px;
		margin-right: 11px;
		background: currentColor;
		box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
	}
	/* Стрелка ▾ у пунктов с подменю верхнего уровня */
	.cl-menu__root > .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: .45em; height: .45em;
		margin-left: .6em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
	}

	/* Выпадающие списки (категории и страницы) — светлые, как у grandline */
	.cl-menu .sub-menu {
		position: absolute;
		top: 100%;
		right: 0;
		min-width: 280px;
		background: #fff;
		border: 1px solid var(--cl-line, #e4e7ea);
		border-radius: var(--cl-r, 4px);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
		padding: .35rem 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity .14s ease, transform .14s ease, visibility .14s;
		z-index: 100;
	}
	/* ВАЖНО: overflow на уровне категорий не ставим — иначе он обрежет
	   вылетающий влево список страниц (overflow-y:auto включает и overflow-x). */
	.cl-menu .menu-item:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.cl-menu .sub-menu .menu-item { position: relative; }
	.cl-menu .sub-menu a {
		padding: .42rem 1.1rem;
		line-height: 1.3;
		color: #3f4650;
		white-space: nowrap;
	}
	.cl-menu .sub-menu .menu-item:hover > a { background-color: #f1f5f9; color: var(--cl-accent, #2b5876); }

	/* Пункты 2-го уровня с детьми (категории) — маркер выпадашки вправо */
	.cl-menu .sub-menu .menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}
	.cl-menu .sub-menu .menu-item-has-children > a::after {
		content: "";
		width: .45em; height: .45em;
		border-top: 2px solid #a8b1bb;
		border-right: 2px solid #a8b1bb;
		transform: rotate(45deg);
		flex: none;
	}
	.cl-menu .sub-menu .menu-item-has-children:hover > a::after { border-color: var(--cl-accent, #2b5876); }

	/* 3-й уровень (страницы категории) — вылет влево от 2-го.
	   Прокрутку ставим только здесь: длинные списки страниц не уходят
	   за экран, но при этом ничего не обрезают (у категорий overflow нет). */
	.cl-menu .sub-menu .sub-menu {
		top: -0.4rem;
		right: 100%;
		margin-right: 2px;
		max-height: 82vh;
		overflow-y: auto;
	}
}

/* ================= Мобайл <960px ================= */
@media (max-width: 959.98px) {
	/* Кнопка-бутерброд */
	.cl-nav__burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
		width: 46px;
		height: 44px;
		padding: 0;
		background: var(--cl-accent, #2b5876);
		border: 0;
		border-radius: var(--cl-r, 4px);
		cursor: pointer;
	}
	.cl-nav__burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		transition: transform .25s ease, opacity .2s ease;
	}
	.cl-nav.is-open .cl-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.cl-nav.is-open .cl-nav__burger span:nth-child(2) { opacity: 0; }
	.cl-nav.is-open .cl-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* Открытая панель: крестик закрепляем поверх панели (иначе он под ней) */
	.cl-nav.is-open .cl-nav__burger {
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 1002;
	}

	/* Затемнение под панелью */
	.cl-nav.is-open .cl-nav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 1000;
	}

	/* Выезжающая панель справа */
	.cl-nav .cl-menu {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(86vw, 360px);
		background: #fff;
		z-index: 1001;
		overflow-y: auto;
		padding: 64px 0 32px;
		transform: translateX(100%);
		transition: transform .28s ease;
		-webkit-overflow-scrolling: touch;
	}
	/* Тень — только у открытой панели: у спрятанной за правым краем она
	   просвечивала в экран серой полосой вдоль края на каждой странице. */
	.cl-nav.is-open .cl-menu { transform: none; box-shadow: -8px 0 28px rgba(15, 23, 42, .25); }

	/* Прячем ярлык «Калькуляторы», показываем категории сразу верхним уровнем */
	.cl-menu__root { display: block; }
	.cl-menu__root > .menu-item > a { display: none; }
	.cl-menu__root > .menu-item > .sub-menu { display: block; }

	/* Все подменю — статично в потоке, скрыты пока не раскрыты */
	.cl-menu .sub-menu {
		position: static;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		min-width: 0;
		padding: 0;
		margin: 0;
		background: transparent;
	}
	/* Схлопываем только списки страниц (L3, вложенные в категорию),
	   сам список категорий (L1 → .sub-menu) всегда виден. */
	.cl-menu .sub-menu .menu-item-has-children > .sub-menu { display: none; }
	.cl-menu .sub-menu .menu-item.is-expanded > .sub-menu { display: block; }

	/* Строки */
	.cl-menu a {
		padding: .8rem 1.25rem;
		border-bottom: 1px solid #eef1f4;
		color: #3f4650;
		font-size: 15px;
	}
	.cl-menu a:active,
	.cl-menu .menu-item.is-expanded > a { color: var(--cl-accent, #2b5876); }
	/* Категории — с раскрывающей стрелкой */
	.cl-menu__root > .menu-item > .sub-menu > .menu-item > a { font-weight: 600; }
	.cl-menu .menu-item-has-children > a {
		position: relative;
		padding-right: 2.75rem;
	}
	.cl-menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 1.3rem;
		width: .5em; height: .5em;
		margin-top: -.4em;
		border-right: 2px solid #a8b1bb;
		border-bottom: 2px solid #a8b1bb;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.cl-menu .menu-item.is-expanded > a::after {
		transform: rotate(-135deg);
		margin-top: -.15em;
	}
	/* Страницы внутри раскрытой категории — с отступом и серой подложкой */
	.cl-menu .sub-menu .sub-menu a {
		padding-left: 2.25rem;
		background: #f7f8f9;
		font-weight: 400;
		color: #5b6470;
	}
}