/* ========================================
   MOBILE RESPONSIVE FIXES
   Ensures proper formatting on all mobile devices
   ======================================== */

/* Base Mobile Optimization */
@media (max-width: 768px) {
    /* Container padding for mobile */
    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    /* Hero section mobile */
    .hero {
        padding: 60px 0 40px !important;
        min-height: auto !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        word-wrap: break-word !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }
    
    .hero-content {
        padding: 0 8px !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Section titles mobile */
    .section-title {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
        padding: 0 8px !important;
    }
    
    .section-subtitle {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        padding: 0 8px !important;
    }
    
    /* Page headers mobile */
    .page-header {
        padding: 50px 0 30px !important;
    }
    
    .page-header h1 {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    .page-header p {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Card grids - stack on mobile */
    .quick-nav-grid,
    .features-grid,
    .cloud-grid,
    .team-grid,
    .bot-selector-grid,
    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* All cards - full width on mobile */
    .quick-nav-card,
    .feature-card,
    .cloud-card,
    .team-member,
    .bot-selector-card,
    .solution-card,
    .resource-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        margin-bottom: 16px !important;
    }
    
    /* Card text sizing for readability */
    .quick-nav-card h3,
    .feature-card h3,
    .cloud-card h3,
    .solution-card h3,
    .resource-card h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    .quick-nav-card p,
    .feature-card p,
    .cloud-card p,
    .solution-card p,
    .resource-card p {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
    }
    
    /* Demo modal - full screen on mobile */
    .demo-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 20px !important;
    }
    
    .demo-chat-window {
        height: 250px !important;
    }
    
    .demo-buttons {
        flex-direction: column !important;
    }
    
    .demo-btn {
        width: 100% !important;
    }
    
    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-section ul,
    .footer-col ul {
        padding-left: 0 !important;
        list-style: none !important;
    }
    
    /* Resources section mobile */
    .tech-showcase-new,
    [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Prevent horizontal overflow */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Ensure content doesn't overlap with fixed elements */
    .container {
        padding-right: 16px !important;
        padding-left: 16px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Content sections need proper spacing from fixed bot */
    .content-section,
    section {
        padding-right: 16px !important;
        padding-left: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Tech cards and grids need proper width constraints */
    .tech-grid,
    .tech-card,
    .integration-grid,
    .integration-item {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Text doesn't overflow and is readable */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Minimum readable text sizes */
    p, li, span, div {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4 { font-size: 1.2rem !important; }
    
    /* Better spacing between sections */
    section {
        padding: 40px 0 !important;
    }
    
    .content-section {
        padding: 40px 0 !important;
    }
    
    /* Tables scroll on mobile */
    .comparison-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Buttons full width on mobile */
    .cta-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    
    .cta-buttons .btn,
    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        font-size: 1.1rem !important;
        padding: 16px 24px !important;
        text-align: center !important;
    }
    
    /* Navigation mobile */
    .nav-menu {
        flex-direction: column !important;
    }
    
    .nav-menu a {
        font-size: 1.1rem !important;
        padding: 12px 16px !important;
    }
    
    .navbar {
        padding: 12px 0 !important;
    }
    
    /* FAQ sections - better mobile formatting */
    .faq-section h3,
    [style*="color: #667eea"] {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    
    /* List items readable on mobile */
    ul li, ol li {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        margin-bottom: 12px !important;
    }
}

/* Dark mode text visibility on mobile */
@media (max-width: 768px) {
    .dark-mode h1,
    .dark-mode h2,
    .dark-mode h3,
    .dark-mode h4,
    .dark-mode .hero-title,
    .dark-mode .section-title {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
    .dark-mode p,
    .dark-mode li,
    .dark-mode span,
    .dark-mode .hero-subtitle,
    .dark-mode .section-subtitle {
        color: #e2e8f0 !important;
    }
    
    .dark-mode .resource-card,
    .dark-mode .quick-nav-card,
    .dark-mode .feature-card {
        background: rgba(30, 41, 59, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        margin-bottom: 12px !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
    }
    
    /* Smaller padding on cards */
    .quick-nav-card,
    .feature-card,
    .cloud-card,
    .solution-card,
    .resource-card {
        padding: 20px 16px !important;
    }
    
    /* Button text sizing */
    .btn {
        font-size: 1rem !important;
        padding: 14px 20px !important;
    }
    
    /* Larger tap targets */
    button, a.btn, .btn {
        min-height: 48px !important;
    }
}

/* Landscape mobile fix */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 40px 0 !important;
    }
    
    .page-header {
        padding: 40px 0 20px !important;
    }
}