/* ==========================================
   MOBILE RESPONSIVENESS ENHANCEMENTS
   December 5, 2025
   ========================================== */

/* ==========================================
   SMALL MOBILE (320px - 480px)
   ========================================== */
@media (max-width: 480px) {
    /* Typography scaling */
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Spacing adjustments */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Button sizing */
    button,
    .btn {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Card adjustments */
    .card,
    .product-card {
        padding: 1rem !important;
    }
    
    /* Image sizing */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Price displays */
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .text-4xl {
        font-size: 1.75rem !important;
    }
    
    .text-3xl {
        font-size: 1.5rem !important;
    }
}

/* ==========================================
   MOBILE (481px - 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Hide floating elements on mobile for performance */
    .floating-phrase,
    .floating-screenshot,
    .cursor-circle {
        display: none !important;
    }
    
    /* Stack elements vertically */
    .flex {
        flex-direction: column !important;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Full width elements */
    .w-1\/2,
    .w-1\/3,
    .w-2\/3 {
        width: 100% !important;
    }
    
    /* Reduce spacing */
    .space-x-4 > * + *,
    .space-x-6 > * + * {
        margin-left: 0 !important;
        margin-top: 1rem;
    }
    
    /* Adjust padding */
    .p-8 {
        padding: 1.5rem !important;
    }
    
    .p-6 {
        padding: 1.25rem !important;
    }
    
    /* Hero section mobile */
    .hero-section {
        min-height: 80vh !important;
        padding: 2rem 1rem !important;
    }
    
    /* Navigation mobile */
    nav {
        padding: 1rem !important;
    }
    
    /* Modal mobile */
    #purchase-modal {
        padding: 0.75rem !important;
    }
    
    #purchase-modal [data-modal-content] {
        max-height: 95vh !important;
        border-radius: 16px !important;
    }
    
    /* Price calculator mobile */
    .price-calculator {
        padding: 1.5rem !important;
    }
    
    /* Form inputs */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Touch targets (accessibility) */
    button,
    a,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   TABLET (769px - 1024px)
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 90%;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================
   LANDSCAPE MOBILE
   ========================================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding */
    section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .hero-section {
        min-height: 100vh !important;
    }
    
    /* Modal adjustments */
    #purchase-modal [data-modal-content] {
        max-height: 90vh !important;
    }
}

/* ==========================================
   MOBILE NAVIGATION FIXES
   ========================================== */
@media (max-width: 768px) {
    /* Hamburger menu styling */
    .mobile-menu-button {
        display: block !important;
    }
    
    .desktop-nav {
        display: none !important;
    }
    
    /* Mobile menu */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        transition: right 0.3s ease;
        z-index: 999999;
        overflow-y: auto;
    }
    
    [data-theme="dark"] .mobile-menu {
        background: #1a1d29;
        border-left: 1px solid rgba(139, 149, 196, 0.2);
    }
    
    .mobile-menu.active {
        right: 0;
    }
    
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 999998;
        display: none;
    }
    
    .mobile-menu-overlay.active {
        display: block;
    }
}

/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch */
    *:hover {
        transform: none !important;
    }
    
    /* Larger tap targets */
    button,
    a {
        padding: 0.75rem 1.5rem;
    }
    
    /* Disable cursor effects */
    .cursor-circle,
    .cursor-glow {
        display: none !important;
    }
}

/* ==========================================
   SAFE AREA INSETS (iPhone X+)
   ========================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .hero-section,
    header,
    footer {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */
@media (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.3s !important;
    }
    
    /* Disable complex animations */
    @keyframes float-organic,
    @keyframes opacity-pulse,
    @keyframes beaming-effect {
        from, to {
            transform: none;
            opacity: 1;
        }
    }
}

/* ==========================================
   ACCESSIBILITY - LARGE TEXT MODE
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================
   PRINT STYLES (BONUS)
   ========================================== */
@media print {
    .no-print,
    nav,
    footer,
    .floating-phrase,
    .cursor-circle {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}