/*
 * Language switcher and right-to-left support.
 *
 * Kept in its own file so the multilingual work can be read, reviewed and
 * reverted on its own, and so nothing here can disturb the existing header
 * design by accident. Everything below is either scoped to the switcher or
 * behind [dir="rtl"], so a left-to-right page renders exactly as before.
 */

/* ------------------------------------------------------------------ */
/* Switcher                                                            */
/* ------------------------------------------------------------------ */

/*
 * Die Gestalt kommt aus dem Header selbst, nicht aus einem Formularbaukasten.
 *
 * Die erste Fassung war ein rechteckiger Rahmenknopf mit grauem Panel -
 * funktional richtig, aber sichtbar fremd zwischen dem runden Suchfeld, dem
 * pillenfoermigen Hochladen-Knopf und dem runden Profilbild. Jetzt gelten die
 * Masse der Nachbarn: die Pille als Knopfform, die weisse Karte mit Radius 15
 * und weichem Schatten als Menueflaeche - dieselbe Karte, die das Profilmenue
 * benutzt -, und die Marke #452eb8 als einzige Akzentfarbe, unterlegt in
 * ihren eigenen hellen Violettstufen statt in Grau.
 */
:root {
    --aw-brand: #452eb8;
    /* Zwei helle Stufen der Marke. Ton statt Grau: dieselbe Farbe, nur leise. */
    --aw-brand-soft: rgba(69, 46, 184, .07);
    --aw-brand-tint: rgba(69, 46, 184, .12);
}

.language-switcher {
    position: relative;
}

.language-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 44px is the smallest target that can be hit reliably with a thumb. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    background: var(--aw-brand-soft);
    border: 0;
    border-radius: 999px;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.language-switcher__toggle:hover {
    background: var(--aw-brand-tint);
}

.language-switcher__current {
    font-weight: 600;
    letter-spacing: .02em;
}

.language-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    /*
     * The logical edge, so the panel hangs off whichever side the switcher
     * itself sits on and follows the header when it mirrors.
     *
     * A physical right: 0 was tried first, because on the local checkout the
     * panel appeared to run off the screen in Arabic. That measurement was
     * worthless: the theme stylesheets are not in this repository, so the page
     * being measured had no Bootstrap and no main.css and the header was not
     * laid out at all. Reverted to the direction-aware property, which is
     * correct whether or not the surrounding header mirrors.
     */
    inset-inline-end: 0;
    z-index: 1050;
    min-width: 210px;
    /* The panel must never be the thing that makes a page scroll sideways,
       whichever edge it is anchored to and however narrow the screen is. */
    max-width: calc(100vw - 16px);
    padding: 10px;
    /*
     * Die AEONWALL-Karte: weiss, Radius 15, weicher Schatten - Mass fuer Mass
     * das Profilmenue (main.css, .primary-menu__sub ab 992px). Kein Rahmen;
     * die Karte traegt sich ueber den Schatten, wie die daneben auch.
     */
    background: #fff;
    border: 0;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(19, 19, 24, .1);
}

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

.language-switcher__form {
    margin: 0;
}

.language-switcher__panel .language-switcher__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: inherit;
    font-size: 15px;
    text-align: start;
    cursor: pointer;
    transition: background-color .15s ease;
}

.language-switcher__panel .language-switcher__option:hover {
    background: var(--aw-brand-soft);
}

/*
 * Die aktive Sprache traegt drei Zeichen zugleich: den Haken, das Gewicht und
 * die Marke auf hellem Violett. Wer Farben nicht unterscheidet, hat immer
 * noch Haken und Gewicht.
 */
.language-switcher__panel .language-switcher__option.is-current {
    font-weight: 600;
    color: var(--aw-brand);
    background: var(--aw-brand-soft);
}

.language-switcher__mark {
    flex: 0 0 1em;
    /* Reserved whether or not the check is drawn, so the names line up. */
    min-width: 1em;
    text-align: center;
}

/* Focus must stay visible. Several of these buttons sit on dark backgrounds,
   so the outline is drawn in the current text colour rather than a fixed one. */
.language-switcher__toggle:focus-visible,
.language-switcher__option:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Right to left                                                       */
/* ------------------------------------------------------------------ */

/*
 * The project ships the left-to-right Bootstrap build, where .ps-* is always
 * padding-left and .me-* is always margin-right. Swapping in bootstrap.rtl.css
 * would re-lay-out every page in the application, including all the parts this
 * phase has not reviewed. Instead the handful of spacing utilities that the
 * covered areas actually use are mirrored here.
 */
