/* Test Pages Mobile Fix - Specific fixes for reaction-time.html and memory-test.html */

/* Ensure mobile menu toggle button is visible and functional */
@media (max-width: 768px) {
    /* Make sure nav toggle is visible */
    .nav-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        cursor: pointer;
        z-index: 1001;
        background: none;
        border: none;
        padding: 0 !important;
    }
    
    .nav-toggle .bar {
        width: 20px;
        height: 2px;
        background-color: var(--text-primary, #1f2937);
        margin: 2px 0;
        transition: all 0.3s ease;
        border-radius: 1px;
    }
    
    .nav-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-4px, 4px);
    }
    
    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-4px, -4px);
    }
    
    /* Mobile menu styles */
    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: var(--white, #ffffff);
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding-top: 60px;
        max-height: 100vh;
        visibility: hidden;
    }

    .nav-menu.active {
        left: 0;
        visibility: visible;
    }

    /* Ensure dropdown menus are fully visible in mobile */
    .nav-menu .dropdown {
        position: static !important;
    }

    .nav-menu .dropdown-menu {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: var(--radius-md, 8px);
        margin-top: var(--space-2, 0.5rem);
        padding: var(--space-2, 0.5rem);
        width: 100%;
        max-height: none !important;
        overflow: visible !important;
    }

    .nav-menu .dropdown-toggle::after,
    .nav-menu .dropdown-toggle .fa-chevron-down {
        display: none !important;
    }

    /* Mobile navigation list styling */
    .nav-menu .nav-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
        padding: var(--space-4, 1rem);
        margin: 0;
        list-style: none;
    }

    .nav-menu .nav-item {
        width: 100%;
    }

    .nav-menu .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-3, 0.75rem);
        text-decoration: none;
        border-radius: var(--radius-md, 8px);
        transition: all 0.3s ease;
        background-color: var(--primary-color, #6366f1);
        color: var(--white, #ffffff);
        margin-bottom: var(--space-2, 0.5rem);
        min-height: 60px;
        justify-content: center;
        gap: var(--space-1, 0.25rem);
    }

    .nav-menu .nav-link i {
        font-size: var(--text-lg, 1.125rem);
    }

    .nav-menu .nav-link span {
        font-size: var(--text-sm, 0.875rem);
        font-weight: 500;
    }

    .nav-menu .dropdown-link {
        display: flex;
        align-items: center;
        gap: var(--space-2, 0.5rem);
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
        text-decoration: none;
        border-radius: var(--radius-sm, 4px);
        transition: all 0.3s ease;
        background-color: var(--white, #ffffff);
        color: var(--text-primary, #1f2937);
        margin: var(--space-1, 0.25rem) 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-menu .dropdown-link:hover,
    .nav-menu .dropdown-link.active {
        background-color: var(--primary-light, #818cf8);
        color: var(--white, #ffffff);
    }

    .nav-menu .dropdown-link i {
        font-size: var(--text-base, 1rem);
        width: 20px;
        text-align: center;
    }
    
    /* Prevent horizontal scroll and body scroll when menu is open */
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.nav-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Fix any elements that might cause horizontal overflow */
    .test-config,
    .test-interface,
    .test-results,
    .config-options,
    .config-group,
    .config-select,
    .btn,
    .reaction-area,
    .memory-area,
    .input-area {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure all text and content fits within screen */
    .page-title,
    .page-description,
    .config-title,
    .test-title,
    .results-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Fix reaction area for mobile */
    .reaction-area {
        width: 100%;
        min-height: 300px;
        padding: var(--space-4, 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .reaction-circle {
        width: 200px;
        height: 200px;
        max-width: 80vw;
        max-height: 80vw;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* Fix memory area for mobile */
    .memory-area {
        width: 100%;
        min-height: 300px;
        padding: var(--space-4, 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .memory-display {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2, 0.5rem);
    }
    
    /* Fix input area for mobile */
    .input-area {
        width: 100%;
        padding: var(--space-4, 1rem);
    }
    
    .input-display {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2, 0.5rem);
    }
    
    /* Fix config options layout */
    .config-options {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4, 1rem);
        width: 100%;
    }
    
    .config-group {
        width: 100%;
    }
    
    .config-select {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix test stats layout */
    .test-stats {
        display: flex;
        flex-direction: column;
        gap: var(--space-3, 0.75rem);
        align-items: center;
    }
    
    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: auto;
    }
    
    /* Fix results layout */
    .results-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4, 1rem);
        width: 100%;
    }
    
    .result-card {
        width: 100%;
        padding: var(--space-4, 1rem);
        text-align: center;
    }
    
    /* Fix tips section */
    .tips-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-6, 1.5rem);
        width: 100%;
    }
    
    .tip-card {
        width: 100%;
        padding: var(--space-4, 1rem);
        text-align: center;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
    .container {
        padding-left: var(--space-3, 0.75rem);
        padding-right: var(--space-3, 0.75rem);
    }
    
    .test-config,
    .test-interface {
        padding: var(--space-4, 1rem);
        margin: 0;
    }
    
    .reaction-circle {
        width: 150px;
        height: 150px;
    }
    
    .btn {
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
        font-size: var(--text-sm, 0.875rem);
    }
    
    .btn-lg {
        padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
        font-size: var(--text-base, 1rem);
    }
}