/* =====================================================================
   Языковой слой сайта: переключатель языка, гарнитуры для китайского и
   арабского, зеркальная вёрстка для арабского (RTL).

   Подключается после css/styles.css на всех страницах. Здесь только то, что
   относится к языкам: базовый дизайн остаётся в styles.css, мобильный слой —
   в mobile.css.

   Адреса языковых версий проставляет js/i18n/i18n.js; этот файл отвечает
   только за внешний вид.
   ===================================================================== */

/* ===== Переключатель языка =====
   Кнопка-«пилюля» с глобусом и текущим кодом языка, под ней — список языков.
   Сделана по образцу кнопки-бургера (.nav-toggle), чтобы шапка выглядела
   цельно: тот же фон, та же рамка, та же высота 44px. */

.lang-switch {
  position: relative;
  flex: 0 0 auto;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(212, 160, 74, 0.14), rgba(196, 92, 38, 0.05) 60%, rgba(12, 10, 8, 0) 100%),
    var(--bg-2);
  border: 1px solid rgba(212, 160, 74, 0.34);
  color: var(--sand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lang-btn svg {
  display: block;
  opacity: 0.85;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  color: var(--gold-2);
  border-color: rgba(240, 198, 116, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.12);
  outline: none;
}

.lang-cur {
  min-width: 1.6em;
  text-align: center;
}

/* Стрелка-указатель, что под кнопкой раскрывается список. */
.lang-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.lang-switch.open .lang-btn::after {
  transform: rotate(180deg);
}

/* Список языков. Скрыт, пока не открыт (атрибут hidden не используем:
   список должен открываться и без перерисовки — управляет класс .open). */
.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 70;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid rgba(212, 160, 74, 0.34);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--sand);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: rgba(212, 160, 74, 0.12);
  color: var(--gold-2);
  outline: none;
}

/* Текущий язык: подсвечен и помечен для скринридеров атрибутом aria-current. */
.lang-menu a.on {
  background: rgba(212, 160, 74, 0.16);
  color: var(--gold-2);
  font-weight: 600;
}

