/* ABOUTME: Shared site-navigation styles for the We Drew This gallery — one copy for every page.
   ABOUTME: The hover/active accent is themeable via --nav-accent (defaults to the gallery purple). */

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2rem;
    background: #0d0d15;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.nav-logo {
    font-size: 1rem;
    font-weight: 700;
    color: #e0e0e0;
    text-decoration: none;
    white-space: nowrap;
}
.nav-logo:hover { color: var(--nav-accent, #a78bfa); }

.nav-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.nav-link {
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.nav-link:hover { color: var(--nav-accent, #a78bfa); }
.nav-link.active { color: var(--nav-accent, #a78bfa); font-weight: 600; }

.nav-support {
    color: #ff5e5b;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.nav-support:hover { opacity: 0.8; }

/* Mobile: each nav item becomes a 44px tap box; short labels grow to 44px wide via min-width.
   pointer:coarse = the primary input is a fingertip (real phones + touch laptops). Mouse
   users keep the compact nav. */
@media (pointer: coarse) {
    .nav-link,
    .nav-support,
    .nav-logo {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}