/*
 * mes-nav — Reiternavigation
 * ==========================
 *
 * Eine wiederverwendbare Komponente des mes-Baukastens, keine Produktseiten-Eigenheit. Sie
 * setzt das WAI-ARIA-Muster „Tabs" um — dasselbe Muster, das unter Bootstraps `nav-tabs` und
 * Tailwind UIs Tabs liegt: eine Leiste mit `role="tablist"`, Knöpfe mit `role="tab"`, Inhalte
 * mit `role="tabpanel"`, wandernder Tabindex und Pfeiltastenbedienung.
 *
 * WARUM NICHT DIE ÜBLICHEN CSS-TRICKS:
 *   * `<details>` + `display: contents` scheitert zweifach — der Browser verliert das
 *     Verstecken geschlossener Inhalte, und Prozentwerte lösen durch einen aufgelösten Kasten
 *     nicht mehr auf (`flex-basis: 100%` fiel auf die Inhaltsbreite zurück, `grid-column: 1/-1`
 *     griff gar nicht). Beides nachgemessen.
 *   * Versteckte Radioknöpfe mit `:checked + label + div` funktionieren zwar, sind aber ein
 *     Kniff: die Auszeichnung sagt „Formular", gemeint ist „Navigation". Vorlesesoftware
 *     kündigt Optionsfelder an, wo Reiter gemeint sind.
 * Das ARIA-Muster sagt genau das, was gemeint ist, und braucht dafür keinen einzigen Kniff.
 *
 * OHNE JAVASCRIPT bleibt ein lesbares Dokument: die Leiste ist verborgen, alle Inhalte stehen
 * untereinander, jeder mit seiner eigenen Überschrift. Erst das Skript setzt
 * `.mes-nav--bereit`, blendet die Überschriften aus und macht Reiter daraus. Deshalb steht im
 * ausgelieferten HTML KEIN `hidden` — sonst wäre der Inhalt ohne Skript unerreichbar.
 *
 * KEIN UMSCHALTEN AUF EIN AKKORDEON bei schmalen Bildschirmen. Das ist verlockend, verlangt
 * aber, die ARIA-Rollen zur Laufzeit zu tauschen (aus `tab` wird `button`, aus `tabpanel` wird
 * `region`) — eine bekannte Fehlerquelle. Stattdessen scrollt die Leiste waagerecht, so wie es
 * Bootstrap und Tailwind auch halten.
 *
 * @author Fabian Volmer <f.volmer@mesem.de>
 */

