/* ═══════════════════════════════════════════════════════════════
   PAGE NAV - shared navigation bar across Home, History, Art, Guide
   ═══════════════════════════════════════════════════════════════ */

.page-nav {
    padding: 20px var(--sec-gutter) 0;
    max-width: 1280px;
    margin: 0 auto;
}

.page-nav__inner {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid #e5e8ed;
    padding-bottom: 0;
}

.page-nav__link {
    padding: 10px 20px;
    font-size: 0.92em;
    font-weight: 600;
    color: #7a8699;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}

.page-nav__link:hover {
    color: #3d4a5c;
}

.page-nav__link--active {
    color: #141a21;
    border-bottom-color: #7b42b8;
}

/* Clear the fixed mobile top bar (same breakpoint as menu.css). */
@media (max-width: 900px) {
    .page-nav {
        padding-top: calc(var(--mobile-nav-height, 80px) + 20px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .page-nav {
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0;
        padding-top: calc(var(--mobile-nav-height, 80px) + 16px);
    }

    .page-nav__link {
        padding: 8px 14px;
        font-size: 0.85em;
    }

    /* Discord lives in the hamburger sheet on mobile */
    .page-nav__link--discord {
        display: none;
    }
}