/**
 * Mobile Navigation Fix
 * Ensures navbar stays properly positioned and visible on mobile devices
 */

/* Keep the nav above the 3D canvas and any overlays */
.navbar {
    z-index: 2000 !important;
    pointer-events: auto;
}

.nav-cover {
    pointer-events: none;
}

/* Tablet and below */
@media screen and (max-width: 991px) {
    .navbar {
        z-index: 100 !important;
        background-color: rgba(5, 5, 5, 0.95) !important;
        backdrop-filter: blur(10px);
    }

    .grid-wrapper {
        z-index: 100 !important;
    }
}

/* Mobile devices */
@media screen and (max-width: 767px) {

    /* Force hamburger to show */
    .w-nav-button,
    .menu-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }

    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        display: flex !important;
        background-color: rgba(5, 5, 5, 0.98) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: auto !important;
        min-height: 70px;
        overflow: visible !important;
    }


    .w-nav-menu {
        background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 0%, rgba(10, 10, 15, 0.98) 100%) !important;
        top: 70px !important;
        z-index: 9999 !important;
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateY(-100%) !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        padding: 40px 20px !important;
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(79, 140, 255, 0.2);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
        pointer-events: none !important;
    }

    .w-nav-menu.w--open,
    .w-nav-menu[data-nav-menu-open],
    .w-nav-menu.is-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        pointer-events: auto !important;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .menu-button {
        z-index: 1001 !important;
        position: relative !important;
        display: flex !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        min-width: 120px !important;
        padding: 12px 20px !important;
    }

    .menu-button-wrapper {
        width: 100% !important;
        height: 48px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Hide the old icon image */
    .menu-icon {
        display: none !important;
    }

    /* MENU text styling */
    .menu-text {
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: 3px !important;
        color: #ffffff !important;
        text-align: center !important;
        z-index: 2 !important;
        pointer-events: none !important;
        text-transform: uppercase !important;
    }

    /* Blinking arrow in top-right */
    .menu-arrow {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        animation: arrowBlink 1.5s ease-in-out infinite !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    @keyframes arrowBlink {
        0% {
            color: #4f8cff;
            text-shadow: 0 0 10px rgba(79, 140, 255, 0.8);
            opacity: 1;
        }

        25% {
            color: #a855f7;
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
            opacity: 0.7;
        }

        50% {
            color: #ec4899;
            text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
            opacity: 1;
        }

        75% {
            color: #f59e0b;
            text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
            opacity: 0.7;
        }

        100% {
            color: #4f8cff;
            text-shadow: 0 0 10px rgba(79, 140, 255, 0.8);
            opacity: 1;
        }
    }

    .nav-link.w-nav-link {
        color: #ffffff !important;
        padding: 25px 30px !important;
        margin: 8px 0 !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
        text-align: center !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        letter-spacing: 2px !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        pointer-events: auto !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 100%;
        max-width: 400px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        opacity: 0.3 !important;
    }

    /* Buttons become fully visible when menu is open */
    .w-nav-menu.w--open .nav-link.w-nav-link,
    .w-nav-menu.is-open .nav-link.w-nav-link,
    .w-nav-menu[data-nav-menu-open] .nav-link.w-nav-link {
        opacity: 1 !important;
    }

    .nav-link.w-nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
        z-index: -1;
    }

    .nav-link.w-nav-link:hover::before,
    .nav-link.w-nav-link:focus::before {
        left: 100%;
    }

    /* Active/Current page styling */
    .nav-link.w-nav-link.w--current {
        background: rgba(79, 140, 255, 0.2) !important;
        border-color: rgba(79, 140, 255, 0.5) !important;
        box-shadow: 0 0 20px rgba(79, 140, 255, 0.3) !important;
    }

    .grid-wrapper {
        z-index: 1000 !important;
        overflow: visible !important;
    }

    .nav-wrapper {
        overflow: visible !important;
    }

    .nav-cover {
        display: none !important;
    }

    /* Ensure 3D container doesn't overlap navbar */
    #hero-3d-container {
        z-index: 1 !important;
        margin-top: 0;
    }

    /* Ensure background wrapper doesn't interfere */
    .background-wrapper.half-page {
        z-index: 1 !important;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* Add padding to hero content to account for fixed navbar */
    .hero-content {
        padding-top: 100px;
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 479px) {
    .hero-content {
        padding-top: 90px;
    }
}