/* ==========================================================================
   SITE NAVIGATION - slim terminal bar below the header wave.
   Deliberately muted: content/book stays the visual focus.
   ========================================================================== */

.site-nav {
    background: var(--bg-light, #f7f6f3);
    border-bottom: 1px solid var(--border-color, #e0ded8);
}

.site-nav-links {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    font-family: var(--font-code, 'Source Code Pro', monospace);
    font-size: 0.78rem;
}

.site-nav-prompt {
    color: var(--brand-orange, #a26538);
    font-weight: 700;
    margin-right: 4px;
    user-select: none;
}

.site-nav-links a {
    color: var(--text-dim, #777);
    text-decoration: none;
    padding: 3px 4px;
    border-radius: 3px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.site-nav-links a:hover { color: var(--dark-teal, #254a4b); }

.site-nav-links a.active {
    color: var(--brand-orange, #a26538);
    font-weight: 700;
}

.site-nav-links a.active::before { content: "["; }
.site-nav-links a.active::after  { content: "]"; }

.site-nav-toggle { display: none; }

/* ==========================================================================
   SECOND MENU LEVEL - dropdown groups (/docs, /diagnostics, /network).
   Click-to-open (predictable on touch + keyboard); closes on outside
   click / Escape via the inline script in nav.php.
   ========================================================================== */

.nav-group { position: relative; }

.nav-group-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-code, 'Source Code Pro', monospace);
    font-size: 0.78rem;
    color: var(--text-dim, #777);
    padding: 3px 4px;
    border-radius: 3px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-group-btn:hover { color: var(--dark-teal, #254a4b); }

.nav-group-btn.active,
.nav-group.open .nav-group-btn {
    color: var(--brand-orange, #a26538);
    font-weight: 700;
}

/* bracket convention only when a child page is the current one */
.nav-group-btn.active::before { content: "["; }
.nav-group-btn.active::after  { content: "]"; }

.nav-caret {
    font-size: 0.6rem;
    opacity: 0.55;
    transition: transform 0.2s ease;
}

.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-drop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 300;
    min-width: 320px;
    background: var(--bg-light, #fdfdfc);
    border: 1px solid var(--border-color, #e0ded8);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 8px;
    text-align: left;
}

.nav-group.open .nav-drop { display: block; }

.nav-drop-note {
    margin: 2px 6px 8px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim, #777);
}

.site-nav-links a.nav-drop-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 3px;
    white-space: normal;
}

.site-nav-links a.nav-drop-link:hover {
    background: rgba(var(--brand-blue-rgb, 53, 134, 145), 0.07);
}

.nav-tree {
    flex-shrink: 0;
    color: var(--text-dim, #777);
    opacity: 0.5;
    user-select: none;
}

.nav-drop-label {
    font-weight: 700;
    color: var(--dark-teal, #254a4b);
}

.site-nav-links a.nav-drop-link:hover .nav-drop-label { color: var(--brand-blue, #358691); }

.nav-drop-desc {
    font-family: var(--font-header, 'Source Sans 3', sans-serif);
    font-size: 0.68rem;
    color: var(--text-dim, #777);
}

/* external dropdown links (e.g. Love Protocol): small off-site cue */
.nav-ext {
    margin-left: 4px;
    font-size: 0.85em;
    opacity: 0.6;
}

.nav-ext-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* active child: brackets around the label, not the whole row */
.site-nav-links a.nav-drop-link.active::before,
.site-nav-links a.nav-drop-link.active::after { content: none; }

.site-nav-links a.nav-drop-link.active .nav-drop-label { color: var(--brand-orange, #a26538); }
.site-nav-links a.nav-drop-link.active .nav-drop-label::before { content: "["; }
.site-nav-links a.nav-drop-link.active .nav-drop-label::after  { content: "]"; }

@media (max-width: 700px) {
    .site-nav-toggle {
        display: block;
        width: 100%;
        background: none;
        border: none;
        padding: 10px 20px;
        text-align: left;
        font-family: var(--font-code, 'Source Code Pro', monospace);
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--dark-teal, #254a4b);
        cursor: pointer;
    }

    .site-nav-links { display: none; padding-top: 0; }

    .site-nav.open .site-nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding-bottom: 12px;
    }

    .site-nav.open .site-nav-prompt { display: none; }

    /* Dropdown groups flatten into static headings with indented children. */
    .nav-group { width: 100%; }

    .nav-group-btn {
        pointer-events: none;
        padding: 4px 0;
    }

    .nav-caret { display: none; }

    .nav-drop {
        display: block;
        position: static;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0 0 6px 14px;
    }

    .nav-drop-note { display: none; }

    .site-nav-links a.nav-drop-link { padding: 4px 0; }
    .site-nav-links a.nav-drop-link:hover { background: none; }
}