/*****************************************************************************
 *  Переключатель языка: глобус и меню под ним
 *
 *  Общий файл на все страницы. Раньше язык переключался одной ссылкой с флагом,
 *  и каждая страница держала её оформление у себя. Когда на главной появился
 *  третий язык, ссылка превратилась в меню, и оказалось, что в шапке живут два
 *  разных прочтения сразу: на главной подпись показывала, где вы сейчас, а на
 *  остальных страницах, куда вы попадёте. Свели к первому, а раз элемент теперь
 *  везде один, его стили вынесены сюда, а не размножены по восьми файлам.
 *
 *  Базовый класс .lang остался в каждой странице: он общий с прочими кнопками
 *  шапки и переопределяется темой. Здесь только то, что добавляет глобус.
 *
 *  Цвета берутся переменными страницы, своих не заводим.
 *****************************************************************************/

/* Коробка нужна меню: оно позиционируется от кнопки, а не от шапки. */
.lang-wrap{position:relative;display:inline-flex}

/* Кнопка. Сброс собственного вида кнопки и шрифт от страницы, потому что .lang
   писался под ссылку. Значок квадратный, в отличие от флага: 15 на 10 это
   пропорция полотнища, а кругу нужна высота, иначе он выглядит приплюснутым. */
.lang.lang-g{font-family:inherit;cursor:pointer;gap:6px}
.lang.lang-g svg{width:15px;height:15px}
.lang.lang-g[aria-expanded="true"]{color:var(--text);border-color:var(--stroke-2)}
.lang.lang-g[aria-expanded="true"] svg{opacity:1}

/* Не язык по умолчанию. Сейчас это только муринский на главной, но правило
   общее: если появится ещё один режим без своей страницы, подсветка достанется
   и ему. Синий тот же, что у выбранного чипа фильтра на страницах со списками. */
.lang.lang-g.on{color:var(--sky);border-color:color-mix(in srgb,var(--sky) 45%,transparent);
  background:color-mix(in srgb,var(--blue) 16%,transparent)}
.lang.lang-g.on svg{opacity:1}

/* Меню. Прижато к правому краю кнопки, а не к левому: кнопка сама стоит у
   правого края шапки, и меню, растущее вправо, уезжало бы за экран.

   Появления здесь нет: оно общее для всех выпадающих окон сайта и живёт в
   popup.css. Тут только вид и место.

   Размытия фона здесь нет намеренно. Стояло blur(14px), но фон меню залит на
   98 процентов, и размывать под ним нечего: на вид оно не давало ничего. Зато
   давало баг Chromium 350528364, из-за которого размытые поверхности мерцают
   при прокрутке, – тот самый, что мы вычищали на плитках и обложках. */
.lang-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:80;
  min-width:150px;padding:6px;border-radius:12px;
  background:rgba(15,18,26,.98);border:1px solid var(--stroke-2);
  box-shadow:0 20px 55px rgba(0,0,0,.6)}

/* Пункты. Среди них есть и кнопка, и ссылка, поэтому вид задаётся обоим сразу
   и у ссылки отдельно снимается подчёркивание. */
.lang-item{display:block;width:100%;padding:8px 10px;border:0;border-radius:9px;
  background:none;color:var(--text);font-family:inherit;font-size:13px;line-height:1.2;
  text-align:left;text-decoration:none;cursor:pointer}
.lang-item:hover,.lang-item:focus-visible{background:var(--glass-2);outline:none}
.lang-item[aria-checked="true"]{color:var(--sky)}

/* Узкий экран. Прячется подпись, а не значок: глобус понятен без букв и занимает
   вчетверо меньше места. Прежнее правило было обратным, но писалось оно под
   флаг, а британское полотнище само по себе ничего не говорит.
   Рамка снимается заодно: она обводила подпись, а без подписи обводит пустоту, и
   обрамлённый глобус выбивался из ряда – рядом стоит значок обратной связи,
   голая иконка без коробки. Размер и поля здесь как у него.
   Включённый режим показывает тогда не фон, а цвет самого глобуса. */
@media(max-width:519px){
  #langLbl{display:none}
  .lang.lang-g{padding:8px 6px;gap:0;border-color:transparent;background:none}
  .lang.lang-g svg{width:17px;height:17px;opacity:1}
  .lang.lang-g.on{color:var(--sky);background:none;border-color:transparent}
}