/* ============================================================================
   MineAdz — Navigation
   ----------------------------------------------------------------------------
   Requires lib/theme.css and lib/ui.css to be linked first.

   Desktop keeps the sliding pill. Below 900px the centre pill is replaced by a
   hamburger and a slide-in drawer, because four pill links plus a balance chip
   plus an avatar cannot fit a 360px viewport — they used to overlap the logo.
   ========================================================================== */

/* -------------------------------------------------------------- top bar --- */

.top-nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-height);
    padding-inline: var(--gutter);
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background: var(--glass-strong);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.4);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-nav);
    transition: box-shadow var(--t-base) var(--ease),
                background var(--t-base) var(--ease);
}

/* Set by navbar.js once the page is scrolled, so the bar only earns its shadow
   when there is content behind it. */
.top-nav.is-scrolled {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    background: rgba(12, 13, 17, 0.94);
}

/* Mobile drops the blur (see theme.css) — without a solid background the bar
   would be transparent. */
@media (max-width: 900px) {
    .top-nav {
        background: rgba(14, 15, 19, 0.97);
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--text);
    white-space: nowrap;
}

.logo span {
    color: var(--primary);
}

.logo svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------- centre links --- */

.nav-center {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    position: relative;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    box-shadow: var(--sh-md), var(--sh-inset);
    overflow: hidden;
}

.nav-slider-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 0;
    opacity: 0;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-pill);
    box-shadow: 0 0 16px var(--primary-glow);
    transition: transform var(--t-slow) var(--ease-out),
                width var(--t-slow) var(--ease-out),
                opacity var(--t-base) var(--ease);
    pointer-events: none;
    z-index: 1;
}

.nav-center a {
    position: relative;
    z-index: 2;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug);
    color: var(--text-dim);
    white-space: nowrap;
    transition: color var(--t-base) var(--ease-out);
}

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

.nav-center a.active {
    color: var(--text);
    font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------- right group --- */

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.balance-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    min-height: 40px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
}

.balance-wrapper.hidden {
    display: none !important;
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--sp-2) var(--sp-4);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.profile-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--border-bright);
}

.profile-btn.avatar-mode {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary);
}

.profile-btn.avatar-mode img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------- profile menu ----- */

.profile-wrapper {
    position: relative;
}

.profile-wrapper.hidden {
    display: none !important;
}

.profile-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp-3));
    width: 220px;
    padding: var(--sp-2);
    background: var(--glass-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    z-index: calc(var(--z-nav) + 10);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease-out),
                visibility var(--t-fast);
}

.profile-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.profile-menu p {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-xs);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-dim);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.profile-menu p:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.profile-menu .menu-sep {
    height: 1px;
    margin: var(--sp-2) var(--sp-1);
    background: var(--border);
}

.profile-menu .menu-head {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    cursor: default;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-2);
}

.profile-menu .menu-head:hover {
    background: none;
}

.profile-menu .menu-head strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu .menu-head small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    text-transform: capitalize;
}

/* ------------------------------------------------------ notification dot -- */

.nav-notif-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: var(--danger);
    border: 2px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
    animation: notif-pulse 2s var(--ease) infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes notif-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.8; }
}

/* ------------------------------------------------------------ hamburger --- */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle-bars {
    position: relative;
    width: 18px;
    height: 12px;
}

.nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-base) var(--ease-out),
                opacity var(--t-fast) var(--ease),
                top var(--t-base) var(--ease-out);
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}

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

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

/* On mobile the profile button is hidden, so the hamburger carries the
   pending-action signal instead. */
.nav-toggle.has-notif::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border: 2px solid #0e0f13;
    border-radius: 50%;
    animation: notif-pulse 2s var(--ease) infinite;
}

.nav-toggle {
    position: relative;
}

/* --------------------------------------------------------------- drawer --- */

.nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(4, 5, 7, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    z-index: calc(var(--z-drawer) - 1);
    transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}

.nav-scrim.show {
    opacity: 1;
    visibility: visible;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + var(--sp-4))
             var(--sp-5)
             calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    background: #101116;
    border-left: 1px solid var(--border-strong);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--z-drawer);
    transition: transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
}

.nav-drawer.show {
    transform: translateX(0);
    visibility: visible;
}

.nav-drawer-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-faint);
    padding-inline: var(--sp-3);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-1);
}

.nav-drawer-label:first-child {
    margin-top: 0;
}

.nav-drawer a,
.nav-drawer button.drawer-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 50px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--text-dim);
    text-align: left;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nav-drawer a:hover,
.nav-drawer a:active,
.nav-drawer button.drawer-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.nav-drawer a.active {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    color: var(--primary);
    font-weight: var(--fw-bold);
}

.nav-drawer .drawer-danger {
    color: var(--danger);
}

.nav-drawer-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.nav-drawer-balance.hidden {
    display: none !important;
}

.nav-drawer-foot {
    margin-top: auto;
    padding-top: var(--sp-6);
}

/* ---------------------------------------------------------- breakpoints --- */

/* Tablet: keep the pill but tighten it so it clears the logo and avatar. */
@media (max-width: 1080px) {
    .nav-center a {
        padding-inline: var(--sp-4);
        font-size: var(--fs-xs);
    }
}

/* Phone / small tablet: pill and balance chip move into the drawer. */
@media (max-width: 900px) {
    :root {
        --nav-height: 64px;
    }

    .nav-center {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .balance-wrapper {
        padding-inline: var(--sp-3);
    }

    /* The sign-in button is the one thing worth keeping visible — it is the
       conversion action. Everything else folds away. */
    .profile-wrapper {
        display: none;
    }
}

@media (max-width: 420px) {
    .balance-wrapper {
        display: none !important;
    }

    .logo {
        font-size: var(--fs-base);
    }
}

/* Desktop: no drawer, ever. */
@media (min-width: 901px) {
    .nav-drawer,
    .nav-scrim {
        display: none;
    }
}

.hidden {
    display: none !important;
}