/**
 * Unified top-navigation styles for CV, Portfolio and Instagram subpages.
 * Layout is theme-agnostic; colour palette switches via `body.site-theme-*`
 * classes set by site-nav.js. Defaults follow the TOPKEK green palette so
 * the bar renders sensibly before JS runs.
 */

.site-nav {
    --site-nav-bg: rgba(0, 0, 0, 0.34);
    --site-nav-fg: #a5d6a7;
    --site-nav-border: rgba(76, 175, 80, 0.45);
    --site-nav-hover-bg: rgba(76, 175, 80, 0.12);
    --site-nav-hover-fg: #dcffdf;
    --site-nav-hover-border: rgba(129, 199, 132, 0.92);
    --site-nav-active-bg: rgba(76, 175, 80, 0.22);
    --site-nav-active-fg: #dcffdf;
    --site-nav-active-border: rgba(129, 199, 132, 0.92);
    --site-nav-surface: transparent;
    --site-nav-divider: transparent;

    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    background: var(--site-nav-surface);
    border-bottom: 1px solid var(--site-nav-divider);
    margin-bottom: clamp(6px, 1vh, 12px);
}

.site-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.site-nav-row--main {
    justify-content: flex-start;
}

.site-nav-row--secondary {
    justify-content: center;
}

.site-nav-link,
.site-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font: inherit;
    font-family: 'Courier New', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    min-height: 32px;
    color: var(--site-nav-fg);
    background: var(--site-nav-bg);
    border: 1px solid var(--site-nav-border);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible,
.site-nav-btn:hover,
.site-nav-btn:focus-visible {
    background: var(--site-nav-hover-bg);
    color: var(--site-nav-hover-fg);
    border-color: var(--site-nav-hover-border);
    outline: none;
}

.site-nav-link[aria-current="page"],
.site-nav-btn--active,
.site-nav-btn[aria-pressed="true"] {
    background: var(--site-nav-active-bg);
    color: var(--site-nav-active-fg);
    border-color: var(--site-nav-active-border);
}

.site-nav-group {
    display: inline-flex;
    gap: 4px;
}

.site-nav-spacer {
    flex: 1 1 auto;
}

/* --- Theme: TOPKEK (green) --- */
body.site-theme-topkek .site-nav {
    --site-nav-bg: rgba(0, 0, 0, 0.34);
    --site-nav-fg: #a5d6a7;
    --site-nav-border: rgba(76, 175, 80, 0.45);
    --site-nav-hover-bg: rgba(76, 175, 80, 0.12);
    --site-nav-hover-fg: #dcffdf;
    --site-nav-hover-border: rgba(129, 199, 132, 0.92);
    --site-nav-active-bg: rgba(76, 175, 80, 0.22);
    --site-nav-active-fg: #dcffdf;
    --site-nav-active-border: rgba(129, 199, 132, 0.92);
}

/* --- Theme: W / B (white text on black surface) --- */
body.site-theme-wb .site-nav {
    --site-nav-bg: rgba(0, 0, 0, 0.62);
    --site-nav-fg: rgba(255, 255, 255, 0.85);
    --site-nav-border: rgba(255, 255, 255, 0.28);
    --site-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --site-nav-hover-fg: #ffffff;
    --site-nav-hover-border: rgba(255, 255, 255, 0.7);
    --site-nav-active-bg: #ffffff;
    --site-nav-active-fg: #000000;
    --site-nav-active-border: #ffffff;
}

/* --- Theme: B / W (black text on white surface, high contrast) --- */
body.site-theme-bw .site-nav {
    --site-nav-bg: #ffffff;
    --site-nav-fg: #000000;
    --site-nav-border: rgba(0, 0, 0, 0.35);
    --site-nav-hover-bg: rgba(0, 0, 0, 0.06);
    --site-nav-hover-fg: #000000;
    --site-nav-hover-border: #000000;
    --site-nav-active-bg: #000000;
    --site-nav-active-fg: #ffffff;
    --site-nav-active-border: #000000;
}

/* Mobile / narrow: one full-width row; columns share width evenly (portfolio DOOMSCROLL is in main toolbar) */
@media (max-width: 860px) {
    .site-nav {
        width: 100%;
        max-width: 100%;
    }

    .site-nav-row--main {
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        gap: clamp(3px, 1.2vw, 8px);
        overflow-x: visible;
        overflow-y: visible;
    }

    .site-nav-row--main > .site-nav-link,
    .site-nav-row--main > .site-nav-group {
        flex: 1 1 0;
        min-width: 0;
    }

    .site-nav-row--main > .site-nav-group {
        display: flex;
        gap: clamp(2px, 1vw, 6px);
    }

    .site-nav-row--main > .site-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: clamp(3px, 1.5vw, 10px);
        padding-right: clamp(3px, 1.5vw, 10px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-nav-row--main .site-nav-group .site-nav-btn {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 540px) {
    .site-nav-row--main .site-nav-link,
    .site-nav-row--main .site-nav-btn {
        font-size: 0.68rem;
        padding: 6px 8px;
        min-height: 30px;
    }

    .site-nav-link,
    .site-nav-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
}