.lang-code {
  flex: 0 0 auto;
  min-width: 2.6em;
  color: var(--sand-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-menu a.on .lang-code {
  color: var(--gold);
}

/* ===== Телефон: переключатель как панель во всю ширину шапки =====
   На <=700px меню сайта сворачивается в бургер (css/mobile.css), и в шапке
   остаются три элемента: логотип, переключатель языка и бургер. Маленький
   выпадающий список, как на десктопе, на телефоне неудобен: по строкам
   высотой 36px трудно попадать пальцем. Поэтому здесь список языков
   разворачивается в панель во всю ширину шапки — тем же оформлением, что и
   панель бургер-меню (body.menu-open nav в css/mobile.css), чтобы обе панели
   читались как одно семейство.

   Чтобы абсолютная панель отсчитывалась от шапки, а не от кнопки, у
   .lang-switch здесь position: static — тогда ближайшим позиционированным
   предком становится sticky-шапка, и left/right: 0 дают полную ширину. */
@media (max-width: 700px) {
  .lang-switch {
    /* меню скрыто — прижимаем кнопку языка к бургеру у правого края */
    margin-left: auto;
    position: static;
  }

  .nav-toggle {
    margin-left: 8px;
  }

  /* Кнопка: та же высота 44px, что у бургера, — цели выровнены по одной линии */
  .lang-btn {
    height: 44px;
    padding: 0 11px;
    gap: 6px;
    touch-action: manipulation;
  }

  .lang-menu {
    top: calc(100% + 6px);
    inset-inline: 0;
    z-index: 40;
    min-width: 0;
    padding: 8px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(212, 160, 74, 0.08), rgba(196, 92, 38, 0.03) 30%, rgba(12, 10, 8, 0) 100%),
      #1d1711;
    border: 1px solid rgba(212, 160, 74, 0.35);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(240, 198, 116, 0.12);
    max-height: calc(100dvh - 120px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Панель не «подпрыгивает», как маленький список: она раскрывается
       от шапки, и сдвиг вверх смотрелся бы неуместно. */
    transform: none;
  }

  .lang-switch.open .lang-menu {
    transform: none;
  }

  /* Строки списка: крупные тач-цели (не меньше 48px по высоте, как советуют
     руководства по мобильным интерфейсам) и разделители между строками. */
  .lang-menu a {
    min-height: 52px;
    padding: 12px 16px;
    gap: 12px;
    font-size: 16px;
    border-radius: 12px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .lang-menu li + li a {
    border-top: 1px solid rgba(232, 213, 181, 0.1);
  }

  /* На телефоне нет hover — отзываемся на нажатие */
  .lang-menu a:active {
    background: rgba(212, 160, 74, 0.14);
    color: var(--gold-2);
  }

  .lang-code {
    min-width: 3.2em;
    font-size: 12px;
  }

  /* Текущий язык помечаем галочкой справа: цвет фона на телефоне заметен
     хуже, а галочка однозначна. */
  .lang-menu a.on::after {
    content: "✓";
    margin-inline-start: auto;
    color: var(--gold);
    font-weight: 700;
  }

  .lang-switch.open .lang-menu {
    animation: lang-in 0.18s ease;
  }

  /* Открытый список должен быть поверх кнопки «наверх»: она закреплена внизу
     справа и на низком экране могла бы оказаться поверх панели. Класс
     lang-open ставит js/i18n/i18n.js. */
  body.lang-open .to-top {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes lang-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Как и у панели бургер-меню: при отключённой анимации в системе
   раскрытие происходит без движения. */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .lang-switch.open .lang-menu {
    animation: none;
  }
}

/* --- Узкие экраны (<=380px): в шапке три элемента — логотип, переключатель
   и бургер. Ужимаем отступы, чтобы они поместились в одну строку и не
   вылезли за край. --- */
@media (max-width: 380px) {
  .nav {
    gap: 10px;
  }

  .logo {
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .lang-btn {
    padding: 0 9px;
    gap: 5px;
  }

  .lang-menu a {
    padding: 11px 12px;
  }
}

/* --- Совсем узкие (<=340px): у бургера оставляем только иконку. Подпись
   «Меню» дублирует aria-label, а на такой ширине места ей уже нет. --- */
@media (max-width: 340px) {
  .nav-toggle-label {
    display: none;
  }

  .nav-toggle {
    padding: 0 13px;
  }
}

/* ===== Гарнитуры по языкам =====
   Базовые семейства (Manrope, Cormorant Garamond) не содержат китайских
   иероглифов и арабской вязи, поэтому для этих языков подставляем
   подходящие гарнитуры, а следом — системные запасные: если веб-шрифт
   не загрузился, текст всё равно останется читаемым. */

html[data-lang="zh"] {
  --font: "Manrope", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "SimSun", "Source Han Serif SC", serif;
}

html[data-lang="ar"] {
  --font: "Manrope", "Noto Sans Arabic", "Segoe UI", "Tahoma", "Geeza Pro", sans-serif;
  --display: "Cormorant Garamond", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", serif;
}

/* Китайский текст набирается крупнее: иероглифы при том же кегле
   выглядят мельче латиницы. */
html[data-lang="zh"] body {
  font-size: 16.5px;
}

html[data-lang="zh"] :where(h1, h2, h3, h4, .lead, .eyebrow, .stat span, .note) {
  letter-spacing: 0.01em;
}

/* Арабская вязь требует больше воздуха между строк. */
html[data-lang="ar"] body {
  line-height: 1.85;
}

html[data-lang="ar"] :where(.eyebrow, .stat span, .lang-code, .logo) {
  letter-spacing: 0;
}

/* Прописные буквы и разрядка бессмысленны для языков без регистра. */
html[data-lang="zh"] .logo,
html[data-lang="ar"] .logo {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ===== Зеркальная вёрстка для арабского (dir="rtl") =====
   Flexbox и грид разворачиваются сами, но у правил с физическими
   left/right в styles.css направление нужно переопределить явно. */

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

/* Кнопка «наверх» у правого края в LTR — в RTL уходит к левому. */
html[dir="rtl"] .to-top {
  right: auto;
  left: 22px;
}

/* Числовые колонки и счётчик знаков выравниваются по левому краю. */
html[dir="rtl"] .dist-label,
html[dir="rtl"] .dist-val,
html[dir="rtl"] .review-counter {
  text-align: left;
}

/* Кнопка-бургер прижата к правому краю в LTR — в RTL к левому. */
html[dir="rtl"] .nav-toggle {
  margin-left: 0;
  margin-right: auto;
}

/* Стрелки в ссылках-переходах («Другие страны →», «на карте») зеркалить
   трансформацией НЕЛЬЗЯ: вместе со стрелкой перевернётся и текст ссылки.
   Направление стрелки задаёт перевод — для арабского берётся ← вместо →. */

/* Карта: элементы управления Leaflet в RTL переносим к правому краю. */
html[dir="rtl"] .leaflet-left {
  left: auto;
  right: 0;
}

html[dir="rtl"] .leaflet-left .leaflet-control {
  margin-left: 0;
  margin-right: 10px;
}

html[dir="rtl"] .leaflet-right {
  right: auto;
  left: 0;
}

html[dir="rtl"] .leaflet-right .leaflet-control {
  margin-right: 0;
  margin-left: 10px;
}