/**
 * Compact Breadcrumb Design
 * - Reduced vertical margins to minimize space between navigation and content
 * - Compact padding for a tighter visual appearance
 * - Maintains accessibility and visual hierarchy
 * - Responsive design with appropriate scaling for mobile devices
 */
/**
 * Breadcrumb Navigation Styles
 * Clean horizontal navigation with single CSS-only separators
 */

/* Breadcrumb Container - Tight spacing */
nav.breadcrumb,
nav[aria-label="Breadcrumb"],
.breadcrumb-nav {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 0.3rem 1rem;
    margin: 0.1rem 0 0.3rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

/* Breadcrumb List - Clean horizontal layout */
nav.breadcrumb ol,
nav.breadcrumb ul,
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="Breadcrumb"] ul,
.breadcrumb-nav .breadcrumb,
.breadcrumb {
    list-style: none !important;
    list-style-type: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    counter-reset: none !important;
}

/* CRITICAL: Remove ALL text content that could be separators */
nav.breadcrumb li,
nav[aria-label="Breadcrumb"] li,
.breadcrumb-nav .breadcrumb li,
.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any pseudo-elements that might add content */
nav.breadcrumb li::before,
nav[aria-label="Breadcrumb"] li::before,
.breadcrumb-nav .breadcrumb li::before,
.breadcrumb li::before {
    content: none !important;
    display: none !important;
}

/* Hide any direct text nodes that are not in links or spans */
nav.breadcrumb li > text,
nav[aria-label="Breadcrumb"] li > text,
.breadcrumb-nav .breadcrumb li > text,
.breadcrumb li > text {
    display: none !important;
}

/* Breadcrumb Links */
nav.breadcrumb a,
nav[aria-label="Breadcrumb"] a,
.breadcrumb-nav .breadcrumb a,
.breadcrumb a {
    color: #64b5f6 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

nav.breadcrumb a:hover,
nav[aria-label="Breadcrumb"] a:hover,
.breadcrumb-nav .breadcrumb a:hover,
.breadcrumb a:hover {
    color: #42a5f5 !important;
    background: rgba(100, 181, 246, 0.1) !important;
    text-shadow: 0 0 8px rgba(100, 181, 246, 0.3) !important;
}

nav.breadcrumb a:focus,
nav[aria-label="Breadcrumb"] a:focus,
.breadcrumb-nav .breadcrumb a:focus,
.breadcrumb a:focus {
    outline: 2px solid #64b5f6 !important;
    outline-offset: 2px !important;
}

/* Active/Current Breadcrumb */
nav.breadcrumb li.active,
nav.breadcrumb li:last-child,
nav[aria-label="Breadcrumb"] li.active,
nav[aria-label="Breadcrumb"] li:last-child,
nav[aria-label="Breadcrumb"] [aria-current="page"],
.breadcrumb-nav .breadcrumb li.active,
.breadcrumb-nav .breadcrumb li:last-child,
.breadcrumb li.active,
.breadcrumb li:last-child {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* NO CSS separators - clean breadcrumb without ::after pseudo-elements */
nav.breadcrumb li:not(:last-child)::after,
nav[aria-label="Breadcrumb"] li:not(:last-child)::after,
.breadcrumb-nav .breadcrumb li:not(:last-child)::after,
.breadcrumb li:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* Explicit breadcrumb separator styling */
.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 1rem !important;
    margin: 0 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav.breadcrumb,
    nav[aria-label="Breadcrumb"],
    .breadcrumb-nav {
        padding: 0.25rem 0.75rem !important;
        margin: 0.1rem 0 0.25rem 0 !important;
        border-radius: 6px !important;
    }

    nav.breadcrumb ol,
    nav.breadcrumb ul,
    nav[aria-label="Breadcrumb"] ol,
    nav[aria-label="Breadcrumb"] ul,
    .breadcrumb-nav .breadcrumb,
    .breadcrumb {
        font-size: 0.85rem !important;
    }

    nav.breadcrumb li:not(:last-child)::after,
    nav[aria-label="Breadcrumb"] li:not(:last-child)::after,
    .breadcrumb-nav .breadcrumb li:not(:last-child)::after,
    .breadcrumb li:not(:last-child)::after {
        content: none !important;
        display: none !important;
    }
}

    nav.breadcrumb li:not(:last-child)::after,
    nav[aria-label="Breadcrumb"] li:not(:last-child)::after,
    .breadcrumb-nav .breadcrumb li:not(:last-child)::after,
    .breadcrumb li:not(:last-child)::after {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 480px) {
    nav.breadcrumb,
    nav[aria-label="Breadcrumb"],
    .breadcrumb-nav {
        padding: 0.2rem 0.5rem !important;
        margin: 0.05rem 0 0.2rem 0 !important;
    }
}


/* BREADCRUMB ALIGNMENT FIXES */
/* Ensure all breadcrumb items are properly aligned */
nav.breadcrumb li,
nav[aria-label="Breadcrumb"] li,
.breadcrumb-nav .breadcrumb li,
.breadcrumb li {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 1.4em !important;
    color: rgba(255, 255, 255, 0.7) !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure links and text have consistent alignment */
nav.breadcrumb a,
nav[aria-label="Breadcrumb"] a,
.breadcrumb-nav .breadcrumb a,
.breadcrumb a {
    color: #64b5f6 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 1.4em !important;
}

/* Ensure separators are aligned with text */
.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 1rem !important;
    margin: 0 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 1.4em !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Ensure current/active items are aligned */
nav.breadcrumb li.active,
nav.breadcrumb li:last-child,
nav[aria-label="Breadcrumb"] li.active,
nav[aria-label="Breadcrumb"] li:last-child,
nav[aria-label="Breadcrumb"] [aria-current="page"],
.breadcrumb-nav .breadcrumb li.active,
.breadcrumb-nav .breadcrumb li:last-child,
.breadcrumb li.active,
.breadcrumb li:last-child {
    color: #ffffff !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 1.4em !important;
    padding: 0.25rem 0.5rem !important;
}