/* Mobile Optimizations & Fixes */

/* 1. Typography Adjustments */
@media (max-width: 768px) {
    .hero-title-enhanced {
        font-size: 2.5rem !important; /* Override inline/other styles */
        line-height: 1.2;
    }
    
    .section-title-enhanced {
        font-size: 2rem !important;
    }
    
    .hero-subtitle-enhanced {
        font-size: 1.1rem !important;
    }
    
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 1.875rem !important; }
    h3 { font-size: 1.5rem !important; }
}

@media (max-width: 480px) {
    .hero-title-enhanced {
        font-size: 2rem !important;
    }
}

/* 2. Spacing Adjustments */
@media (max-width: 768px) {
    .hero {
        padding-top: 6rem !important; /* Account for fixed navbar */
        padding-bottom: 4rem !important;
    }
    
    .section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /* Fix huge padding in features section */
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .mb-20 {
        margin-bottom: 3rem !important;
    }
    
    .mb-16 {
        margin-bottom: 2.5rem !important;
    }
}

/* 3. Layout Fixes */
@media (max-width: 768px) {
    /* Ensure containers don't overflow */
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    
    /* Fix grid layouts */
    .grid-cols-1 {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix absolute positioned elements causing overflow */
    .hero .floating-particle,
    .hero .geometric-shape {
        display: none; /* Hide decorative elements on mobile to prevent overflow/clutter */
    }
    
    /* Ensure body doesn't scroll horizontally */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }
}

/* 4. Component Fixes */
@media (max-width: 768px) {
    /* Buttons */
    .btn-3d, 
    .btn-glass-enhanced,
    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%; /* Full width buttons on mobile */
        justify-content: center;
        margin-bottom: 0.75rem;
        display: flex;
    }
    
    .hero-cta-section .flex {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    /* Feature Cards */
    .feature-card-enhanced {
        margin-bottom: 1.5rem;
        padding: 1.5rem !important;
    }
    
    /* Stats */
    .metric-item {
        width: 45%; /* 2 per row */
        margin-bottom: 1rem;
    }
    
    .flex-wrap {
        justify-content: center;
    }
    
    /* Professional Indicators */
    .professional-indicators {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* 5. Navbar & Menu Fixes */
@media (max-width: 768px) {
    /* Ensure mobile menu is on top */
    #mobile-menu {
        z-index: 9999;
        width: 85vw; /* Use viewport width */
        max-width: 320px;
    }
    
    /* Fix backdrop z-index */
    #mobile-backdrop {
        z-index: 9998;
    }
    
    .navbar {
        padding: 0.5rem 1rem;
    }
}

/* 6. Modal Fixes */
@media (max-width: 640px) {
    .modal-container {
        width: 95% !important;
        margin: 0 auto;
        max-height: 90vh;
        top: 50%;
        transform: translate(-50%, -50%) !important;
    }
    
    .modal-body {
        padding: 1.25rem !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .modal-header h2 {
        font-size: 1.5rem !important;
    }
}

/* 7. Chat Widget Fixes - Removed */


/* 8. Footer Fixes */
@media (max-width: 768px) {
    .footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Contact Page Fixes */
@media (max-width: 640px) {
    .grid-cols-3 {
        grid-template-columns: 1fr !important; /* Stack statistics */
        gap: 1.5rem !important;
    }
    
    .text-5xl {
        font-size: 2.5rem !important;
    }
}

/* Additional Global Mobile Fixes */
@media (max-width: 768px) {
    /* Typography - Handle larger sizes */
    .text-7xl, .text-8xl {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    /* Hide decorative particles on mobile to improve performance and prevent overflow */
    .particle, 
    .cta-particle,
    .floating-orb,
    .absolute.animate-pulse,
    .absolute.animate-bounce {
        display: none !important;
    }

    /* Ensure background gradients/shapes don't cause overflow */
    .overflow-hidden {
        overflow: hidden !important;
    }

    /* About Page Specifics */
    .about-hero-content {
        padding-top: 6rem !important;
    }
    
    /* Ensure all grids stack */
    .grid {
        display: grid !important;
    }
    
    /* Fix for any potential table overflow */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Fix for iframes */
    iframe {
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    /* Further reduce huge headings on very small screens */
    .text-7xl, .text-8xl {
        font-size: 2rem !important;
    }
    
    /* Adjust About page specific large text */
    h1.text-6xl.md\:text-8xl {
        font-size: 2.25rem !important;
    }
    
    /* Adjust Mission/Vision cards padding */
    .p-12 {
        padding: 1.5rem !important;
    }
    
    /* Adjust Section Headers */
    h2.text-5xl, h2.text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
}

/* Final Mobile Adjustments */
@media (max-width: 768px) {
    /* Hide success particles on mobile */
    .success-particle {
        display: none !important;
    }
    
    /* Ensure GitHub Project Detail title is readable but not too small */
    .container h1, 
    .container .text-4xl, 
    .container .text-6xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Ensure mobile readme actions are visible if they were hidden */
    .mobile-readme-actions {
        display: flex !important;
    }
}

/* Fix Modal Close Button on Mobile */
@media (max-width: 640px) {
    .modal-close {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        transform: none !important;
        z-index: 10005 !important; /* Ensure it is above everything including the modal overlay */
        background: #ef4444 !important;
        width: 36px !important;
        height: 36px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    
    /* Ensure the icon inside is centered */
    .modal-close svg {
        width: 20px !important;
        height: 20px !important;
    }
}