/* Mobile Responsive Fixes for Royal Master Website */
/* Created: January 2026 */
/* Purpose: Fix background image display issues on mobile devices */

/* ========================================
   MOBILE RESPONSIVE BACKGROUND FIXES
   ======================================== */

/* Ensure all background images display properly on mobile */
@media (max-width: 767px) {
    
    /* Fix for hero/header sections with background images */
    [class*="elementor-section"][data-settings*="background_background"] {
        background-position: center center !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }
    
    /* Specific fix for sections with motion effects */
    [class*="elementor-motion-effects-layer"],
    [class*="elementor-motion-effects-container"] {
        background-position: center center !important;
        background-size: cover !important;
    }
    
    /* Fix for elements that have background images */
    .elementor-background-overlay {
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Ensure full-width sections display properly */
    .elementor-section-full_width {
        overflow: hidden;
    }
    
    /* Fix for any sections with parallax on mobile */
    [data-settings*="background_motion_fx_motion_fx_scrolling"] {
        background-attachment: scroll !important;
    }
}

/* ========================================
   TABLET RESPONSIVE BACKGROUND FIXES
   ======================================== */

/* Tablet specific fixes (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* Ensure background images are properly sized on tablets */
    [class*="elementor-section"][data-settings*="background_background"] {
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Fix parallax issues on tablets */
    [data-settings*="background_motion_fx_motion_fx_scrolling"] {
        background-attachment: scroll !important;
    }
}

/* ========================================
   GENERAL RESPONSIVE IMPROVEMENTS
   ======================================== */

/* Ensure images don't overflow on small screens */
@media (max-width: 767px) {
    
    /* Image containers */
    .elementor-widget-image img,
    .elementor-image img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* Column padding adjustments for mobile */
    .elementor-column-wrap,
    .elementor-widget-wrap {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Ensure text is readable on mobile */
    .elementor-heading-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Adjust section padding for mobile */
    .elementor-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Ensure buttons are properly sized on mobile */
    .elementor-button,
    .btn {
        white-space: normal;
        line-height: 1.4;
        padding: 12px 20px;
    }
}

/* ========================================
   SPECIFIC PAGE FIXES
   ======================================== */

/* About Page - Hero Section */
@media (max-width: 767px) {
    .elementor-7816 .elementor-element.elementor-element-da7ef1f {
        min-height: 400px;
        padding: 100px 15px 80px 15px !important;
    }
    
    /* Ensure Emergency Response section displays properly */
    .elementor-7816 .elementor-element.elementor-element-12696c66 {
        min-height: 350px;
        padding: 100px 15px 100px 15px !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* Emergency Response Page - Hero Section */
@media (max-width: 767px) {
    .elementor-7868 .elementor-element.elementor-element-36640a42 {
        min-height: 400px;
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* ========================================
   TEXT VISIBILITY FIXES
   ======================================== */

@media (max-width: 767px) {
    
    /* Ensure white text on dark backgrounds is visible */
    .invert .elementor-heading-title,
    .elementor-background-overlay + * .elementor-heading-title {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    /* Adjust font sizes for better mobile readability */
    .elementor-heading-title {
        font-size: clamp(24px, 5vw, 42px) !important;
        line-height: 1.3 !important;
    }
    
    h2.elementor-heading-title {
        font-size: clamp(20px, 4vw, 32px) !important;
    }
    
    h3.elementor-heading-title {
        font-size: clamp(18px, 3.5vw, 28px) !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce animation complexity on mobile for better performance */
@media (max-width: 767px) {
    
    /* Simplify transitions on mobile */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable parallax effects on mobile for better performance */
    [data-parallax="true"],
    [data-settings*="background_motion_fx_motion_fx_scrolling"] {
        background-attachment: scroll !important;
        transform: none !important;
    }
}