/* ============================================================================
   PlayInWoW — подложка верхней панели меню (border-image, 3-slice)
   ---------------------------------------------------------------------------
   Подключать ПОСЛЕ umenu.css и umenu-site.css. Файл отвечает ТОЛЬКО за саму
   плиту панели и за то, что от неё считается: толщину полосы, высоту строки
   пунктов, посадку свечения кристаллов на наконечники.

   ЧТО БЫЛО НЕ ТАК
   ---------------
   В наборе подложка задана фоном: `background: url(...) center / 100% 100%`.
   Это растягивает арт В ОБЕ стороны, то есть по горизонтали — тем сильнее, чем
   длиннее панель. Арт цельный (2172x724): на концах у него наконечники —
   острие, крупный самоцвет, каскад шевронов, плечо с накладками. При растяжке
   на 1900 px самоцвет расплющивался в широкий плоский ромб, шевроны сливались,
   а острие превращалось в клин. Плюс в umenu-site.css подложке сняли
   aspect-ratio и задали height: 84px — по вертикали арт при этом сжимался, и
   наконечники плющило второй раз, уже поперёк.

   КАК СДЕЛАНО ТЕПЕРЬ
   ------------------
   Скрипт `tools/rail_assets.py` собирает производный атлас

       [ левый наконечник 357 | тянущаяся середина 440 | правый наконечник 357 ]

   и он отдаётся в `border-image` с ГОРИЗОНТАЛЬНОЙ нарезкой: top/bottom slice
   равны нулю, вертикальной нарезки нет вовсе. Наконечники рисуются в боковых
   бордюрах фиксированной ширины — браузер их не тянет НИКОГДА, ни при какой
   длине панели. Тянется только середина, а в ней тянуть нечего: локальные
   украшения (самоцветы кромок, гербовая филигрань в центре, висящие ромбы) из
   неё вычищены, осталась ровная рама с продольным переходом лёд → золото →
   Скверна. Горизонтальное растяжение градиента не искажает — только меняет его
   масштаб, поэтому и 900 px, и 2400 px выглядят одинаково правильно.

   Ширина наконечника ОБЯЗАНА держать ту же пропорцию, что в атласе
   (357 / 204 = 1.75 высоты), иначе самоцвет снова поплывёт. Поэтому в CSS она
   не число, а `calc(--urail-h * 1.75)`.

   Разноцветные половины: правый наконечник НЕ зеркало левого (зеркало дало бы
   справа синий кристалл вместо зелёного) — он вырезан из своего края арта.
   Подробности замеров — в шапке tools/rail_assets.py.
   ========================================================================= */

/* ЕДИНСТВЕННОЕ ЧИСЛО, которым меняется толщина панели. Это высота всего бокса
   подложки; видимая полоса рамы — 0.804 от него (остальное занимают плечи и
   свесы наконечников, которые выходят за раму вверх и вниз).
   118px → рама 95px. Было 84px (рама ~66px).

   Объявлено на :root, а НЕ на .wow-universal-nav, чтобы толщину можно было
   переопределить с любого предка (стенд так и делает — задаёт её на обойме
   панели). Своё объявление на элементе всегда сильнее унаследованного, и на
   .wow-universal-nav переменная стала бы неперебиваемой. */
:root {
	--urail-h: 118px;
}

.wow-universal-nav {
	/* Ширина наконечника. 1.75 = 357/204, пропорция среза в атласе.
	   Производные величины считаются ЗДЕСЬ, а не на :root: подстановка
	   var() происходит на том элементе, где свойство объявлено, — посчитай
	   их на :root, и переопределение --urail-h у предка на них не подействует. */
	--urail-cap: calc(var(--urail-h) * 1.75);

	/* Тёмное поле внутри рамы лежит не строго по центру бокса, а ниже (замер:
	   строки 64..147 из 204, центр 0.517). Пункты меню сдвигаем на эту разницу,
	   иначе строка стоит чуть выше своего окна.
	   0.025, а не расчётные 0.017: сама строка пунктов в сетке садится на 1px
	   выше центра бокса (замер по DOM: 0.492 вместо 0.5 — сетку тянет вверх
	   разделитель между пунктами), и эту единицу тоже надо добрать. */
	--urail-nudge: calc(var(--urail-h) * 0.025);

	height: var(--urail-h);
}

