/* Кнопка выбора языка в шапке (владелец, 21.10.2026): глобус и код языка, по нажатию — список языков
   с флагом и названием на самом языке. Глобус медленно поворачивается — заметно, но не отвлекает.
   Без скрипта работает сама (<details>); при «меньше движения» глобус стоит. Файл общий для всех страниц,
   его кладёт в корень сайта seo.py — только когда у сайта больше одного языка. */
.lang { position: relative; flex: none; z-index: 60; font-family: inherit; }
.snav__row > .lang, .rz-top__in > .lang, .ct-top__in > .lang { margin-left: 4px; }
.snav__row:has(> .lang) > .snav__links, .rz-top__in:has(> .lang) > .hbar__nav { margin-left: auto; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; cursor: pointer;
  list-style: none; font-size: .8rem; font-weight: 800; letter-spacing: .04em; line-height: 1; color: inherit;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color .2s ease, border-color .2s ease; }
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover, .lang[open] .lang__btn { background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 40%, transparent); }
.lang__btn:focus-visible { outline: 3px solid #F7C9D6; outline-offset: 2px; }
.lang__globe { width: 20px; height: 20px; flex: none; overflow: visible; }
.lang__globe circle, .lang__globe path, .lang__globe ellipse { fill: none; stroke: currentColor; stroke-width: 1.5;
  vector-effect: non-scaling-stroke; }
.lang__globe .lang__m { stroke-opacity: .75; transform-box: fill-box; transform-origin: center;
  animation: lang-turn 12s linear infinite; }
.lang__globe .lang__m--2 { animation-delay: -4s; }
.lang__globe .lang__m--3 { animation-delay: -8s; }
/* меридиан идёт от края к краю: сжимается в черту и раскрывается — со сдвигом у трёх меридианов это поворот шара */
@keyframes lang-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.lang__chev { width: 10px; height: 10px; flex: none; transition: transform .25s ease; }
.lang[open] .lang__chev { transform: rotate(180deg); }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; margin: 0; padding: 6px;
  list-style: none; border-radius: 18px; background: #fff; color: #17171A;
  box-shadow: 0 18px 50px rgb(23 23 26 / .18), 0 2px 8px rgb(23 23 26 / .08);
  animation: lang-open .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes lang-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang__list ul { margin: 0; padding: 0; list-style: none; }
.lang__title { margin: 6px 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6b6b72; }
.lang__item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  text-decoration: none; color: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.lang__item:hover, .lang__item:focus-visible { background: #F6EEF1; outline: none; }
.lang__flag { display: inline-flex; flex: none; width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(23 23 26 / .1); }
.lang__flag svg { width: 100%; height: 100%; display: block; }
.lang__item[aria-current] { font-weight: 800; }
.lang__item[aria-current]::after { content: ""; width: 14px; height: 8px; margin-left: auto; border: solid #E5356F;
  border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
@media (max-width: 420px) {
  .lang__btn { gap: 4px; padding: 0 7px 0 6px; min-height: 34px; }
  .lang__chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lang__globe .lang__m, .lang__list { animation: none; }
  .lang__globe .lang__m--2 { transform: scaleX(.5); }
  .lang__globe .lang__m--3 { transform: scaleX(0); }
}

/* предложение своего языка: тонкая строка над шапкой, если язык браузера другой и страница на нём есть */
.lang-offer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 44px 10px 16px; position: relative; background: #17171A; color: #fff;
  font: 600 .9rem/1.35 Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.lang-offer .lang__flag { box-shadow: none; }
.lang-offer__text { display: inline-flex; align-items: center; gap: 8px; }
.lang-offer__go { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px;
  background: #E5356F; color: #fff; text-decoration: none; font-weight: 800; }
.lang-offer__go:hover { background: #fff; color: #17171A; }
.lang-offer__close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-size: 22px; line-height: 1; }
.lang-offer__close:hover { background: rgb(255 255 255 / .12); }

/* в меню главной ссылки подчёркнуты (.orbit__nav a) — у пунктов списка языков подчёркивания нет */
.lang a.lang__item { border: 0; padding-bottom: 0; }
.orbit__nav .lang { margin-left: -4px; }
@media (max-width: 480px) {
  /* на телефоне строка меню тесная: меньше просветы у главной, у меню с прокруткой край плавно гаснет —
     обрезанный пункт видно как «листается дальше», а не как ошибку */
  .orbit__nav:has(.lang) { gap: 12px; }
  .orbit__nav .lang__btn { padding: 0 6px; gap: 3px; }
  .orbit__nav .lang__code { font-size: .72rem; }
  .snav__row:has(> .lang) > .snav__links, .ct-top__in:has(> .lang) > .ct-top__nav,
  .rz-top__in:has(> .lang) > .hbar__nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .lang-offer { gap: 6px 10px; padding: 8px 40px 8px 12px; font-size: .84rem; }
  .lang-offer__go { min-height: 30px; padding: 0 12px; }
}
@media (max-width: 400px) {
  /* главная на узком телефоне: в строке меню место только под глобус, код языка — в списке */
  .orbit__nav .lang__code { display: none; }
}

/* маленькая плашка в выезжающей шапке (.sbar, .hbar): только код языка и стрелка, без глобуса (владелец, 21.10.2026) */
.lang--mini { margin-left: 2px; }
.lang--mini .lang__btn { min-height: 28px; gap: 3px; padding: 0 7px 0 9px; font-size: .7rem; letter-spacing: .06em;
  border-color: color-mix(in srgb, currentColor 16%, transparent); }
.lang--mini .lang__chev { display: block; width: 8px; height: 8px; }
.lang--mini .lang__list { top: calc(100% + 12px); }
.hbar__in > .lang--mini { flex: none; }
.hbar__in:has(> .lang--mini) > .hbar__nav { margin-left: auto; }
.sbar__in:has(> .lang--mini), .hbar__in:has(> .lang--mini) { justify-content: flex-start; }
.sbar__in:has(> .lang--mini) > .snav__links { margin-left: auto; }
@media (max-width: 480px) {
  /* узкий телефон: в шапке с плашкой языка пункты плотнее, чтобы «Соцсети» входили целиком */
  .hbar__in:has(> .lang--mini) { gap: 6px; padding-left: 14px; }
  .hbar__in:has(> .lang--mini) .hbar__nav a { padding: 8px 8px; font-size: .84rem; }
  .hbar__in:has(> .lang--mini) .hbar__nav a.is-cat { padding: 0 9px; }
  .sbar__in:has(> .lang--mini) { gap: 4px; }
}
