/**
 * Stefan DS Plugin - Breadcrumbs Styles v1.0.0
 */

/* Main container for the breadcrumbs */
.stefan-ds-breadcrumbs {
    font-size: 14px;
    color: #666;
}

/* The ordered list containing the breadcrumb items */
.stefan-ds-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0!important;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 0.5em; /* Space between items */
}

/* Individual list item */
.stefan-ds-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

/* Add separator using a pseudo-element for all items except the first one */
.stefan-ds-breadcrumbs li:not(:first-child)::before {
    content: '>';
    margin-right: 0.5em;
    color: #999;
}

/* Styling for clickable links */
.stefan-ds-breadcrumbs .breadcrumb-link {
    text-decoration: none;
    color: var(--ssc-action-base, #0073aa); /* Integrates with Smart Colors */
    transition: color 0.2s ease;
}

.stefan-ds-breadcrumbs .breadcrumb-link:hover {
    text-decoration: underline;
    color: var(--ssc-action-dark, #005a87); /* Integrates with Smart Colors */
}

/* Styling for the current, non-clickable page */
.stefan-ds-breadcrumbs .breadcrumb-current {
    font-weight: 600;
    color: var(--ssc-text-body, #333); /* Integrates with Smart Colors */
}