/* =================================================================
   Breadcrumbs – komplettering till PicoCSS inbyggda breadcrumb-stöd

   PicoCSS aktiverar avdelare (/) och layout automatiskt via
   nav[aria-label="breadcrumb"]. Vi kompletterar med:
   - Kompakt font-size
   - WCAG 2.5.8 target size (minst 44px höjd) på länkarna
   - Marginal så det inte krockar med rubriken
   ================================================================= */

/* app/static/css/breadcrumbs.css */

.breadcrumb-nav {
    margin-block: 0.5rem 1.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Alla resets måste vinna mot Picos nav[aria-label=breadcrumb]-selektorer.
   Dubbel-klassning .breadcrumb-nav[aria-label="breadcrumb"] ger oss
   tillräckligt med specificitet utan !important. */

.breadcrumb-nav[aria-label="breadcrumb"] ul {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    column-gap: 0;
    margin-inline: 0;          /* Slår Picos margin-left: -0.5rem */
    padding-inline: 0;
}

.breadcrumb-nav[aria-label="breadcrumb"] ul li {
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;                 /* Slår Picos margin-inline-start: 0.5rem på :not(:first-child) */
}

/* Stäng av Picos absolut-positionerade separator */
.breadcrumb-nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
    content: none;
}

/* Egen separator: in-flow inuti <li>, alltid vertikalt centrerad */
.breadcrumb-nav[aria-label="breadcrumb"] ul li:not(:last-child)::before {
    content: var(--pico-nav-breadcrumb-divider, ">");
    color: var(--pico-muted-color);
    margin-inline: 0.25rem;
    order: 2;
}

.breadcrumb-nav[aria-label="breadcrumb"] ul li a {
    min-height: 40px;          /* WCAG 2.5.8 target size (vertikalt) */
    display: inline-flex;
    align-items: center;
    margin: 0;                 /* Slår Picos margin-inline-start: -0.5rem */
    padding-inline: 0;         /* Text flush med <li>-vänster */
}

/* Slår Picos nav[aria-label=breadcrumb] ul li:not(:first-child) –
   den regeln har högre specificitet än vår generella li-reset, så
   utan denna behåller wrap-rader 0.5rem indrag från Picos margin. */
.breadcrumb-nav[aria-label="breadcrumb"] ul li:not(:first-child) {
    margin-inline-start: 0;
}

.breadcrumb-nav[aria-label="breadcrumb"] {
    --pico-nav-breadcrumb-divider: "»";
}