/**
 * My SEO Plugin Breadcrumbs Styles
 * Aligned with Sierra Design System (sp-primary: #146EF5)
 */

.my-seo-breadcrumbs {
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sp-text, #1D1F20);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-item.current {
    color: var(--sp-text-secondary, rgba(30, 30, 36, .7));
    font-weight: 500;
}

.breadcrumb-link {
    color: var(--sp-primary, #146EF5);
    text-decoration: none;
    font-weight: 500;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.breadcrumb-link:hover {
    color: var(--sp-primary-hover, #0D5FD9);
    text-decoration: underline;
    text-decoration-color: rgba(20, 110, 245, .3);
    text-underline-offset: 3px;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: rgba(30, 30, 36, .3);
    user-select: none;
    font-size: 12px;
}

.breadcrumb-current {
    color: var(--sp-text, #1D1F20);
    font-weight: 600;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .my-seo-breadcrumbs {
        font-size: 13px;
        margin: 10px 0;
    }
    
    .breadcrumb-separator {
        margin: 0 6px;
    }
}

/* Theme Integration */
.entry-content .my-seo-breadcrumbs {
    margin-bottom: 20px;
}

.single .my-seo-breadcrumbs {
    margin-bottom: 15px;
}

.page .my-seo-breadcrumbs {
    margin-bottom: 15px;
}

/* Accessibility */
.breadcrumb-link:focus {
    outline: 2px solid var(--sp-primary, #146EF5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Print Styles */
@media print {
    .my-seo-breadcrumbs {
        display: none;
    }
}

/* Dark mode */
[data-theme="dark"] .my-seo-breadcrumbs { color: var(--sp-text, #E5E7EB); }
[data-theme="dark"] .breadcrumb-link { color: var(--sp-primary, #6BA3F7); }
[data-theme="dark"] .breadcrumb-link:hover { color: #9CC1FA; text-decoration-color: rgba(107, 163, 247, .3); }
[data-theme="dark"] .breadcrumb-separator { color: rgba(255,255,255,.25); }
[data-theme="dark"] .breadcrumb-current { color: var(--sp-text, #F0F0F0); }
[data-theme="dark"] .breadcrumb-link:focus { outline-color: var(--sp-primary, #6BA3F7); }