/* Mobile Navigation Fixes for OriginStep */

/* Override forced visibility for proper mobile navigation */
@media (max-width: 991.98px) {
    /* Reset navigation collapse behavior */
    .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background-color: var(--bs-dark);
        padding: 1rem;
        margin: 0;
        border-radius: 0 0 8px 8px;
        border: 1px solid var(--bs-border-color);
        border-top: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Show navigation when toggled */
    .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Stack navigation items vertically on mobile */
    .navbar-nav {
        flex-direction: column !important;
        width: 100%;
    }
    
    .navbar-nav .nav-item {
        width: 100%;
        margin: 0;
    }
    
    .navbar-nav .nav-link {
        display: block !important;
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 4px;
        margin-bottom: 0.5rem;
        text-align: left;
    }
    
    .navbar-nav .nav-link:hover {
        background-color: var(--bs-primary);
        color: white;
    }
    
    /* Ensure navbar toggler is properly positioned */
    .navbar-toggler {
        position: relative;
        z-index: 1051;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.375rem 0.5rem;
        margin-left: auto;
    }
    
    /* Fix navbar brand positioning */
    .navbar-brand {
        flex-grow: 1;
    }
    
    /* Ensure navbar container doesn't overflow */
    .navbar > .container {
        position: relative;
    }
    
    /* Override Brave browser fixes on mobile */
    .navbar-collapse:not(.show) {
        display: none !important;
    }
    
    /* Remove forced visibility on mobile */
    .navbar-nav .nav-link {
        visibility: inherit !important;
        opacity: inherit !important;
    }
    
    /* Backdrop for mobile navigation */
    .navbar-collapse.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Specific fixes for very small screens */
@media (max-width: 576px) {
    .navbar-collapse {
        left: 0.5rem;
        right: 0.5rem;
        border-radius: 8px;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.95rem;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
}

/* Fix for landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar-collapse {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Ensure buttons don't interfere with navigation */
.btn-group .btn,
.dropdown-toggle {
    z-index: 1040;
}

/* Accessibility panel is now in footer area - no mobile navigation conflicts */
#accessibility-panel .btn-link {
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    tap-highlight-color: rgba(255, 215, 0, 0.3);
}

/* Accessibility improvements for mobile navigation */
@media (max-width: 991.98px) {
    .navbar-toggler:focus {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }
    
    .navbar-nav .nav-link:focus {
        outline: 2px solid #ffd700;
        outline-offset: -2px;
    }
}

/* Animation for mobile navigation */
.navbar-collapse {
    transition: all 0.3s ease-in-out;
}

.navbar-collapse.show {
    animation: slideDown 0.3s ease-out;
}

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

/* Fix for overlapping elements */
@media (max-width: 991.98px) {
    .navbar-collapse.show {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    
    /* Ensure navigation appears above other content */
    .navbar {
        position: relative;
        z-index: 1050;
    }
    
    .navbar-collapse {
        z-index: 1051;
    }
    
    /* Hide any overlapping right-side elements */
    .position-fixed.end-0,
    .position-absolute.end-0 {
        display: none;
    }
}