@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Design tokens now live in global.css (single source of truth) */

#navbar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

nav.navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--mm-bg);
    border-bottom: 1px solid var(--mm-border);
    padding: 0 28px;
    min-height: 64px;
    font-family: var(--mm-font);
}

/* Navbar keeps a brighter white in light mode (page bg is --mm-bg #f8fafc) */
body.light-mode nav.navbar {
    background-color: #ffffff;
}

/* --- Brand --- */
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    margin-inline-end: 8px;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 0.2s ease;
}

.nav-brand:hover {
    opacity: 0.85;
}

.logo {
    height: 34px;
    width: 34px;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.nav-brand:hover .logo {
    transform: rotate(-4deg);
}

.brand-name {
    color: var(--mm-text);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --- Primary links --- */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    margin-inline-end: auto;
    padding: 0;
    /* Flex items default to min-width:auto, which refuses to shrink below the
       row's own unwrapped content width (every link has white-space: nowrap).
       Without this, once the navbar is too narrow to fit everything, the
       overflow has nowhere to go but past the search/theme-toggle controls
       and off the edge of the page - and since body has overflow-x:hidden
       (site-wide scrollbar guard), that overflow is invisible, silently
       clipping the theme toggle rather than showing anything. min-width:0
       lets this row actually shrink and scroll internally instead. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links li {
    position: relative;
    padding: 0;
}

.nav-links li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 9px 14px;
    color: var(--mm-text-dim);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links li a:hover {
    color: var(--mm-text);
    background-color: rgba(96, 165, 250, 0.08);
}

.nav-links li a.active {
    color: var(--mm-accent);
    background-color: rgba(96, 165, 250, 0.1);
}

/* Chevron on dropdown triggers, drawn in CSS instead of a text glyph */
.dropbtn::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-inline-start: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.dropdown:hover .dropbtn::after {
    transform: rotate(225deg) translateY(1px);
}

/* --- Dropdowns --- */
.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 210px;
    margin-top: 10px;
    padding: 10px;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    animation: dropdownFade 0.15s ease-out;
}

/* Invisible bridge over the gap above the menu so moving the cursor
   straight down from the trigger doesn't lose :hover mid-transit. */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px;
    inset-inline: 0;
    height: 10px;
    background: transparent;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

.dropdown-section {
    padding: 6px 4px;
}

.dropdown-section + .dropdown-section {
    border-top: 1px solid var(--mm-border);
    margin-top: 4px;
    padding-top: 10px;
}

.dropdown-section h4 {
    margin: 0 0 6px;
    padding: 0 10px;
    color: var(--mm-accent);
    font-family: var(--mm-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dropdown-content a {
    display: block;
    padding: 9px 10px;
    color: var(--mm-text);
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-content a:hover {
    background-color: rgba(96, 165, 250, 0.1);
    color: var(--mm-accent);
}

.nav-links li:last-child .dropdown-content {
    right: auto;
    left: 0;
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Search --- */
.nav-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-inline: 8px;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: 8px;
    /* No overflow:hidden here - neither child paints an opaque background of
       its own (input and button are both transparent), so there's no square
       corner to clip in the first place, and clipping was cutting the search
       icon in half whenever the box had even slightly less room than its
       content wanted. */
    transition: border-color 0.2s ease;
}

.nav-search:focus-within {
    border-color: var(--mm-accent);
}

.nav-search input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    /* Narrower than the old fixed 180px - reclaims the room the full
       nav-links row needs at in-between desktop widths (~1150-1400px), so
       the whole link row can stay inline instead of collapsing into the
       hamburger menu. */
    width: 140px;
    max-width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--mm-text);
    font-family: var(--mm-font);
    font-size: 0.88rem;
    outline: none;
}

.nav-search input[type="search"]::placeholder {
    color: var(--mm-text-dim);
}

/* Strip every native WebKit search-field decoration (results icon, cancel
   button) so the only icon that can ever render is our own SVG button below -
   otherwise a browser-native decoration can appear alongside/instead of it,
   showing as a stray, wrongly-shaped glyph instead of our magnifying glass. */
.nav-search input[type="search"]::-webkit-search-decoration,
.nav-search input[type="search"]::-webkit-search-results-button,
.nav-search input[type="search"]::-webkit-search-results-decoration,
.nav-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.nav-search button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--mm-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.nav-search button:hover {
    color: var(--mm-accent);
}

/* --- Controls: auth + theme toggle --- */
.nav-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-inline-start: 12px;
    /* Must never shrink - this is the login/signup buttons and the theme
       toggle, the last thing that should ever lose space when the navbar is
       tight. .nav-links absorbs that instead (see its min-width:0 comment). */
    flex-shrink: 0;
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-login {
    text-decoration: none;
    color: var(--mm-text-dim);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 8px 10px;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.btn-login:hover {
    color: var(--mm-text);
    background-color: rgba(96, 165, 250, 0.08);
}

.btn-signup {
    text-decoration: none;
    background-color: var(--mm-accent-strong);
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-signup:hover {
    background-color: var(--mm-accent-deep);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}

.nav-username {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mm-text-dim);
    white-space: nowrap;
}

/* --- Account menu (click-to-open, replaces the old always-visible
   username + sign-out row) --- */
.account-menu {
    position: relative;
}

.account-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-family: var(--mm-font);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.account-menu-toggle:hover {
    background-color: rgba(96, 165, 250, 0.08);
    border-color: var(--mm-border);
}

.account-menu-arrow {
    color: var(--mm-text-dim);
    font-size: 1.6rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.account-menu.is-open .account-menu-arrow {
    transform: rotate(180deg);
}

.account-menu-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    margin-top: 8px;
    padding: 8px;
    background-color: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    animation: dropdownFade 0.15s ease-out;
}

.account-menu.is-open .account-menu-content {
    display: grid;
    gap: 2px;
}

.account-menu-content a,
.account-menu-content button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    background: transparent;
    border: none;
    color: var(--mm-text);
    font-family: var(--mm-font);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: right;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.account-menu-content a:hover {
    background-color: rgba(96, 165, 250, 0.1);
    color: var(--mm-accent);
}

.account-menu-signout {
    color: #f87171;
}

.account-menu-signout:hover {
    background-color: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

/* Role/achievement tags shown next to a username - same pill treatment used
   by the badge-tier chips on the profile page, applied here too so admin/user
   status reads as a tag rather than a bare, unstyled emoji. */
.admin-crown,
.user-icon,
.user-badge-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-family: var(--mm-font);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.admin-crown {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.user-icon {
    color: var(--mm-accent);
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.user-badge-tier {
    color: var(--mm-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--mm-border);
}

body.light-mode .user-badge-tier {
    background: rgba(0, 0, 0, 0.04);
}

/* theme toggle */
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: var(--mm-text-dim);
    border: 1px solid var(--mm-border);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

#theme-toggle:hover {
    color: var(--mm-accent);
    border-color: var(--mm-accent);
    background-color: rgba(96, 165, 250, 0.08);
}

/* --- Mobile menu toggle --- */
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    background: transparent;
    border: 1px solid var(--mm-border);
    border-radius: 8px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--mm-text-dim);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 1150px) {
    nav.navbar {
        min-height: 58px;
        padding: 10px 18px;
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: block;
        order: 2;
        margin-inline-start: auto;
    }

    .nav-controls {
        order: 3;
        margin-inline-start: 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .nav-username {
        max-width: 55vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-search {
        order: 1;
        flex-basis: 100%;
        margin: 10px 0 0;
    }

    .nav-search input[type="search"] {
        width: 100%;
    }

    .nav-links {
        display: none;
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 14px 0 4px;
        border-top: 1px solid var(--mm-border);
    }

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

    .nav-links li,
    .nav-links li a {
        width: 100%;
        box-sizing: border-box;
    }

    .dropdown-content {
        position: static;
        display: none;
        margin: 4px 0 4px 14px;
        box-shadow: none;
    }

    .dropdown:focus-within .dropdown-content,
    .dropdown:hover .dropdown-content {
        display: block;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}