/* ==========================================================================
   Navigation — no bottom border; muted links; pill actions
   ========================================================================== */

/* Desktop: logo + muted links; Mobile: full-screen overlay */
#main-nav.navbar {
    display: block;
    height: var(--tf-nav-height);
    min-height: var(--tf-nav-height);
    background-color: var(--tf-bg);
    background-image: none;
    font-family: var(--tf-font);
    padding: 0;
    z-index: 1040;
    overflow: visible;
    border-bottom: none;
    box-shadow: none;
}

/* Centered content column — matches page .container on wide screens */
#main-nav .navbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--tf-nav-height);
    min-height: var(--tf-nav-height);
}

#main-nav .navbar-github-slot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    z-index: 1050;
}

#main-nav .navbar-github-sep {
    color: var(--tf-text-muted);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: 0 0.35rem;
    opacity: 0.85;
    user-select: none;
}

#main-nav .navbar-github {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    color: var(--tf-text-strong) !important;
    font-family: var(--tf-font);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    padding: 0.4rem 0.85rem;
    border-radius: var(--tf-radius-pill);
    border: 1px solid var(--tf-card-border);
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#main-nav .navbar-github .fab {
    font-size: 1.1rem;
    line-height: 1;
}

#main-nav .navbar-github:hover,
#main-nav .navbar-github:focus {
    background: rgba(var(--tf-fg-rgb), 0.08);
    color: var(--tf-text-strong) !important;
    border-color: rgba(var(--tf-fg-rgb), 0.28);
    text-decoration: none !important;
}

[data-theme="light"] #main-nav .navbar-github:hover,
[data-theme="light"] #main-nav .navbar-github:focus {
    background: rgba(var(--tf-fg-rgb), 0.06);
    border-color: rgba(var(--tf-fg-rgb), 0.28);
}

#main-nav .navbar-brand {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    padding: 0;
    margin: 0;
    line-height: 0;
}

#main-nav .navbar-logo {
    display: block;
    height: 2.45rem;
    width: auto;
    max-height: calc(var(--tf-nav-height) - 0.6rem);
}

#main-nav .navbar-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--tf-radius-pill);
    background: transparent;
    color: var(--tf-text-strong);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#main-nav .navbar-theme:hover,
#main-nav .navbar-theme:focus {
    background: rgba(var(--tf-fg-rgb), 0.08);
    border-color: rgba(var(--tf-fg-rgb), 0.22);
    color: var(--tf-text-strong);
    outline: none;
}

[data-theme="light"] #main-nav .navbar-theme:hover,
[data-theme="light"] #main-nav .navbar-theme:focus {
    background: rgba(var(--tf-fg-rgb), 0.06);
    border-color: rgba(var(--tf-fg-rgb), 0.22);
}

#main-nav .navbar-theme-moon {
    display: none;
}

[data-theme="light"] #main-nav .navbar-theme-sun {
    display: none;
}

[data-theme="light"] #main-nav .navbar-theme-moon {
    display: inline-block;
}

#main-nav .navbar-toggler {
    position: relative;
    z-index: 1050;
    padding: 0.5rem;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
}

#main-nav .navbar-toggler:hover,
#main-nav .navbar-toggler:focus,
#main-nav .navbar-toggler:active {
    outline: none;
    box-shadow: none;
    border: none;
}

#main-nav .navbar-toggler-bars {
    display: block;
    width: 1.75rem;
    height: 1.25rem;
    position: relative;
}

#main-nav .navbar-toggler-bars .bar {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--tf-text-strong);
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

#main-nav .navbar-toggler-bars .bar:nth-child(1) {
    top: 0;
}

#main-nav .navbar-toggler-bars .bar:nth-child(2) {
    top: calc(50% - 1px);
}

#main-nav .navbar-toggler-bars .bar:nth-child(3) {
    top: calc(100% - 2px);
}

#main-nav .navbar-toggler.is-open .navbar-toggler-bars .bar:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

#main-nav .navbar-toggler.is-open .navbar-toggler-bars .bar:nth-child(2) {
    opacity: 0;
}

#main-nav .navbar-toggler.is-open .navbar-toggler-bars .bar:nth-child(3) {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
}

