/* ==========================================================================
   Shared site navigation — IMB Innovation
   --------------------------------------------------------------------------
   One nav for every real page. Self-contained on purpose: pages load different
   stylesheets (main-styles / tool-styles / inline only), so this file defines
   its own values rather than depending on either one's custom properties.

   Scoped under .site-nav so the old .main-nav / .tool-nav rules cannot apply —
   those elements no longer carry those classes.

   position: sticky, not fixed. Sticky occupies normal flow, so no page needs a
   content offset to clear the bar: blog/post size themselves to
   calc(100vh - 64px) and add up to exactly 100vh, and the tool pages, which
   never had an offset, keep working untouched.
   ========================================================================== */

.site-nav {
    position: sticky;
    top: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    z-index: 1000;
}

.site-nav .nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.site-nav .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.site-nav .nav-logo:hover { opacity: 0.8; }

.site-nav .nav-logo .logo-img {
    height: 40px;
    width: auto;
    display: block;
}

/* These pages load main-styles.css, tool-styles.css, or neither, and BOTH of those define bare
   .nav-links / .nav-link rules that still match inside .site-nav. Scoping this file was not enough
   on its own: tool-styles' `.nav-links { flex: 1; justify-content: center }` and
   `.nav-link { padding: .5rem .875rem; border-radius: 6px }` leaked through, so the "identical"
   nav rendered centred and pill-padded on its ten pages and flush-right elsewhere. Every property
   either stylesheet sets is therefore restated here, even where the value looks redundant. */
.site-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 1.75rem;
    padding: 0;
    margin: 0;
}

.site-nav .nav-link {
    position: relative;
    color: #374151;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
    padding: 0;
    border-radius: 0;
    background: none;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: #1B365D; background: none; }

.site-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1B365D;
    transition: width 0.25s ease;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { width: 100%; }

.site-nav .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.site-nav .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #111827;
    transition: all 0.15s ease;
}

.site-nav .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.site-nav .nav-toggle.active span:nth-child(2) { opacity: 0; }
.site-nav .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* Five items is a wide bar — tighten before collapsing to the toggle. */
@media (max-width: 1024px) {
    .site-nav .nav-links { gap: 1.25rem; }
    .site-nav .nav-link { font-size: 0.875rem; }
}

@media (max-width: 860px) {
    .site-nav .nav-toggle { display: flex; }

    .site-nav .nav-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-bottom: 1px solid #E5E7EB;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.25s ease;
    }

    .site-nav .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav .nav-link {
        padding: 0.75rem 2rem;
        border-bottom: 1px solid #F3F4F6;
        font-size: 0.9375rem;
    }

    .site-nav .nav-link::after { display: none; }
}

/* biblepics.html offset the OLD fixed nav with margin-top: 64px. The sticky bar
   occupies flow, so that margin would now render as a 64px gap. */
.site-nav ~ .biblepics-wrap .page-content,
body:has(.site-nav) .page-content { margin-top: 0; }