/* Yoast Breadcrumbs Styling - matching our custom breadcrumbs design */

/* Base breadcrumbs container */
.breadcrumbs {
    display: flex;
    margin-bottom: 1rem;
}

.breadcrumbs nav {
    display: flex;
    margin-bottom: 0;
}

/* Override Yoast default ul structure */
.breadcrumbs ul {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem 0.5rem;
    direction: rtl;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
}

/* Style breadcrumb links to match our design */
.breadcrumbs a {
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-sm;
}

.breadcrumbs a:hover {
    color: var(--primary-color, #059669);
}

/* Style breadcrumb items to match our custom styling */
.breadcrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

/* Override Yoast separators to use our SVG */
.breadcrumbs .breadcrumb-separator,
.breadcrumbs li span[aria-hidden="true"],
.breadcrumbs li .svg,
.breadcrumbs .separator {
    margin: 0 0.25rem;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
}

/* Style for current/last breadcrumb */
.breadcrumbs .breadcrumb_last,
.breadcrumbs li:last-child span,
.breadcrumbs li:last-child a {
    color: #6b7280;
    font-weight: 500;
    pointer-events: none;
}

/* Ensure proper spacing with RTL */
.breadcrumbs li:not(:first-child) {
    margin-right: 0.25rem;
}

.breadcrumbs li:not(:first-child)::before {
    content: '';
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .breadcrumbs {
        margin-bottom: 0.75rem;
    }

    .breadcrumbs ul {
        gap: 0.125rem 0.25rem;
    }

    .breadcrumbs li {
        font-size: 0.75rem;
    }

    .breadcrumbs a {
        font-size: 0.75rem;
    }
}

/* Additional styling to match our custom breadcrumbs exactly */
.breadcrumbs #breadcrumbs {
    margin: 0;
    padding: 0;
}

.breadcrumbs .breadcrumb-item.active {
    color: #6b7280;
}

/* Hide default Yoast styling that might conflict */
.breadcrumbs .breadcrumb,
.breadcrumbs .breadcrumb-trail {
    background: none;
    padding: 0;
    border: none;
}