/* Desktop (lg+): stacked logo + left-aligned menu chrome */
@media (min-width: 992px) {
    :root {
        --tf-nav-height: 6.75rem;
    }

    #main-nav.navbar {
        height: var(--tf-nav-height);
        min-height: var(--tf-nav-height);
    }

    #main-nav .navbar-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.35rem;
        height: var(--tf-nav-height);
        min-height: var(--tf-nav-height);
        padding-top: 0.4rem;
        padding-bottom: 0.45rem;
    }

    #main-nav .navbar-brand {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
    }

    #main-nav .navbar-toggler {
        display: none;
    }

    #main-nav .navbar-github-slot {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin-left: 0;
    }

    #main-nav .site-menu.navbar-collapse {
        display: flex !important;
        align-items: center;
        flex-basis: auto;
        position: static;
        inset: auto;
        height: auto !important;
        padding: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        margin: 0;
    }

    #main-nav .site-menu-glyph,
    #main-nav .site-menu-footer {
        display: none;
    }

    #main-nav .site-menu-panel {
        display: contents;
    }

    #main-nav .site-menu .navbar-nav {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        max-width: none;
        flex-wrap: nowrap;
        margin-left: 0;
    }

    #main-nav .site-menu .nav-item {
        display: flex;
        align-items: center;
        margin: 0;
    }

    #main-nav .site-menu .nav-item + .nav-item {
        margin-left: 1.35rem;
    }

    #main-nav .site-menu .nav-link {
        font-family: var(--tf-font);
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.2;
        color: var(--tf-text-muted);
        padding: 0.25rem 0 !important;
        display: inline-block;
        border: none;
        border-radius: 0;
        background: transparent;
        transition: color 0.2s ease;
    }

    #main-nav .site-menu .nav-link:hover,
    #main-nav .site-menu .nav-link:focus,
    #main-nav .site-menu .nav-link:active {
        color: var(--tf-text-strong);
        background: transparent;
        text-decoration: none;
    }
}

