/*
 * Sprachumschalter.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 *
 * Werte aus SPO-Desktop-Menu.html. Im Entwurf sitzt die Zeile im Fuß der
 * Navigations-Karte und ist deshalb weiß — sie soll sich vom Sand darüber
 * abheben, ohne eine weitere Farbe einzuführen.
 */

/*
 * Die Ecken sind die 8px, die Button, Box und Kachel auch tragen: die Zeile ist
 * eine Fläche im Menü wie die übrigen, und ein einziger scharfer Kasten
 * zwischen runden Flächen liest sich als Fehler und nicht als Absicht.
 */
.spo-langs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 0;
    border-radius: 8px;
    background: #fff;
}

/*
 * Der Sperrsatz (.06em) ist im Entwurf der ganze Unterschied zwischen einer
 * Reihe Kürzel und einer Reihe Wörter.
 */
/*
 * Die Höhe von 24px ist keine Gestaltung, sondern die Untergrenze für ein
 * Ziel, das getroffen werden soll (WCAG 2.2, Target Size). Aus dem Entwurf
 * kamen 1px Innenabstand und damit knapp 19px — für einen Zeigefinger oder
 * eine unruhige Hand zu wenig. Der Grund ist weiß wie die Zeile, der
 * Unterschied also nicht zu sehen; gewachsen ist nur die Fläche, die zählt.
 */
.spo-lang {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    --spo-lang-padding: 1px 7px;
    padding: var(--spo-lang-padding);
    color: var(--spo-blue-dark);
    font-size: calc(14px - var(--spo-text-shrink));
    font-weight: 400;
    letter-spacing: .06em;
    text-decoration: none;
    cursor: pointer;
}

/*
 * Die aktive Sprache trägt nur mehr Gewicht — keine Farbe, kein Rahmen. Im
 * Entwurf steht dort ausdrücklich `border-width: 0`, also war das eine
 * Entscheidung gegen einen Rahmen und nicht das Fehlen einer.
 */
.spo-lang.is-active {
    font-weight: 700;
}

a.spo-lang:hover,
a.spo-lang:focus-visible {
    text-decoration: underline;
}

/*
 * Der Innenabstand bleibt, auch im Fokus. In der Zielumgebung steht
 * `a:focus { padding: 0; border: 2px solid #003C6E; white-space: nowrap }` —
 * ohne diese Zeilen schrumpft das Kürzel unter die 24px, die es als Ziel
 * braucht (WCAG 2.2), und bekommt einen Rahmen, den der Entwurf ausdrücklich
 * nicht will (siehe .spo-lang.is-active).
 */
.spo-lang:hover,
.spo-lang:focus {
    padding: var(--spo-lang-padding) !important;
    border: 0 !important;
    white-space: normal !important;
}