/* Navigation — Sidebar layout (experiment). Fixed column down the left edge
   on desktop instead of RDL's horizontal top bar — a deliberate visual split
   from RDL, which only ever ships a top nav. Collapses to the existing
   off-canvas hamburger menu below the mobile breakpoint (unchanged).
   Background noise texture is procedural (no branding art required yet);
   theme-specific overrides still live in CSS/themes.css, layered on top. */
/* Deliberately NOT an opaque background — nav is position:fixed and body's
   theme gradient is background-attachment:fixed too, so a translucent flat
   tint here shows the exact same underlying gradient as the content area,
   just subtly dimmed. That's what makes the sidebar and the page (and the
   footer, which uses the same trick) read as one continuous surface instead
   of two different colors glued together at a seam. Overrides themes.css's
   per-theme `nav { background: ...; box-shadow: ...; }` rules (which loads
   after this file) with !important, since those were tuned for a top bar
   and never matched body's own background anyway. */
nav {
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: none !important;
    border: none !important;
    color: #fff;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 230px;
    height: 100vh;
    z-index: 1000 !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
}

#nav-placeholder {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

/* Site title at the top of the sidebar — desktop only (mobile shows its own
   title inside .nav-mobile-header instead). */
.nav-sidebar-header {
    padding: 20px 20px 16px;
    font-weight: bold;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: Helvetica, Arial, sans-serif;
    flex-shrink: 0;
}

nav ul {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

nav li {
    margin: 0;
    width: 100%;
}

nav li.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 16px;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-left: 3px solid transparent;
}

nav a i { width: 16px; text-align: center; opacity: 0.85; font-size: 0.85rem; flex-shrink: 0; }

nav a:hover {
    color: #fff;
    background-color: rgba(176, 38, 185, 0.15);
    border-left-color: #b026b9;
}

nav a.subnav-discord { color: #8c9bff; }
nav a.subnav-discord:hover { color: #b0bbff; background-color: rgba(140, 155, 255, 0.12); border-left-color: #8c9bff; }

.auth-section {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 0;
}

.login-link {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}

.admin-only {
    display: none !important;
}

/* Push page content over to make room for the fixed sidebar. Scoped to
   nav.css since the sidebar owns this layout footprint; reset back to 0
   below the mobile breakpoint where nav goes back to a normal-flow top bar. */
@media (min-width: 769px) {
    body { padding-left: 230px; }
}

/* =============================================
   USER DROPDOWN
   ============================================= */
.nav-dropdown {
    position: relative !important;
    display: block;
    width: 100%;
}

.nav-username {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    padding: 11px 20px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color 0.2s, color 0.3s;
}

.nav-username:hover {
    color: #fff !important;
    background-color: rgba(176, 38, 185, 0.15);
}

.nav-username:focus, .nav-username:focus-visible {
    outline: 2px solid #b026b9;
    outline-offset: -2px;
}

/* Flyout to the RIGHT of the sidebar, not stacked on top of the other nav
   links — so opening it never covers Discord/Schedule/etc. above it.
   position:fixed (not absolute) is deliberate: nav has overflow-y:auto for
   very short viewports, which would otherwise clip anything positioned
   outside nav's own box.
   top/left are NOT hardcoded here — nav can scroll internally on short
   viewports, so a fixed offset like "bottom:0" doesn't reliably line up
   with the actual trigger position once the list is long enough to scroll.
   JS/current-user.js sets them inline based on the trigger's real
   getBoundingClientRect() every time the dropdown opens (click OR hover). */
.nav-dropdown-content {
    display: none;
    position: fixed !important;
    background-color: #222 !important;
    min-width: 180px !important;
    box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px;
    border: 1px solid #444;
    z-index: 1001 !important;
}

.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown.mobile-open .nav-dropdown-content {
    display: block;
}

.nav-dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: none;
    font-weight: normal;
    border-bottom: 1px solid #222;
    border-left: none;
    transition: background-color 0.2s, color 0.2s;
}

.nav-dropdown-content a:last-child { border-bottom: none; }

.nav-dropdown-content a:hover {
    background-color: #333 !important;
    color: #b026b9 !important;
    border-left: none;
}

/* =============================================
   NOTIFICATION DOTS
   ============================================= */
.nav-notification {
    position: relative !important;
}

.notification-dot {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #ff3b30 !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    display: none;
    z-index: 999 !important;
}

.nav-unread-dot {
    display: none;
    width: 9px;
    height: 9px;
    background-color: #ff3b30;
    border-radius: 50%;
    border: 2px solid #fff;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
}

.nav-dropdown-content .nav-notification {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.nav-dropdown-content .notification-dot {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    margin-left: 8px;
}

/* Theme switcher UI removed from nav — themes will become purchasable store
   items instead of a free picker. ThemeSystem (JS/themes.js) still applies
   the saved/default theme on every page; only the on-nav <select> is gone. */

/* =============================================
   GAME BANNER (empty slot — wire up a live-event
   ticker here later if you build one)
   ============================================= */
.game-banner {
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #881e8e, #b026b9);
    color: #fff;
    padding: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 97;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.game-banner-content {
    display: inline-flex;
    width: 100%;
    line-height: 20px;
    text-align: center;
}

.game-banner-text {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    padding: 0 50px;
}

/* =============================================
   MOBILE NAV — HAMBURGER (top bar, off-canvas menu)
   ============================================= */
.nav-mobile-header { display: none; }

.hamburger {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    cursor: pointer;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 38px;
    height: 34px;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.hamburger:hover, .hamburger.is-open {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 768px) {
    nav {
        position: relative !important;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        max-width: 100vw;
        padding: 0;
    }

    .nav-sidebar-header { display: none; }

    body { padding-left: 0; }

    .nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-site-title {
        color: #fff;
        font-weight: bold;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-family: Helvetica, Arial, sans-serif;
    }

    .nav-mobile-right {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        background: rgba(0, 0, 0, 0.92);
        border-top: 1px solid #444;
        padding: 4px 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1100;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .nav-links.nav-open { display: flex; }

    nav li { width: 100%; }

    nav a {
        padding: 12px 20px;
        font-size: 0.85rem;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-left: none;
        display: flex;
    }

    .auth-section { margin-top: 0; padding: 8px 12px; border-top: 1px solid #444; }

    .nav-username { padding: 12px 20px; }

    .nav-dropdown-content {
        position: static !important;
        margin-left: 0;
        box-shadow: none !important;
        border: none;
        background: rgba(255, 255, 255, 0.06) !important;
        min-width: 100% !important;
        border-radius: 0;
        display: none;
    }

    .nav-dropdown.mobile-open .nav-dropdown-content {
        display: flex;
        flex-direction: column;
    }

    .nav-dropdown:hover .nav-dropdown-content { display: none; }
    .nav-dropdown.mobile-open:hover .nav-dropdown-content { display: flex; }

    .nav-dropdown-content a {
        font-size: 0.8rem;
        padding: 10px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .game-banner { height: 18px; }
    .game-banner-text { font-size: 10px; }
}

@media (max-width: 480px) {
    .nav-site-title { font-size: 0.9rem; }
    nav a { font-size: 0.8rem; padding: 11px 16px; }
}