/*
 * Breadcrumb (Tts\Ui\Breadcrumb\Breadcrumb): a labelled nav with an ordered
 * list, steps separated by a small chevron. Quiet on purpose - it orients,
 * the page title below it leads.
 *
 * The class is not Foundation's .breadcrumbs, which combined.css still styles.
 * The chevron is a mask filled with currentColor, generated content with no
 * text, so screen readers do not announce a separator.
 */

/* min-width: 0 so a long title can shrink it (it is a grid item in the page
   header, which would otherwise size it to its unbreakable content). */
.shop-breadcrumb {
    min-width: 0;
    max-width: 100%;
}

.shop-breadcrumb ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 var(--shop-space-2);
    margin: 0;
    padding: 0;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
    list-style: none;
}

.shop-breadcrumb li {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--shop-space-2);
    min-width: 0;
    margin: 0;
}

/* Every step but the first can give way: on a 320px screen one long category
   ("Beige tapijttegels", longer still in French and German) used to push the
   trail past the edge and scroll the page sideways. The first step - "Home",
   "Webshop" - is short and stays whole. */
.shop-breadcrumb li:not(:first-child) {
    flex: 0 1 auto;
}

.shop-breadcrumb li :is(a, span) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a phone the trail wraps instead: clipping every step to a few letters left
   the category unreadable and unrecoverable ("Int", "Grijze"), while the last
   step is repeated by the page's h1 just below it. */
@media (max-width: 639.98px) {
    .shop-breadcrumb ol {
        flex-wrap: wrap;
        row-gap: var(--shop-space-1);
    }

    .shop-breadcrumb li:not(:last-child) :is(a, span) {
        overflow: visible;
        white-space: normal;
    }
}

.shop-breadcrumb li + li::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Forced colours would repaint the mask's fill as the page background and
   the chevron would vanish; it is a separator, so it takes the text colour. */
@media (forced-colors: active) {
    .shop-breadcrumb li + li::before {
        forced-color-adjust: none;
        background: CanvasText;
    }
}

/* A 24px-tall target without making the line taller. */
.shop-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--shop-text);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: 0.2em;
}

.shop-breadcrumb a:hover,
.shop-breadcrumb a:focus-visible {
    color: var(--shop-accent);
    text-decoration-color: currentColor;
}

.shop-breadcrumb a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

/* On a phone the current page stays on one line, cut short if it must: the
   full title is the heading right below it. */
.shop-breadcrumb [aria-current="page"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 640px) {
    .shop-breadcrumb ol {
        flex-wrap: wrap;
        font-size: var(--shop-text-md);
    }

    .shop-breadcrumb [aria-current="page"] {
        white-space: normal;
    }
}