/* Modern Global Styles */
:root {
    --bg-dark: #0f172a;
    --text-light: #f8fafc;
    --accent-blue: #3b82f6;
}

body {
    margin: 0;
    padding-top: 78px;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #020617;
    color: var(--text-light);
}

/* Fixed Modern Header */
.global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 78px;
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Lighter Header Variant for Auth Pages */
.global-header.header-light {
    background-color: rgba(30, 41, 59, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.brand-logo img {
    height: 90px; /* Increased slightly to maximize available space */
    width: auto;
    display: block;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 2.25rem;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 2.25rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-menu a:hover {
    color: var(--text-light);
}

/* Discord + Login are visually one CTA cluster — their own tight gap,
   independent of nav-container's much larger gap between menu items. */
.nav-cta-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-login-nav {
    background: #3b82f6;
    color: white;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s;
}

.btn-login-nav:hover {
    background: #2563eb;
}

/* Discord brand blurple, kept as its own color so it reads as a distinct
   CTA from Login rather than a second "primary" action. */
.btn-discord-nav {
    background: #5865f2;
    color: white;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.2s;
}

.btn-discord-nav:hover {
    background: #4752c4;
}

/* Mobile nav toggle (hamburger) — hidden on desktop */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text-light);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Span spacing is gap (7px) + span height (3px) = 10px center-to-center —
   translateY must match that sum or the X won't align on toggle. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* SkyCrew dropdown submenu */
.nav-dropdown {
    position: relative;
}

/* Invisible bridge across the gap between the trigger and the floating
   menu below it (top: calc(100% + 1rem)) — without this, the mouse
   crosses a strip that's outside both boxes on the way down, :hover
   drops, and the menu closes before you can reach it. */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1rem;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    font: inherit;
    font-size: 1rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
}

.nav-dropdown-trigger:hover {
    color: var(--text-light);
}

.nav-dropdown-caret {
    transition: transform 0.2s ease;
}

.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    transform: translate(-50%, -8px);
    min-width: 200px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.nav-dropdown-menu li {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown-menu a:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--text-light);
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    /* Toggle + Discord + Login all sit in the always-visible header row on
       mobile (only .nav-menu collapses) — tighten the gap and button
       padding so three items plus the logo don't wrap/overflow on a
       narrow phone screen. */
    .nav-container {
        gap: 0.6rem;
    }

    .nav-cta-group {
        gap: 0.4rem;
    }

    .btn-login-nav,
    .btn-discord-nav {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
    }

    /* The hover bridge only matters for the desktop floating dropdown. On
       mobile, .nav-dropdown's own box grows to include the expanded static
       submenu, so top:100% would place this 1rem strip over the START of
       the next li ("Partners") instead of a real gap — silently blocking
       taps on it. */
    .nav-dropdown::after {
        display: none;
    }

    /* The menu used to expand INSIDE the fixed header via flex-wrap — once
       its content grew taller than the header it overflowed the header's
       own painted background, floating unstyled text over whatever page
       content sat behind it. It's now its own fixed full-width panel
       anchored right below the header, with its own solid background,
       completely decoupled from the header's box. */
    .nav-menu {
        position: fixed;
        top: 78px;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        background: #0f172a;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
        transition: max-height 0.3s ease;
        z-index: 999;
    }

    .nav-container.open .nav-menu {
        max-height: calc(100vh - 78px);
        overflow-y: auto;
    }

    /* Direct children only — ".nav-menu li"/".nav-menu a" would also match
       the nested .nav-dropdown-menu's own li/a elements, stacking this
       padding on top of their own (below) and clipping their text. */
    .nav-menu > li {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0 1.75rem;
    }

    .nav-menu > li > a,
    .nav-dropdown-trigger {
        padding: 1.35rem 0;
        font-size: 1.1rem;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        border: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 0;
        padding: 0;
        transition: max-height 0.25s ease;
    }

    .nav-dropdown-menu a {
        padding: 0.85rem 1rem;
        font-size: 1.02rem;
    }

    /* The desktop rule below is 3 selectors specific (0,0,3,0) vs. the
       plain ".nav-dropdown-menu" override above (0,0,1,0) — it wins on
       specificity regardless of media-query source order, and its
       translateX(-50%) was shoving the whole mobile list off-screen. */
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
        transform: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 340px;
        padding: 0.35rem 0 0.75rem 1.25rem;
    }

    .nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
        opacity: 1;
        pointer-events: auto;
    }
}