/*
 * Responsive Navigation.
 *
 * Pico setzt `nav ul` auf display:flex OHNE flex-wrap. Auf einem Smartphone
 * laufen deshalb die Top-Navi (wegen der E-Mail-Adresse), die Console-Buttons
 * und die »-Unternavigation ueber den rechten Rand hinaus und erzeugen einen
 * horizontalen Scrollbalken fuer die ganze Seite.
 *
 * Die eigentliche Handy-Darstellung greift unterhalb von 768px (Picos
 * md-Breakpoint); darueber bleibt bis auf das Umbrechen alles wie gehabt.
 * Reines CSS - kein JavaScript, damit die CSP aus
 * ContentSecurityPolicyMiddleware unangetastet bleibt.
 */

/* Trenner-Punkte der Top-Navi: ohne eigenes Padding, damit der Abstand dem
   der frueheren losen Textknoten entspricht. Nur dort - in der Console-Navi
   waren die Punkte schon immer <li> mit Picos Seitenabstand, und das soll so
   bleiben. */
.top-nav li.nav-sep {
    padding-left: 0;
    padding-right: 0;
}

/* Umbrechen statt ueberlaufen - auf allen Groessen. Solange genug Platz ist,
   aendert das nichts; wird es eng (Tablet, viele Console-Buttons), rutscht
   der letzte Eintrag in eine zweite Zeile statt ueber den Rand. */
nav ul {
    flex-wrap: wrap;
}

/* "» Password" bleibt zusammen, statt dass das » allein in einer Zeile steht. */
main > nav li {
    white-space: nowrap;
}

/* Wenn die mittlere Liste umbricht, fuellt sie die ganze Breite - dann sollen
   ihre Zeilen zentriert bleiben wie die einzeilige Fassung. */
main > nav > ul {
    justify-content: center;
}

@media (max-width: 767.98px) {

    /* Nichts darf die Seite breiter machen als den Viewport. */
    html, body {
        overflow-x: hidden;
    }

    /* --- Header: externe Buttons duerfen umbrechen ---------------------- */
    .mini-article-buttons {
        flex-wrap: wrap;
    }

    /* --- Alle Navigationen ---------------------------------------------- */
    nav ul {
        row-gap: 0.25rem;
    }

    /* Picos 1rem vertikales Padding pro <li> wuerde beim Umbrechen sehr hohe
       Bloecke ergeben. */
    nav li {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Trenner-Punkte haben in umbrechenden Zeilen keinen Sinn mehr. */
    nav li.nav-sep {
        display: none;
    }

    /* --- Top-Navi (Start / Logout / Console / E-Mail) ------------------- */
    .top-nav ul {
        column-gap: 0.75rem;
    }

    /* Die E-Mail-Adresse bekommt eine eigene Zeile und darf notfalls im Wort
       umbrechen, statt die Zeile zu sprengen. */
    .top-nav li.nav-identity {
        flex-basis: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 0.85em;
        color: var(--pico-muted-color);
    }

    /* --- Navigationen im Inhalt (Console-Buttons + »-Unternavi) --------- */

    /* Die leeren <ul></ul> links und rechts dienen auf dem Desktop nur zum
       Zentrieren; auf dem Handy brauchen sie keinen Platz. */
    main > nav > ul:empty {
        display: none;
    }

    main > nav > ul {
        margin-left: 0;
        margin-right: 0;
        justify-content: flex-start;
        column-gap: 0.5rem;
    }

    main > nav li {
        padding-left: 0;
        padding-right: 0;
    }

    /* Console-Buttons etwas kompakter, damit mehr in eine Zeile passt.
       Pico gibt Buttons in nav li negative Margins (-0.5rem), die hier den
       column-gap auffressen wuerden und die Buttons aneinanderkleben liessen. */
    .console-nav button {
        margin: 0;
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
    .console-nav ul {
        column-gap: 0.4rem;
        row-gap: 0.4rem;
    }

    /* Die »-Unternavi als Liste mit etwas Luft, aber ohne Riesenabstand. */
    main > nav:not(.console-nav) ul {
        column-gap: 1rem;
    }
}

/* Sehr schmale Geraete (iPhone SE & Co.): Buttons im Header vollbreit. */
@media (max-width: 400px) {
    .mini-article-buttons .small-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}