/* ============================================================================
   PlayInWoW — посадка универсального меню на сайт
   ---------------------------------------------------------------------------
   Присланный набор рассчитан на отдельную страницу: у шапки там своя высота
   390 px и свой фон — синь слева, зелень справа. На нашем сайте под шапкой
   идёт интро (арт и видео), поэтому:

     * фон шапки снимаем целиком — за неё отвечает сцена страницы;
     * слой __sky с туманами гасим: это и есть та «задняя зелень»;
     * min-height убираем — именно он давал пустую полосу сверху;
     * саму шапку кладём ПОВЕРХ первого экрана, а не над ним.

   Файл подключается ПОСЛЕ umenu.css, чтобы оригинал остался нетронутым и его
   можно было обновить из набора заново.
   ========================================================================= */

.wow-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;

	/* высоту держит только содержимое: строка сверху + полоса меню */
	min-height: 0;
	background: none;

	/* клинок эмблемы свисает ниже полосы — пусть висит над интро */
	overflow: visible;

	/* шапка не должна перехватывать клики по интро в пустых местах */
	pointer-events: none;
}

/* интерактивное внутри шапки клики принимает */
.wow-header__topline,
.wow-universal-nav,
.wow-nav-button,
.wow-menu-logo,
.wow-universal-nav__toggle,
.wow-universal-nav__drawer {
	pointer-events: auto;
}

/* «задняя зелень» и синь: собственная атмосфера набора нам не нужна —
   под шапкой уже живёт сцена страницы со своими туманами */
.wow-header__sky {
	display: none;
}

/* полоса меню и так стоит на своей раме, лишний воздух сверху убираем */
.wow-universal-nav {
	margin-top: 0;
}

/* Строку с названием и версиями делаем чуть плотнее: она лежит поверх арта,
   и высокая шапка съедала бы у интро полезное место. */
.wow-header__topline {
	min-height: 34px;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
}

/* Первый экран занимает всё окно и начинается от самого верха: шапка лежит
   поверх него, поэтому никаких компенсирующих отступов не нужно. */
.page > .deck-root,
.page > .section-content {
	padding-top: 0;
	margin-top: 0;
}

/* Контент внутренних страниц всё же нельзя загонять под меню — там нет
   полноэкранного интро, поэтому только им даём отступ на высоту шапки. */
.page > .section-content > .shell {
	padding-top: 150px;
}

@media (max-width: 900px) {
	.page > .section-content > .shell { padding-top: 120px; }
}

/* ----------------------------------------------------------------------------
   Длина полосы по горизонтали
   ---------------------------------------------------------------------------
   В наборе полоса ограничена 1540 px, и на широком мониторе по бокам оставались
   заметные поля. Удлинили до 2160 px, поля оставили узкими (по 16 px): край в
   край не тянем — так уже пробовали и не подошло.
   ------------------------------------------------------------------------- */

.wow-universal-nav,
.wow-header__topline {
	width: min(2160px, calc(100% - 32px));
}

/* Пункт стал шире, чтобы длинные названия влезали в одну-две строки, но не
   превращался в простыню: свободное место уходит в боковые части полосы. */
.wow-nav-button {
	max-width: 210px;
	white-space: normal;
	text-align: center;
	line-height: 1.15;
}

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

.wow-universal-nav__group--left > li:last-child .wow-nav-button {
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
	padding-right: 22px;
}

.wow-universal-nav__group--right > li:first-child .wow-nav-button {
	clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
	padding-left: 22px;
}

@media (max-width: 919px) {
	.wow-universal-nav__group--left > li:last-child .wow-nav-button,
	.wow-universal-nav__group--right > li:first-child .wow-nav-button {
		clip-path: none;
		padding-inline: 12px;
	}
}

/* ----------------------------------------------------------------------------
   Толщина панели
   ---------------------------------------------------------------------------
   КОРЕНЬ ПРОБЛЕМЫ: у подложки (.wow-universal-nav__rail) в наборе задано
   aspect-ratio: 2048 / 223 при left/right: 0 — то есть её ТОЛЩИНА считается от
   ДЛИНЫ. Пока полоса была 1540 px, подложка выходила ~168 px; когда мы удлинили
   её до 2160 px, подложка раздулась до ~235 px. Поэтому «панель толстая» — и
   поэтому правки height у самой полосы ничего не меняли: они не трогали
   подложку.

   Лечение: снимаем пропорцию и задаём подложке фиксированную высоту. Арт
   растягивается по ширине (background-size: 100% 100% уже стоит в наборе), а по
   вертикали остаётся тонким — ровно то, что нужно: длинная узкая панель.
   ------------------------------------------------------------------------- */

.wow-universal-nav__rail {
	aspect-ratio: auto;
	height: 84px;
}

/* высоту строки пунктов держим в тех же 84 px, чтобы они сидели по центру рамы */
.wow-universal-nav,
.wow-universal-nav__desktop {
	height: 84px;
}

.wow-nav-button {
	height: 42px;
}

/* эмблема соразмерно мельче: она перекрывает центр панели и при толстой раме
   выглядела крупной, а на тонкой — торчала бы над ней */
.wow-menu-logo {
	width: clamp(260px, 20vw, 330px);
}

/* строка с названием и версиями прижата к панели, но не заезжает под неё */
.wow-header__topline {
	min-height: 24px;
	padding-bottom: 2px;
}