/* Language switcher for the site header.
 *
 * Borrows the header rail's existing idiom rather than inventing one: Courier
 * Prime at 10px, uppercase, wide tracking, the same muted ink, and the same
 * orange underline on hover as .site-nav-link. It should read as one more item
 * in the rail, not as a control bolted on afterwards.
 *
 * Palette per DESIGN.md — #1a1a1a ink, #f25c05 emphasis, warm neutral surfaces.
 * A globe, never flags: a language is not a country.
 */

.apricot-language-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.apricot-language-switcher__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.apricot-language-switcher__button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 2px;
    background: #f25c05;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease;
}

.apricot-language-switcher__button:hover,
.apricot-language-switcher__button:focus-visible,
.apricot-language-switcher__button[aria-expanded="true"] { color: #1a1a1a; }

.apricot-language-switcher__button:hover::after,
.apricot-language-switcher__button:focus-visible::after,
.apricot-language-switcher__button[aria-expanded="true"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* The label is a Latin language code sitting in a row of Cyrillic. Latin
 * resolves to Courier Prime while its neighbours resolve to Anonymous Pro, and
 * the two have very different cap heights — left alone, the switcher reads as
 * smaller than the links beside it and sits off their baseline. Match the
 * neighbours instead: this label is a code, not brand Latin. */
html[lang="ru"] .apricot-language-switcher__button {
    font-family: "Anonymous Pro", monospace;
}

.apricot-language-switcher__globe {
    width: 13px;
    height: 13px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.apricot-language-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 148px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fffdf9;
    border: 1px solid #ded8cc;
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(26, 26, 26, .1);
}

.apricot-language-switcher__menu[hidden] { display: none; }

.apricot-language-switcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 2px;
    background: none;
    color: #4b463f;
    /* Native language names, so this drops the header's uppercase transform —
       "РУССКИЙ" shouted in caps is not how the language names itself. */
    font: 400 13px/1.2 "Space Grotesk", "Golos Text", system-ui, sans-serif;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.apricot-language-switcher__option:hover,
.apricot-language-switcher__option:focus-visible {
    background: #f7f3ea;
    color: #1a1a1a;
    outline: none;
}

.apricot-language-switcher__option[aria-selected="true"] {
    color: #1f4e5b;
    font-weight: 500;
}

/* The selected mark carries the state visually; aria-selected carries it for
   screen readers. Neither is doing the job alone. */
.apricot-language-switcher__check {
    flex: none;
    color: #f25c05;
    font-size: 12px;
    opacity: 0;
}

.apricot-language-switcher__option[aria-selected="true"] .apricot-language-switcher__check { opacity: 1; }

/* Sits in a header rail that already crowds at small widths, so the short code
   goes away before anything else does — the globe still says what it is. */
@media (max-width: 520px) {
    .apricot-language-switcher__code { display: none; }
    .apricot-language-switcher__globe { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .apricot-language-switcher__button::after { transition: none; }
}