/* =============================================================================
   DBIM breadcrumb (all pages): one style for both breadcrumb templates
   (ul.breadcrumb in content pages, nav.pgCrumbs in form / gallery pages).
   ============================================================================= */
.breadcrumb, nav.pgCrumbs .pgCrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    font-family: var(--dbim-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--dbim-grey-3);
    text-align: left;
}
nav.pgCrumbs .pgCrumbs__list { padding-left: var(--dbim-gutter); padding-right: var(--dbim-gutter); }
.breadcrumb li, nav.pgCrumbs .pgCrumbs__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    list-style: none;
}
.breadcrumb a, nav.pgCrumbs .pgCrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: var(--dbim-blue-2);
    font-weight: 500;
    text-decoration: none;
}
.breadcrumb a:hover, nav.pgCrumbs .pgCrumbs__link:hover { color: var(--dbim-blue-1); text-decoration: underline; }
.breadcrumb a:focus-visible, nav.pgCrumbs .pgCrumbs__link:focus-visible { outline: 3px solid var(--dbim-info); outline-offset: 2px; border-radius: 2px; }

/* separators are drawn as a line chevron, never read aloud */
.breadcrumb .dbim-bc-sep, nav.pgCrumbs .pgCrumbs__sep {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    color: var(--dbim-grey-2);
    background-color: currentColor;
    -webkit-mask: url('../images/dbim_icons/line/chevron_right.svg') center / contain no-repeat;
    mask: url('../images/dbim_icons/line/chevron_right.svg') center / contain no-repeat;
}
nav.pgCrumbs .pgCrumbs__sep i { display: none; }

/* current page */
.breadcrumb li:last-child, .breadcrumb [aria-current="page"],
nav.pgCrumbs .pgCrumbs__current {
    color: var(--dbim-brown);
    font-weight: 600;
}
.breadcrumb .bdrNoLink { display: inline-flex; align-items: center; }
.eip-breadcrumb-box { text-align: left; }

@media (max-width: 575.98px) {
    .breadcrumb, nav.pgCrumbs .pgCrumbs__list { padding-top: 10px; padding-bottom: 10px; }
}