/*
 * МЕГАМЕНЮ УСЛУГ В ШАПКЕ ПОСАДОЧНОЙ.
 * Разметка — в sections/lp-hero.php, поведение — в assets/js/landing.js.
 *
 * Файл лежит в components/, а не в sections/: шапка живёт в первом экране,
 * но меню принадлежит всему сайту, и порядок подключения (см.
 * inc/assets-landing.php) даёт lp-hero.css право перебивать написанное здесь,
 * а не наоборот.
 *
 * ЦВЕТ ВЗЯТ ИЗ ТЕМЫ, А НЕ ПРИДУМАН. Посадочная — графитовая: светлой панели,
 * какую обычно вешают под шапку, в системе нет вовсе, и белый прямоугольник
 * посреди тёмной страницы читался бы как чужой виджет. Поверхность меню —
 * `--lp-field-deep`, то есть тот же графит на ступень глубже фона шапки;
 * граница и тень — уже существующие `--lp-line-strong` и `--lp-frame-shadow`.
 *
 * ДВА СОСТОЯНИЯ ОДНОЙ РАЗМЕТКИ
 *   до 1200px  — узкий выпадающий блок у правого края, колонки аккордеоном;
 *   от 1200px  — широкая панель под шапкой, колонки сеткой, всё раскрыто.
 *
 * 1200px (75em) — не новое значение: ровно на этой ширине шапка перестаёт
 * переноситься в несколько строк и встаёт одной строкой (см. lp-hero.css).
 * Раньше этой отметки под панель во всю ширину просто нет свободного края.
 */

/* ---------------------------------------------------------------------- */
/* Поверхность                                                            */
/* ---------------------------------------------------------------------- */

/*
 * ПАНЕЛЬ ПРИВЯЗАНА К ШАПКЕ, А НЕ К КНОПКЕ — на всех ширинах. `.lp-site-menu`
 * теряет собственное позиционирование, и ближайшим позиционированным предком
 * остаётся фиксированная шапка: `top: 100%` кладёт панель ровно на её нижнюю
 * границу, а левый и правый края считаются от краёв страницы.
 *
 * ПРИВЯЗКА К КНОПКЕ БЫЛА ОШИБКОЙ, И ВИДНО ЕЁ ТОЛЬКО НА УЗКОМ ЭКРАНЕ. Ширина
 * панели считалась от ширины окна, а правый край брался у кнопки; на 320
 * пикселях кнопка стоит не там, где предполагала формула, и панель уезжала
 * левым краем за экран. Считать оба края от одного и того же — от страницы —
 * значит не иметь этой ошибки в принципе, на любой ширине.
 *
 * Щель между кнопкой и панелью убрана намеренно: разрыв — это полоса, на
 * которой курсор выходит из меню, и оно закрывается по дороге к нему.
 */
.lp .lp-site-menu {
	position: static;
}

.lp .lp-site-menu__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;

	/*
	 * Та же формула, что у горизонтальных полей шапки (lp-hero.css): края
	 * панели встают ровно по краям контейнера страницы, а не по краям экрана.
	 */
	margin-inline: max(
		var(--lp-gutter),
		calc((100vw - var(--lp-container)) / 2 + var(--lp-gutter))
	);
	padding: var(--lp-space-sm) var(--lp-space-md);
	background: var(--lp-field-deep);
	border: 1px solid var(--lp-line-strong);
	box-shadow: var(--lp-frame-shadow);
}

.lp .lp-mega {
	display: flex;
	flex-direction: column;
	gap: var(--lp-space-md);
}

/*
 * Появление. Только прозрачность и сдвиг на 6 пикселей: панель обязана
 * оказаться на месте раньше, чем посетитель доведёт до неё курсор.
 * Масштабирования нет намеренно — оно размывает текст на время анимации.
 *
 * Анимация висит на [open], поэтому играет и при открытии наведением,
 * и при открытии кликом, и при открытии с клавиатуры.
 */
@keyframes lp-mega-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.lp .lp-site-menu[open] .lp-site-menu__panel {
		animation: lp-mega-in var(--lp-duration) var(--lp-ease-out);
	}
}

/* ---------------------------------------------------------------------- */
/* Колонки                                                                */
/* ---------------------------------------------------------------------- */

.lp .lp-mega__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-space-sm);
}

.lp .lp-mega__col {
	min-width: 0;
}

.lp .lp-mega__col-head {
	margin: 0;
}

