/*
 * Breadcrumb Container
 * This creates the "tab out of header" effect.
 */
nav#main-breadcrumb {
    display: inline-block; /* Makes it only as wide as content */
    margin-top: 0; /* Sits flush against the navbar above it */
    
    /* Match header style */
    box-shadow: var(--bs-box-shadow-sm);
    
    /* Remove top border to blend with header */
    border-top: none; 


   position: relative;
   top: -4px;

   background-color: var(--panel-bg);

    padding-top: 0px; 
    padding-right: 4px; 
    padding-bottom: 4px; 
    padding-left: 4px; 

    border-right: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
    border-color: var(--panel-bg);

    margin-bottom: 8px;


    /* Round only the bottom corners to complete the "tab" illusion */
    border-radius: 0 0 0.375rem 0.375rem;
}

nav#main-breadcrumb :hover {
  background-color: var(--panel-bg);
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-left: 1px solid;
}

#main-breadcrumb a {
    border: 0px !important;
}

.nav-spacer {
    height: 64px;
}

/* * Breadcrumb List (ol)
 * Basic horizontal flex layout 
 */
nav#main-breadcrumb .breadcrumb-list {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small screens */
}

/* * Breadcrumb Item (li)
 */
.breadcrumb-item {
    display: flex;
		border-width: 0px 0px 0px 0px !important;
    align-items: center;
    font-size: 0.9rem;
}

/*
For any item but the first, remove the border completely
*/

.breadcrumb-item a {
\}


/* * Active Breadcrumb Item
 * This is the "lightly underlined" style you requested.
 */
.breadcrumb-item.active {
    /* Underline style */
    border-bottom: 2px solid var(--bs-primary);
}


/*
 * --- STYLE 1: Refined "Pipe" Separator ---
 * This refines your idea. It only adds a border *between* items,
 * not before the first one.
 */

.breadcrumb-item + .breadcrumb-item {
    /*
    padding-left: 0.5rem;
    */
}


/*
 * --- STYLE 2: Standard "/" Separator ---
 * Uncomment this block and comment out STYLE 1 to use this.
 * This is a more traditional, and very readable, separator.
 */

/*
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-right: 0.5rem;
    color: var(--bs-secondary-color);
}
*/