/* Flat nav responsive layer — works without nav-main wrapper */

:root {
    --nav-height: 72px;
    --nav-pad-x: clamp(0.75rem, 4vw, 2.5rem);
}

.top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    width: 100% !important;
    min-height: var(--nav-height) !important;
    height: auto !important;
    padding: 0.5rem var(--nav-pad-x) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem 0.85rem !important;
    background: rgba(255, 252, 248, 0.88) !important;
    backdrop-filter: blur(20px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
    border-bottom: 1px solid rgba(23, 50, 77, 0.07) !important;
    box-shadow: 0 4px 24px rgba(23, 50, 77, 0.06) !important;
}

.top .brand {
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

.top .fox {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.top .brand-name {
    font-size: clamp(1.1rem, 2.5vw, 1.35rem) !important;
    font-weight: 700 !important;
    color: #17324D !important;
}

.top .index-1,
.top .about-1,
.top .faq-1,
.top .story-1,
.top .involve-1,
.top .donate-1,
.top .signin-button,
.top .signup-button {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.explore-menu {
    top: var(--nav-height) !important;
    height: calc(100vh - var(--nav-height)) !important;
}

body.page > .space,
body.page > .workshops-hero,
body.page > .debate-hero,
body.page > .hero-stories,
body.page > .tutor-hero,
body.page > .donate-hero,
.signin-page,
.signup-page {
    scroll-margin-top: var(--nav-height);
}

@media (max-width: 1024px) {
    .top .about-1,
    .top .story-1,
    .top .faq-1,
    .top .donate-1,
    .top .signin-button,
    .top .index-1,
    .top .involve-1 {
        display: inline-flex !important;
    }
}

@media (max-width: 680px) {
    :root {
        --nav-height: 64px;
    }

    .top {
        justify-content: flex-start !important;
        row-gap: 0.25rem !important;
    }

    .top .brand {
        flex: 1 1 auto !important;
    }

    .top .index-1,
    .top .involve-1,
    .top .signup-button {
        font-size: 0.75rem !important;
    }

    .top .signup-button {
        margin-left: auto !important;
    }

    .explore-menu {
        top: calc(var(--nav-height) + 36px) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .top,
    .explore-menu {
        background: #fff9f2 !important;
        backdrop-filter: none !important;
    }
}