/**
 * Event Breadcrumb Block Styles
 * File: assets/css/blocks/event-breadcrumb.css
 */

.wpe-breadcrumb {
    margin: 0 0 2rem 0;
    font-size: 0.875rem;
}

.wpe-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #6c757d;
}

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

.wpe-breadcrumb-item a {
    color: #0066cc;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.wpe-breadcrumb-item a:hover {
    color: #004999;
    background: #f0f8ff;
    text-decoration: underline;
}

.wpe-breadcrumb-item a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Separator */
.wpe-breadcrumb-item:not(:last-child)::after {
    content: attr(data-separator);
    margin-left: 0.5rem;
    color: #adb5bd;
    pointer-events: none;
}

/* Current page (last item) */
.wpe-breadcrumb-current {
    color: #212529;
    font-weight: 500;
}

.wpe-breadcrumb-current span {
    padding: 0.25rem 0.5rem;
}

/* Alternative: Use CSS variable for separator */
.wpe-breadcrumb-list {
    --breadcrumb-separator: '›';
}

.wpe-breadcrumb-item:not(:last-child)::after {
    content: var(--breadcrumb-separator);
}

/* Separator variations (can be set via inline style) */
.wpe-breadcrumb[data-separator="/"] {
    --breadcrumb-separator: '/';
}

.wpe-breadcrumb[data-separator=">"] {
    --breadcrumb-separator: '>';
}

.wpe-breadcrumb[data-separator="→"] {
    --breadcrumb-separator: '→';
}

.wpe-breadcrumb[data-separator="»"] {
    --breadcrumb-separator: '»';
}

.wpe-breadcrumb[data-separator="•"] {
    --breadcrumb-separator: '•';
}

/* Responsive Design */
@media (max-width: 640px) {
    .wpe-breadcrumb {
        font-size: 0.8125rem;
    }
    
    .wpe-breadcrumb-list {
        gap: 0.375rem;
    }
    
    .wpe-breadcrumb-item:not(:last-child)::after {
        margin-left: 0.375rem;
    }
    
    .wpe-breadcrumb-item a,
    .wpe-breadcrumb-current span {
        padding: 0.125rem 0.375rem;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .wpe-breadcrumb-item a {
        text-decoration: underline;
    }
    
    .wpe-breadcrumb-item:not(:last-child)::after {
        color: currentColor;
    }
}

/* Print Styles */
@media print {
    .wpe-breadcrumb {
        display: none;
    }
}

/* RTL Support */
[dir="rtl"] .wpe-breadcrumb-list {
    direction: rtl;
}

[dir="rtl"] .wpe-breadcrumb-item:not(:last-child)::after {
    margin-left: 0;
    margin-right: 0.5rem;
    content: '‹';
}

/* Dark Mode Support (if theme supports it) */
@media (prefers-color-scheme: dark) {
    .wpe-breadcrumb-list {
        color: #adb5bd;
    }
    
    .wpe-breadcrumb-item a {
        color: #6db3f2;
    }
    
    .wpe-breadcrumb-item a:hover {
        color: #8dc5f5;
        background: rgba(109, 179, 242, 0.1);
    }
    
    .wpe-breadcrumb-current {
        color: #e9ecef;
    }
}

/* Compact variant (can be added via CSS class) */
.wpe-breadcrumb.wpe-breadcrumb-compact {
    margin: 0 0 1rem 0;
    font-size: 0.8125rem;
}

.wpe-breadcrumb.wpe-breadcrumb-compact .wpe-breadcrumb-list {
    gap: 0.25rem;
}

.wpe-breadcrumb.wpe-breadcrumb-compact .wpe-breadcrumb-item a,
.wpe-breadcrumb.wpe-breadcrumb-compact .wpe-breadcrumb-current span {
    padding: 0.125rem 0.25rem;
}

/* Large variant */
.wpe-breadcrumb.wpe-breadcrumb-large {
    margin: 0 0 2.5rem 0;
    font-size: 1rem;
}

.wpe-breadcrumb.wpe-breadcrumb-large .wpe-breadcrumb-list {
    gap: 0.75rem;
}

.wpe-breadcrumb.wpe-breadcrumb-large .wpe-breadcrumb-item a,
.wpe-breadcrumb.wpe-breadcrumb-large .wpe-breadcrumb-current span {
    padding: 0.375rem 0.75rem;
}

/* Icon support (if icons are added) */
.wpe-breadcrumb-item svg {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Animation for dynamic loading */
@keyframes breadcrumbFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wpe-breadcrumb {
    animation: breadcrumbFadeIn 0.3s ease-out;
}

/* States */
.wpe-breadcrumb-item a:active {
    transform: scale(0.98);
}

/* Focus visible (modern browsers) */
.wpe-breadcrumb-item a:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

/* Remove default focus for mouse users */
.wpe-breadcrumb-item a:focus:not(:focus-visible) {
    outline: none;
}