/*
 * BSC Megamenu (KAT-18, v0.9.56; KAT-19, v0.9.57; KAT-21, v0.9.59;
 * KAT-22, v0.9.60; KAT-23, v0.9.83) —
 * мега-панель категорий в шапке.
 *
 * v0.9.83 (KAT-23): три колонки — рельс 300 (не тронут), группы 280,
 * подкатегории .bsc-mm__sub (остаток ~318). Панель 900px и якорится
 * ЦЕНТРОМ к пункту (left:50% + translateX(-50%)): пункт стоит в
 * середине шапки, при 900px от левого края он уехал бы за правый край
 * окна. Арифметика по замеру 09.08: центр пункта = ширина окна − 594,
 * левый край панели = центр − 450 → 1440:396, 1280:236, 1100:56 —
 * везде > 32; max-width остаётся страховкой. Активная группа — is-on
 * на её ссылке (фон и левая полоса — значения .bsc-mm__sec.is-on);
 * шеврон у групп с детьми — тот же ::after по [data-id], что у
 * разделов. Виден только контейнер .bsc-mm__s активной группы.
 *
 * v0.9.60 (KAT-22): панель шириной 620px якорится к ЛЕВОМУ краю
 * пункта (базовое left:0 внутри медиа, правый якорь KAT-19 удалён).
 * Пункт «Kategoriler» стоит ПЕРВЫМ в меню шапки, поэтому за правый
 * край окна панель не уходит (замер: при вкладке от левого края 750
 * панель занимает 750..1370 при окне 1400; арифметика держит любую
 * ширину от порога 1025px).
 *
 * v0.9.59 (KAT-21): двухпанельный вид — рельс разделов слева
 * (.bsc-mm__rail, 300px, фон #F5F2ED), область активного раздела
 * справа (.bsc-mm__pane, одна колонка групп). Панель 620px. Пять
 * колонок и их правила удалены. Шеврон у
 * разделов с детьми — ::after, в разметке его нет. Прокрутки у рельса
 * НЕТ: 17 разделов при padding 5px 18px / 12.5px помещаются (замер
 * прототипа); прокрутка внутри выпадашки — источник неприятностей с
 * колесом мыши.
 *
 * v0.9.57 (KAT-19): панель без ul/li (правила выпадашек темы прячут
 * любые ul/li внутри меню шапки); якорь панели — правый край пункта
 * (пункт стоит в правой части шапки, от left:0 панель уходила за
 * экран).
 *
 * Панель существует ТОЛЬКО на ≥1025px (порог проекта, тот же, что у
 * модуля поиска): вне медиа-условия она display:none безусловно, поэтому
 * на телефоне/планшете пункт остаётся обычной ссылкой, а штатное
 * мобильное меню темы не задето вовсе.
 *
 * Открытие — средствами CSS (:hover / :focus-within / .bsc-mm-open),
 * поэтому без JS панель полностью рабочая: ссылки разделов и группы
 * первого раздела (их печатает сервер) видны и кликабельны. JS ведёт
 * aria, Esc, переключение активного раздела и дозагрузку групп.
 * .bsc-mm-closed ставится JS-ом по Esc и глушит :hover/:focus-within
 * до ухода курсора/фокуса с пункта.
 *
 * Токены бренда: зелёный #2D6A4F, ховер #7FA35A, фон полей #F5F2ED,
 * текст #2b2b2b, шрифт Nunito Sans.
 */

.bsc-mm {
	display: none;
}

