/*
 * CollisionSuite — Chevron Breadcrumb (design exploration)
 *
 * Adapted from the "Flat CSS3 breadcrumb" idea
 * (https://codepen.io/renaudtertrais/pen/nMGWqm) but rebuilt to be:
 *   - Theme-aware: every shade derives from Bootstrap 5.3 tokens
 *     (--bs-primary, --bs-*-bg, --bs-border-color) via color-mix(), so it
 *     adapts to light/dark and any future brand-color change automatically.
 *   - Shape via clip-path polygon (one declaration per segment) instead of
 *     the original four border-triangle pseudo-elements.
 *   - Sized for the compact (14px) Material density typography.
 *
 * Three variants are provided to compare; pick one and we delete the rest.
 *   .cs-breadcrumb--solid    filled primary chevrons, white text  (faithful)
 *   .cs-breadcrumb--tonal    neutral chevrons, primary current    (subtle)
 *   .cs-breadcrumb--ghost    near-flat tinted chevrons            (minimal)
 *
 * Shape knobs (override on .cs-breadcrumb to taste):
 *   --cs-bc-arrow   depth of the chevron point / notch
 *   --cs-bc-gap     visible seam between segments
 *   --cs-bc-height  segment height
 */

.cs-breadcrumb {
    --cs-bc-arrow: 0.6rem;
    --cs-bc-gap: 2px;
    --cs-bc-height: 2rem;
    --cs-bc-radius: 4px;
    display: block;
}

.cs-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    row-gap: var(--cs-bc-gap);
    font-size: 0.8rem;
    line-height: 1;
}

.cs-breadcrumb li {
    display: flex;
    /* Pull each segment left so its notch swallows the previous point,
       leaving only --cs-bc-gap of the container background as the seam. */
    margin-right: calc(var(--cs-bc-gap) - var(--cs-bc-arrow));
}
.cs-breadcrumb li:last-child { margin-right: 0; }

.cs-breadcrumb li > a,
.cs-breadcrumb li > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: var(--cs-bc-height);
    padding: 0 0.8rem 0 calc(0.8rem + var(--cs-bc-arrow));
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
    /* notch on the left, point on the right */
    clip-path: polygon(
        0 0,
        calc(100% - var(--cs-bc-arrow)) 0,
        100% 50%,
        calc(100% - var(--cs-bc-arrow)) 100%,
        0 100%,
        var(--cs-bc-arrow) 50%
    );
}

/* First segment: flat left edge (no incoming notch), rounded outer corner. */
.cs-breadcrumb li:first-child > a,
.cs-breadcrumb li:first-child > span {
    padding-left: 0.85rem;
    clip-path: polygon(
        0 0,
        calc(100% - var(--cs-bc-arrow)) 0,
        100% 50%,
        calc(100% - var(--cs-bc-arrow)) 100%,
        0 100%
    );
    border-top-left-radius: var(--cs-bc-radius);
    border-bottom-left-radius: var(--cs-bc-radius);
}

/* Last segment: flat right edge (no outgoing point), rounded outer corner. */
.cs-breadcrumb li:last-child > a,
.cs-breadcrumb li:last-child > span {
    padding-right: 0.95rem;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        var(--cs-bc-arrow) 50%
    );
    border-top-right-radius: var(--cs-bc-radius);
    border-bottom-right-radius: var(--cs-bc-radius);
}

/* Single-segment edge case: flat both sides. */
.cs-breadcrumb li:first-child:last-child > a,
.cs-breadcrumb li:first-child:last-child > span {
    clip-path: none;
    border-radius: var(--cs-bc-radius);
}

.cs-breadcrumb li > a:focus-visible,
.cs-breadcrumb li > span:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.cs-breadcrumb .bi { font-size: 0.95em; }

/* ── Variant: SOLID — filled primary chevrons, white text ─────────────────── */
.cs-breadcrumb--solid li > a {
    background-color: var(--bs-primary);
    color: #fff;
}
.cs-breadcrumb--solid li > a:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 100%, var(--bs-emphasis-color) 18%);
    color: #fff;
}
.cs-breadcrumb--solid li:last-child > span {
    /* current page: a touch darker so it reads as "you are here" */
    background-color: color-mix(in srgb, var(--bs-primary) 100%, var(--bs-emphasis-color) 28%);
    color: #fff;
}

/* ── Variant: TONAL — neutral chevrons, primary current page ──────────────── */
.cs-breadcrumb--tonal li > a {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.cs-breadcrumb--tonal li > a:hover {
    background-color: color-mix(in srgb, var(--bs-secondary-bg) 100%, var(--bs-emphasis-color) 12%);
}
.cs-breadcrumb--tonal li:last-child > span {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ── Collapsed-middle ellipsis (mobile) ──────────────────────────────────────
 * The "…" chevron shown below the md breakpoint when a trail is collapsed.
 * It's a middle segment (inherits the chevron clip-path); give it a neutral
 * tonal fill and a pointer so it reads as tappable. */
.cs-breadcrumb .cs-bc-ellipsis > span {
    padding-left: calc(0.55rem + var(--cs-bc-arrow));
    padding-right: 0.55rem;
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.cs-breadcrumb .cs-bc-ellipsis > span:hover {
    background-color: color-mix(in srgb, var(--bs-secondary-bg) 100%, var(--bs-emphasis-color) 12%);
    color: var(--bs-body-color);
}
.cs-breadcrumb .cs-bc-ellipsis .bi { font-size: 1em; }

/* ── Variant: GHOST — near-flat tinted chevrons, primary text ─────────────── */
.cs-breadcrumb--ghost li > a {
    background-color: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg));
    color: var(--bs-primary);
}
.cs-breadcrumb--ghost li > a:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-body-bg));
}
.cs-breadcrumb--ghost li:last-child > span {
    background-color: color-mix(in srgb, var(--bs-primary) 16%, var(--bs-body-bg));
    color: var(--bs-body-color);
}