/* css/header-nav-fit.css
   =====================================================================
   Ряд десктопной шапки после добавления пункта ViewChat Play.

   В .wsmenu-list теперь девять ссылок, кнопка Download и переключатель
   языка — одиннадцать элементов вместо десяти. Дефолтные отступы ссылок
   (padding 24px, css/language-modal.css) рассчитаны на прежний набор и
   уже до этой правки роняли «Language» на вторую строку в диапазоне
   992–1240px. Здесь ряд ужимается по ступеням ширины так, чтобы все
   одиннадцать элементов держались в одну строку на 1100, 1440 и 1920px
   во всех одиннадцати языках.

   Почему !important и #header: и css/language-modal.css, и
   css/faqs-support.css задают отступы шапки через #header + !important,
   поэтому здесь та же специфичность, а перевес даёт порядок — файл
   подключается последним на каждой странице. Гонки со специфичностью
   тут нет, есть повторение уже принятого в проекте приёма.

   Мобильное меню не трогается: каждый медиазапрос начинается с 992px,
   то есть выше точки переключения на «три полоски» (max-width: 991px).

   body:not(.download-page) — не косметика. У download.html шапка не
   шаблонная: css/download-desktop-redesign.css перекладывает .wsmenu-list
   из float во flex и ведёт собственную лестницу сжатия вплоть до снятия
   подписи «Language». Общие правила отсюда выигрывали у неё по
   специфичности и ломали ряд, поэтому эта страница сжимается только
   своим файлом.

   Ступени:
     >= 1441px  — контейнер 1440/1480px, ряд помещается почти без сжатия;
     1241–1440  — контейнер уже, отступы ссылок меньше;
     992–1240   — контейнер во всю ширину окна, самая плотная раскладка.

   Отдельная строка для ru/es/th/vi — у них самые длинные подписи; для
   них же дополнительно ужимается «Creators» (.models-nav-item), самая
   длинная позиция ряда (во вьетнамском «Những người sáng tạo»).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* >= 1441px                                                           */
/* ------------------------------------------------------------------ */
@media (min-width: 1441px) {
  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 15px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 15px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.mobile-last-link > a.btn.last-link {
    font-size: 15px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 14px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ------------------------------------------------------------------ */
/* 1241–1440px                                                         */
/* ------------------------------------------------------------------ */
@media (min-width: 1241px) and (max-width: 1440.98px) {
  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 15px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 14px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.mobile-last-link > a.btn.last-link {
    font-size: 15px !important;
    padding-left: 19px !important;
    padding-right: 19px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ------------------------------------------------------------------ */
/* 992–1240px                                                          */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1240.98px) {
  /* Контейнер здесь во всю ширину окна, поэтому его собственные поля и
     высота логотипа — такая же часть бюджета строки, как и отступы
     ссылок. Подпись «Language» остаётся на месте: её удалось сохранить,
     ужав всё остальное. */
  body:not(.download-page) #header .wsmainwp {
    padding-left: 14px;
    padding-right: 12px;
  }

  body:not(.download-page) #header .desktoplogo img {
    max-height: 28px;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 14px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 14px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.mobile-last-link > a.btn.last-link {
    font-size: 14px !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.lang-switcher-desktop {
    padding: 10px 0 10px 6px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li > a.h-link {
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html.lang-ru body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-es body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-th body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link,
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li.models-nav-item > a.h-link {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ====================================================================
   Сдвиг группы текстовых пунктов влево

   Двигается только группа ссылок — от первого пункта (About / ViewChat
   소개) до ViewChat Play включительно. Логотип, Download и переключатель
   языка остаются ровно там, где были.

   Механика: position: relative + left. Относительное смещение не влияет
   на раскладку, поэтому ширина ряда, позиции Download и языка, высота
   шапки и вертикальное выравнивание не меняются. Общий контейнер
   (.wsmainwp) и сам .wsmenu не трогаются вовсе — сдвиг живёт только на
   тех <li>, которые в группу входят.

   Величина сдвига упирается в логотип, а не в вёрстку: ряд и так почти
   во всю ширину контейнера, и запас слева зависит и от ширины окна, и от
   длины подписей в конкретном языке. Значения ниже подобраны по замеру
   воздуха между картинкой логотипа и первой подписью так, чтобы после
   сдвига оставалось не меньше ~24px; где запаса нет, сдвиг равен нулю, а
   не «сколько-нибудь». Шрифты, начертание и интервалы между пунктами при
   этом не трогаются.

   Ниже 992px правил нет вовсе: там работает мобильное меню.
   ==================================================================== */

@media (min-width: 1601px) {
  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    position: relative;
    left: -80px;
  }
}

@media (min-width: 1441px) and (max-width: 1600.98px) {
  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    position: relative;
    left: -80px;
  }

  /* Единственное исключение. Во вьетнамском «Những người sáng tạo» —
     самая длинная подпись сайта, и на самой узкой из шапок (faqs.html,
     своя ширина контейнера) до логотипа остаётся 53px воздуха
     вместо 107–156px у остальных языков. С 1601px запас вырастает до
     124px, и там сдвиг уже общий. */
  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    left: -24px;
  }
}

@media (min-width: 1361px) and (max-width: 1440.98px) {
  /* Здесь воздуха до логотипа уже меньше: на 1361px у арабского его 86px
     против 136px у английского. Сдвиг урезан до 56px, чтобы переход от
     «не двигаем» к полным 80px шёл ступенькой, а не рывком. */
  body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    position: relative;
    left: -56px;
  }

  html.lang-vi body:not(.download-page) #header .wsmenu > .wsmenu-list.nav-theme > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    left: -24px;
  }
}

/* 992–1360px: сдвига нет. Ниже 1241px ряд шаблонной шапки уходит под
   логотип второй строкой и упирается в левое поле контейнера, а на
   1241–1360px до логотипа остаётся 21px в арабском и вовсе ничего во
   вьетнамском — двигать нечего. */

/* --------------------------------------------------------------------
   download.html — своя шапка

   Там .wsmenu-list разложен во flex, ссылки центрируются в остатке
   полосы, а pill и язык прижаты вправо (css/download-desktop-redesign.css).
   Запас до логотипа здесь принципиально меньше: 40–57px на 1441px и
   выше (узкое место — вьетнамский), 14–40px ниже. Поэтому группа
   двигается настолько, насколько этот запас позволяет, а ниже 1441px
   не двигается вовсе.
   -------------------------------------------------------------------- */

@media (min-width: 1441px) {
  body.download-page #header .wsmenu > .wsmenu-list > li:not(.mobile-last-link):not(.lang-switcher-desktop):not(.dld-nav-cta) {
    position: relative;
    left: -16px;
  }
}