/**
 * Этап 13.1 — мобильное попап-меню (Elementor Popup ID 37).
 *
 * Все числа — из Figma-CSS-дампов обоих уровней, см. MOBILE-MENU-SPEC.md.
 * Разметку панелей строит assets/js/mobile-menu.js из того же виджета
 * nav-menu (#a1bfd11, меню header-2), который попап уже содержит:
 * оригинальный виджет под 768px скрывается, вместо него рисуются панели.
 * Десктоп не трогаем — всё внутри @media (max-width: 767px).
 */

/* На десктопе построенной разметки не существует визуально. */
.ev-mm {
	display: none;
}

/* ---------------------------------------------------------------
 * Блокировка скролла страницы под открытым меню.
 *
 * Класс вешает JS (только на мобиле, по elementor/popup/show), поэтому
 * правила намеренно вне медиазапроса — иначе при повороте экрана можно
 * остаться с заблокированной страницей и без стилей, которые её
 * разблокируют.
 *
 * Одного `overflow: hidden` на html/body мало: в iOS Safari он не
 * останавливает инерционный скролл body. Рабочий приём — фиксировать
 * body и компенсировать текущую прокрутку отрицательным top; позицию
 * возвращает JS при закрытии.
 * --------------------------------------------------------------- */
html.ev-mm-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