[dir="rtl"] .ps-1 { padding-left: 0; padding-right: .25rem; }
[dir="rtl"] .ps-2 { padding-left: 0; padding-right: .5rem; }
[dir="rtl"] .ps-3 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .ps-4 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .ps-5 { padding-left: 0; padding-right: 3rem; }

[dir="rtl"] .pe-1 { padding-right: 0; padding-left: .25rem; }
[dir="rtl"] .pe-2 { padding-right: 0; padding-left: .5rem; }
[dir="rtl"] .pe-3 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pe-4 { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pe-5 { padding-right: 0; padding-left: 3rem; }

[dir="rtl"] .ms-1 { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .ms-2 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .ms-3 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ms-4 { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ms-5 { margin-left: 0; margin-right: 3rem; }
[dir="rtl"] .ms-auto { margin-left: 0; margin-right: auto; }

[dir="rtl"] .me-1 { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .me-2 { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .me-3 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .me-4 { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .me-5 { margin-right: 0; margin-left: 3rem; }
[dir="rtl"] .me-auto { margin-right: 0; margin-left: auto; }

[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left  !important; }
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }

/* Dropdowns open from the other edge. */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

/*
 * Icons.
 *
 * Only mirrored where the direction carries the meaning. A chevron pointing at
 * the next page points the other way when reading runs the other way; a clock,
 * a heart or a magnifying glass does not, and flipping those would just look
 * broken. Font Awesome's own .fa-flip-horizontal is left alone so that an
 * author who asked for a mirrored icon still gets one.
 */
[dir="rtl"] .pagination .fa-angle-left,
[dir="rtl"] .pagination .fa-angle-right,
[dir="rtl"] .pagination .fa-angles-left,
[dir="rtl"] .pagination .fa-angles-right,
[dir="rtl"] .pagination .la-angle-left,
[dir="rtl"] .pagination .la-angle-right,
[dir="rtl"] .breadcrumb-item .fa-angle-right,
[dir="rtl"] .btn .fa-arrow-left,
[dir="rtl"] .btn .fa-arrow-right,
[dir="rtl"] .slick-arrow .fa-angle-left,
[dir="rtl"] .slick-arrow .fa-angle-right {
    transform: scaleX(-1);
}

/* Bootstrap's own pagination borders sit on the wrong side once mirrored. */
[dir="rtl"] .pagination {
    padding-right: 0;
}

/*
 * User content keeps its own direction.
 *
 * A member writing in Arabic on an English interface, or in English on an
 * Arabic one, should read correctly either way. dir="auto" lets the browser
 * decide per block from the first strong character, which is right far more
 * often than forcing the interface direction onto somebody's text.
 */
[dir] [dir="auto"] {
    /* No visual change; the attribute does the work. Declared so that the
       intent is greppable from the stylesheet as well as the markup. */
    unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ */
/* Commercial upload: public and private                               */
/* ------------------------------------------------------------------ */

/*
 * The one thing a seller must never misread on this form is which files
 * visitors get to see. Private is quiet and neutral - it is the normal case,
 * not a warning. Public carries the accent colour, because that is the file
 * being put in front of everybody.
 */
.awu-up__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.awu-up__badge i {
    font-size: 11px;
}

.awu-up__badge--private {
    background: rgba(120, 120, 135, .12);
    color: #4a4a57;
    border: 1px solid rgba(120, 120, 135, .22);
}

.awu-up__badge--public {
    background: rgba(124, 58, 237, .10);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, .25);
}

/* Later parts of phase 03 are headings, not numbered steps, so the number
   column stays but holds nothing - the headings keep their alignment. */
.awu-up__n--sub {
    visibility: hidden;
}

.awu-up__sub {
    display: block;
    width: 100%;
    margin-top: 2px;
    opacity: .7;
    font-size: 13px;
}

/* ---- phase 04 ---- */

.awu-up__review {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.awu-up__review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-weight: 600;
}

.awu-up__review-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.awu-up__review-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(128, 128, 128, .16);
    font-size: 14px;
}

/* A long filename shortens rather than pushing the page sideways. */
.awu-up__review-list li > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.awu-up__review-empty {
    opacity: .6;
    font-size: 14px;
}

.awu-up__review-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Nothing here may make the page scroll sideways. */
.awu-up__review,
.awu-up__review-col {
    min-width: 0;
}

[dir="rtl"] .awu-up__review-list li,
[dir="rtl"] .awu-up__review-head {
    flex-direction: row-reverse;
}

/*
 * The header submenu keeps a physical offset.
 *
 * .primary-menu__sub is positioned with `right: 0` against its nav item. On a
 * left-to-right page the item sits on the right of the header, so the panel
 * opens inwards. Mirrored, the same item sits on the left, `right: 0` still
 * anchors the panel's right edge to it, and a 225px panel reaches to about
 * -70px - past the left edge of the page.
 *
 * Nothing of it is visible: the panel is hidden until its link is active. But
 * it is laid out, so the document becomes 1350px wide in a 1280px window and
 * every Arabic page in the user area can be dragged sideways into empty space.
 *
 * The logical property anchors to the inline end, which is what the original
 * rule meant. Only the mirrored case is touched.
 */
@media screen and (min-width: 992px) {
    [dir="rtl"] .primary-menu__sub {
        right: auto;
        inset-inline-end: 0;
    }

    [dir="rtl"] .primary-menu__sub::after {
        right: auto;
        inset-inline-end: 15px;
    }
}

/*
 * Mobil: ein eigener Bereich statt eines schwebenden Menues.
 *
 * Unterhalb von 992 px klappt der Header in die Burger-Navigation, und der
 * Sprachknopf sitzt dort als Listeneintrag zwischen den anderen. Ein absolut
 * positioniertes Panel legte sich in dieser Lage ueber die Eintraege darunter
 * und war an der schmalsten Stelle breiter als das Menue selbst.
 *
 * Im eingeklappten Menue steht die Liste deshalb im Fluss: volle Breite,
 * kein Schatten, keine Ueberlagerung - ein Abschnitt, den man aufklappt, wie
 * die uebrigen Untermenues daneben.
 */
@media screen and (max-width: 991.98px) {
    /*
     * In die Reihe der uebrigen Eintraege.
     *
     * .primary-menu__link haelt links und rechts 16px Abstand; im
     * eingeklappten Menue laufen Entdecken und Lizenz deshalb von 36 bis 370.
     * Der Sprachblock stand mit 20 bis 386 daneben - vier Pixel vom
     * Bildschirmrand, also kein Ueberlauf, aber durch seinen Rahmen deutlich
     * sichtbar aus der Flucht.
     *
     * flex, weil der Listenpunkt d-flex ist: so fuellt der Block die Breite,
     * die ihm nach den Abstaenden bleibt.
     */
    .language-switcher {
        flex: 1 1 auto;
        margin-inline: 16px;
    }

    /*
     * Im aufgeklappten Menue ist die Sprache ein Menuepunkt, kein Formular.
     *
     * Vorher trug der Knopf hier denselben Rahmen wie auf dem Desktop und
     * darunter lag eine graue Flaeche - zusammen sah das aus wie ein
     * Einstellungsdialog zwischen Navigationseintraegen. Jetzt sieht der
     * Knopf aus wie die Eintraege darueber - kein Rahmen, keine Flaeche,
     * gleiche Flucht -, und erst die geoeffnete Liste bekommt Gestalt.
     */
    .language-switcher__toggle {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        padding: 0;
        background: transparent;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .language-switcher__toggle:hover {
        background: transparent;
        color: var(--aw-brand);
    }

    /*
     * Die geoeffnete Liste: ruhige Kartenzeilen statt einer Formularbox.
     *
     * Keine grosse graue Flaeche mehr um alles herum - die Zeilen selbst
     * tragen je eine leise Violettflaeche, mit Luft dazwischen, und die
     * aktive hebt sich mit Haken, Gewicht und Marke ab. Acht Zeilen, zwei
     * Spalten, sobald die Breite es lesbar hergibt.
     */
    .language-switcher__panel {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 8px;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* [hidden] verliert gegen display:grid - die Regel oben ist spezifischer
       als der Browserstandard, also muss das Zuklappen eigens gelten. */
    .language-switcher__panel[hidden] {
        display: none;
    }

    .language-switcher__panel .language-switcher__option {
        background: var(--aw-brand-soft);
        border-radius: 10px;
    }

    /* Zwei Spalten, solange acht Namen sonst zu einer langen Rolle werden.
       Unter 380 px wieder eine - dort ist nebeneinander enger als lesbar. */
    @media (min-width: 380px) {
        .language-switcher__panel {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

/*
 * Der Knopf traegt die Marke, sobald das Panel offen ist - sonst sieht man
 * bei einem statischen Panel nicht, welcher Schalter dazugehoert.
 */
.language-switcher__toggle[aria-expanded="true"] {
    background: var(--aw-brand-tint);
    color: var(--aw-brand);
}