/**
 * Page Navigation Styles
 * Sticky in-page navigation bar for quick section jumps
 */

/* ============================================
   Page Navigation Bar
   ============================================ */

.page-navigation {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 0;
    transition: all var(--transition-base);
}

/* Make it appear below the main header */
.site-header ~ .page-navigation {
    top: 80px; /* Adjust based on your header height */
}

/* When scrolled */
.page-navigation.is-scrolled {
    box-shadow: var(--shadow-md);
}

.page-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

/* Hide scrollbar but keep functionality */
.page-nav-list::-webkit-scrollbar {
    display: none;
}

.page-nav-list {
    scrollbar-width: none;
}

.page-nav-item {
    flex-shrink: 0;
}

.page-nav-link {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-base);
    position: relative;
}

.page-nav-link:hover {
    color: var(--color-accent);
    background-color: var(--color-background-alt);
}

/* Active state for current section */
.page-nav-link.is-active,
.page-nav-item.active .page-nav-link {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ============================================
   Responsive Page Navigation
   ============================================ */

@media (max-width: 768px) {
    .page-navigation {
        overflow-x: auto;
    }

    .site-header ~ .page-navigation {
        top: 60px; /* Smaller on mobile */
    }

    .page-nav-link {
        padding: 0.75rem 1rem;
        font-size: var(--font-size-xs);
    }

    /* Add fade on edges to indicate scrollability */
    .page-navigation::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, var(--color-background), transparent);
        pointer-events: none;
    }
}

/* ============================================
   Scroll Spy Enhancement
   ============================================ */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Offset for sticky headers when jumping to sections */
section[id] {
    scroll-margin-top: 160px; /* Header + Page Nav height */
}

@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: 120px;
    }
}