/* Navigation styles */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.nav-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    color: #ff0000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


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

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #ff0000;
}

/* Never let the two halves of the bar touch. */
.nav {
    gap: 2rem;
}

/* Account menu: username, with the dashboard and portals behind it. */
.nav-account-details {
    position: relative;
}

.nav-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-account-toggle::-webkit-details-marker {
    display: none;
}

.nav-account-toggle::marker {
    content: '';
}

.nav-account-toggle:hover,
.nav-account-details[open] .nav-account-toggle {
    color: #ff0000;
}

.nav-account-caret {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.nav-account-details[open] .nav-account-caret {
    transform: rotate(180deg);
}

.nav-badge {
    display: inline-block;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ff0000;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 9px;
}

.nav-account-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    background: #0b0b0b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    z-index: 1002;
}

.nav-account-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.nav-account-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Hide mobile-only items on desktop */
.mobile-only {
    display: none;
}

/* Mobile menu styles. A <button> holding an inline SVG: it used to be a
   <div> around a Font Awesome icon, which a keyboard could not reach and
   which drew nothing at all when the icon font's CDN was blocked. */
.mobile-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu svg {
    display: block;
    width: 24px;
    height: 24px;
}

.mobile-menu:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 900px, not 768px: the seven links end at 681px and the bar is 1rem in from
   each side, which left 40px for a signed-in username on an iPad held
   upright (810-834px wide). The account menu ran off the right-hand edge. */
@media (max-width: 900px) {
    .nav-left {
        gap: 1rem;
    }
    
    .nav-left .nav-links {
        display: none;  /* Hide left nav links on mobile */
    }
    
    .nav-right .nav-links {
        display: none;  /* Hide right nav links by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.9);
        padding: 1rem;
        text-align: center;
        z-index: 1001;
        /* The menu hangs off a fixed header, so it cannot scroll with the
           page: without a height of its own, whatever fell below the screen
           (the account links on a short phone, Login with the phone held
           sideways) could not be reached at all. 89px is the header. dvh
           where the browser has it, so the browser's own bars are allowed
           for. */
        max-height: calc(100vh - 89px);
        max-height: calc(100dvh - 89px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-right .nav-links.active {
        display: flex;  /* Show the menu when active */
    }

    .mobile-menu {
        display: flex;  /* Show hamburger icon on mobile */
    }

    /* Show mobile-only items on mobile */
    .mobile-only {
        display: block;
    }

    /* Inside the hamburger menu the account menu opens in place. */
    .nav-account-menu {
        position: static;
        min-width: 0;
        margin-top: 0.5rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .nav-account-menu a {
        justify-content: center;
    }
}