/**
 * Breadcrumb Navigation Styles
 * Vertical sidebar layout - fixed on left side
 */

/* Sidebar Container - Fixed on left */
.breadcrumb-sidebar {
    position: fixed;
    left: 16px;
    top: 110px;  /* Below header (~90px) + some spacing */
    z-index: 90;
    max-width: 180px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 10px 12px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Collapsed state - only shows 2nd breadcrumb + arrow */
.breadcrumb-sidebar.bc-collapsed {
    padding: 6px 10px;
}

/* Hide on scroll */
.breadcrumb-sidebar.bc-scroll-hidden {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

.breadcrumb-sidebar.bc-collapsed .breadcrumb-item {
    display: none;
}

.breadcrumb-sidebar.bc-collapsed .breadcrumb-item.bc-visible-item {
    display: block;
}

.breadcrumb-sidebar.bc-collapsed .breadcrumb-separator {
    display: none;
}

/* Hide connector lines in collapsed state for the visible item */
.breadcrumb-sidebar.bc-collapsed .bc-visible-item::before {
    display: none;
}

.breadcrumb-sidebar.bc-collapsed .bc-visible-item::after {
    display: none;
}

.breadcrumb-sidebar.bc-collapsed .bc-visible-item {
    padding-left: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: 600;
    color: var(--accent-color, #0066cc);
}

/* Expand/collapse toggle arrow at bottom */
.bc-toggle-arrow {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 4px 0 0 0;
    margin-top: 4px;
    border: none;
    background: none;
    font-size: 0.7rem;
    color: var(--text-secondary, #999);
    transition: transform 0.3s ease, color 0.2s ease;
    line-height: 1;
}

.bc-toggle-arrow:hover {
    color: var(--accent-color, #0066cc);
}

/* Arrow points down when collapsed (click to expand) */
.breadcrumb-sidebar.bc-collapsed .bc-toggle-arrow {
    margin-top: 2px;
}

/* Arrow points up when expanded (click to collapse) */
.breadcrumb-sidebar:not(.bc-collapsed) .bc-toggle-arrow {
    transform: rotate(180deg);
}

/* ==================== CATEGORY COLOR THEMES ==================== */

/* Current Affairs - Blue */
.breadcrumb-sidebar.bc-cat-current {
    border-left: 3px solid #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}
.breadcrumb-sidebar.bc-cat-current.bc-collapsed .bc-visible-item { color: #1e40af; }
.breadcrumb-sidebar.bc-cat-current .breadcrumb-current::after { background: #2563eb; }
.breadcrumb-sidebar.bc-cat-current .bc-toggle-arrow { color: #93c5fd; }

/* Editorials - Amber */
.breadcrumb-sidebar.bc-cat-editorials {
    border-left: 3px solid #d97706;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}
.breadcrumb-sidebar.bc-cat-editorials.bc-collapsed .bc-visible-item { color: #92400e; }
.breadcrumb-sidebar.bc-cat-editorials .breadcrumb-current::after { background: #d97706; }
.breadcrumb-sidebar.bc-cat-editorials .bc-toggle-arrow { color: #fcd34d; }

/* Ethics - Green */
.breadcrumb-sidebar.bc-cat-ethics {
    border-left: 3px solid #059669;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}
.breadcrumb-sidebar.bc-cat-ethics.bc-collapsed .bc-visible-item { color: #065f46; }
.breadcrumb-sidebar.bc-cat-ethics .breadcrumb-current::after { background: #059669; }
.breadcrumb-sidebar.bc-cat-ethics .bc-toggle-arrow { color: #6ee7b7; }

/* Essays - Purple */
.breadcrumb-sidebar.bc-cat-essays {
    border-left: 3px solid #7c3aed;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
}
.breadcrumb-sidebar.bc-cat-essays.bc-collapsed .bc-visible-item { color: #5b21b6; }
.breadcrumb-sidebar.bc-cat-essays .breadcrumb-current::after { background: #7c3aed; }
.breadcrumb-sidebar.bc-cat-essays .bc-toggle-arrow { color: #c4b5fd; }

/* Foundation - Teal */
.breadcrumb-sidebar.bc-cat-foundation {
    border-left: 3px solid #0d9488;
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
}
.breadcrumb-sidebar.bc-cat-foundation.bc-collapsed .bc-visible-item { color: #115e59; }
.breadcrumb-sidebar.bc-cat-foundation .breadcrumb-current::after { background: #0d9488; }
.breadcrumb-sidebar.bc-cat-foundation .bc-toggle-arrow { color: #5eead4; }

/* Push down when status strip is visible */
body.has-status-strip .breadcrumb-sidebar {
    top: 150px;  /* header (~90px) + status strip (~40px) + spacing */
}

/* Hide when near footer */
.breadcrumb-sidebar.near-footer {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Vertical Breadcrumb Navigation */
.breadcrumb-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.82rem;
    font-family: var(--font-primary, 'Inter', -apple-system, sans-serif);
    line-height: 1.4;
}

/* Individual breadcrumb items */
.breadcrumb-item {
    color: var(--text-secondary, #666);
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    padding-left: 16px;
    word-wrap: break-word;
    transition: color 0.2s ease;
}

/* Vertical connector line */
.breadcrumb-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light, #e0e0e0);
}

/* Dot indicator on the line */
.breadcrumb-item::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-light, #ccc);
    border: 2px solid var(--bg-primary, #fff);
}

/* First item - no line above */
.breadcrumb-item:first-child::before {
    top: 50%;
}

/* Last item - no line below */
.breadcrumb-item:last-child::before {
    bottom: 50%;
}

/* Clickable links */
.breadcrumb-link {
    color: var(--accent-color, #0066cc);
    cursor: pointer;
}

.breadcrumb-link:hover {
    color: var(--accent-hover, #004499);
}

.breadcrumb-link::after {
    background: var(--accent-color, #0066cc);
}

/* Current page (last item) */
.breadcrumb-current {
    color: var(--text-primary, #333);
    font-weight: 600;
}

.breadcrumb-current::after {
    background: var(--accent-color, #0066cc);
    width: 10px;
    height: 10px;
    left: 0px;
}

/* Hide the old separator (not needed in vertical) */
.breadcrumb-separator {
    display: none;
}

/* ==================== DARK MODE ==================== */

@media (prefers-color-scheme: dark) {
    .breadcrumb-sidebar {
        background: var(--bg-primary-dark, #1e1e1e);
        border-color: var(--border-dark, #333);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .breadcrumb-item {
        color: var(--text-secondary-dark, #aaa);
    }

    .breadcrumb-item::before {
        background: var(--border-dark, #444);
    }

    .breadcrumb-item::after {
        background: var(--border-dark, #555);
        border-color: var(--bg-primary-dark, #1e1e1e);
    }

    .breadcrumb-link {
        color: var(--accent-color-dark, #66b3ff);
    }

    .breadcrumb-link:hover {
        color: var(--accent-hover-dark, #99ccff);
    }

    .breadcrumb-current {
        color: var(--text-primary-dark, #eee);
    }
}

/* Dark mode class override */
body.dark-mode .breadcrumb-sidebar {
    background: #1e1e1e;
    border-color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .breadcrumb-item {
    color: #aaa;
}

body.dark-mode .breadcrumb-item::before {
    background: #444;
}

body.dark-mode .breadcrumb-item::after {
    background: #555;
    border-color: #1e1e1e;
}

body.dark-mode .breadcrumb-link {
    color: #66b3ff;
}

body.dark-mode .breadcrumb-link:hover {
    color: #99ccff;
}

body.dark-mode .breadcrumb-link::after {
    background: #66b3ff;
}

body.dark-mode .breadcrumb-current {
    color: #eee;
}

body.dark-mode .breadcrumb-current::after {
    background: #66b3ff;
}

body.dark-mode .bc-toggle-arrow {
    color: #777;
}

body.dark-mode .bc-toggle-arrow:hover {
    color: #66b3ff;
}

body.dark-mode .breadcrumb-sidebar.bc-collapsed .bc-visible-item {
    color: #66b3ff;
}

/* Dark mode category themes */
body.dark-mode .breadcrumb-sidebar.bc-cat-current { background: linear-gradient(135deg, #1e293b 0%, #1e1e1e 100%); border-left-color: #3b82f6; }
body.dark-mode .breadcrumb-sidebar.bc-cat-current.bc-collapsed .bc-visible-item { color: #60a5fa; }
body.dark-mode .breadcrumb-sidebar.bc-cat-editorials { background: linear-gradient(135deg, #292018 0%, #1e1e1e 100%); border-left-color: #f59e0b; }
body.dark-mode .breadcrumb-sidebar.bc-cat-editorials.bc-collapsed .bc-visible-item { color: #fbbf24; }
body.dark-mode .breadcrumb-sidebar.bc-cat-ethics { background: linear-gradient(135deg, #1a2e26 0%, #1e1e1e 100%); border-left-color: #10b981; }
body.dark-mode .breadcrumb-sidebar.bc-cat-ethics.bc-collapsed .bc-visible-item { color: #34d399; }
body.dark-mode .breadcrumb-sidebar.bc-cat-essays { background: linear-gradient(135deg, #231b33 0%, #1e1e1e 100%); border-left-color: #8b5cf6; }
body.dark-mode .breadcrumb-sidebar.bc-cat-essays.bc-collapsed .bc-visible-item { color: #a78bfa; }
body.dark-mode .breadcrumb-sidebar.bc-cat-foundation { background: linear-gradient(135deg, #1a2b2a 0%, #1e1e1e 100%); border-left-color: #14b8a6; }
body.dark-mode .breadcrumb-sidebar.bc-cat-foundation.bc-collapsed .bc-visible-item { color: #2dd4bf; }

/* ==================== RESPONSIVE ==================== */

/* Tablet - smaller sidebar */
@media (max-width: 1024px) {
    .breadcrumb-sidebar {
        left: 10px;
        max-width: 150px;
        padding: 10px 12px;
        font-size: 0.78rem;
    }
}

/* Mobile - hide sidebar, show as collapsible or hide completely */
@media (max-width: 768px) {
    .breadcrumb-sidebar {
        display: none;  /* Hide on mobile - filter panel takes priority */
    }
}

/* Print styles */
@media print {
    .breadcrumb-sidebar {
        display: none;
    }
}

/* Hindi language adjustments */
html[lang="hi"] .breadcrumb-nav,
.breadcrumb-nav:lang(hi) {
    font-family: 'Noto Sans Devanagari', var(--font-primary), sans-serif;
}