@media (min-width: 1025px) {

	li.bmo-mega {
		position: relative;
	}

	.bsc-mm {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1090;
		box-sizing: border-box;
		width: 900px;
		max-width: calc(100vw - 32px);
		padding: 0;
		overflow: hidden;
		background: #fff;
		border: 1px solid #ece8e1;
		border-radius: 14px;
		box-shadow: 0 14px 36px rgba(43, 43, 43, 0.14);
		font-family: 'Nunito Sans', sans-serif;
	}

	/* Открытие: hover и focus-within — чистый CSS; .bsc-mm-open — JS
	   (фокус с клавиатуры на ссылке пункта). */
	li.bmo-mega:hover > .bsc-mm,
	li.bmo-mega:focus-within > .bsc-mm,
	li.bmo-mega.bsc-mm-open > .bsc-mm {
		display: flex;
	}

	/* Esc: до ухода курсора/фокуса панель не возвращается. */
	li.bmo-mega.bsc-mm-closed > .bsc-mm {
		display: none !important;
	}

	/* Рельс разделов (KAT-21): столбик слева. */
	.bsc-mm__rail {
		flex: 0 0 300px;
		background: #F5F2ED;
		padding: 12px 0;
	}

	/* Раздел — сама ссылка. Прототип: при 7px/13px семнадцатый раздел
	   уезжал под обрез — отступы и кегль не увеличивать. */
	.bsc-mm__sec {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 18px;
		font-size: 12.5px;
		font-weight: 700;
		line-height: 1.25;
		color: #2D6A4F;
		text-decoration: none;
		border-left: 3px solid transparent;
	}

	.bsc-mm__sec:hover,
	.bsc-mm__sec:focus {
		color: #7FA35A;
		background: #F5F2ED;
	}

	/* Шеврон — признак интерактивности, только у разделов и групп с
	   детьми (KAT-23: у групп тем же приёмом и тем же символом). */
	.bsc-mm__sec[data-id]::after,
	.bsc-mm__g a[data-id]::after {
		content: '▸';
		opacity: .45;
		font-size: 11px;
	}

	.bsc-mm__sec.is-on {
		background: #fff;
		border-left-color: #7FA35A;
		color: #1F2D27;
	}

	/* Средняя колонка — группы активного раздела (KAT-23: ширина
	   фиксируется, остаток уходит подкатегориям). */
	.bsc-mm__pane {
		flex: 0 0 280px;
		padding: 18px 22px;
		overflow-y: auto;
	}

	/* Третья колонка — подкатегории активной группы (KAT-23). */
	.bsc-mm__sub {
		flex: 1 1 auto;
		padding: 18px 22px;
		border-left: 1px solid #E6E1D8;
		overflow-y: auto;
	}

	.bsc-mm__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin: 0 0 12px;
		padding-bottom: 8px;
		border-bottom: 1px solid #E6E1D8;
	}

	.bsc-mm__title,
	.bsc-mm__gtitle {
		font-size: 14px;
		color: #1F2D27;
	}

	.bsc-mm__all,
	.bsc-mm__gall {
		font-size: 12px;
		color: #7FA35A;
		white-space: nowrap;
		text-decoration: none;
	}

	/* Группы раздела и подкатегории группы (KAT-23): одна колонка;
	   виден только контейнер активного раздела/группы (is-on),
	   остальные остаются в DOM скрытыми. */
	.bsc-mm__g,
	.bsc-mm__s {
		display: none;
	}

	.bsc-mm__g.is-on,
	.bsc-mm__s.is-on {
		display: block;
	}

	/* border-left прозрачный — под полосу активной группы, тот же
	   приём, что у .bsc-mm__sec (без базовой рамки border-left-color
	   не рисуется, а появление рамки при активации сдвигало бы текст). */
	.bsc-mm__g a,
	.bsc-mm__s a {
		display: block;
		padding: 4px 6px;
		font-size: 13px;
		line-height: 1.3;
		color: #3B4A42;
		text-decoration: none;
		border-radius: 7px;
		border-left: 3px solid transparent;
	}

	.bsc-mm__g a:hover,
	.bsc-mm__g a:focus,
	.bsc-mm__s a:hover,
	.bsc-mm__s a:focus {
		background: #F5F2ED;
		color: #2D6A4F;
	}

	/* Активная группа — фон и левая полоса как у .bsc-mm__sec.is-on
	   (значения переиспользованы, новых цветов нет). */
	.bsc-mm__g a.is-on {
		background: #fff;
		border-left-color: #7FA35A;
	}
}