/* ============================================================================
   SAT INDIA - MOBILE RESPONSIVE FIXES
   
   Purpose: Make the entire website mobile-responsive
   - Fix navigation layout
   - Fix hero background images
   - Fix video backgrounds  
   - Fix all content to fit mobile screens
   - Make everything automatically adjust based on screen size
   
   NOTE: Logo sizing is controlled in style.css (NOT here!)
   
/* ============================================================================
   1. NAVBAR - MOBILE FIXES (No Logo Sizing - That's in style.css)
   Keep navigation horizontal on ALL pages - single row layout
============================================================================ */

/* Tablet - Keep horizontal */
@media (max-width: 1024px) {
    .navbar {
        padding: 0 15px;
        height: auto;
        min-height: 70px;
        flex-wrap: nowrap;  /* Keep in one row */
    }
    
    .nav-right {
        gap: 12px;
    }
    
    .nav-right a {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
}

/* Mobile - Keep ALL links in ONE ROW (like How It Works page) */
@media (max-width: 768px) {
    .navbar {
        padding: 8px 10px;
        justify-content: space-between;  /* Logo left, links right */
        flex-wrap: nowrap;  /* Don't wrap - keep in one row */
        gap: 8px;
        height: auto;
        min-height: 60px;
    }
    
    .nav-right {
        display: flex;
        justify-content: flex-end;  /* Align links to right */
        flex-wrap: wrap;  /* Allow links to wrap if needed */
        gap: 6px;
        max-width: 70%;  /* Give space for logo */
    }
    
    .nav-right li {
        flex: 0 0 auto;
    }
    
    .nav-right a {
        font-size: 0.75rem;  /* Smaller text to fit all links */
        padding: 5px 7px;
        white-space: nowrap;
    }
}

/* Small Mobile - Even smaller text */
@media (max-width: 480px) {
    .navbar {
        padding: 6px 8px;
    }
    
    .nav-right {
        gap: 4px;
        max-width: 65%;
    }
    
    .nav-right a {
        font-size: 0.7rem;
        padding: 4px 6px;
    }
}

/* Very Small Phones - Minimal padding */
@media (max-width: 380px) {
    .navbar {
        padding: 5px 6px;
    }
    
    .nav-right {
        gap: 3px;
    }
    
    .nav-right a {
        font-size: 0.65rem;
        padding: 4px 5px;
    }
}

/* ============================================================================
   2. HOME PAGE HERO - BACKGROUND IMAGE FIX
============================================================================ */

.hero {
    min-height: 100vh !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 60px 20px !important;
}

@media (max-width: 768px) {
    .hero {
        min-height: 100svh !important;
        padding: 40px 15px !important;
    }
    
    .hero-content {
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    .hero p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 80vh !important;
        padding: 30px 10px !important;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
    }
    
    .hero p {
        font-size: 0.9rem !important;
    }
}

/* ============================================================================
   3. VIDEO HERO SECTIONS - CRITICAL FIXES
   Fixes for: how-it-works, privacy-law, join-us pages
============================================================================ */

.video-hero,
.privacy-hero,
.join-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

.hero-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    animation: none !important;
}

@media (max-width: 1024px) {
    .video-hero,
    .privacy-hero,
    .join-hero {
        min-height: 100svh !important;
    }
    
    .hero-video {
        transform: translate(-50%, -50%) scale(1) !important;
        filter: brightness(0.85) !important;
    }
}

