/* Breadcrumbs
   Markup mirrors Bootstrap's breadcrumb component (as used on impelsys.com), but the
   styling is standalone because this theme does not load Bootstrap. The bar sits
   directly below each template's hero and aligns with the page content gutter.

   Accent is #00338C — the same blue as the header dropdown, so site chrome stays
   consistent. #0185EE is reserved for card detail in insights.css; it would also
   fall below 4.5:1 contrast on this grey bar at link text size. */

.breadcrumb-bar {
    width: 100%;
    background: #EFEFEF;
}

.breadcrumb-inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 14px 0;
}

ol.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Sailec Medium';
    font-size: 15px;
    line-height: 1.5;
}

ol.breadcrumb.mb-0 {
    margin-bottom: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: #646464;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\00bb";
    color: #00338C;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 0 9px;
}

.breadcrumb-item a {
    color: #646464;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: #00338C;
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #0F0F33;
    font-family: 'Sailec Bold';
}

/* Responsive */

@media (max-width: 767px) {
    .breadcrumb-inner {
        max-width: 100%;
        padding: 11px 20px;
        box-sizing: border-box;
    }

    ol.breadcrumb {
        font-size: 13px;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        font-size: 15px;
        padding: 0 7px;
    }
}