.mes-nav {
    /* Eigene Token mit Rückfall: die Komponente muss auch außerhalb einer .mes-pdp laufen. */
    --mes-nav-linie: var(--mes-linie, #dfe4e7);
    --mes-nav-aktiv: var(--mes-petrol, #2f6478);
    --mes-nav-tinte: var(--mes-tinte, #1b2227);
    --mes-nav-leise: var(--mes-tinte-leise, #6b7780);

    /* Abstand, den ein Sprung auf diese Navigation oben frei lässt. Auf der Produktseite steht
       dort die Kauf-Leiste; wer die Komponente anderswo einsetzt, überschreibt den Wert. */
    scroll-margin-top: var(--mes-sprungabstand, 88px);
}

/* ------------------------------------------------------------------- Leiste */

/* DIE GRUNDLINIE IST EIN INNENSCHATTEN, KEIN RAHMEN — und der aktive Reiter überdeckt sie mit
   seinem eigenen unteren Rahmen.

   Vorher lag die Linie als `border-bottom` an der Leiste, und der Reiter zog sich mit
   `margin-bottom: -2px` darüber. Das kostete einen Scrollbalken: der Inhalt war damit zwei
   Pixel höher als die Leiste (gemessen scrollHeight 49 zu clientHeight 47), und weil eine
   Achse auf `auto` die ANDERE Achse von `visible` ebenfalls auf `auto` zwingt, zeichnete der
   Browser einen SENKRECHTEN Scrollbalken in die Reiterzeile. Ein Innenschatten nimmt keinen
   Platz im Kasten ein, also gibt es nichts mehr zu überlaufen. */
.mes-nav__leiste {
    /* Ohne Skript unsichtbar — dann tragen die Überschriften die Gliederung. */
    display: none;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    box-shadow: inset 0 -2px 0 var(--mes-nav-linie);

    /* Kein Scrollbalken. Waagerecht scrollt die Leiste nur auf schmalen Geräten, und dort wird
       gewischt; ein Balken wäre dann bloss ein Strich, der beim Umschalten springt. Dass es
       weitergeht, zeigt stattdessen der Verlauf an der Kante (siehe unten). */
    scrollbar-width: none;
}

.mes-nav__leiste::-webkit-scrollbar {
    display: none;
}

.mes-nav--bereit .mes-nav__leiste {
    display: flex;
}

/* Weiter links / rechts: die Kante wird weich, statt einen Balken zu zeigen. Die Klassen setzt
   mes-nav.js, weil nur dort bekannt ist, wie weit schon gescrollt wurde. */
.mes-nav__leiste--mehr-rechts {
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}

.mes-nav__leiste--mehr-links {
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%);
}

.mes-nav__leiste--mehr-links.mes-nav__leiste--mehr-rechts {
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.mes-nav__reiter {
    flex: 0 0 auto;
    padding: 12px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mes-nav-leise);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mes-nav__reiter:hover {
    color: var(--mes-nav-tinte);
}

.mes-nav__reiter[aria-selected="true"] {
    color: var(--mes-nav-aktiv);
    border-bottom-color: var(--mes-nav-aktiv);
}

/* EIN MAUSKLICK HINTERLÄSST KEINEN RAHMEN. Diese Zeile ist nicht überflüssig: Bootstrap 4 hängt
   global im Shop und sein Reboot setzt `button:focus { outline: -webkit-focus-ring-color auto
   5px }`. Die `:focus-visible`-Regel darunter greift beim Klicken nicht — `:focus-visible`
   passt dort gar nicht —, also blieb der Bootstrap-Ring stehen (gemessen: ein oranger Ring nach
   jedem Klick auf einen Reiter). Erst diese Regel nimmt ihn weg. */
.mes-nav__reiter:focus {
    outline: none;
}

/* Bei Tastaturbedienung dagegen MUSS er sichtbar sein — sonst weiss niemand, wo er steht. */
.mes-nav__reiter:focus-visible {
    outline: 2px solid var(--mes-nav-aktiv);
    outline-offset: -4px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------- Blatt */

.mes-nav__blatt {
    scroll-margin-top: var(--mes-sprungabstand, 88px);
    padding: var(--mes-abstand, 16px) 4px calc(var(--mes-abstand, 16px) * 1.5);
}

/* Ohne Skript trennt eine Linie die Abschnitte; mit Skript übernimmt das die Leiste. */
.mes-nav:not(.mes-nav--bereit) .mes-nav__blatt + .mes-nav__blatt {
    border-top: 1px solid var(--mes-nav-linie);
}

/* Ein Klick ins Blatt soll keinen Rahmen hinterlassen — die Tastaturbedienung braucht ihn
   dagegen, das Blatt ist nach dem ARIA-Muster selbst anspringbar. `:not(:focus-visible)` trennt
   die beiden Fälle, statt den Rahmen pauschal abzuschalten. */
.mes-nav__blatt:focus:not(:focus-visible) {
    outline: none;
}

/* Die Überschrift trägt die Gliederung, solange es keine Leiste gibt. */
.mes-nav__ueberschrift {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
}

.mes-nav--bereit .mes-nav__ueberschrift {
    /* Nicht `display: none`: die Überschrift bleibt für Vorlesesoftware die Beschriftung des
       Bereichs, sichtbar ist sie dann als Reiter. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}