/* ------------------------------------------------------------------
   Тестовое меню «Главное (тест)». Подключается только из header-test.php.
   Каждое правило прибито к .menu-glavnoe-test-container, поэтому боевое
   меню (.menu-glavnoe-container) этим файлом не затрагивается вообще.
   ------------------------------------------------------------------ */


/* === 1-й уровень: верхняя полоса ===================================
   Оформление ровно как в теме: равные плитки вплотную, текст по центру.
   Правится только ширина: в style.css зашито 14.27%, то есть ровно
   7 колонок. Вместо нового числа берём table-layout:fixed — плитки
   делят полосу поровну при любом количестве пунктов, и меню не поедет,
   если из админки добавят или уберут раздел.                          */

#menu .menu-glavnoe-test-container ul.main-nav-class {
	display: table;
	width: 100%;
	table-layout: fixed;
}

#menu .menu-glavnoe-test-container ul.main-nav-class > li {
	display: table-cell;
	float: none;
	width: auto;
}

/* Клирфикс из style.css (#menu ul:after) внутри display:table становится
   анонимной ячейкой и забирает себе целую колонку. Плиткам он больше
   не нужен — они не floated. Гасим.                                    */
#menu .menu-glavnoe-test-container ul.main-nav-class::after {
	display: none;
}


/* === 2-й уровень: колонка категорий ================================
   Было padding-left:57px — длинные названия («POS-материалы и рекламные
   стойки», «Сувениры и корпоративные подарки») наезжали на стрелку.
   28px хватает всем и совпадает с отступом правой панели.              */

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > a {
	padding-left: 28px;
}

/* Панель не короче колонки категорий: 12 пунктов по 48px.
   JS проставляет height инлайном, min-height его перебивает.

   Фон делим по вертикали на месте стыка колонок: слева голубой, справа
   белый. Так правая часть белая на всю высоту выпадашки, даже если у
   категории мало пунктов. Тянуть саму панель 3-го уровня через
   bottom:0 / height:100% нельзя — JS темы берёт её высоту, чтобы задать
   высоту этой панели, и получается бесконечный рост на каждый ховер.    */
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu {
	min-height: 336px;       /* как в теме — запасной вариант для старых браузеров */
	min-height: fit-content; /* ровно по колонке категорий, сколько бы их ни выводилось */
	background: #EEF4FA linear-gradient(to right, #EEF4FA 390px, #FFFFFF 390px);
}


/* === 3-й уровень: колонка-группа =================================== */

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu {
	box-sizing: border-box;
	max-height: calc(100vh - 210px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li {
	box-sizing: border-box;
	padding: 0 25px 26px 30px;
}

/* Заголовок группы: тёмный, полужирный, с чертой снизу.
   Раскрывать нечего, поэтому он не кликается.                        */
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li.menu-item-has-children > a {
	padding: 2px 0 8px 0;
	margin-bottom: 8px;
	border-bottom: 1px solid #E3E3E3;
	font-family: 'MyriadPro-Semibold';
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	color: #222222;
	cursor: default;
	pointer-events: none;
}

/* Стрелка «вправо» у группы больше не нужна. */
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li.menu-item-has-children > a::after {
	display: none;
}

/* Хабовая ссылка категории — единственный пункт 3-го уровня без детей.
   Выносим её строкой над группами, как в макете.                     */
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li:not(.menu-item-has-children) {
	width: 100%;
	padding-bottom: 14px;
	margin-bottom: 18px;
	border-bottom: 1px solid #EDEDED;
}

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li:not(.menu-item-has-children) > a {
	padding-left: 0;
	font-family: 'MyriadPro-Semibold';
	font-weight: 600;
	color: #1D99C7;
}


/* === 4-й уровень: список под заголовком, без всплывающего блока ==== */

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li > .sub-menu,
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li.menu-item-has-children > .sub-menu,
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li.menu-item-has-children:hover > .sub-menu {
	display: block;
	position: static;
	left: auto;
	top: auto;
	width: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	z-index: auto;
}

/* Пункты 4-го уровня — обычный светлый список, заметно легче заголовка. */
#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li > .sub-menu a {
	padding: 4px 0;
	font-family: 'MyriadPro-Regular';
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: #777777;
	transition: 0.3s;
}

#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li > .sub-menu a:hover {
	color: #1D99C7;
}


/* === Ниже 1200px тема ужимает шрифты меню — повторяем для своих правил === */

@media (max-width: 1199px) {

	#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > a {
		padding-left: 22px;
	}

	/* ниже 1200px тема сужает левую колонку до 323px — двигаем и стык фона */
	#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu {
		background: #EEF4FA linear-gradient(to right, #EEF4FA 323px, #FFFFFF 323px);
	}

	#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li {
		padding: 0 20px 22px 26px;
	}

	#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li.menu-item-has-children > a {
		font-size: 16px;
		line-height: 20px;
	}

	#menu .menu-glavnoe-test-container ul.main-nav-class > li > ul.sub-menu > li > .sub-menu > li > .sub-menu a {
		font-size: 15px;
		line-height: 19px;
	}

}


/* === Ниже 840px десктопного меню нет — работает бургер ==============
   На этой ширине style-adaptive.css гасит #menu ul и показывает .burger.
   Правило display:table в начале файла перебивало это по «весу»,
   и полоса оставалась видна на телефоне поверх бургер-меню.           */

@media (max-width: 840px) {

	#menu .menu-glavnoe-test-container ul.main-nav-class {
		display: none;
	}

}