/**
 * «Ещё» в компьютерной шапке сайта (пакет site-certificates, фаза 4). Разметку создаёт public/js/site-nav-more.js.
 * Подключается в обеих общих частях head (head-common*.ejs) одной версией ?v=, после theme.css.
 *
 * Всё — только на компьютерной шапке (≥1028 px, где бургер выключен) и только под классом `site-nav-more-on`, который
 * ставит скрипт: упал скрипт — шапка как раньше. Свои классы, не `sk__submenu-ul`: тема открывает его по li:hover в обход
 * aria-expanded, а фон держит на обёртке `.nav-subwrap`, которую добавляет только в ready (pre4 M-3).
 * Копии пунктов сохраняют класс `nav-link` — на них действуют правила темы `.navbar-nav > li > ul a.nav-link`
 * (14 px / 400, отступ 8/20), `nav li a { display: inline-block !important }` и `a.nav-link.active`.
 */

@media all and (min-width: 1028px) {
	/* Метка «стили загрузились»: без неё site-nav-more.js ничего не включает — шапка как до фазы, без серой системной
	   кнопки «Ещё» (post4-B L-2) */
	#main-nav {
		--site-nav-more: 1;
	}

	/* Не сжиматься: пункты в одну строку, логотип своей ширины; что не влезло — в «Ещё» (pre4 M-1). */
	#main-nav.site-nav-more-on > .navbar-brand {
		flex-shrink: 0;
	}

	/* overflow: hidden не обрезает подменю «Таро» и список «Ещё»: их блок-основа — сам nav (li и ul — static). */
	#main-nav.site-nav-more-on > ul.navbar-nav {
		min-width: 0;
		overflow: hidden;
	}

	#main-nav.site-nav-more-on > ul.navbar-nav > li {
		flex-shrink: 0;
	}

	#main-nav.site-nav-more-on > ul.navbar-nav > li > a.nav-link {
		white-space: nowrap;
	}

	/* Рамка фокуса темы (`a:focus { outline: thin dotted }`) рисуется снаружи пункта — `overflow: hidden` строки её срезал бы
	   (post4-A M-2); внутрь, как у кнопки «Ещё» */
	#main-nav.site-nav-more-on > ul.navbar-nav > li > a.nav-link:focus {
		outline-offset: -3px;
	}

	/* Миг замера ширин (site-nav-more.js): переходы темы доводятся до конечного значения, иначе жирный текущий пункт и
	   отступы после прокрутки мерились бы на середине анимации */
	#main-nav.site-nav-more-measuring,
	#main-nav.site-nav-more-measuring * {
		-webkit-transition: none !important;
		-o-transition: none !important;
		transition: none !important;
	}

	/* ---- Кнопка «Ещё»: как пункт верхнего уровня темы (отступы, шрифт, подложка при наведении) ---- */
	#main-nav .site-nav-more {
		position: static;
	}

	/* display: block — inline-block добавил бы строке li пиксель под базовой линией (шапка 102 вместо 101) */
	#main-nav .site-nav-more__toggle {
		position: relative;
		display: block;
		margin: 0;
		padding: 36px 20px 34px 24px;
		border: 0;
		background: transparent;
		color: rgba(255, 255, 255, 0.98);
		font: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 30px;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		-webkit-transition: all 0.4s ease 0s;
		-o-transition: all 0.4s ease 0s;
		transition: all 0.4s ease 0s;
	}

	body.sk__scrolling-started #main-nav .site-nav-more__toggle {
		padding: 15px 20px 15px 25px;
	}

	#main-nav .site-nav-more__toggle:before {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		content: '';
		background: rgba(255, 255, 255, 0.1);
		-webkit-transform: scaleY(0);
		-ms-transform: scaleY(0);
		transform: scaleY(0);
		-webkit-transform-origin: center bottom;
		-ms-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-transition: all 0.4s ease 0s;
		-o-transition: all 0.4s ease 0s;
		transition: all 0.4s ease 0s;
	}

	#main-nav .site-nav-more__toggle:hover:before,
	#main-nav .site-nav-more.is-open > .site-nav-more__toggle:before {
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		transform: scaleY(1);
	}

	#main-nav .site-nav-more__toggle:focus {
		outline: none;
	}

	#main-nav .site-nav-more__toggle:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.7);
		outline-offset: -4px;
	}

	#main-nav .site-nav-more__label {
		position: relative;
	}

	/* Шеврон — тот же знак, что у «Таро в бокале» (icomoon \f107) */
	/* vertical-align: top и своя высота строки — иначе метрики шрифта значков растягивают кнопку на пиксель */
	#main-nav .site-nav-more__chevron {
		position: relative;
		display: inline-block;
		height: 30px;
		margin-left: 8px;
		line-height: 30px;
		vertical-align: top;
		-webkit-transition: -webkit-transform 0.3s ease 0s;
		transition: transform 0.3s ease 0s;
	}

	#main-nav .site-nav-more__chevron:before {
		font-family: icomoon;
		content: '\f107';
		font-size: 14px;
		font-weight: 400;
	}

	#main-nav .site-nav-more.is-open .site-nav-more__chevron {
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	/* Текущая страница — внутри «Ещё»: подпись как у активного пункта темы (градиент, жирный) */
	#main-nav .site-nav-more.is-current .site-nav-more__label {
		background: linear-gradient(90deg, rgba(129, 21, 255, 1) 0%, rgba(255, 42, 208, 1) 50%, rgba(255, 143, 42, 1) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		font-weight: 700;
	}

	/* ---- Список «Ещё»: прижат вправо относительно nav (li static), иначе ушёл бы за экран (pre4 M-2) ----
	   По вертикали — top: auto, то есть сразу под кнопкой (её статическое место), как подменю «Таро» темы: `top: 100%` от nav
	   после прокрутки давал бы зазор 10 px — отступ nav снизу (post4-A L-1) */
	#main-nav .site-nav-more__list {
		position: absolute;
		top: auto;
		right: 35px;
		z-index: 2;
		min-width: 232px;
		margin: 0;
		padding: 10px 12px 10px 5px;
		list-style: none;
		background: rgba(0, 0, 0, 0.87);
	}

	#main-nav .site-nav-more__list > li {
		display: block;
	}

	#main-nav .site-nav-more__list a.nav-link {
		display: block !important;
		white-space: nowrap;
		-webkit-transition: all 0.3s ease 0s;
		-o-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
	}

	#main-nav .site-nav-more__list a.nav-link:hover,
	#main-nav .site-nav-more__list a.nav-link:focus-visible {
		-webkit-transform: translateX(5px);
		-ms-transform: translateX(5px);
		transform: translateX(5px);
	}

	/* Текущая страница в «Ещё»: у `a.nav-link.active` темы `color: transparent`, и рамка фокуса цвета текста не видна (post4-B L-4) */
	#main-nav .site-nav-more__list a.nav-link.active:focus-visible {
		outline: 1px dotted rgba(255, 255, 255, 0.98);
	}

	/* «Таро в бокале» внутри «Ещё» — некликабельная подпись, пункты под ней с отступом (Р-11) */
	#main-nav .site-nav-more__heading-label {
		display: block;
		padding: 8px 20px;
		color: #a6aaaf;
		font-size: 14px;
		font-weight: 400;
		line-height: 30px;
		white-space: nowrap;
		cursor: default;
	}

	#main-nav .site-nav-more__list .site-nav-more__item--sub > a.nav-link {
		padding-left: 46px;
	}
}