/*
 * Breadcrumbs widget.
 *
 * The colours are the deeper brand pink for links (5:1 on white) and a dark grey for
 * where you are (7.5:1). A theme styles every link (Hello Elementor: its own colour,
 * and another on hover), so each state of a link is said outright, one class deeper.
 */
.ekl-bc {
    @apply w-full text-[15px] leading-[1.5] text-ekl-text;
}

.ekl-bc__list {
    @apply m-0 flex list-none flex-wrap items-center gap-x-[8px] gap-y-[4px] p-0;
}

.ekl-bc__item {
    @apply m-0 inline-flex items-center gap-[8px] p-0;
}

.ekl-bc__prefix {
    @apply m-0 mr-[4px] p-0;

    color: #50575e;
}

.ekl-bc__current,
.ekl-bc__sep {
    color: #50575e;
}

/*
 * Links in a widget are never underlined (core/default.css, with !important), so
 * the hovered or focused link is shown by its colour and a line under it that
 * is a border: always there, transparent, so nothing moves when it shows.
 */
.ekl-bc .ekl-bc__link,
.ekl-bc .ekl-bc__link:visited {
    color: var(--color-ekl-hover);
    border-bottom: 1px solid transparent;
}

.ekl-bc .ekl-bc__link:hover,
.ekl-bc .ekl-bc__link:focus,
.ekl-bc .ekl-bc__link:active {
    color: #a82a55;
    border-bottom-color: currentColor;
}

.ekl-bc .ekl-bc__link:focus-visible {
    outline: 2px solid var(--color-ekl-hover);
    outline-offset: 2px;
    border-radius: 2px;
}