/* Mobile Optimizations for ISA Website */
/* Comprehensive mobile responsiveness improvements */

:root {
    --mobile-nav-height: 60px;
    --mobile-padding: 1rem;
    --mobile-text-base: 14px;
    --touch-target-min: 44px;
}

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Global Adjustments */
    body {
        padding-top: var(--mobile-nav-height) !important;
        font-size: var(--mobile-text-base);
    }

    /* Container Padding */
    .container,
    .max-w-6xl,
    .max-w-7xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl {
        padding-left: var(--mobile-padding) !important;
        padding-right: var(--mobile-padding) !important;
    }

    /* Typography Adjustments */
    h1, .text-5xl, .text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2, .text-4xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    h3, .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    p {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Navigation Mobile Optimization */
    .nav-wrapper {
        height: var(--mobile-nav-height);
        padding: 0 var(--mobile-padding);
    }

    .nav-container {
        padding: 0;
    }

    .nav-logo img {
        height: 32px;
    }

    /* Mobile Menu Improvements */
    .mobile-menu {
        top: var(--mobile-nav-height);
        max-height: calc(100vh - var(--mobile-nav-height));
        overflow-y: auto;
    }

    .mobile-nav-links a {
        padding: 1rem;
        font-size: 1.125rem;
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
    }

    .mobile-nav-cta {
        padding: 1rem;
        font-size: 1rem;
        min-height: var(--touch-target-min);
    }

    /* Hero Section Mobile */
    .hero {
        min-height: calc(100vh - var(--mobile-nav-height));
        padding: 2rem var(--mobile-padding);
    }

    .hero-headline {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
        margin-bottom: 1rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* CTA Buttons Mobile */
    .cta-hex {
        padding: 1rem 1.5rem !important;
        font-size: 0.875rem !important;
        letter-spacing: 1px !important;
        min-height: var(--touch-target-min);
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .cta-group {
        flex-direction: column !important;
        width: 100%;
        padding: 0 1rem;
    }

    /* Stats Grid Mobile */
    .stats-grid,
    .offer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }

    .stat-item {
        padding: 1rem;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    .stat-value {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 0.75rem !important;
    }

    /* Founding Badge Mobile */
    .founding-badge {
        padding: 0 var(--mobile-padding);
    }

    .founding-badge p {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem;
    }

    /* Grid Layouts Mobile */
    .grid {
        gap: 1rem !important;
    }

    .md\\:grid-cols-2,
    .md\\:grid-cols-3,
    .md\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Cards Mobile */
    .glass-card,
    .stat-card,
    .bg-black\\/50 {
        padding: 1.25rem !important;
        margin-bottom: 1rem;
    }

    /* Problem Section Mobile */
    .problem-grid {
        grid-template-columns: 1fr !important;
    }

    /* Services Section Mobile */
    .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 2rem;
    }

    /* Demo Showcase Mobile */
    .demo-tools-grid {
        grid-template-columns: 1fr !important;
    }

    /* Forms Mobile */
    input,
    textarea,
    select,
    button {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: var(--touch-target-min);
    }

    .newsletter-form {
        flex-direction: column !important;
    }

    .newsletter-input {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .newsletter-btn {
        width: 100% !important;
    }

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links {
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .footer-legal {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Sections Padding Mobile */
    .section,
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Text Alignment Mobile */
    .text-center {
        text-align: center !important;
    }

    /* Overflow Prevention */
    * {
        max-width: 100vw;
        overflow-x: hidden;
    }

    pre,
    code {
        overflow-x: auto;
        max-width: 100%;
    }

    /* Image Optimization */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Table Responsiveness */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Modal/Popup Mobile */
    .modal,
    .popup {
        width: calc(100vw - 2rem);
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    /* Even Smaller Typography */
    h1, .text-5xl, .text-6xl {
        font-size: 1.75rem !important;
    }

    h2, .text-4xl {
        font-size: 1.5rem !important;
    }

    h3, .text-3xl {
        font-size: 1.25rem !important;
    }

    /* Single Column Stats */
    .stats-grid,
    .offer-grid {
        grid-template-columns: 1fr !important;
    }

    /* Founding Badge Adjustments */
    .founding-badge p {
        font-size: 0.75rem !important;
        line-height: 1.4;
    }

    /* CTA Adjustments */
    .cta-hex {
        font-size: 0.75rem !important;
        padding: 0.875rem 1.25rem !important;
    }
}

/* Touch-Friendly Interactions */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\\:scale-105:hover,
    .hover\\:scale-110:hover {
        transform: none !important;
    }

    /* Increase tap targets */
    a,
    button,
    .clickable {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }

    /* Add active states for better feedback */
    a:active,
    button:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 1.5rem var(--mobile-padding);
    }

    .nav-wrapper {
        height: 50px;
    }

    body {
        padding-top: 50px !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    .mobile-menu {
        -webkit-overflow-scrolling: touch;
    }

    input,
    textarea,
    select {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* Accessibility Improvements for Mobile */
@media (max-width: 768px) {
    /* Larger touch targets for accessibility */
    .nav-links a,
    .footer-links a {
        padding: 0.75rem;
        display: inline-block;
    }

    /* Better focus indicators */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus {
        outline: 3px solid #10F99F;
        outline-offset: 2px;
    }

    /* Skip to content link */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--gradient-primary);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }

    .skip-to-content:focus {
        top: 0;
    }
}

/* Performance Optimizations */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Optimize animations for mobile */
    .animate,
    [class*="animation-"] {
        animation-duration: 0.3s !important;
    }
}