/* Переключатель языка.

   Отдельным файлом, а не в header.css: шапки у страниц разные и
   подключают разные стили — страница «Скоро» про header.css не знает
   вовсе, и переключатель на ней оказывался без оформления, слипшимся
   с логотипом. Файл подключается из самого шаблона переключателя,
   поэтому работает везде, куда его вставили.
*/

.lang-switch {
    --ls-accent: var(--butterfly-deep, #1d4f6b);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 3px 0 10px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 4%, transparent);
    color: var(--text-main, #282828);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.lang-switch:hover {
    border-color: color-mix(in srgb, var(--ls-accent) 45%, transparent);
    box-shadow: 0 6px 18px -12px rgba(16, 48, 74, 0.6);
}

.lang-globe {
    flex: none;
    opacity: 0.6;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .25s;
}

.lang-switch:hover .lang-globe { transform: rotate(160deg); opacity: 0.9; }

.lang-track {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    height: 26px;
}

/* Плашка под активным языком */
.lang-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    border-radius: 999px;
    background: var(--ls-accent);
    box-shadow: 0 4px 10px -4px rgba(16, 48, 74, 0.55);
    transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.lang-switch.is-ru .lang-thumb { transform: translateX(100%); }

/* Подсказка движением: при наведении на другой язык плашка тянется к нему */
@media (hover: hover) {
    .lang-switch.is-en .lang-track:has(.lang-option:not(.is-active):hover) .lang-thumb { transform: translateX(16%); }
    .lang-switch.is-ru .lang-track:has(.lang-option:not(.is-active):hover) .lang-thumb { transform: translateX(84%); }
}

.lang-option {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 34px;
    padding: 0 9px;
    border-radius: 999px;
    color: inherit;
    opacity: 0.62;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-decoration: none;
    transition: color .25s ease, opacity .25s ease;
}

.lang-option:hover { opacity: 1; }

.lang-option.is-active {
    color: #fff;
    opacity: 1;
}

.lang-option:focus-visible {
    outline: 2px solid var(--butterfly-bright, #38b7d7);
    outline-offset: 2px;
}

/* На тёмных шапках (страница урока и т.п.) — светлая плашка */
.is-dark .lang-switch,
.lang-switch.on-dark {
    --ls-accent: #fff;
    color: #fff;
}

.is-dark .lang-option.is-active,
.lang-switch.on-dark .lang-option.is-active { color: var(--bk-ink, #0b1d2b); }

@media (prefers-reduced-motion: reduce) {
    .lang-thumb, .lang-globe { transition: none; }
}


/* Правая часть шапки: переключатель языка и ссылка в кабинет.

   Обёртка нужна из-за раскладки: шапки разводят детей по краям
   через space-between, и третий элемент уехал бы в середину. */

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}


/* На странице «Скоро» в шапке только логотип, поэтому переключатель
   надо самому отодвинуть к правому краю. */

.soon-header-inner .lang-switch {
    margin-left: auto;
}


/* Узкая шапка главной.

   В навигации пять ссылок, кнопка входа и переключатель. На широком
   экране всё помещается, а около тысячи пикселей перестаёт: кнопка
   «Войти» и EN/RU налезали друг на друга, а сам переключатель
   обрезался краем окна.

   Поэтому в этом промежутке ужимаем промежутки и сам переключатель —
   прятать его нельзя, это единственный способ сменить язык. */

@media (max-width: 1040px) {

    .nav nav {
        gap: 16px;
    }

    .lang-option {
        min-width: 30px;
        padding: 0 7px;

        letter-spacing: 1px;
    }

    .lang-globe { display: none; }

    .lang-switch { padding-left: 3px; }

    /* Кнопка входа залита цветом, и переключатель рядом с ней
       выглядит приклеенным. Небольшой отступ разводит их. */

    .nav nav .lang-switch {
        margin-left: 6px;
    }
}