/* ===========================================================================
   my-ui — шапка на телефоне, бургер и мобильное меню

   Копируется целиком. Классы состояний ставит menu.js:
     .ui-burger.is-open        бургер стал крестиком
     .ui-menu.is-open          меню открыто
     html.ui-menu-open         страница под меню не крутится
     html.ui-menu-lift         островок шапки поднят над плоскостью меню
     .ui-header.is-hidden      шапка уехала при прокрутке вниз
     --ui-header-h             фактическая высота шапки (пишет скрипт)

   Как выглядит и как движется — в menu.md. Здесь только код.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Шапка-островок

   Меню и панель поиска считают своё положение от шапки, поэтому шапка
   должна быть закреплена (fixed) и отступать от краёв на --ui-edge.
   Свой дизайн шапки — ваш; обязательны только position, top/left/right
   и z-index. Ничего из transform / filter / perspective / will-change
   на шапку не ставить: любое из них сделает её точкой отсчёта
   для закреплённых потомков (панель поиска), и та уедет.
   --------------------------------------------------------------------------- */

.ui-header {
	position: fixed;
	top: calc(var(--ui-edge) / 2);
	left: var(--ui-edge);
	right: var(--ui-edge);
	z-index: 10;
	background: var(--ui-card);
	border-radius: 22px;
}

/* Место под шапку у первого блока страницы: от переменной, а не от числа —
   высота шапки меняется от переноса подсказки в поиске и от ширины окна. */
.ui-header-offset {
	padding-top: calc(var(--ui-header-h, 80px) + var(--ui-edge));
}

/* ---------------------------------------------------------------------------
   1. Подсветка касания

   Мобильные браузеры при нажатии заливают ссылку или кнопку своим
   полупрозрачным прямоугольником по границам блока. У бургера это серый
   квадрат поверх круглого кружка и крестика. Снимаем целиком: обратную
   связь дают собственные :active. Кольцо фокуса с клавиатуры не трогаем.
   --------------------------------------------------------------------------- */

a,
button,
label,
summary,
[role="button"],
[tabindex] {
	-webkit-tap-highlight-color: transparent;
}

.ui-burger:focus:not(:focus-visible),
.ui-search-toggle:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
   2. Бургер, который становится крестиком (образец — nicol-sky.ru)

   Только масштаб и только прозрачность кружка, стандартный ease.
   На открытии бургер сжимается в точку, и лишь потом из точки растёт
   крест; на закрытии — наоборот. Кружок появляется вместе с уходом
   бургера и гаснет вместе с уходом креста.

   У образца обе половины по 0.5 с — знак перекидывается целую секунду.
   Здесь по 0.31 с: 0.31 + 0.31 = 0.62 — ровно столько едет плоскость
   меню (0.62 с на открытие, 0.5 + 0.12 задержки на закрытие). Знак
   и меню заканчивают ход вместе; рисунок хода — тот же, что в образце.
   Меняя время плоскости, менять и эти два числа: половина хода каждое.

   Прозрачность на самих знаках не трогать: вариант «с прозрачностью
   и встречными задержками» давал пустую кнопку на середине хода.
   Крест — отдельный svg, а не сложенные полоски: так его толщина
   и размер не зависят от полосок бургера.
   --------------------------------------------------------------------------- */

.ui-burger {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ui-ink);
	cursor: pointer;
}

/* Кружок под крестом: 30px в кнопке 44 */
.ui-burger::before {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	background: var(--ui-surface-2);
	opacity: 0;
	transition: opacity 0.31s 0.31s;
}

.ui-burger.is-open::before {
	opacity: 1;
	transition: opacity 0.31s;
}

/* Три полоски: 24 × 16, то есть 2px + 5px + 2px + 5px + 2px */
.ui-burger__lines {
	position: relative;
	display: block;
	width: 24px;
	height: 16px;
	transform-origin: center;
	transition: transform 0.31s 0.31s;
}

.ui-burger.is-open .ui-burger__lines {
	transform: scale(0);
	transition: transform 0.31s;
}

/* 2px — та же толщина, что у шевронов и стрелок интерфейса. 1px читался
   сеткой, 3px тяжелее соседней кнопки-лупы. Цвет — набор, не акцент:
   рядом стоит синяя кнопка поиска, и синий знак читался её частью. */
