/* ============================================================================
   RSL Breadcrumb Component
   ============================================================================
   Accessible breadcrumb navigation for indicating page hierarchy.
   Displays a horizontal trail of links showing the user's location.

   Usage:
   <nav aria-label="breadcrumb">
       <ol class="rsl-breadcrumb">
           <li><a href="/">Home</a></li>
           <li><a href="/docs">Docs</a></li>
           <li aria-current="page">Current Page</li>
       </ol>
   </nav>
   ============================================================================ */

/* ──────────────────────────────────────────────
   Container
   ────────────────────────────────────────────── */
.rsl-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ──────────────────────────────────────────────
   Breadcrumb Items
   ────────────────────────────────────────────── */
.rsl-breadcrumb li {
    margin-right: 5px;
    white-space: nowrap;
}

/* Separator between items */
.rsl-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 5px;
    color: #6c757d;
}

/* ──────────────────────────────────────────────
   Links
   ────────────────────────────────────────────── */
.rsl-breadcrumb a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s ease;
}

.rsl-breadcrumb a:hover {
    color: #0056b3;
}

.rsl-breadcrumb a:focus {
    outline: 2px solid #6E7BFF;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ──────────────────────────────────────────────
   Current Page (last item)
   ────────────────────────────────────────────── */
.rsl-breadcrumb li[aria-current="page"],
.rsl-breadcrumb li:last-child {
    color: #6c757d;
}

/* ──────────────────────────────────────────────
   Dark Mode Support
   ────────────────────────────────────────────── */
[data-theme="dark"] .rsl-breadcrumb a {
    color: #6E7BFF;
}

[data-theme="dark"] .rsl-breadcrumb a:hover {
    color: #8b94ff;
}

[data-theme="dark"] .rsl-breadcrumb li:not(:last-child)::after {
    color: #9ca3af;
}

[data-theme="dark"] .rsl-breadcrumb li[aria-current="page"],
[data-theme="dark"] .rsl-breadcrumb li:last-child {
    color: #9ca3af;
}

/* ──────────────────────────────────────────────
   Responsive - Allow wrapping on small screens
   ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .rsl-breadcrumb {
        flex-wrap: wrap;
    }

    .rsl-breadcrumb li {
        margin-bottom: 0.25rem;
    }
}