/* =============================================================================
   CORE LAYOUT
============================================================================= */

.bh-breadcrumbs {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 56px;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    z-index: 1020; /* Ensures it sits under main nav but over content */
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease;
}

.bh-breadcrumbs .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.bh-breadcrumbs nav {
    width: 100%;
}

.bh-breadcrumbs .breadcrumb {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
}


/* =============================================================================
   COLOUR SCHEME SYSTEM
   Uses Bootstrap CSS variables for framework-agnostic mapping
============================================================================= */

.bh-breadcrumbs.text-dark {
    --bs-link-color: #000;
    --bs-link-hover-color: #000;
    --bs-breadcrumb-item-active-color: #000;
    --bs-breadcrumb-divider-color: #000;
    --bs-secondary-color: #000;
}

.bh-breadcrumbs.text-light {
    --bs-link-color: #fff;
    --bs-link-hover-color: #fff;
    --bs-breadcrumb-item-active-color: #fff;
    --bs-breadcrumb-divider-color: #fff;
    --bs-secondary-color: #fff;
}


/* =============================================================================
   TYPOGRAPHY, LINKS & ANIMATION
============================================================================= */

/* 1. Safely scoped to ignore standalone buttons/badges if ever injected */
.bh-breadcrumbs .breadcrumb-item a:not(.badge):not([class*="btn"]),
.bh-breadcrumbs a.bh-breadcrumb-link:not(.badge):not([class*="btn"]) {
    /* * THE HACK: Turn the link into a flex container. 
     * This isolates the raw text node from the .badge element, meaning the 
     * text-decoration will strictly underline the text and ignore the pill! 
     */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* Automatically spaces the badge and text */
    
    position: relative;
    color: var(--bs-link-color);

    /* Use the Modern Native underline matching the main content */
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-decoration-color: transparent; /* Hidden resting state */
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    transition: text-decoration-color 0.25s ease, color 0.2s ease;
}

.bh-breadcrumbs .breadcrumb-item a:not(.badge):not([class*="btn"]):hover,
.bh-breadcrumbs .breadcrumb-item a:not(.badge):not([class*="btn"]):focus,
.bh-breadcrumbs a.bh-breadcrumb-link:not(.badge):not([class*="btn"]):hover,
.bh-breadcrumbs a.bh-breadcrumb-link:not(.badge):not([class*="btn"]):focus {
    color: var(--bs-link-hover-color);
    text-decoration-color: currentColor; /* Fades the line in smoothly */
}

/* 2. Active State */
.bh-breadcrumbs .breadcrumb-item.active {
    color: var(--bs-breadcrumb-item-active-color);
}

.bh-breadcrumbs .breadcrumb li.is-active,
.bh-breadcrumbs .breadcrumb li.active,
.bh-breadcrumbs .bh-breadcrumb-active-label {
    color: var(--bs-breadcrumb-item-active-color);
}

/* 3. Divider styling */
.bh-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-breadcrumb-divider-color);
}


/* =============================================================================
   SCROLL EFFECTS
============================================================================= */

/* Fade-on-Scroll (Sticky Mode) */
.bh-breadcrumbs.is-fade-on-scroll.is-faded {
    opacity: 0.2; /* Translucent enough to save visual space */
}

/* Snap back to full visibility on user interaction */
.bh-breadcrumbs.is-fade-on-scroll.is-faded:hover,
.bh-breadcrumbs.is-fade-on-scroll.is-faded:focus-within {
    opacity: 1;
}