/*
YAML:
  path: "assets/css/i18n.css"
  description: "A publikus HU/EN/DE nyelvváltó kompakt felső sávos desktop- és mobilmegjelenését kezeli."
  version: "1.2.0"
  modification_guidelines:
    - "A nyelvváltó a sötét preview-bar sávban, a ticker és a fiókblokk között maradjon."
    - "Az aktuális nyelv aria-current állapotához tartozzon egyértelmű vizuális kiemelés."
    - "A még nem publikálható aktív locale látszódjon, de egyértelműen tiltott, nem kattintható állapotú legyen."
    - "Mobilon a kapcsoló maradjon kompakt, és ne szorítsa ki a fiókblokkot."
*/

.preview-bar__language-switcher {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 2px 9px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
}

.language-switcher ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.language-switcher li {
    margin: 0;
    padding: 0;
}

.language-switcher a,
.language-switcher__option {
    display: grid;
    place-items: center;
    min-width: 30px;
    min-height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--navy-800);
    font-size: .68rem;
    font-weight: 820;
    line-height: 1;
    letter-spacing: .045em;
    text-decoration: none;
}

.language-switcher a {
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.language-switcher a:hover {
    background: var(--surface-strong);
    color: var(--navy-950);
}

.language-switcher a[aria-current="page"] {
    background: var(--navy-900);
    color: var(--surface);
    box-shadow: 0 2px 8px rgba(7, 29, 53, .18);
}

.language-switcher__option.is-disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: .48;
    user-select: none;
}

@media (max-width: 700px) {
    .preview-bar__language-switcher {
        padding-inline: 4px;
    }

    .language-switcher ul {
        gap: 1px;
        padding: 1px;
    }

    .language-switcher a,
    .language-switcher__option {
        min-width: 26px;
        min-height: 26px;
        padding-inline: 4px;
        font-size: .62rem;
    }
}