/*==================================================================
  MOBILE FORMATTING FIXES
  - Fixes layout/spacing issues on mobile devices
  - Ensures proper responsive behavior
  - Prevents horizontal scrolling
==================================================================*/

/* Root Level Mobile Fixes */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* HIDE CUSTOM CURSOR ON ALL TOUCH DEVICES */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
    .cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
}

/* Container Fixes - Prevent Overflow - MOBILE ONLY */
@media screen and (max-width: 991px) {
    .container,
    .row,
    [class*="container"],
    [class*="-container"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Image and Media Fixes - ALL DEVICES */
img,
video,
iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Table Fixes - MOBILE ONLY */
@media screen and (max-width: 991px) {
    table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
}

/*==================================================================
  MOBILE SPECIFIC BREAKPOINTS
==================================================================*/

/* Extra Small Devices (phones, less than 576px) */
@media screen and (max-width: 575px) {
    /* Text Readability */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Spacing Fixes */
    section,
    .section {
        padding: 30px 15px !important;
    }

    /* Header Mobile Fix */
    header {
        width: 100% !important;
        padding: 15px !important;
    }

    /* Navigation Mobile Fix */
    nav,
    .menu,
    .navigation {
        width: 100% !important;
    }

    /* Button Fixes */
    button,
    .btn,
    a.button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Form Fixes */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Grid Fixes */
    .grid,
    [class*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Flex Fixes */
    .flex,
    [class*="flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Card Fixes */
    .card,
    [class*="card"] {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
}

/* Small Devices (landscape phones, 576px to 767px) */
@media screen and (min-width: 576px) and (max-width: 767px) {
    body {
        font-size: 16px !important;
    }

    h1 {
        font-size: 32px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    section,
    .section {
        padding: 40px 20px !important;
    }
}

/* Medium Devices (tablets, 768px to 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    section,
    .section {
        padding: 50px 30px !important;
    }
}

/*==================================================================
  SPECIFIC COMPONENT FIXES
==================================================================*/

/* Hero Section Mobile */
@media screen and (max-width: 767px) {
    .hero-container,
    [class*="hero"] {
        min-height: auto !important;
        padding: 60px 15px !important;
    }

    .hero-container h1,
    [class*="hero"] h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
}

/* Service Cards Mobile */
@media screen and (max-width: 767px) {
    .service-solutions-card,
    .service-card,
    [class*="service"] {
        width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 20px 15px !important;
    }
}

/* Testimonial Mobile */
@media screen and (max-width: 767px) {
    .testimonial-container,
    [class*="testimonial"] {
        padding: 30px 15px !important;
    }
}

/* Footer Mobile */
@media screen and (max-width: 767px) {
    .footer-container,
    footer {
        padding: 30px 15px !important;
    }

    .footer-top-container,
    .footer-bottom-content {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
}

/* Contact Form Mobile */
@media screen and (max-width: 767px) {
    .contact-container,
    [class*="contact"] {
        padding: 30px 15px !important;
    }

    .contact-input-field-container {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* Gallery/Image Grid Mobile */
@media screen and (max-width: 767px) {
    .gallery-container,
    [class*="gallery"],
    .projects-container {
        padding: 30px 15px !important;
    }

    .gallery-card-container,
    .projects-card-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/*==================================================================
  TOUCH-FRIENDLY MOBILE OPTIMIZATIONS
==================================================================*/

@media screen and (max-width: 767px) {
    /* Larger touch targets */
    a,
    button,
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px !important;
    }

    /* Remove hover effects on mobile */
    *:hover {
        transform: none !important;
    }

    /* Prevent text zoom on inputs */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/*==================================================================
  FIX COMMON MOBILE LAYOUT ISSUES
==================================================================*/

/* Fix negative margins causing overflow */
@media screen and (max-width: 767px) {
    .row,
    [class*="row"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix absolute positioning on mobile */
    [style*="position: absolute"] {
        position: relative !important;
    }
}

/*==================================================================
  PREVENT HORIZONTAL SCROLL
==================================================================*/

@media screen and (max-width: 991px) {
    /* Hide overflow on mobile */
    body,
    html {
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Fix for elements that extend beyond viewport */
    * {
        box-sizing: border-box !important;
    }

    /* Container max-width fix */
    .container,
    .wrapper,
    main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/*==================================================================
  ENHANCED MOBILE RESPONSIVE FIXES
==================================================================*/

/* MOBILE - All devices under 768px */
@media screen and (max-width: 767px) {
    /* Header & Navigation */
    header,
    .top-navbar {
        width: 100% !important;
        padding: 10px 15px !important;
    }

    .hero-slide,
    .hero-container {
        height: auto !important;
        min-height: 400px !important;
    }

    /* Typography Scaling */
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    /* Service & Product Cards */
    .service-solutions-card,
    .our-expert-grid-card,
    .projects-card {
        max-width: 100% !important;
        margin: 0 auto 20px !important;
    }

    /* Slick Slider Mobile Fix */
    .slick-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .slick-slide {
        padding: 0 10px !important;
    }

    /* Fix Images */
    .service-solutions-img,
    .projects-card img,
    .our-expert-grid-card img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Grid to Single Column */
    .clean-energy-right-container,
    .our-expert-grid-container,
    .how-it-works-grid-container,
    .pricing-plan-grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Testimonial Section */
    .testimonial-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .testimonial-left-container,
    .testimonial-right-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Footer Responsive */
    .footer-top-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-top-left-container,
    .footer-top-right-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* About Section Mobile */
    .why-choose-us-container,
    .clean-energy-container,
    .about-container {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .why-choose-us-left-container,
    .clean-energy-left-container,
    .about-left-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Contact Form */
    .contact-container {
        flex-direction: column !important;
    }

    .contact-left-container,
    .contact-right-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Fix Padding/Margin on Mobile */
    section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Gallery Images - Fixed Size */
    .gallery-img,
    .projects-card img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
    }
}

/* EXTRA SMALL MOBILE - Under 480px */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    /* Buttons Full Width */
    .get-a-quote-btn,
    .our-services-btn,
    .contact-us-today {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove large padding */
    .hero-container,
    .about-container,
    .service-solutions-section {
        padding: 30px 15px !important;
    }

    /* Smaller Images on Very Small Screens */
    .clean-energy-star-container img {
        width: 250px !important;
        height: 250px !important;
    }

    /* Footer Compact */
    .fb {
        grid-template-columns: 1fr !important;
        padding: 20px 15px !important;
    }
}

/*==================================================================
  IPHONE SPECIFIC FIXES (iPhone 12 Pro, 13 Pro, 14 Pro, etc.)
==================================================================*/

/* iPhone 12 Pro / 13 Pro / 14 Pro - 390x844 */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 428px)
  and (-webkit-min-device-pixel-ratio: 2) {

    /* FORCE HIDE CURSOR */
    .cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Fix container widths */
    body, html {
        width: 100vw !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Ensure all sections fit */
    section,
    .container,
    .service-solutions-section,
    .projects-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix hero height on iPhone */
    .hero-slide {
        height: 60vh !important;
        min-height: 500px !important;
    }

    /* Responsive typography for iPhone */
    h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    /* Grid layouts to single column */
    .our-expert-grid-container {
        grid-template-columns: 1fr !important;
    }

    /* Slider adjustments */
    .slick-slider,
    .projects-slider,
    .service-solutions-autoplay {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix footer on iPhone */
    .footer-top-container {
        flex-direction: column !important;
    }
}

/* ALL iOS DEVICES - Universal Fix */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}