/* ==========================================================================
   Sticky Navigation Styles
   ========================================================================== */

/* Make navigation sticky on scroll */
#gh-navigation {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Add shadow when scrolled */
#gh-navigation.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:is(.dark *) #gh-navigation.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Adjust padding when scrolled for a more compact look */
#gh-navigation.scrolled .gh-navigation-inner {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Smooth background transition */
#gh-navigation {
    background: var(--color-white);
}

:is(.dark *) #gh-navigation {
    background: var(--color-darkmode);
}

/* Ensure navigation stays above other content */
.gh-viewport {
    position: relative;
}

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

/* Optional: Add a subtle backdrop blur effect when scrolled */
#gh-navigation.scrolled {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

:is(.dark *) #gh-navigation.scrolled {
    background: rgba(17, 24, 39, 0.95);
}