/* Mobile / tablet: logo left, actions + menu right (Cursor-style) */
@media (max-width: 991.98px) {
    /* Beat Bootstrap .navbar-expand-lg > .container { padding: 0 } */
    #main-nav .navbar-inner {
        justify-content: flex-start;
        align-items: center;
        column-gap: 0.75rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Logo left — same gutter as page content */
    #main-nav .navbar-brand {
        order: 1;
        position: static;
        left: auto;
        top: auto;
        transform: none;
        flex: 0 1 auto;
        min-width: 0;
        max-width: min(11rem, calc(100% - 8.5rem));
        justify-content: flex-start;
        z-index: 1050;
        margin: 0;
    }

    #main-nav .navbar-logo {
        height: 2rem;
        max-width: 100%;
        width: auto;
        object-fit: contain;
        object-position: left center;
    }

    /* Right cluster: theme | GitHub | menu */
    #main-nav .navbar-github-slot {
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
        gap: 0;
    }

    #main-nav .navbar-toggler {
        order: 3;
        flex-shrink: 0;
        margin: 0;
        padding: 0.4rem 0;
    }

    #main-nav .site-menu.navbar-collapse {
        order: 4;
    }

    #main-nav .navbar-github-sep {
        margin: 0 0.2rem;
    }

    #main-nav .navbar-github {
        padding: 0.35rem 0.65rem;
        font-size: 0.88rem;
        gap: 0.35rem;
    }

    /* Narrow phones: icon-only GitHub, tight with theme toggle */
    @media (max-width: 479.98px) {
        #main-nav .navbar-github-sep {
            display: none;
        }

        #main-nav .navbar-theme {
            width: 2.1rem;
            height: 2.1rem;
        }

        #main-nav .navbar-github-label {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        #main-nav .navbar-github {
            width: 2.1rem;
            height: 2.1rem;
            padding: 0;
            margin-left: -0.15rem;
            justify-content: center;
            gap: 0;
            border-color: transparent;
        }

        #main-nav .navbar-github:hover,
        #main-nav .navbar-github:focus {
            border-color: rgba(var(--tf-fg-rgb), 0.22);
        }
    }

    @media (min-width: 576px) {
        #main-nav .navbar-inner {
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    /* Keep logo, X, and green bottom border above the overlay */
    body.menu-open #main-nav.navbar {
        z-index: 1060;
        border-bottom: none;
        background-color: var(--tf-bg);
    }

    /* Menu open: clear the bar to logo + close (X); CTAs live in the overlay footer */
    body.menu-open #main-nav .navbar-github-slot {
        display: none;
    }

    /* Slot was holding margin-left:auto; keep the X on the right without it */
    body.menu-open #main-nav .navbar-toggler {
        margin-left: auto;
    }

    #main-nav .site-menu.navbar-collapse {
        --tf-menu-rail: 22rem;
        position: fixed;
        /* Start below the nav so the header border stays visible */
        top: var(--tf-nav-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1.5rem 1.25rem 0;
        /* Same base as hero (.banner) so open/closed feel identical */
        background-color: var(--tf-bg);
        background-image: var(--tf-bg-gradient);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        overflow: hidden;
    }

    /* Same CSS dots as the hero */
    #main-nav .site-menu.navbar-collapse::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: var(--tf-hero-atmosphere);
        background-size: var(--tf-hero-atmosphere-size);
        background-repeat: repeat;
        background-position: 0 0;
    }

    #main-nav .site-menu.navbar-collapse.show,
    #main-nav .site-menu.navbar-collapse.collapsing {
        display: flex !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        height: auto !important;
    }

    #main-nav .site-menu-panel {
        position: relative;
        z-index: 1;
        display: block;
        flex: 1 1 auto;
        width: 100%;
        max-width: var(--tf-menu-rail);
        margin: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        align-self: stretch;
    }

    #main-nav .site-menu .navbar-nav {
        /* Integer px so the rule lands on a whole pixel (avoids fat blur) */
        --tf-menu-glyph-col: 28px;
        --tf-menu-rule-gap: 18px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 1rem;
        gap: 0.15rem;
    }

    /* One continuous 1px vertical accent line */
    #main-nav .site-menu .navbar-nav::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 1rem;
        left: calc(var(--tf-menu-glyph-col) + var(--tf-menu-rule-gap));
        width: 1px;
        background: var(--tf-card-border);
        pointer-events: none;
        transform: scaleX(0.5);
        transform-origin: left center;
    }

    /* One row: glyph | text — finger-friendly */
    #main-nav .site-menu .nav-item {
        display: flex;
        align-items: center;
        margin: 0;
        min-height: 3rem;
    }

    #main-nav .site-menu-glyph {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--tf-menu-glyph-col);
        width: var(--tf-menu-glyph-col);
        height: 1.4rem;
        margin-right: calc(var(--tf-menu-rule-gap) * 2);
        color: var(--tf-text-muted);
        opacity: 0.95;
        border: none;
    }

    #main-nav .site-menu-glyph svg {
        display: block;
        width: 1.4rem;
        height: 1.4rem;
    }

    #main-nav .site-menu .nav-link {
        font-family: var(--tf-font);
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1.3;
        color: var(--tf-text-muted);
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid transparent;
        display: inline-block;
        transition: color 0.2s ease;
    }

    #main-nav .site-menu .nav-link:hover,
    #main-nav .site-menu .nav-link:focus,
    #main-nav .site-menu .nav-link:active {
        color: var(--tf-text-strong);
        text-decoration: none;
    }

    #main-nav .site-menu-footer {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        width: 100%;
        max-width: var(--tf-menu-rail);
        margin-top: auto;
        padding: 1rem 0 calc(1.1rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tf-card-border);
        align-self: stretch;
    }

    #main-nav .site-menu-action {
        display: inline-flex;
        width: 100%;
        min-height: 2.85rem;
        margin: 0;
        padding: 0.7rem 1rem;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        box-sizing: border-box;
        background: transparent;
        color: var(--tf-text-strong);
        font-family: var(--tf-font);
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.2;
        border-radius: var(--tf-radius-pill);
        border: 1px solid var(--tf-card-border);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    #main-nav .site-menu-action:hover,
    #main-nav .site-menu-action:focus {
        background: rgba(var(--tf-fg-rgb), 0.08);
        color: var(--tf-text-strong);
        border-color: rgba(var(--tf-fg-rgb), 0.28);
        text-decoration: none;
    }

    [data-theme="light"] #main-nav .site-menu-action:hover,
    [data-theme="light"] #main-nav .site-menu-action:focus {
        background: rgba(var(--tf-fg-rgb), 0.06);
    }

    #main-nav .site-menu-action-label {
        white-space: nowrap;
    }

    #main-nav .site-menu-action .fab {
        font-size: 1.2rem;
        line-height: 1;
    }
}

body.menu-open {
    overflow: hidden;
}

/* Legacy / secondary nav helpers */
.nav-menu {
    text-align: center;
}

.nav-menu .fas {
    color: var(--tf-accent);
}

.container-narrow {
    margin: 0 auto;
    max-width: 970px;
}

.container-narrow > footer {
    margin-top: 20px;
    text-align: center;
}

.container-narrow > footer p {
    padding: 5px;
    display: inline-block;
    border-radius: 6px;
}

a.header-anchor {
    color: inherit;
}