/*
============================================
ELFI'S ANGELS - MOBILE OPTIMIZATION CSS
============================================
Critical mobile-specific fixes for performance
This file only loads on mobile devices (max-width: 768px)
Main purpose: Disable all animations for better performance

Key Features:
- Complete animation removal for performance
- Mobile-specific layout optimizations
- Touch-friendly interface improvements
- Accessibility enhancements for mobile
- Performance-first approach

Issue Solved: Mobile devices showing blank screen due to 
animation conflicts and performance issues

Author: Development Team
Last Updated: August 2025
Version: 2.0 (Mobile Performance Focus)
============================================
*/

/* ============================================ */
/* MOBILE-ONLY MEDIA QUERY */
/* ============================================ */
/* This entire file only applies to mobile devices */
/* Using max-width: 768px to target phones and small tablets */

@media only screen and (max-width: 768px) {
    
    /* ============================================ */
    /* 1. CRITICAL: DISABLE ALL ANIMATIONS */
    /* ============================================ */
    /* This is the most important fix for mobile performance */
    /* Removes all animations, transitions, and transforms */
    
    /* Universal animation removal - affects all elements */
    * {
        animation: none !important;                    /* Remove all keyframe animations */
        transition: none !important;                   /* Remove all CSS transitions */
        transform: none !important;                    /* Remove all transforms */
        animation-duration: 0s !important;            /* Force 0 second duration */
        transition-duration: 0s !important;           /* Force 0 second transitions */
        animation-delay: 0s !important;               /* Remove animation delays */
        transition-delay: 0s !important;              /* Remove transition delays */
        animation-fill-mode: none !important;         /* Disable fill modes */
        animation-iteration-count: 0 !important;      /* Stop iteration counts */
        animation-play-state: paused !important;      /* Pause any animations */
}


    /* Remove animations from pseudo-elements */
    *::before, *::after {
        animation: none !important;                    /* Remove pseudo-element animations */
        transition: none !important;                   /* Remove pseudo-element transitions */
        transform: none !important;                    /* Remove pseudo-element transforms */
    }
    
    /* ============================================ */
    /* 2. AOS (ANIMATE ON SCROLL) LIBRARY FIXES */
    /* ============================================ */
    /* Force AOS elements to be visible and static */
    
    [data-aos] {
        opacity: 1 !important;                        /* Make AOS elements visible */
        transform: none !important;                   /* Remove AOS transforms */
        animation: none !important;                   /* Remove AOS animations */
        transition: none !important;                  /* Remove AOS transitions */
        visibility: visible !important;               /* Force visibility */
    }
    
    /* ============================================ */
    /* 3. BODY AND PAGE FOUNDATION */
    /* ============================================ */
    /* Ensure basic page structure is stable on mobile */
    
    body {
        overflow-x: hidden !important;                /* Prevent horizontal scroll */
        background: #0a0a0a !important;              /* Consistent dark background */
        color: white !important;                      /* Ensure readable text */
        min-height: 100vh !important;                /* Full viewport height */
        opacity: 1 !important;                       /* Force body visibility */
        transform: none !important;                  /* Remove any body transforms */
    }
    
    /* ============================================ */
    /* 4. MOBILE NAVIGATION SYSTEM */
    /* ============================================ */
    /* Optimized navigation for touch devices */
    
    /* Fixed navigation bar */
    .navbar {
        display: block !important;                    /* Ensure navbar is visible */
        position: fixed !important;                   /* Keep at top when scrolling */
        top: 0 !important;                           /* Position at very top */
        width: 100% !important;                      /* Full width */
        background: rgba(0, 0, 0, 0.95) !important; /* Semi-transparent background */
        padding: 15px !important;                    /* Touch-friendly padding */
        z-index: 1000 !important;                    /* Above all other content */
    }
    
    /* Navigation container layout */
    .nav-container {
        display: flex !important;                     /* Flex layout for navbar */
        justify-content: space-between !important;    /* Logo left, menu right */
        align-items: center !important;              /* Vertically center items */
    }
    
    /* Logo styling for mobile */
    .logo, .logo-svg {
        display: block !important;                    /* Ensure logo is visible */
        color: white !important;                      /* White logo text */
        height: 40px !important;                     /* Appropriate mobile size */
    }
    
    /* Hamburger menu button */
    .hamburger {
        display: flex !important;                     /* Show hamburger on mobile */
        flex-direction: column !important;           /* Stack bars vertically */
        width: 30px !important;                      /* Touch-friendly width */
        height: 25px !important;                     /* Touch-friendly height */
        justify-content: space-between !important;    /* Space bars evenly */
        cursor: pointer !important;                  /* Indicate clickable */
        background: none !important;                 /* No background */
        border: none !important;                     /* No border */
        padding: 0 !important;                       /* No extra padding */
    }
    
    /* Hamburger menu bars */
    .hamburger .bar {
        width: 100% !important;                      /* Full width bars */
        height: 3px !important;                      /* Visible thickness */
        background: white !important;                /* White color for contrast */
        display: block !important;                   /* Ensure bars are visible */
        transition: none !important;                 /* No animations */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
    }
    
    /* Mobile navigation menu */
    .nav-menu {
        position: fixed !important;                   /* Fixed positioning */
        left: -100% !important;                      /* Hidden by default */
        top: 60px !important;                        /* Below navbar */
        width: 100% !important;                      /* Full screen width */
        height: calc(100vh - 60px) !important;       /* Remaining screen height */
        background: rgba(0, 0, 0, 0.95) !important;  /* Dark background */
        display: flex !important;                    /* Flex layout */
        flex-direction: column !important;           /* Vertical menu items */
        justify-content: flex-start !important;       /* Align to top */
        align-items: center !important;              /* Center horizontally */
        padding: 2rem 0 !important;                  /* Top/bottom padding */
        transition: none !important;                 /* No animations */
        list-style: none !important;                 /* Remove list bullets */
        z-index: 999 !important;                     /* Below navbar, above content */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
    }
    
    /* Active state for mobile menu (when hamburger is clicked) */
    .nav-menu.active {
        left: 0 !important;                          /* Slide into view */
        transition: none !important;                 /* No animations */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
    }
    
    /* Navigation menu items */
    .nav-menu li {
        margin: 1rem 0 !important;                   /* Vertical spacing */
        width: 90% !important;                       /* Nearly full width */
    }
    
    /* Navigation links styling */
    .nav-link {
        display: block !important;                   /* Block level for full touch area */
        color: white !important;                     /* White text */
        text-decoration: none !important;            /* No underlines */
        padding: 1rem !important;                    /* Touch-friendly padding */
        font-size: 1.2rem !important;               /* Readable size */
        text-align: center !important;              /* Center text */
        border-radius: 8px !important;              /* Rounded corners */
        transition: background 0.3s !important;      /* Only background transition */
    }
    
    /* Navigation link hover/touch state */
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.1) !important; /* Light background on touch */
        transition: none !important;                 /* No other transitions */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
    }
    
    /* ============================================ */
    /* 5. MOBILE HERO SECTION OPTIMIZATION */
    /* ============================================ */
    /* Hero section optimized for mobile viewing */
    
    .hero {
        display: flex !important;                     /* Flex layout */
        flex-direction: column !important;           /* Stack vertically */
        padding: 140px 20px 40px !important;         /* Account for navbar + proper spacing */
        min-height: 100vh !important;                /* Full screen height */
        text-align: center !important;               /* Center all content */
        justify-content: center !important;          /* Center vertically */
        background: #0a0a0a !important;              /* Dark background */
        opacity: 1 !important;                       /* Force visibility */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
        transition: none !important;                 /* No transitions */
    }
    
    /* Hero content container */
    .hero-content {
        display: block !important;                   /* Block display */
        margin-bottom: 2rem !important;              /* Space before image */
        opacity: 1 !important;                       /* Force visibility */
        transform: none !important;                  /* No transforms */
        animation: none !important;                  /* No animations */
        transition: none !important;                 /* No transitions */
    }
    
    /* Hero main heading */
    .hero-content h1 {
        display: block !important;                   /* Block display */
        font-size: 2.2rem !important;               /* Mobile-optimized size */
        color: white !important;                     /* White text */
        margin-bottom: 1rem !important;              /* Space below */
        line-height: 1.3 !important;                /* Tight line height */
    }
    
    /* Hero paragraphs */
    .hero-content p {
        display: block !important;                   /* Block display */
        font-size: 1rem !important;                 /* Readable size */
        color: #ccc !important;                      /* Light gray text */
        margin-bottom: 1rem !important;              /* Space below */
    }

    .hero-content p.breed-type {
        display: inline-flex !important;
        width: fit-content !important;
        margin: 0 auto 1.5rem !important;
        padding: 0.7rem 1rem !important;
        color: #ffffff !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
    }
    
    /* Hero image container */
    .hero-image {
        display: block !important;                   /* Block display */
        padding: 1rem 0 !important;                  /* Top/bottom padding */
    }
    
    /* Hero image styling */
    .hero-image img {
        max-width: 100% !important;                  /* Responsive width */
        max-height: 40vh !important;                 /* Limit height */
        border-radius: 15px !important;              /* Rounded corners */
    }
    
    /* Hero buttons container */
    .hero-buttons {
        display: flex !important;                    /* Flex layout */
        flex-direction: column !important;           /* Stack vertically */
        gap: 1rem !important;                        /* Space between buttons */
        align-items: center !important;              /* Center horizontally */
    }
    
    /* Button styling for mobile */
    .btn {
        display: inline-block !important;            /* Inline-block for centering */
        padding: 15px 30px !important;               /* Touch-friendly padding */
        background: #ff6b6b !important;              /* Bright accent color */
        color: white !important;                     /* White text */
        text-decoration: none !important;            /* No underlines */
        border-radius: 25px !important;              /* Rounded button */
        font-size: 1rem !important;                 /* Readable size */
        min-height: 44px !important;                /* Touch-friendly height */
        width: auto !important;                      /* Auto width */
        max-width: 280px !important;                /* Maximum width */
    }
    
    /* ============================================ */
    /* 6. CONTENT SECTIONS MOBILE OPTIMIZATION */
    /* ============================================ */
    /* General section optimizations for mobile */
    
    /* Main content sections */
    .about, .puppies, .contact {
        display: block !important;                   /* Block display */
        padding: 40px 20px !important;               /* Consistent padding */
    }
    
    /* About section content */
    .about-content {
        display: block !important;                   /* Block layout */
    }
    
    /* Puppies grid for mobile */
    .puppies-grid {
        display: grid !important;                    /* Grid layout */
        grid-template-columns: 1fr !important;       /* Single column */
        gap: 1.5rem !important;                      /* Space between cards */
    }
    
    /* Individual puppy cards */
    .puppy-card {
        display: block !important;                   /* Block display */
        background: #1a1a1a !important;              /* Dark card background */
        border-radius: 15px !important;              /* Rounded corners */
        overflow: hidden !important;                 /* Clip content to border */
        margin-bottom: 1rem !important;              /* Space below each card */
    }
    
    /* ============================================ */
    /* 7. UNIVERSAL MOBILE FIXES */
    /* ============================================ */
    /* Final catch-all fixes for mobile */
    
    /* Force all sections to be visible */
    section {
        display: block !important;                   /* Ensure all sections show */
    }

    section.breed-programs,
    section.breed-program-row {
        display: grid !important;                    /* Keep parent card ordering on mobile */
    }

    html body .floating-buttons.floating-buttons--compact,
    html body div.floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons--compact {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body .scroll-to-top.scroll-to-top--content-hidden,
    html body button.scroll-to-top.scroll-to-top.scroll-to-top--content-hidden {
        opacity: 0 !important;                       /* Avoid covering parent card media */
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Container responsiveness */
    .container {
        max-width: 100% !important;                  /* Full width on mobile */
        padding: 0 15px !important;                  /* Side padding for readability */
    }
    
} /* End of mobile media query */

@media (max-width: 768px) {
    html body #home.hero {
        padding: 100px 16px 20px !important;
    }

    html body #home .hero-content {
        margin-bottom: 0.6rem !important;
    }

    html body #home .hero-content p {
        margin-bottom: 0.6rem !important;
    }

    html body #home .hero-content p.breed-type {
        margin-bottom: 0.75rem !important;
    }

    html body #home .hero-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        flex-direction: initial !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }

    html body #home .hero-buttons .btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0.75rem 0.5rem !important;
        border-radius: 8px !important;
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }

    html body #home .hero-image {
        padding: 0.5rem 0 0 !important;
    }

    html body #home .hero-image img {
        max-height: 25vh !important;
        object-fit: cover !important;
    }

    html body .scroll-to-top {
        display: none !important;
    }

    html body .floating-buttons,
    html body div.floating-buttons.floating-buttons.floating-buttons.floating-buttons.floating-buttons {
        position: fixed !important;
        right: 12px !important;
        bottom: 64px !important;
        z-index: 2147483647 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    html body .floating-whatsapp,
    html body a.floating-whatsapp,
    html body .floating-whatsapp[style],
    html body a.floating-whatsapp[style],
    .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp,
    .floating-whatsapp.floating-whatsapp.floating-whatsapp.floating-whatsapp[style] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 50% !important;
        background: #1fa95a !important;
        border: 2px solid #1fa95a !important;
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 0 8px 20px rgba(31, 169, 90, 0.2) !important;
    }

    html body .floating-puppies,
    html body a.floating-puppies,
    html body .floating-puppies[style],
    html body a.floating-puppies[style],
    .floating-puppies.floating-puppies.floating-puppies.floating-puppies,
    .floating-puppies.floating-puppies.floating-puppies.floating-puppies[style] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: 0 8px 20px rgba(255, 107, 107, 0.18) !important;
    }

    html body .floating-buttons .floating-text {
        display: none !important;
    }
}