/* ========================================
   Service Breadcrumbs
   ======================================== */

.service-breadcrumbs {
    background: var(--ivory);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 0;
    font-family: var(--body-font);
    font-size: 0.875rem;
    line-height: 1.5;
}

.service-breadcrumbs .container {
    display: flex;
    align-items: center;
}

/* Reset Bootstrap breadcrumb typography */
.service-breadcrumbs .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    margin: 0;
    padding: 0;

    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;

    color: var(--charcoal);
}

/* Every breadcrumb item gets the same base typography */
.service-breadcrumbs .breadcrumb-item {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;

    color: var(--charcoal);
}

/* Links */
.service-breadcrumbs .breadcrumb-item a {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-family: var(--body-font);
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;

    color: var(--brand);
    text-decoration: none;

    transition: color 0.2s ease;
}

.service-breadcrumbs .breadcrumb-item a:hover {
    color: var(--burgundy);
}

/* Bootstrap separator reset */
.service-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    float: none;

    display: inline-block;

    padding: 0 0.65rem;
    margin: 0;

    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--sage);
    content: "›";
}

/* Current page */
.service-breadcrumbs .breadcrumb-item.active {
    font-family: var(--body-font);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;

    color: var(--charcoal);
}

/* Accessibility */
.service-breadcrumbs a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Mobile */
@media (max-width: 575.98px) {
    .service-breadcrumbs {
        padding: 0.65rem 0;
    }

    .service-breadcrumbs .breadcrumb,
    .service-breadcrumbs .breadcrumb-item,
    .service-breadcrumbs .breadcrumb-item a,
    .service-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
    .service-breadcrumbs .breadcrumb-item.active {
        font-size: 0.8125rem;
    }

    .service-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.5rem;
    }
}