body.ev-mm-locked {
	position: fixed;
	top: var(--ev-mm-lock-top, 0px);
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

@media (max-width: 767px) {

	/* ---------------------------------------------------------------
	 * Оболочка попапа.
	 * По ТЗ (решение 1) попап заканчивается там, где заканчивается
	 * панель: высота по контенту, подложка прозрачная, страница под
	 * меню видна. У попапа в настройках Elementor height_type =
	 * fit_to_screen — правим только на мобиле, CSS-ом, чтобы не менять
	 * сохранённые настройки и не задеть десктоп.
	 * --------------------------------------------------------------- */
	#elementor-popup-modal-37 {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		background: transparent !important;
	}

	/* Высота: не меньше экрана и не больше него. Проценты, а не vh —
	   родитель `.dialog-widget` фиксирован ровно по вьюпорту, поэтому
	   100% сам отслеживает реальную высоту (в мобильных браузерах vh
	   считается по экрану без учёта адресной строки, dvh поддержан не
	   везде). Если панель меню ниже экрана — растягивается флексом до
	   низа, если выше — скроллится внутри себя.
	   `overscroll-behavior: contain` не даёт прокрутке меню
	   перекинуться на страницу, когда список докручен до края. */
	#elementor-popup-modal-37 .dialog-widget-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100vw !important;
		max-width: 100vw !important;
		height: auto !important;
		min-height: 100%;
		max-height: 100%;
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* fit_to_screen тянет .dialog-message на 100vh — из-за этого пустая
	   область под панелью перехватывала бы тапы. Высота по контенту. */
	#elementor-popup-modal-37 .dialog-message {
		display: flex;
		flex-direction: column;
		/* Своё align-items: flex-start от Elementor: в колонке это
		   поперечная (горизонтальная) ось, и содержимое сжималось бы
		   по ширине контента. */
		align-items: stretch;
		flex: 1 0 auto;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: none !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	/* Корень попапа между .dialog-message и .ev-mm — тоже звено
	   флекс-цепочки, иначе растяжение до низа обрывается на нём. */
	#elementor-popup-modal-37 .elementor-37 {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex: 1 0 auto;
		width: 100%;
	}

	/* Штатный крестик Elementor спозиционирован под десктоп
	   (34px / 388px) — на мобиле крестик свой, в шапке попапа.
	   Не удаляем, а прячем: JS кликает по нему, чтобы закрыть попап
	   штатным способом (display:none клику не мешает). */
	#elementor-popup-modal-37 .dialog-close-button {
		display: none !important;
	}

	/* Родное содержимое попапа (логотип, виджет меню, блок контактов,
	   картинка) на мобиле заменяется построенными панелями. */
	#elementor-popup-modal-37 .elementor-37 > .elementor-element {
		display: none !important;
	}

	/* ---------------------------------------------------------------
	 * Шапка попапа: 360×74, padding 10, space-between, белый фон.
	 * --------------------------------------------------------------- */
	/*
	 * Анимация открытия и закрытия.
	 *
	 * Открытие: полотно меню проявляется быстро (оно перекрывает
	 * страницу целиком, тянуть тут нечего), а шапка и строки въезжают
	 * снизу вверх с небольшим разбегом — движение читается как одно,
	 * но у него есть направление. Разбег ограничен девятью шагами
	 * (--ev-mm-i проставляет JS): на длинном меню иначе последние
	 * строки приезжали бы почти через секунду.
	 *
	 * Закрытие: обратный ход и заметно быстрее входа (170 против 300) —
	 * уходящий экран не должен заставлять себя ждать. Раньше закрытия
	 * как анимации не было вовсе: JS сразу кликал по штатному крестику
	 * Elementor, и попап исчезал кадром.
	 *
	 * Классы .is-opening / .is-closing навешивает JS: Elementor держит
	 * разметку попапа между открытиями, поэтому на создание элемента
	 * опираться нельзя — анимация проиграла бы только в первый раз.
	 */
	.ev-mm {
		--ev-mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
		--ev-mm-ease-out: cubic-bezier(0.4, 0, 1, 1);
		--ev-mm-rise: 300ms;
		--ev-mm-leave: 170ms;
	}

	@keyframes ev-mm-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes ev-mm-rise {
		from {
			opacity: 0;
			transform: translateY(12px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes ev-mm-leave {
		from {
			opacity: 1;
			transform: none;
		}

		to {
			opacity: 0;
			transform: translateY(-6px);
		}
	}

	.ev-mm.is-opening {
		animation: ev-mm-in 160ms linear both;
	}

	.ev-mm.is-opening .ev-mm__header {
		animation: ev-mm-rise var(--ev-mm-rise) var(--ev-mm-ease) both;
	}

	/*
	 * Едут только строки активной панели — соседние панели лежат в той
	 * же области и на экране их нет.
	 */
	.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__back,
	.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__title,
	.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__item {
		animation: ev-mm-rise var(--ev-mm-rise) var(--ev-mm-ease) both;
		animation-delay: calc(30ms + var(--ev-mm-i, 0) * 20ms);
	}

	.ev-mm.is-closing {
		animation: ev-mm-leave var(--ev-mm-leave) var(--ev-mm-ease-out) both;
	}

	.ev-mm {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex: 1 0 auto;
		width: 100%;
		background: #fafaf9;

		/* Дефолтная подсветка тапа (серо-синий прямоугольник поверх
		   строки) — здесь лишняя: своё нажатое состояние рисуем
		   цветом текста. */
		-webkit-tap-highlight-color: transparent;
	}

	.ev-mm__header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 74px;
		padding: 10px;
		background: #ffffff;
	}

	/* Крестик: в макете бокс 40×40, верстаем 44×44 ради тач-таргета
	   (решение 4 ТЗ) — глиф остаётся 16×16. */
	.ev-mm__close,
	.ev-mm__phone {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.ev-mm__close::before,
	.ev-mm__close::after {
		content: "";
		position: absolute;
		width: 16px;
		height: 0;
		border-top: 1.4px solid #323439;
	}

	.ev-mm__close {
		position: relative;
	}

	.ev-mm__close::before {
		transform: rotate(45deg);
	}

	.ev-mm__close::after {
		transform: rotate(-45deg);
	}

	.ev-mm__logo {
		display: block;
		flex: none;
		width: 50px;
		height: 54px;
		line-height: 0;
	}

	.ev-mm__logo img {
		width: 50px;
		height: 54px;
		display: block;
	}

	/* Иконка трубки — тот же контур, что у кнопки звонка в шапке
	   страницы (style.css, Этап 13), только тёмная: в попапе шапка
	   белая. Глиф 20×20 по дампу. */
	.ev-mm__phone::before {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background-color: #323439;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* ---------------------------------------------------------------
	 * Область панелей. Высота = высота активной панели, анимируется
	 * вместе со сдвигом (на разных уровнях панель разной высоты:
	 * 537 / 658 / 374 / 445px по макету).
	 * --------------------------------------------------------------- */
	/* Высоту анимирует JS (Web Animations API), а не CSS-transition:
	   на transition:height попадали в залипание — попап перепечатывается
	   Elementor'ом, прерванный переход оставлял computed-высоту от
	   прошлого уровня, и её не перебивал даже inline !important. */
	/* flex: 1 0 auto — базой остаётся высота активной панели (её
	   проставляет JS инлайном), а свободный остаток экрана область
	   добирает сама. Так фон меню доходит до низа, когда панель
	   короче экрана. */
	.ev-mm__viewport {
		position: relative;
		flex: 1 0 auto;
		overflow: hidden;
		background: #fafaf9;
	}

	/* Уровни ездят тем же easing, что и вход, и подхватывают лёгкое
	   затухание — чтобы уходящая панель не «моргала» на месте, а
	   растворялась по ходу сдвига. */
	.ev-mm__panel {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition:
			transform 260ms var(--ev-mm-ease),
			opacity 180ms ease,
			visibility 260ms;
	}

	.ev-mm__panel.is-active {
		position: relative;
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

	/* Панель, оставшаяся слева (мы ушли на уровень глубже). */
	.ev-mm__panel.is-behind {
		transform: translateX(-100%);
	}

	/* Пока анимация не инициализирована — не дёргаем переходами. */
	.ev-mm.is-static .ev-mm__panel {
		transition: none;
	}

	/* ---------------------------------------------------------------
	 * Строка «Назад» (уровни 2+): 360×74, padding 10px 10px 20px.
	 * --------------------------------------------------------------- */
	.ev-mm__back {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 74px;
		padding: 10px 10px 20px;
		border: 0;
		background: transparent;
		text-align: left;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	/* Кнопка 44×44 с margin: 0 -2px по дампу — визуально прижата к краю. */
	.ev-mm__back-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		margin: 0 -2px;
	}

	/* Стрелка «назад» — со стержнем (Figma-дамп описывает только
	   наконечник-шеврон 12×16 rotate(90deg), стержень в него не попал;
	   форма сверена по PDF-макету). Итог ≈ 17 × 13, обводка 1.4px. */
	.ev-mm__back-icon::before {
		content: "";
		display: block;
		width: 17px;
		height: 13px;
		background-color: #323439;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M16.3 6.5H1.5M7.1 1.2 1.2 6.5l5.9 5.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath d='M16.3 6.5H1.5M7.1 1.2 1.2 6.5l5.9 5.3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Токен Mobile/text 14 */
	.ev-mm__back-label {
		font-family: "TikTok Sans", sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #323439;
	}

	/* ---------------------------------------------------------------
	 * Заголовок раздела (уровни 2+): 360×47, padding 0 20px 24px.
	 * Кликабелен только если у пункта есть настоящий URL (не «#»).
	 * --------------------------------------------------------------- */
	.ev-mm__title {
		display: flex;
		align-items: center;
		height: 47px;
		padding: 0 20px 24px;
		font-family: "TikTok Sans", sans-serif;
		font-weight: 400;
		font-size: 18px;
		line-height: 23px;
		text-transform: uppercase;
		color: #960a19;
	}

	.ev-mm__title a {
		color: inherit;
		text-decoration: none;
	}

	/* Красный пунктир под заголовком. Ритм штрих 2 / пробел 2 берём
	   градиентом, а не border-dashed: нативный dashed в разных движках
	   рисует по-своему (Firefox — 3/3), а в макете ровно 2/2. */
	.ev-mm__title-rule {
		height: 1px;
		margin: 0 20px;
		background-image: repeating-linear-gradient(to right, #960a19 0 2px, transparent 2px 4px);
	}

	/* ---------------------------------------------------------------
	 * Список пунктов: panel padding 0 20px 40px, строка 320×71.
	 * --------------------------------------------------------------- */
	.ev-mm__list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 20px 40px;
	}

	.ev-mm__item {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 7px;
		width: 100%;
		min-height: 71px;
		padding: 24px 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 4px);
		background-size: 100% 1px;
		background-position: left bottom;
		background-repeat: no-repeat;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;

		/* Токен Heading/H 3.5 */
		font-family: "TikTok Sans", sans-serif;
		font-weight: 400;
		font-size: 18px;
		line-height: 23px;
		color: #323439;
	}

	/* Активное состояние: текущая ветка и нажатие. Фон не меняется —
	   только цвет текста и стрелки (стрелка красится currentColor). */
	.ev-mm__item.is-current,
	.ev-mm__item:active,
	.ev-mm__item:hover {
		color: #960a19;
		background-color: transparent;
	}

	/* Пункт без настоящей ссылки («Вакансии» до появления поста) —
	   строка рисуется, но не кликается и не подсвечивается. */
	.ev-mm__item.is-inert {
		cursor: default;
	}

	.ev-mm__item.is-inert:active,
	.ev-mm__item.is-inert:hover {
		color: #323439;
	}

	/* Стрелка «есть подменю»: бокс 20×20, сам шеврон 5×10, обводка
	   1.4px, цвет наследуется от строки. */
	.ev-mm__chevron {
		flex: none;
		display: block;
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5 12.5 10 7.5 15' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5 12.5 10 7.5 15' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Родительская тема гасит дефолтные стили кнопок непоследовательно
	   (та же дыра из reset.css, что чинили для дэш-пагинации в Этапе 0):
	   у button на :focus вылезает розовый фон. Перебиваем без !important. */
	.ev-mm button:focus,
	.ev-mm button:focus-visible {
		background-color: transparent;
		outline: none;
	}

	.ev-mm__item:focus-visible,
	.ev-mm__back:focus-visible,
	.ev-mm__close:focus-visible,
	.ev-mm__phone:focus-visible {
		outline: 2px solid #960a19;
		outline-offset: -2px;
	}

	@media (prefers-reduced-motion: reduce) {
		.ev-mm__panel {
			transition: none;
		}

		.ev-mm.is-opening,
		.ev-mm.is-opening .ev-mm__header,
		.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__back,
		.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__title,
		.ev-mm.is-opening .ev-mm__panel.is-active .ev-mm__item {
			animation: none;
		}

		/*
		 * Закрытие оставляем анимацией, но мгновенной: JS ждёт её конца,
		 * прежде чем закрыть попап штатным крестиком. Совсем убрать
		 * анимацию нельзя — событие animationend бы не пришло (страховка
		 * по таймеру в JS есть, но лишняя задержка тут ни к чему).
		 */
		.ev-mm.is-closing {
			animation-duration: 1ms;
		}
	}
}