/* Блоки языков и переключатель — общие для лендинга и подстраниц Bro Menu (разметку меню рисует /assets/lang.js).
   Взято с bro-reader.com / bro-drive.com, акцент — томатный #FF5A3C. */

/* Три языковые версии лежат в разметке целиком: так их видят и краулеры, и ревьюер Apple с отключённым JS.
   Показываем выбранную (класс lang-xx на <html>, по умолчанию lang-uk прямо в разметке).
   display: revert — блок остаётся блоком, строчный span — строчным. Поэтому data-lang ставим только
   на «простые» элементы (p, span, div, h*, li, a), без своих display:flex/grid. */
[data-lang] { display: none !important; }
.lang-uk [data-lang="uk"], .lang-ru [data-lang="ru"], .lang-en [data-lang="en"] { display: revert !important; }

.lang {
  --lang-h: 40px;
  position: relative; display: inline-flex; align-items: center; flex: none;
}
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--lang-h); padding: 0 10px 0 12px;
  border: 1px solid #ffffff14; border-radius: 999px; background: #ffffff05;
  color: #f5f4fc; font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0.04em; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lang-btn:hover, .lang.open .lang-btn { border-color: rgba(255, 90, 60, 0.45); background: #ffffff0a; }
.lang-btn:focus-visible { outline: 2px solid #ff5a3c; outline-offset: 2px; }
.lang-btn svg { width: 16px; height: 16px; color: #b5b6cc; flex: none; }
.lang-btn .lang-chev { width: 14px; height: 14px; transition: transform .15s; }
.lang.open .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 184px; max-width: calc(100vw - 32px); padding: 6px;
  border: 1px solid #ffffff14; border-radius: 14px; background: #14141f;
  box-shadow: 0 20px 50px #00000080;
}
.lang-menu[hidden] { display: none; }
.lang .lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 8px 12px; border-radius: 10px;
  color: #f5f4fc; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.lang .lang-menu a:hover, .lang .lang-menu a:focus { background: #ffffff0f; color: #fff; outline: none; }
.lang .lang-menu a:focus-visible { box-shadow: inset 0 0 0 2px #ff5a3c; }
.lang .lang-menu a[aria-checked="true"] { color: #ff7a5f; }
.lang .lang-menu a[aria-checked="true"]::after { content: "✓"; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .lang-btn, .lang-chev { transition: none; }
}