/* Page Progress Bar Component
------------------------------------------ */

/* Mobile Progress Bar - Shows at top of TOC bar on mobile devices */
.page-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1002; /* Above TOC bar */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show only on mobile/tablet (when TOC is hidden) */
@media (max-width: 991px) {
    .page-progress-bar {
        opacity: 1;
    }
}

/* Hide on desktop (when TOC is visible) */
@media (min-width: 992px) {
    .page-progress-bar {
        display: none;
    }
}

.page-progress-bar .progress-bar {
    height: 100%;
    background: var(--gold);
    transition: width 0.3s ease;
    width: 0%;
    box-shadow: 0 0 8px rgba(198, 156, 63, 0.6);
    position: relative;
    z-index: 1003;
}

/* Alternative color schemes */
.page-progress-bar.progress-primary .progress-bar {
    background: var(--bs-primary);
}

.page-progress-bar.progress-success .progress-bar {
    background: var(--bs-success);
}

.page-progress-bar.progress-info .progress-bar {
    background: var(--bs-info);
}

/* Gradient variant */
.page-progress-bar.progress-gradient .progress-bar {
    background: linear-gradient(90deg, #C69C3F 0%, #E4C07A 100%);
}

/* Pulse animation for when page is fully scrolled */
.page-progress-bar .progress-bar.complete {
    animation: progress-pulse 1s ease-in-out;
}

@keyframes progress-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Legacy support for existing journey-progress-mobile class */
.journey-progress-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--bs-gray-700);
    z-index: 1000;
}

.journey-progress-mobile .progress-bar {
    height: 100%;
    background: #C69C3F;
    transition: width 0.3s ease;
}