/* The one top bar, shared by every page on the site.
   Lifted verbatim out of styles.css so the home page's navbar is the navbar everywhere:
   same markup, same rules, same hamburger, one link set. */

/* The bar carries its own tokens, because Story Time, HoellStream, HoellTracker and the eleven
   episode readers never load styles.css. Values are copied from its :root verbatim, so on the
   pages that do load it nothing changes. */
:root {
    --nx-blue: #4a9eff;
    --nx-cyan: #06b6d4;
    --nx-gradient-1: #4a9eff;
    --nx-gradient-2: #8b5cf6;
    --nx-text-primary: #f0f4ff;
    --nx-text-secondary: #a8b2d1;
    --nx-border: rgba(74, 158, 255, 0.15);
    --nx-border-hover: rgba(74, 158, 255, 0.3);
    --nx-glass: rgba(255, 255, 255, 0.02);
    --nx-glow-blue: 0 6px 20px rgba(0, 0, 0, 0.45);
    --radius-md: 8px;
    --radius-round: 50%;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --transition-normal: 0.3s ease;
    --nav-h: 97px;              /* 22 + 52 + 22 + 1px border, the same at every width */              /* the bar's own height, for anything that sticks under it */
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 22px 0;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nx-border);
    opacity: 1;
    animation: navbar-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    transition: background-color 0.3s ease;
}

.navbar.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Subpage navbar - no animation, always visible */
.subpage .navbar {
    transform: translateY(0);
    opacity: 1;
    transition: none;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-logo-img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-round);
    object-fit: cover;
}

.nav-logo-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    gap: var(--spacing-xl);
}

.nav-link {
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--nx-text-secondary);
    position: relative;
    padding: var(--spacing-xs) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--nx-gradient-1), var(--nx-gradient-2));
    transition: var(--transition-normal);
}

.nav-link:hover {
    color: var(--nx-text-primary);
}

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

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--nx-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--nx-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
}

.nav-toggle:hover {
    border-color: var(--nx-border-hover);
    box-shadow: var(--nx-glow-blue);
}

.hamburger,
.hamburger::before,
.hamburger::after {
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--nx-gradient-1), var(--nx-gradient-2));
    border-radius: 2px;
    transition: var(--transition-normal);
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before {
    top: -6px;
}

.hamburger::after {
    top: 6px;
}

.nav-toggle.active {
    border-color: var(--nx-blue);
    box-shadow: var(--nx-glow-blue);
}

.nav-toggle.active .hamburger {
    background: transparent;
}

.nav-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
    background: var(--nx-cyan);
}

.nav-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
    background: var(--nx-cyan);
}

/* seven links at 20px crowd the wordmark below about 1200px, so the bar collapses here */
@media (max-width: 1200px) {
    .nav-links {
        position: fixed;
        top: var(--nav-h, 92px);
        left: 0;
        right: 0;
        background: rgba(10, 10, 15, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-xl);
        gap: var(--spacing-lg);
        border-bottom: 1px solid var(--nx-border);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition-normal);
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-links .nav-link {
        width: 100%;
        max-width: 280px;
        padding: var(--spacing-md) var(--spacing-lg);
        background: transparent;
        border: none;
        border-radius: var(--radius-md);
        text-align: center;
        font-family: 'Orbitron', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        transition: var(--transition-normal);
    }

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

    .nav-links .nav-link:hover,
    .nav-links .nav-link.active {
        color: var(--nx-blue);
    }

    .nav-toggle {
        display: flex;
    }
}

/* ============================================
   LEADERBOARD PAGE STYLES
   ============================================ */

/* Active nav link */
.nav-link.active {
    color: var(--nx-blue);
}

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

@keyframes navbar-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
/* subpages take the bar with no entrance at all */
.subpage .navbar { animation: none; }

/* styles.css used to supply these through its global resets; the bar now brings its own. */
.navbar ul.nav-links { list-style: none; margin: 0; padding: 0; }
.navbar .nav-links li { margin: 0; padding: 0; }
.navbar .nav-logo, .navbar .nav-link { text-decoration: none; }
.navbar .nav-link:hover, .navbar .nav-logo:hover { text-decoration: none; }
.navbar .nav-toggle { -webkit-appearance: none; appearance: none; }
.navbar img { display: block; }

@media (prefers-reduced-motion: reduce) {
    .navbar { animation: none; transition: none; }
}


/* ============================================
   THE WORDMARK
   ============================================ */
/* The Nexus gradient belongs to the LORDHOELL wordmark itself: the bar at the top of every page,
   the footer signature, and the name in the home page's header band. It is deliberately NOT on
   headings generally, which is what made the old site read as generated.
   A solid colour is declared first so the mark still paints if background-clip: text is not
   supported. Both stops clear AA against the dark ground at these sizes: #4a9eff is 7.0:1 and
   #8b5cf6 is 4.7:1 on #0a0a0f, and every use here is large or bold text. */
.navbar .nav-logo-text,
.footer .footer-logo,
.footer-logo,
.page-hero .hero-title,
#hero-title {
    color: var(--nx-gradient-1, #4a9eff);
    background: linear-gradient(135deg, var(--nx-gradient-1, #4a9eff), var(--nx-gradient-2, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Each page's name gets the same treatment as the wordmark: HOELLSTREAM, HOELLTRACKER, HOELL'S
   and Guessing Game all sit in the same slot in the header band.
   The home page's mark is large enough to carry the third stop it always had. */
#hero-title {
    background: linear-gradient(135deg, var(--nx-gradient-1, #4a9eff), var(--nx-gradient-2, #8b5cf6), var(--nx-gradient-3, #06b6d4));
    -webkit-background-clip: text;
    background-clip: text;
}

/* The bar is sized for a desktop header band. On a phone that is most of the screen, so the
   mark, the wordmark and the padding all come down and --nav-h comes with them. */
@media (max-width: 768px) {
    :root { --nav-h: 69px; }

    .navbar { padding: 14px 0; }

    .nav-logo-img {
        width: 40px;
        height: 40px;
    }

    .nav-logo-text { font-size: 1.3rem; }
}