/* ==========================================================
   GLOBAL RESPONSIVE OVERRIDES

   Purpose:
   - Store responsive rules shared by global components.

   Dependencies:
   - navbar.css
   - footer.css
========================================================== */

/* ==========================================================
   NAVBAR
========================================================== */

@media (max-width: 900px) {
    #navbar {
        padding-left: 4%;
        padding-right: 4%;
        gap: 20px;
    }

    #navLinks {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #navbar {
        min-height: 70px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #navbar nav {
        position: static;
        flex: 0 0 auto;
    }

    #navLinks {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 58vw;
        max-width: 420px;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 92px 24px 32px;
        overflow-y: auto;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background: rgba(5, 6, 10, .97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: -14px 0 40px rgba(0, 0, 0, .35);
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform .35s cubic-bezier(.4, 0, .2, 1),
            visibility 0s linear .35s;
        z-index: 1002;
    }

    body.light #navLinks {
        background: rgba(245, 247, 255, .97);
    }

    #navbar.menu-open #navLinks {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            transform .35s cubic-bezier(.4, 0, .2, 1),
            visibility 0s linear 0s;
    }

    #navbar.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 1;
        z-index: 1001;
        pointer-events: auto;
    }

    #navbar:not(.menu-open)::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 1001;
    }

    #navbar.menu-open #navLinks > li {
        width: 100%;
        flex: 0 0 auto;
    }

    #navbar.menu-open #navLinks a {
        width: 100%;
        min-height: 54px;
        padding: 0 0;
        box-sizing: border-box;
        border-radius: 0;
        color: var(--text);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    #navbar.menu-open #navLinks a:hover,
    #navbar.menu-open #navLinks a:focus-visible {
        color: var(--primary);
        background: transparent;
    }

    #navbar.menu-open #navLinks a::after {
        display: none;
    }

    #navbar.menu-open #navLinks .navbar-item--dropdown {
        display: flex;
        flex-direction: column;
    }

    #navbar.menu-open #navLinks .navbar-dropdown {
        position: static;
        display: none;
        width: 100%;
    }

    #menuToggle {
        position: relative;
        z-index: 1004;
        display: block;
        width: 40px;
        height: 40px;
    }

    #themeToggle {
        flex: 0 0 auto;
        position: relative;
        z-index: 1003;
    }

    .navbar-left {
        flex: 1 1 auto;
        position: relative;
        z-index: 1003;
    }

    .logo .brand-wave {
        font-size: 1.55rem;
    }

    .back-home span {
        font-size: .9rem;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    #navbar {
        gap: 12px;
    }

    #navLinks {
        width: 58vw;
        padding-left: 20px;
        padding-right: 20px;
    }

    .toggle-track {
        width: 56px;
        height: 32px;
    }

    .toggle-thumb {
        width: 26px;
        height: 26px;
    }

    body.light .toggle-thumb {
        transform: translateX(24px);
    }

    .back-home {
        gap: 7px;
    }

    .back-home span {
        font-size: .82rem;
    }
}

/* ==========================================================
   FOOTER
========================================================== */

@media (max-width: 900px) {
    .footer-links {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}