.ui-burger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.ui-burger__line:nth-child(1) { top: 0; }
.ui-burger__line:nth-child(2) { top: 7px; }
.ui-burger__line:nth-child(3) { top: 14px; }

.ui-burger__x {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0);
	transition: transform 0.31s;
}

.ui-burger__x svg {
	width: 16px;
	height: 16px;
}

.ui-burger.is-open .ui-burger__x {
	transform: scale(1);
	transition: transform 0.31s 0.31s;
}

/* ---------------------------------------------------------------------------
   3. Мобильное меню
   --------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ui-burger {
		display: flex;
	}

	/* Контейнер. Своего фона нет — его рисует .ui-menu__sheet, она же
	   и выезжает. Пока меню закрыто, оно не ловит нажатий и невидимо
	   для клавиатуры (visibility). Задержка visibility равна времени
	   ухода плоскости. */
	.ui-menu {
		position: fixed;
		inset: 0;
		z-index: 30;
		height: 100dvh;
		overflow: hidden;
		background: none;
		pointer-events: none;
		visibility: hidden;
		transition: visibility 0s linear 0.62s;
	}

	.ui-menu.is-open {
		pointer-events: auto;
		visibility: visible;
		transition: visibility 0s;
	}

	/* Плоскость. Выезжает из-за верхнего края под шапкой — движение
	   читается как её продолжение. На закрытии уходит с задержкой:
	   сначала гаснут строки. Цвет — фон страницы: тёмный лист был бы
	   единственным тёмным экраном на светлом сайте. */
	.ui-menu__sheet {
		position: absolute;
		inset: 0;
		background: var(--ui-page);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.5s var(--ui-ease) 0.12s;
	}

	.ui-menu.is-open .ui-menu__sheet {
		transform: translate3d(0, 0, 0);
		transition: transform 0.62s var(--ui-ease);
	}

	.ui-menu__body {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
	}

	/* Прокручивается содержимое, а не плоскость. Сверху — место под
	   островок шапки: он остаётся на экране и при открытом меню. */
	.ui-menu__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: calc(var(--ui-header-h, 66px) + var(--ui-edge) / 2 + 18px)
			0 calc(28px + env(safe-area-inset-bottom));
	}

	/* --- строки проявляются по одной, сверху вниз ----------------------
	   Каждая — своя задержка через --m-delay; на закрытии все гаснут
	   разом за 0.22 с, и уже потом уходит плоскость. */
	.ui-menu__search,
	.ui-menu__item,
	.ui-menu__ext,
	.ui-menu__foot {
		opacity: 0;
		transform: translate3d(0, -14px, 0);
		transition: opacity 0.22s var(--ui-ease), transform 0.22s var(--ui-ease);
	}

	.ui-menu.is-open .ui-menu__search,
	.ui-menu.is-open .ui-menu__item,
	.ui-menu.is-open .ui-menu__ext,
	.ui-menu.is-open .ui-menu__foot {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.45s var(--ui-ease) var(--m-delay, 0.3s),
			transform 0.55s var(--ui-ease) var(--m-delay, 0.3s);
	}

	.ui-menu.is-open .ui-menu__search              { --m-delay: 0.26s; }
	.ui-menu.is-open .ui-menu__item:nth-child(1)   { --m-delay: 0.34s; }
	.ui-menu.is-open .ui-menu__item:nth-child(2)   { --m-delay: 0.40s; }
	.ui-menu.is-open .ui-menu__item:nth-child(3)   { --m-delay: 0.46s; }
	.ui-menu.is-open .ui-menu__item:nth-child(4)   { --m-delay: 0.52s; }
	.ui-menu.is-open .ui-menu__ext                 { --m-delay: 0.54s; }
	.ui-menu.is-open .ui-menu__foot                { --m-delay: 0.62s; }

	/* --- строка поиска в меню: открыта всегда --------------------------
	   Обойма белая на голубой плоскости; геометрия та же, что у строки
	   в панели под шапкой (search.css, мобильный блок). */
	.ui-menu__search {
		padding: 0 var(--ui-edge) 22px;
	}

	/* --- строки меню --------------------------------------------------- */

	.ui-menu__list {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
		/* Верхней линии нет: строки отбиты нижними, а верхняя оставалась
		   на экране одна, когда строки уже погасли при закрытии. */
		border-top: 0;
	}

	.ui-menu__item {
		position: relative;
		border-bottom: 1px solid var(--ui-line);
	}

	.ui-menu__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 60px;
		margin: 0;
		padding: 10px var(--ui-edge);
		border: 0;
		border-radius: 0;
		background: transparent;
		font-family: var(--ui-font);
		font-weight: var(--ui-w-strong);
		font-size: 18px;
		line-height: 1.3;
		color: var(--ui-ink);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition: background-color var(--ui-fast) var(--ui-ease),
		            color var(--ui-fast) var(--ui-ease);
	}

	/* Подпись внутри кнопки лежит в span; если база проекта задаёт всем
	   span вес 400, пункт станет тоньше соседних ссылок. */
	.ui-menu__link > span {
		font-weight: inherit;
	}

	.ui-menu__link.is-active {
		color: var(--ui-accent);
	}

	/* Ячейка со стрелкой — справа, во всю высоту строки, до самого края
	   экрана (поле строки съедено отрицательным полем). */
	.ui-menu__chev {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		width: 56px;
		margin: -10px calc(var(--ui-edge) * -1) -10px 0;
		color: var(--ui-accent);
		transition: transform var(--ui-turn) var(--ui-ease);
	}

	.ui-menu__chev svg {
		width: 16px;
		height: 16px;
	}

	.ui-menu__link--toggle[aria-expanded="true"] .ui-menu__chev {
		transform: rotate(180deg);
	}

	/* --- вложенный список: раскрывается сеткой 0fr → 1fr ---------------
	   Высота списка заранее неизвестна, а max-height «с запасом» даёт
	   закрытие рывком после паузы. Пара min-height: 0 + overflow: hidden
	   у внутренней обёртки обязательна, иначе строка не сжимается. */
	.ui-menu__sub {
		display: grid;
		grid-template-rows: 0fr;
		width: 100%;
		margin: 0;
		padding: 0;
		background: var(--ui-card);
		transition: grid-template-rows 0.34s var(--ui-ease);
	}

	.ui-menu__sub.is-open {
		grid-template-rows: 1fr;
	}

	.ui-menu__sub-inner {
		min-height: 0;
		overflow: hidden;
	}

	.ui-menu__sub-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ui-menu__sub-item {
		position: relative;
		border-bottom: 1px solid var(--ui-surface-2);
	}

	.ui-menu__sub-item:last-child {
		border-bottom: 0;
	}

	/* Второй уровень набран акцентом: цвет отделяет его от чёрных разделов */
	.ui-menu__sub-link {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 52px;
		padding: 8px 60px 8px var(--ui-edge);
		font-family: var(--ui-font);
		font-weight: var(--ui-w-ui);
		font-size: 16px;
		line-height: 1.3;
		color: var(--ui-accent);
		text-align: left;
		text-decoration: none;
	}

	.ui-menu__sub-link:active {
		background: var(--ui-surface);
	}

	/* Стрелка третьего уровня: абсолютная, высотой ровно в строку
	   (не top/bottom — пункт с раскрытым списком вырастает на пол-экрана,
	   и стрелка уезжала бы в его середину). Поворачивается сам знак,
	   а не ячейка: иначе вместе с ней уезжает линия слева. */
	.ui-menu__sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 52px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--ui-accent);
		cursor: pointer;
	}

	.ui-menu__sub-toggle svg {
		width: 16px;
		height: 16px;
		transition: transform var(--ui-turn) var(--ui-ease);
	}

	.ui-menu__sub-toggle[aria-expanded="true"] svg {
		transform: rotate(90deg);
	}

	/* Третий уровень — светлая полка внутри белой панели */
	.ui-menu__sub2 {
		display: grid;
		grid-template-rows: 0fr;
		background: color-mix(in srgb, var(--ui-surface) 50%, var(--ui-card));
		transition: grid-template-rows 0.32s var(--ui-ease);
	}

	.ui-menu__sub2.is-open {
		grid-template-rows: 1fr;
	}

	.ui-menu__sub2-inner {
		min-height: 0;
		overflow: hidden;
	}

	.ui-menu__sub2-list {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 4px 0 8px;
		list-style: none;
	}

	/* Третий уровень чёрным: цветом его уровень уже назван полкой,
	   вторая синяя ступень стёрла бы разницу между списком и пунктами. */
	.ui-menu__sub2-link {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 6px var(--ui-edge) 6px calc(var(--ui-edge) + 16px);
		font-family: var(--ui-font);
		font-weight: var(--ui-w-ui);
		font-size: 15px;
		color: var(--ui-ink);
		text-decoration: none;
	}

	.ui-menu__sub2-link:active {
		color: var(--ui-accent);
	}

	/* --- внешние ссылки: под списком, но не в нём ----------------------
	   Отбиты воздухом, без линий — линии означают «строка меню». */
	.ui-menu__ext {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 20px var(--ui-edge) 0;
	}

	.ui-menu__ext-link {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		font-family: var(--ui-font);
		font-weight: var(--ui-w-ui);
		font-size: 16px;
		color: var(--ui-muted);
		text-decoration: none;
	}

	.ui-menu__ext-link svg {
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		color: var(--ui-accent);
	}

	/* --- низ меню: контакты и главная кнопка ---------------------------- */

	.ui-menu__foot {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 22px var(--ui-edge) 0;
	}

	.ui-menu__contact {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 52px;
		font-family: var(--ui-font);
		font-weight: var(--ui-w-strong);
		font-size: 18px;
		color: var(--ui-heading);
		text-decoration: none;
	}

	/* Телефон крупнее: по нему звонят, а не читают */
	.ui-menu__contact--phone {
		font-size: 21px;
		letter-spacing: 0.01em;
	}

	/* Знак в круге. Заливка на ступень темнее листа: с --ui-surface круг
	   сливался бы с голубым фоном меню. */
	/* Круг — обёртка, значок внутри неё. Фон и отступ на самом <svg>
	   Safari на iPhone рисовал пустым кружком. */
	.ui-menu__contact-ico {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--ui-surface-2);
		color: var(--ui-heading);
	}
	.ui-menu__contact-ico svg {
		display: block;
		width: 20px;
		height: 20px;
	}

	.ui-menu__btn {
		width: 100%;
		min-height: 54px;
		margin-top: 14px;
		border: 0;
		border-radius: var(--ui-pill);
		background: var(--ui-accent);
		color: var(--ui-on-accent);
		font-family: var(--ui-font);
		font-weight: var(--ui-w-strong);
		font-size: 17px;
		cursor: pointer;
	}

	.ui-menu__btn:active {
		background: var(--ui-accent-active);
	}

	/* --- страница под открытым меню ------------------------------------
	   Класс на <html>, не на <body>: overflow на body в мобильном Safari
	   прокрутку останавливает не всегда. */
	html.ui-menu-open {
		overflow: hidden;
	}

	/* Отдельный класс: снимается не по нажатию на крестик, а когда
	   плоскость доехала (menu.js слушает transitionend). Иначе шапка
	   ныряла под уезжающую плоскость и пропадала рывком. */
	html.ui-menu-lift .ui-header {
		z-index: 40;
	}

	/* --- шапка прячется при прокрутке вниз ------------------------------
	   Класс ставит menu.js. Уезжает выше своего верхнего зазора с запасом
	   на тень — за краем экрана не остаётся ни полоски. */
	.ui-header {
		transition: transform 0.42s var(--ui-ease), box-shadow 0.3s var(--ui-ease);
	}

	.ui-header.is-hidden {
		transform: translate3d(0, calc(-100% - var(--ui-edge)), 0);
		box-shadow: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.ui-header,
		.ui-menu__sheet,
		.ui-menu.is-open .ui-menu__sheet,
		.ui-menu__search,
		.ui-menu__item,
		.ui-menu__ext,
		.ui-menu__foot,
		.ui-menu__chev,
		.ui-menu__sub,
		.ui-menu__sub2,
		.ui-burger::before,
		.ui-burger__lines,
		.ui-burger__x {
			transition-duration: 0.01s;
			transition-delay: 0s;
		}
	}
}