/* Custom styles for features not available in Tailwind CDN */
.bg-gradient-radial {
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
}

/* Mobile-specific optimizations */
@media (max-width: 640px) {
    /* Improve tap targets for mobile */
    .touch-manipulation {
        touch-action: manipulation;
    }
    
    /* Prevent horizontal scroll */
    .overflow-x-hidden {
        overflow-x: hidden;
    }
    
    /* Better text rendering on mobile */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Ensure videos don't overflow on small screens */
    video {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Improve focus states for touch devices */
    button:focus,
    a:focus,
    details summary:focus {
        outline: 2px solid rgba(228, 150, 36, 0.5);
        outline-offset: 2px;
    }
    
    /* Make section titles larger on mobile */
    #features h2,
    #faq h2,
    #download h2,
    #pricing h2 {
        font-size: 2.5rem !important; /* ~40px */
        line-height: 1.2 !important;
    }
    
    /* Make subtitle text larger on mobile */
    #features p,
    #faq p,
    #download p,
    #pricing p {
        font-size: 1.125rem !important; /* ~18px */
        line-height: 1.6 !important;
    }
    
    /* Make FAQ content text larger on mobile */
    #faq details div {
        font-size: 1rem !important; /* ~16px */
        line-height: 1.6 !important;
    }
    
    /* Make FAQ questions larger on mobile */
    #faq details summary {
        font-size: 1.125rem !important; /* ~18px, up from text-base (16px) */
    }
    
    /* Improve main title on mobile - reduce line spacing and decrease size slightly */
    #home h1 {
        font-size: 3rem !important; /* Decrease from 3.5rem back to 3rem (text-5xl) */
        line-height: 1.1 !important; /* Tighter line spacing than leading-tight (1.25) */
        margin-bottom: 1.5rem !important; /* Reduce bottom margin to create more space */
    }
    
    /* Improve subtitle text size on mobile */
    #home p {
        font-size: 1.25rem !important; /* Increase from 1rem (text-base) to 1.25rem (text-xl) */
        line-height: 1.7 !important; /* Slightly more relaxed line height */
    }
    
    /* Add extra padding to top chip on mobile */
    #home .bg-gradient-to-r:first-child {
        margin-top: 2rem !important; /* Add extra top margin */
        margin-bottom: 2rem !important; /* Add extra bottom margin */
    }
    
    /* Add extra bottom padding to system requirements text on mobile */
    #home .text-gray-500 {
        padding-bottom: 2rem !important; /* Add extra bottom padding */
    }
}

/* Prevent zoom on input focus (iOS Safari) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

/* FAQ improvements for all screen sizes */

/* Remove orange outline on focus/selection */
details summary:focus,
details summary:focus-visible {
    outline: none;
}

/* Remove any browser default outline */
details summary {
    outline: none;
}

/* Remove any focus/click highlighting */
details summary:focus {
    background-color: transparent;
}

/* Add extra small breakpoint for very small devices */
@media (max-width: 375px) {
    .xs\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .xs\:text-5xl {
        font-size: 3rem;
        line-height: 3rem;
    }
    
    .xs\:text-6xl {
        font-size: 3.75rem;
        line-height: 3.75rem;
    }
}