/*
 * Заголовок колонки — кнопка на всю ширину, потому что на телефоне это
 * зона нажатия, а не надпись: попадать надо в строку целиком, а не
 * в четыре слова из пяти.
 */
.lp .lp-mega__col-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-space-sm);
	width: 100%;
	min-height: var(--lp-tap-min);
	padding: 0;
	font-family: inherit;
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-align: left;
	text-transform: uppercase;
	color: var(--lp-ink-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

/*
 * Отключённая кнопка — это широкий экран, где колонка раскрыта всегда.
 * `disabled` ставит скрипт: так заголовок уходит из обхода по Tab и не
 * объявляется читалкой как то, что можно нажать. Курсор и приглушение,
 * которые браузер даёт отключённой кнопке, здесь не нужны — это уже не
 * кнопка, а название раздела.
 */
.lp .lp-mega__col-toggle:disabled {
	color: var(--lp-ink-muted);
	cursor: default;
	opacity: 1;
}

.lp .lp-mega__col-toggle:not(:disabled):hover .lp-mega__col-title {
	color: var(--lp-ink);
}

/*
 * Метка раскрытия — та же шевронная стрелка, что у аккордеонов страницы:
 * две линии, повёрнутые на 45°, без картинки и без шрифта иконок.
 */
.lp .lp-mega__col-mark {
	position: relative;
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
	transition: transform var(--lp-duration) var(--lp-ease);
}

.lp .lp-mega__col-toggle[aria-expanded='true'] .lp-mega__col-mark {
	transform: translateY(0.1rem) rotate(-135deg);
}

.lp .lp-mega__col-toggle:disabled .lp-mega__col-mark {
	display: none; /* Раскрывать нечего — стрелка соврала бы. */
}

/* ---------------------------------------------------------------------- */
/* Ссылки                                                                 */
/* ---------------------------------------------------------------------- */

.lp .lp-mega__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Свёрнутая колонка. Класс ставит скрипт и только на узком экране; правило
 * живёт в медиазапросе, поэтому широкая раскладка не может свернуться даже
 * при осечке скрипта. Ровно та же развязка, что у .lp-reveal: прячет тот,
 * кто умеет показать обратно.
 */
@media (max-width: 74.99em) {
	.lp .lp-mega__list--collapsed {
		display: none;
	}
}

.lp .lp-mega__link {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--lp-space-3xs) 0;
	font-size: var(--lp-text-sm);
	font-weight: var(--lp-weight-regular);
	line-height: var(--lp-leading-tight);
	color: var(--lp-ink);
	text-decoration: none;
	transition: color var(--lp-duration) var(--lp-ease);
}

/*
 * Наведение окрашивает слово и выдвигает его на два пикселя. Подчёркивания
 * нет: в списке из пятнадцати ссылок оно превращает панель в решётку.
 */
.lp .lp-mega__link:hover {
	color: var(--lp-crimson);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.lp .lp-mega__link {
		transition:
			color var(--lp-duration) var(--lp-ease),
			transform var(--lp-duration-fast) var(--lp-ease);
	}

	.lp .lp-mega__link:hover {
		transform: translateX(2px);
	}
}

/* Текущий раздел отмечен цветом: WordPress вешает класс на пункт меню. */
.lp .lp-mega__item.current-menu-item > .lp-mega__link,
.lp .lp-mega__link[aria-current='page'] {
	color: var(--lp-crimson);
}

/* ---------------------------------------------------------------------- */
/* Комплексные решения                                                    */
/* ---------------------------------------------------------------------- */

/*
 * Блок отличается ПОВЕРХНОСТЬЮ И РАМКОЙ, а не вторым набором цветов:
 * `--lp-frame-surface` — тот же оттенок, каким набраны браузерные рамы
 * в первом экране, то есть «предмет на столе». Заголовок берёт алый
 * сигнальный цвет системы, и на этом отличия заканчиваются: всё остальное
 * — те же ссылки того же кегля.
 */
.lp .lp-mega__col--solutions {
	padding: var(--lp-space-md);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-strong);
	border-radius: var(--lp-radius-control);
}

.lp .lp-mega__col--solutions .lp-mega__col-toggle,
.lp .lp-mega__col--solutions .lp-mega__col-toggle:disabled {
	color: var(--lp-crimson);
}

.lp .lp-mega__col--solutions .lp-mega__col-toggle:not(:disabled):hover .lp-mega__col-title {
	color: var(--lp-crimson);
}

/* ---------------------------------------------------------------------- */
/* ДО 1200px: узкий выпадающий блок и аккордеон                           */
/* ---------------------------------------------------------------------- */