@media (max-width: 768px) {
    .video-hero,
    .privacy-hero,
    .join-hero {
        min-height: 100svh !important;
        max-height: 100svh !important;
    }
    
    .hero-video {
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .hero-content {
        padding: 40px 20px !important;
        max-width: 100% !important;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 30px 15px !important;
    }
    
    .hero-content h1 {
        font-size: 1.6rem !important;
    }
    
    .hero-content p {
        font-size: 0.9rem !important;
    }
}

.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* ============================================================================
   4. PHONE LOSS SECTION - MOBILE LAYOUT
============================================================================ */

@media (max-width: 1024px) {
    .phone-loss {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 40px 30px !important;
    }
    
    .phone-loss img {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

@media (max-width: 768px) {
    .phone-loss {
        padding: 30px 20px !important;
        gap: 20px !important;
    }
    
    .phone-loss h2 {
        font-size: 1.8rem !important;
    }
    
    .phone-loss img {
        width: 90% !important;
    }
    
    .text-block {
        padding: 20px !important;
    }
}

/* ============================================================================
   5. FEATURE CARDS - MOBILE GRID
============================================================================ */

@media (max-width: 1024px) {
    section.feature.active {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 30px !important;
        padding: 40px 20px !important;
    }
}

@media (max-width: 768px) {
    section.feature.active {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 30px 15px !important;
    }
    
    section.feature.active > .feature {
        padding: 24px 18px !important;
    }
}

/* ============================================================================
   6. HOW IT WORKS PAGE - IMAGE FIXES
============================================================================ */

.how-visuals {
    padding: 40px 20px !important;
}

@media (max-width: 768px) {
    .how-visuals {
        grid-template-columns: 1fr !important;
        padding: 30px 15px !important;
        gap: 25px !important;
    }
    
    .image-preview {
        margin: 20px auto !important;
    }
    
    .image-preview img {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* ============================================================================
   7. JOIN US PAGE - MOBILE FIXES
============================================================================ */

@media (max-width: 1024px) {
    .core-card {
        padding: 60px 40px !important;
    }
    
    .core-card h3 {
        font-size: 2rem !important;
    }
    
    .pill-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .join-hero {
        height: 100svh !important;
    }
    
    .core-card {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }
    
    .core-card h3 {
        font-size: 1.6rem !important;
        margin-bottom: 30px !important;
    }
    
    .pill-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .pill {
        padding: 18px 24px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .core-card {
        padding: 25px 15px !important;
    }
    
    .pill {
        padding: 15px 20px !important;
        font-size: 0.95rem !important;
    }
}

/* ============================================================================
   8. SUBSCRIBE SECTION - MOBILE FORM
============================================================================ */

@media (max-width: 768px) {
    .join-subscribe {
        padding: 50px 20px !important;
    }
    
    .subscribe-form {
        width: 100% !important;
    }
    
    .subscribe-form input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        font-size: 0.95rem !important;
    }
    
    .subscribe-form button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 24px !important;
    }
}

/* ============================================================================
   9. WHY SAT PAGE - INFO SECTION
============================================================================ */

@media (max-width: 1024px) {
    .info-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .info-image-box {
        order: -1;
    }
    
    .info-image-box img {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .info-section {
        padding: 40px 20px !important;
    }
    
    .info-text-flag p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
}

/* ============================================================================
   10. PRIVACY & LAW PAGE - MOBILE GRID
============================================================================ */

@media (max-width: 1024px) {
    .privacy-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 30px !important;
    }
}

@media (max-width: 768px) {
    .privacy-section {
        padding: 50px 20px !important;
    }
    
    .privacy-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .privacy-card {
        padding: 24px !important;
    }
    
    .section-title {
        font-size: 1.2rem !important;
        padding: 14px 20px !important;
        margin-bottom: 30px !important;
    }
}

/* ============================================================================
   11. FOOTER - MOBILE ADJUSTMENTS
============================================================================ */

@media (max-width: 768px) {
    .site-footer {
        padding: 0.5rem 1rem !important;
    }
    
    .footer-bottom {
        padding: 1rem 1rem !important;
    }
    
    .footer-social,
    .footer-legal,
    .footer-links {
        font-size: 0.8rem !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
}

/* ============================================================================
   12. GENERAL MOBILE TYPOGRAPHY
============================================================================ */

@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
}

/* ============================================================================
   13. IMAGE VIEWER - MOBILE OPTIMIZATION
============================================================================ */

@media (max-width: 768px) {
    .image-viewer img {
        max-width: 95vw !important;
        max-height: 80vh !important;
    }
    
    .viewer-close {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        top: 10px !important;
        right: 10px !important;
    }
}

/* ============================================================================
   14. PREVENT HORIZONTAL SCROLL (CRITICAL)
============================================================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

* {
    max-width: 100%;
}

img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================================================
   15. TOUCH DEVICE OPTIMIZATIONS
============================================================================ */

@media (max-width: 768px) {
    a, button, input, .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    html {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ============================================================================
   16. LANDSCAPE MOBILE FIX
============================================================================ */

@media (max-width: 900px) and (max-height: 500px) {
    .hero,
    .video-hero,
    .privacy-hero,
    .join-hero {
        min-height: 100vh !important;
        padding: 30px 20px !important;
    }
    
    .hero-content {
        padding: 20px !important;
    }
    
    .hero-content h1 {
        font-size: 1.5rem !important;
    }
}

/* ============================================================================
   17. ACCESSIBILITY - ZOOM SAFETY
============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   18. SAFE SCROLLING
============================================================================ */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================================
   19. FINAL SAFETY NET
============================================================================ */

@media (max-width: 768px) {
    section, div, main, article, aside {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .btn, .primary, .secondary {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }
    
    .card, .feature, .privacy-card, .info-card {
        max-width: 100% !important;
    }
}

/* ============================================================================
   END OF MOBILE RESPONSIVE FIXES
   
   LOGO SIZING: Controlled in style.css (NOT in this file!)
   
   This file should be placed in: /static/css/mobile-responsive-fixes.css
============================================================================ */