/**
 * CWS Breadcrumbs widget — a single-line trail that scrolls horizontally when
 * it is too long, with no JavaScript and no <button>.
 *
 * Every token is declared on `.cws-bc`, never on :root, so an Elementor control
 * writing to {{WRAPPER}} overrides it and two breadcrumbs on one page can look
 * different. Every value has a fallback, so a widget whose controls were never
 * touched still renders the designed look.
 *
 * Per-crumb colours arrive as an inline `--cws-bc-item-color` on the <li>, set
 * by the row's "Colour override" control, and fall back to the global link
 * colour when unset.
 *
 * No web fonts: the trail inherits the theme's typography on purpose.
 */

.cws-bc {
    --cws-bc-link: #E5486F;
    --cws-bc-hover: #C63455;
    --cws-bc-current: #373737;
    --cws-bc-sep: #B9B9B9;
    --cws-bc-gap: 8px;
    --cws-bc-sep-size: 1em;
    --cws-bc-icon-size: 1em;
    --cws-bc-justify: flex-start;

    display: flex;
    justify-content: var(--cws-bc-justify, flex-start);
    max-width: 100%;
}

.cws-bc *,
.cws-bc *::before,
.cws-bc *::after {
    box-sizing: border-box;
}

/**
 * The scroller. Alignment lives on the .cws-bc flex parent rather than as
 * `justify-content` here on purpose: a centered flex container that overflows
 * cannot be scrolled back to its first item in most browsers. Keeping the list
 * left-packed and centering it as a flex *item* avoids that entirely.
 */
.cws-bc__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--cws-bc-gap, 8px);

    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    margin: 0;
    padding: 0;
    list-style: none;
}

.cws-bc__list::-webkit-scrollbar {
    display: none;
}

.cws-bc__item,
.cws-bc__sep {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.cws-bc__item::before,
.cws-bc__item::marker,
.cws-bc__sep::before,
.cws-bc__sep::marker {
    content: none;
}

.cws-bc__sep {
    font-size: var(--cws-bc-sep-size, 1em);
    line-height: 1;
    color: var(--cws-bc-sep, #B9B9B9);
    user-select: none;
}

.cws-bc__sep svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.cws-bc__link,
.cws-bc__current {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cws-bc__icon {
    display: inline-flex;
    align-items: center;
    font-size: var(--cws-bc-icon-size, 1em);
    line-height: 1;
}

.cws-bc__icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* The last crumb is not a link, so it never grows a pointer or an underline. */
.cws-bc__item--current .cws-bc__current {
    cursor: default;
}

/* ------------------------------------------------------------------
 * Underline modes — the `hover_decoration` control writes one of these
 * prefix classes onto the widget wrapper.
 * ------------------------------------------------------------------ */

.cws-bc-underline-none .cws-bc__link,
.cws-bc-underline-hover .cws-bc__link {
    text-decoration: none;
}

.cws-bc-underline-hover .cws-bc__link:hover,
.cws-bc-underline-hover .cws-bc__link:focus-visible,
.cws-bc-underline-always .cws-bc__link {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* ============================================================
 * Specificity armour — Elementor kit link styling
 * ============================================================
 *
 * Every Elementor site ships a global kit rule shaped like:
 *
 *   .elementor-kit-9 a { color: …; }
 *
 * That is one class plus one element — specificity (0,1,1) — which beats every
 * single-class rule (0,1,0). A breadcrumb is nothing but links, so without this
 * block every per-level colour set on a Repeater row would silently render in
 * the site's global link colour instead. This is the same trap CLAUDE.md
 * documents for the kit's global <button> rule, and it has the same fix.
 *
 * The fix is specificity, not `!important`: re-asserting under the `.cws-bc`
 * root gives (0,2,0), which wins cleanly and still leaves the widget's own
 * Elementor style controls free to override (they compile to
 * `{{WRAPPER}} .cws-bc <target>` = (0,3,0), one step higher again).
 *
 * Only `color` is repeated here — that is the one property the kit sets on
 * links. Everything else stays in the rules above.
 */

.cws-bc .cws-bc__link {
    color: var(--cws-bc-item-color, var(--cws-bc-link, #E5486F));
}

.cws-bc .cws-bc__link:hover,
.cws-bc .cws-bc__link:focus-visible {
    color: var(--cws-bc-item-color, var(--cws-bc-hover, #C63455));
}

.cws-bc .cws-bc__current {
    color: var(--cws-bc-item-color, var(--cws-bc-current, #373737));
}

/* Keyboard focus must stay visible even though the kit strips link outlines. */
.cws-bc .cws-bc__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}