/**
 * FEF Breadcrumbs — structural styles.
 * Colours/typography are driven by Elementor controls; this file handles layout only.
 */
.fef-bc { width: 100%; }
.fef-bc-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
}
.fef-bc-item { display: inline-flex; align-items: center; gap: 4px; }
.fef-bc-item a { color: inherit; }
.fef-bc-sep { opacity: .7; user-select: none; }
.fef-bc-home-icon { display: inline-flex; align-items: center; line-height: 1; }
.fef-bc-home-icon svg { width: 1em; height: 1em; display: block; }

/**
 * Arrow / Ribbon shape (Style tab → Shape). Each .fef-bc-item is clipped into
 * a chevron pointing right; a negative left margin pulls the next item back
 * so its inward notch overlaps the previous item's point, revealing it
 * through the notch — the standard "wizard step" ribbon technique. Colors
 * come from the per-level Background Color controls; only the geometry
 * lives here. `gap` is forced to 0 with !important because Elementor's own
 * per-instance CSS sets a `gap` value on the same selector at equal
 * specificity — without it, load order (not the Gap control's condition,
 * which only hides the field in the editor and doesn't stop it emitting
 * CSS) decides which one wins.
 */
.fef-bc-shape-arrow .fef-bc-list { gap: 0 !important; }
.fef-bc-shape-arrow .fef-bc-sep { display: none; }
.fef-bc-shape-arrow .fef-bc-item {
    position: relative;
    margin-left: calc(-1 * var(--fef-bc-arrow-size, 14px));
    clip-path: polygon(
        0 50%,
        var(--fef-bc-arrow-size, 14px) 0,
        100% 0,
        calc(100% - var(--fef-bc-arrow-size, 14px)) 50%,
        100% 100%,
        var(--fef-bc-arrow-size, 14px) 100%
    );
}
.fef-bc-shape-arrow .fef-bc-item:first-child {
    margin-left: 0;
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--fef-bc-arrow-size, 14px)) 50%,
        100% 100%,
        0 100%
    );
}
.fef-bc-shape-arrow .fef-bc-item:last-child {
    clip-path: polygon(
        0 50%,
        var(--fef-bc-arrow-size, 14px) 0,
        100% 0,
        100% 100%,
        var(--fef-bc-arrow-size, 14px) 100%
    );
}
.fef-bc-shape-arrow .fef-bc-item:first-child:last-child {
    margin-left: 0;
    clip-path: none;
}