/*
 * Das Hauptmenü aus dem Seitenbaum — nur das, was zum Accordion aus
 * 63-accordion.css dazukommt.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 *
 * Absichtlich wenig: das Aussehen der Zeilen ist das des Accordions, und es
 * steht dort. Hier liegen die Liste als Liste und der Fall, den das Design
 * nicht kennt — ein Seitenbaum ohne Seiten.
 */

/*
 * Die Zeile einer obersten Seite: links die Seite, rechts der Aufklapper.
 *
 * Der Innenabstand bleibt beim Rahmen, und das ist der ganze Punkt: er ist die
 * Fläche, die aufklappt (MainMenu.html). Den Zeigefinger dafür hat er schon von
 * .spo-accordion-head (63-accordion.css).
 *
 * Hier stand `--spo-row-padding: 0`, und die 16px wanderten in die beiden
 * Bedienelemente. Dem Rahmen blieb dann nur der freie Platz zwischen Wort und
 * Winkel — und der ist nicht verlässlich da: die Beschriftung darf schrumpfen
 * (`flex: 0 1 auto`, unten), und bei einem langen Seitentitel wie „Aktuelles &
 * Geschichten" schrumpft sie genau so weit, dass nichts übrig bleibt. Gemeldet
 * als "não acontece nada nos que têm children": es gab dort keine Fläche mehr,
 * die dem Rahmen gehörte.
 *
 * Mit dem Innenabstand am Rahmen ist der Ring um das Wort immer seiner, wie
 * lang der Titel auch ist.
 */

/*
 * Der Link ist so breit wie sein Wort. `color: inherit`, weil die Farbe an der
 * Zeile steht und in der hervorgehobenen eine andere ist.
 *
 * Hier stand `flex: 1`, und der Link nahm den Rest der Zeile — alles außer dem
 * Winkel führte zur Seite. Gedreht, weil das Aufklappen die große Fläche
 * bekommen soll und der Weg zur Seite das Wort: "o click na tab e na seta abre
 * a tab, so o click em cima do texto viaja para o link". `0 1 auto` und nicht
 * `none`: schrumpfen darf er weiter, sonst drückte ein langer Seitentitel den
 * Winkel aus der Zeile.
 */
/*
 * Innenabstand und Rahmen als Custom Property, wie bei der Zeile selbst
 * (63-accordion.css): der Link liegt *in* einer Zeile und erbt deren Werte
 * sonst — und beides gehört jetzt dem Rahmen um ihn herum.
 *
 * Ohne eigenen Innenabstand ist die anklickbare Fläche des Links genau sein
 * Wort. Genau das ist gewollt: „só o click em cima do texto viaja para o
 * link". Die Höhe der Zeile leidet nicht, die kommt vom Rahmen.
 */
.spo-accordion-label {
    flex: 0 1 auto;
    min-width: 0;
    --spo-row-padding: 0;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 0;
    padding: var(--spo-row-padding);
    color: inherit;
    text-decoration: none;
}

/*
 * Der Aufklapper ist nur der Winkel. Links 8px Abstand zur Beschriftung, sonst
 * nichts: die Kante der Karte und die Höhe der Zeile hält der Rahmen mit
 * seinen 16px. Hier standen sie einmal alle vier — solange der Rahmen keine
 * hatte, mussten sie in die beiden darin.
 */
.spo-accordion-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 0;
    --spo-row-padding: 0 0 0 8px;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 0;
    padding: var(--spo-row-padding);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/*
 * Eine Seite ohne Unterseiten: dieselbe Zeile, nur ohne Winkel und ohne
 * Aufklapper.
 *
 * Kein Zeigefinger. Die Zeile war einmal selbst der Link und trug ihn zu
 * Recht; jetzt ist der Link das Wort darin (MainMenu.html), und der Rahmen
 * darum tut nichts — anders als in der geteilten Zeile, wo er aufklappt. Ein
 * Zeigefinger über einer Fläche, die auf nichts reagiert, ist ein
 * Versprechen, das sie nicht hält.
 *
 * Das Wort behält seinen: der Browser gibt jedem Link den Zeigefinger, und
 * eine eigene Angabe am Element schlägt das geerbte `default` von hier.
 */
.spo-accordion-head--plain {
    cursor: default;
}

/*
 * Die Unterseiten stehen in einer Liste; sichtbar soll das nicht sein. Der
 * Innenabstand der Zeilen kommt von .spo-link.
 */
.spo-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Ab der zweiten Unterebene weiter eingerückt und eine Spur leiser. Das Design
 * hat diese Ebene nicht — es zeigt eine Unterebene. Wer im Element eine größere
 * Tiefe einstellt, soll aber nicht auf einer Bündigkeit sitzen, in der die
 * Verschachtelung verschwindet.
 */
/*
 * Die Einrückung steht als ganzer Innenabstand da und nicht als `padding-left`:
 * die Sperre in 63-accordion.css setzt den Abstand als Kurzschreibweise, und ein
 * einzelner Wert daneben fiele im Zeiger- oder Fokus-Zustand weg.
 */
.spo-nav-list .spo-nav-list .spo-link {
    --spo-row-padding: 12px 16px 12px 44px;
    font-size: calc(13.5px - var(--spo-text-shrink));
    font-weight: 400;
}

.spo-nav-list .spo-nav-list .spo-nav-list .spo-link {
    --spo-row-padding: 12px 16px 12px 58px;
}

/*
 * Kein Eintrag da. Gestrichelt, weil es dieselbe Aussage ist wie bei einer
 * leeren Fläche im Editor: hier fehlt etwas — und zwar nicht hier, sondern im
 * Seitenbaum.
 */
.spo-nav-empty {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px dashed rgba(0, 60, 110, .3);
    border-radius: 8px;
    color: var(--spo-blue-dark);
    font-size: calc(13px - var(--spo-text-shrink));
    line-height: 1.35;
}

.spo-nav-empty-hint {
    display: block;
    margin-top: 4px;
    font-size: calc(11px - var(--spo-text-shrink));
    opacity: .75;
}