/* K12Buddy Responsive Fixes - Mobile First Approach */

/* Base Mobile Styles */
@media screen and (max-width: 768px) {
    /* Navigation Mobile Fixes */
    nav .container {
        padding: 12px 16px !important;
    }
    
    nav h1 {
        font-size: 1.5rem !important;
    }
    
    /* Hide desktop nav items on mobile */
    .hidden.md\:flex {
        display: none !important;
    }
    
    /* Mobile menu button styles */
    #auth-buttons {
        gap: 8px !important;
    }
    
    #auth-buttons button {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    /* Hero Section Mobile */
    .bg-gradient-to-br {
        padding: 40px 16px !important;
    }
    
    section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    section p.text-xl {
        font-size: 1rem !important;
        margin-bottom: 24px !important;
    }
    
    /* Hero buttons mobile */
    section .flex.gap-4 {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 16px !important;
    }
    
    section .flex.gap-4 button {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
    
    /* Pricing Cards Mobile */
    #pricing .container {
        padding: 16px !important;
    }
    
    #pricing h2 {
        font-size: 1.75rem !important;
        margin-bottom: 32px !important;
    }
    
    #pricing .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    
    /* Remove scale transform on mobile */
    #pricing .transform.scale-105 {
        transform: none !important;
    }
    
    /* Pricing card adjustments */
    #pricing .bg-white,
    #pricing .bg-blue-600 {
        padding: 24px 20px !important;
        margin: 0 !important;
    }
    
    /* Pricing text adjustments */
    #pricing .text-4xl {
        font-size: 2rem !important;
    }
    
    #pricing .text-2xl {
        font-size: 1.25rem !important;
    }
    
    /* List items in pricing */
    #pricing ul {
        font-size: 14px !important;
    }
    
    /* Auth Modal Mobile */
    #auth-modal .max-w-md {
        margin: 16px !important;
        width: calc(100% - 32px) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    #auth-modal .p-8 {
        padding: 24px !important;
    }
    
    #auth-modal h2 {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }
    
    /* Form inputs mobile */
    #auth-form input {
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    #auth-form button[type="submit"] {
        padding: 14px !important;
        font-size: 16px !important;
    }
    
    /* Google sign-in button */
    button[onclick*="signInWithGoogle"] {
        padding: 14px !important;
        font-size: 16px !important;
    }
    
    /* Close button positioning */
    #auth-modal .absolute.top-4.right-4 {
        top: 12px !important;
        right: 12px !important;
    }
}

/* Small Mobile Devices */
@media screen and (max-width: 375px) {
    nav h1 {
        font-size: 1.25rem !important;
    }
    
    #auth-buttons {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    #auth-buttons button {
        width: 100% !important;
    }
    
    section h1 {
        font-size: 1.75rem !important;
    }
    
    #pricing .text-4xl {
        font-size: 1.75rem !important;
    }
}

/* Tablet Styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Navigation tablet */
    nav .container {
        padding: 16px 24px !important;
    }
    
    /* Hero section tablet */
    section h1 {
        font-size: 3rem !important;
    }
    
    /* Pricing grid tablet */
    #pricing .grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    #pricing .transform.scale-105 {
        transform: scale(1.02) !important;
    }
}

/* Desktop Enhancements */
@media screen and (min-width: 1025px) {
    /* Ensure proper container width */
    .container {
        max-width: 1280px !important;
    }
    
    /* Hero section desktop */
    section .max-w-3xl {
        max-width: 48rem !important;
    }
    
    /* Pricing cards hover effects */
    #pricing .bg-white:hover,
    #pricing .bg-blue-600:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Button hover states */
    button {
        transition: all 0.2s ease !important;
    }
}

/* Touch Target Optimization */
@media (pointer: coarse) {
    /* Ensure all interactive elements are at least 44x44px */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    select,
    textarea {
        min-height: 44px !important;
    }
    
    /* Don't set min-width on all elements as it breaks layout */
    button {
        min-width: 44px !important;
    }
    
    /* Increase spacing between clickable elements */
    .space-y-3 > * {
        margin-bottom: 16px !important;
    }
}

/* Accessibility Improvements */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
}

/* Print Styles */
@media print {
    nav,
    #auth-modal,
    button {
        display: none !important;
    }
    
    #pricing .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape Mobile Optimization */
@media screen and (max-width: 812px) and (orientation: landscape) {
    .bg-gradient-to-br {
        padding: 20px 16px !important;
    }
    
    section h1 {
        font-size: 1.5rem !important;
    }
    
    #auth-modal .max-w-md {
        max-height: 80vh !important;
    }
}

/* Fix for iOS Safari bottom bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading States */
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Error States */
input:invalid {
    border-color: #ef4444 !important;
}

/* Success States */
.success {
    border-color: #10b981 !important;
}