@media (max-width: 74.99em) {
	/*
	 * Панель остаётся такой же, какой была до мегаменю: столбик у правого
	 * края контейнера. `margin-left: auto` прижимает её вправо, оставаясь
	 * внутри полей страницы, — поэтому за левый край она не выходит даже
	 * тогда, когда экран уже самой панели.
	 *
	 * Ограничение высоты и своя прокрутка обязательны: в четырёх разделах
	 * два десятка ссылок, и на альбомном телефоне список ушёл бы за нижний
	 * край без возможности до него добраться. overscroll-behavior не даёт
	 * странице «подхватить» прокрутку, когда список домотан до конца.
	 */
	.lp .lp-site-menu__panel {
		/*
		 * Правый край панели остаётся на краю контейнера, левый отсчитывается
		 * от него шириной. `margin-left: auto` здесь не годится: свободного
		 * места на узком экране нет, и `auto` обращается в ноль — панель
		 * прилипает к левому краю экрана, теряя поле, которое есть у всей
		 * остальной страницы.
		 */
		left: auto;
		width: min(23rem, calc(100vw - var(--lp-gutter) * 2));
		max-height: calc(100vh - 6rem);
		max-height: calc(100dvh - 6rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Разделы разделены линией — иначе аккордеон читается сплошной лентой. */
	.lp .lp-mega__col + .lp-mega__col {
		padding-top: var(--lp-space-2xs);
		border-top: 1px solid var(--lp-line);
	}

	.lp .lp-mega__col--solutions {
		margin-top: var(--lp-space-2xs);
		border-top: 1px solid var(--lp-line-strong);
	}

	.lp .lp-mega__list {
		padding-bottom: var(--lp-space-2xs);
	}

	/*
	 * Ссылки внутри раздела сдвинуты — вложенность видна без иконок.
	 * Высота строки поднята до 48px: это зона нажатия пальцем, а не курсором.
	 */
	.lp .lp-mega__link {
		min-height: var(--lp-tap-min);
		padding-left: var(--lp-space-sm);
	}

	.lp .lp-mega__col--solutions .lp-mega__link {
		padding-left: 0;
	}
}

/* ---------------------------------------------------------------------- */
/* ОТ 1200px: панель под шапкой                                           */
/* ---------------------------------------------------------------------- */

@media (min-width: 75em) {
	/*
	 * Панель раскрывается во всю ширину контейнера. Ограничения по ширине
	 * здесь нет — оно снято вместе с узким видом: края уже стоят по краям
	 * контейнера базовым правилом.
	 */
	.lp .lp-site-menu__panel {
		left: 0;
		width: auto;
		padding: var(--lp-space-lg);

		/* Высокий экран не нужен: панель не должна закрывать первый экран. */
		max-height: calc(100vh - 8rem);
		max-height: calc(100dvh - 8rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.lp .lp-mega {
		gap: var(--lp-space-lg);
	}

	/*
	 * auto-fit, а не жёсткие три колонки: разделы заводит владелец в админке,
	 * и четвёртый раздел не должен ломать раскладку. Минимум 14rem — ширина,
	 * на которой «Продвижение на маркетплейсах» ещё не рвётся посреди слова.
	 */
	.lp .lp-mega__cols {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: var(--lp-space-lg) var(--lp-space-xl);
	}

	/* Заголовок отделён от ссылок линией — это разделитель, а не рамка. */
	.lp .lp-mega__col-head {
		margin-bottom: var(--lp-space-2xs);
		padding-bottom: var(--lp-space-2xs);
		border-bottom: 1px solid var(--lp-line);
	}

	.lp .lp-mega__col-toggle {
		min-height: 0;
		cursor: default;
	}

	.lp .lp-mega__link {
		min-height: 0;
		padding: var(--lp-space-2xs) 0;
		font-size: var(--lp-text-body);
	}

	.lp .lp-mega__col--solutions {
		padding: var(--lp-space-md) var(--lp-space-lg);
	}

	.lp .lp-mega__col--solutions .lp-mega__col-head {
		border-bottom-color: var(--lp-line-strong);
	}

	/*
	 * Девять решений в одну колонку — это простыня в половину экрана.
	 * Сетка раскладывает их в три-четыре столбца по ширине панели.
	 */
	.lp .lp-mega__list--grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: 0 var(--lp-space-lg);
	}

	/* Плоское меню без разделов столбиком во всю панель не читается. */
	.lp .lp-mega__list--flat {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 0 var(--lp-space-xl);
	}
}