/* Article Breadcrumb Block Frontend Styles */
.crates-article-breadcrumb {
    margin-bottom: 2rem;
}

.crates-article-breadcrumb__list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem; /* space-x-1 md:space-x-2 from React */
    list-style: none;
    margin: 0;
    padding: 0;
}

.crates-article-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.crates-article-breadcrumb__separator {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
    color: #6B7280; /* text-gray-500 */
    margin: 0 0.25rem; /* mx-1 */
    flex-shrink: 0;
}

.crates-article-breadcrumb__link {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #6B7280; /* text-gray-500 */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.crates-article-breadcrumb__link:hover {
    color: #F97052; /* hover:text-[#F97052] from React */
    text-decoration: none;
}

.crates-article-breadcrumb__current {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #9CA3AF; /* text-gray-400 from React */
    cursor: default;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .crates-article-breadcrumb__list {
        gap: 0.25rem 0.75rem; /* md:space-x-2 */
    }
}

/* Focus states for accessibility */
.crates-article-breadcrumb__link:focus {
    outline: 2px solid #F97052;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Ensure proper spacing when wrapped */
.crates-article-breadcrumb__item:not(:first-child) {
    margin-left: 0;
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
    .crates-article-breadcrumb__link {
        color: #9CA3AF;
    }

    .crates-article-breadcrumb__current {
        color: #6B7280;
    }

    .crates-article-breadcrumb__separator {
        color: #6B7280;
    }
}