.wow-universal-nav__rail {
	/* aspect-ratio из набора и height из umenu-site.css перебиваем адресно:
	   толщина панели теперь не зависит от её длины */
	aspect-ratio: auto;
	height: var(--urail-h);
	box-sizing: border-box;

	/* фон-растяжку из набора снимаем полностью — её место занял border-image */
	background: none;

	/* ГРАБЛЯ (см. память theme-css-cascade-traps): короткое `border: 0` из
	   umenu.css сбрасывает border-image целиком. Поэтому здесь border задаётся
	   длинными свойствами и в этом файле, который идёт ПОЗЖЕ. */
	border-style: solid;
	border-width: 0 var(--urail-cap);
	border-color: transparent;
	border-image-source: url(../images/ui/urail-plate.webp);
	border-image-slice: 0 357 fill;
	border-image-width: 0 var(--urail-cap);
	border-image-repeat: stretch;
}

/* Строка пунктов живёт в той же высоте, что и плита, и сидит в тёмном поле */
.wow-universal-nav__desktop {
	height: var(--urail-h);
	transform: translateY(var(--urail-nudge));
}

/* Пункт по высоте — 0.36 от плиты: тёмное поле рамы 0.39, остаётся немного
   воздуха сверху и снизу, чтобы подсветка пункта не залезала на кромку.
   При --urail-h: 118px это 42px, как было. */
.wow-nav-button {
	height: calc(var(--urail-h) * 0.36);
}

/* Разделители между пунктами тоже тянутся от толщины панели: на глухих 11px
   они на толстой раме выглядели короткими обрубками */
.wow-universal-nav__group > li + li::before {
	top: calc(var(--urail-h) * 0.115);
	bottom: calc(var(--urail-h) * 0.115);
}

/* ----------------------------------------------------------------------------
   Свечение кристаллов
   ---------------------------------------------------------------------------
   В наборе оно позиционировано в процентах от ДЛИНЫ панели (left: -1.5%), то
   есть уезжает с наконечника тем дальше, чем панель длиннее. Теперь наконечник
   имеет собственную фиксированную ширину, и свечение считается от неё: центр
   самоцвета замерен на 0.19 ширины наконечника от края (в арте это x=68 из 357)
   и точно по центру рамы по вертикали.
   ------------------------------------------------------------------------- */

.wow-universal-nav__crystal-glow {
	width: calc(var(--urail-h) * 0.62);
	aspect-ratio: 1;
}

.wow-universal-nav__crystal-glow--ice {
	left: calc(var(--urail-cap) * 0.19 - var(--urail-h) * 0.31);
}

.wow-universal-nav__crystal-glow--fel {
	right: calc(var(--urail-cap) * 0.19 - var(--urail-h) * 0.31);
}

/* Отступ контента внутренних страниц в umenu-site.css подобран под панель
   84px (150px) и от толщины не зависел. Привязываем его к той же переменной:
   при 84px формула даёт прежние 150px, при 118px — 184px, и шапка перестаёт
   наезжать на первый заголовок. */
.page > .section-content > .shell {
	padding-top: calc(var(--urail-h) + 66px);
}

@media (max-width: 900px) {
	.page > .section-content > .shell {
		padding-top: calc(var(--urail-h) + 28px);
	}
}

/* ----------------------------------------------------------------------------
   Узкие экраны
   ---------------------------------------------------------------------------
   Два наконечника занимают 2 x 1.75 x --urail-h = 3.5 высоты. Если панель
   короче этого, браузер по спецификации уменьшает боковые бордюры
   пропорционально — то есть начинает сплющивать наконечники ровно так, как
   было до всей этой работы. При 118px порог наступает на 413px длины панели.
   Поэтому на узких экранах толщину снижаем заранее, с запасом.
   ------------------------------------------------------------------------- */

@media (max-width: 919px) {
	:root {
		--urail-h: 92px;
	}
}

/* 64px, а не 70: на узких экранах меню сворачивается и подложка сжимается
   ещё и правилом `is-collapsed .rail { right/left: 10% }`, то есть остаётся
   80% длины панели. При вьюпорте 320px это 233px, а два наконечника при 70px
   требуют 245px — как раз тот случай, когда браузер начал бы их плющить. */
@media (max-width: 620px) {
	:root {
		--urail-h: 64px;
	}
}