/* --- Breadcrumb ---------------------------------------------------------
   Höchstens drei Stufen. Die letzte ist die aktuelle Seite: kein Link,
   `aria-current="page"`. Trenner `aria-hidden`, die Struktur tragen Liste
   und BreadcrumbList-Schema. Die 44-px-Regel greift hier nicht — Textlinks
   in einer Zeile sind von der Zielgroesse ausgenommen. Meta-Schrift und die
   kleine 8-px-Gasse halten die Navigation visuell beim Seitenkontext. */

.epi-breadcrumb {
    padding-block: 0;
}

.epi-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.epi-breadcrumb li {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-secondary);
}

/* min-height 24px erfuellt WCAG 2.2 AA 2.5.8 ohne auf die
   Abstandsausnahme angewiesen zu sein (docs/wcag.md). */
.epi-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
}

.epi-breadcrumb a:hover {
    color: var(--color-text);
}

.epi-breadcrumb [aria-current="page"] {
    color: var(--color-secondary);
}

.epi-breadcrumb__sep {
    color: var(--color-secondary);
}

/* Mobil nur „‹ Elternseite“ (inc/breadcrumb.php markiert die Stufe). Die
   anderen Stufen sind nur optisch ausgeblendet: Screenreader lesen den
   ganzen Pfad samt aktueller Seite, und ein ausgeblendeter Link erscheint
   wieder, sobald er den Tastaturfokus hat (WCAG 2.4.7). */
@media screen and (max-width: 781px) {
    .epi-breadcrumb li:not(.epi-breadcrumb__eltern):not(:focus-within) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .epi-breadcrumb__eltern a::before {
        content: "‹";
        content: "‹" / "";
        display: inline-block;
        margin-inline-end: 0.25em;
        text-decoration: none;
    }
}