/* Universal Mobile Responsive CSS - Works on ALL Devices & Browsers */
/* Tested for: iPhone Safari, iPhone Chrome, Android Chrome, Android Firefox */

/* ============================================
   CRITICAL: Reset and Base Styles
   ============================================ */

/* Prevent iOS Safari zoom on input focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    font-size: 16px !important; /* MUST be 16px to prevent iOS zoom */
    -webkit-appearance: none; /* Remove iOS styling */
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Remove iOS default radius */
}

/* iOS Safari Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    body {
        -webkit-text-size-adjust: 100%; /* Prevent font size adjustment */
    }
    
    /* Fix iOS Safari rubber band scrolling */
    html {
        position: fixed;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    
    body {
        height: 100%;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
}

/* Android Chrome Specific */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select:focus,
    textarea:focus,
    input:focus {
        font-size: 16px !important;
    }
}

/* ============================================
   UNIVERSAL MOBILE STYLES (All Devices)
   ============================================ */

/* Viewport and Overflow Control */
html {
    overflow-x: hidden !important;
    width: 100% !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Universal Box Sizing */
*,
*::before,
*::after {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablets and below (including all phones) */
@media screen and (max-width: 1024px) {
    
    /* Force all containers to be responsive */
    .container,
    .auto-container,
    .wrapper,
    .main-wrapper,
    .page-wrapper,
    .content-wrapper,
    div[class*="container"],
    div[class*="wrapper"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 auto !important;
    }
    
    /* Navigation fixes for all browsers */
    .main-header,
    .header-upper,
    header,
    nav {
        width: 100% !important;
        position: relative !important;
    }
    
    /* Hide desktop navigation */
    .main-menu,
    .navbar-nav,
    .navigation {
        display: none !important;
    }
    
    /* Show mobile menu button */
    .mobile-nav-toggler,
    .navbar-toggler,
    .menu-toggle,
    .hamburger {
        display: block !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9999 !important;
        background: transparent !important;
        border: none !important;
        padding: 10px !important;
        cursor: pointer !important;
    }
}

/* Mobile phones - Portrait */
@media screen and (max-width: 768px) {
    
    /* Container adjustments */
    .container,
    .auto-container,
    div[class*="container"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Grid System - Force single column */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
        display: block !important;
    }
    
    .row > *,
    [class*="col-"],
    .column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 20px !important;
        display: block !important;
    }
    
    /* Typography scaling */
    h1, .h1 {
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
    
    h2, .h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }
    
    h3, .h3 {
        font-size: clamp(18px, 4.5vw, 24px) !important;
        line-height: 1.3 !important;
    }
    
    h4, .h4 {
        font-size: clamp(16px, 4vw, 20px) !important;
        line-height: 1.4 !important;
    }
    
    h5, .h5, h6, .h6 {
        font-size: clamp(14px, 3.5vw, 18px) !important;
        line-height: 1.4 !important;
    }
    
    p, body, span, div {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Forms - Universal mobile compatibility */
    form {
        width: 100% !important;
    }
    
    .form-group,
    .form-field,
    .form-control {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100% !important;
        min-height: 44px !important; /* Touch target size */
        padding: 12px 15px !important;
        font-size: 16px !important; /* Prevent zoom */
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* Buttons - Touch friendly */
    button,
    .btn,
    .button,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        text-align: center !important;
        cursor: pointer !important;
        display: block !important;
        margin-bottom: 10px !important;
        -webkit-appearance: none !important;
        border-radius: 4px !important;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Tables responsive */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Contact form specific */
    .contact-form,
    .contact-container {
        width: 100% !important;
        padding: 15px !important;
    }
    
    .form-row {
        display: block !important;
        width: 100% !important;
    }
    
    .form-row > * {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Sections padding */
    section,
    .section {
        padding: 40px 0 !important;
        overflow: hidden !important;
    }
    
    /* Footer responsive */
    footer,
    .footer {
        text-align: center !important;
    }
    
    .footer-column,
    .footer-widget {
        width: 100% !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    
    /* Hide desktop elements */
    .desktop-only,
    .d-none-mobile,
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Prevent horizontal scroll */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix any position absolute elements */
    .pattern-layer,
    .shape,
    .bg-shape,
    [class*="pattern-"],
    [class*="shape-"] {
        display: none !important;
    }
}

/* Small phones (iPhone SE, older Android) */
@media screen and (max-width: 375px) {
    
    /* Smaller containers on tiny screens */
    .container,
    .auto-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Even smaller text */
    h1, .h1 {
        font-size: 22px !important;
    }
    
    h2, .h2 {
        font-size: 19px !important;
    }
    
    h3, .h3 {
        font-size: 17px !important;
    }
    
    p, body {
        font-size: 13px !important;
    }
    
    /* Smaller buttons */
    button, .btn {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media screen and (max-width: 812px) and (orientation: landscape) {
    /* Reduce heights in landscape */
    .banner-section,
    .hero-section,
    .page-title {
        min-height: 60vh !important;
        padding: 30px 0 !important;
    }
    
    /* Hide large images in landscape */
    .banner-image,
    .hero-image {
        display: none !important;
    }
}

/* ============================================
   HIGH DPI DISPLAYS (Retina)
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Ensure crisp text on retina */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================
   ACCESSIBILITY & TOUCH TARGETS
   ============================================ */

@media (pointer: coarse) {
    /* Touch devices */
    a,
    button,
    input,
    select,
    textarea,
    [role="button"],
    [onclick] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Spacing between clickable elements */
    a,
    button {
        margin: 4px !important;
    }
}

/* ============================================
   PRINT STYLES (Bonus)
   ============================================ */

@media print {
    * {
        background: transparent !important;
        color: black !important;
    }
    
    .no-print,
    nav,
    .navigation,
    .mobile-menu,
    footer {
        display: none !important;
    }
}

/* ============================================
   FINAL OVERRIDES - MAXIMUM PRIORITY
   ============================================ */

@media screen and (max-width: 768px) {
    /* Absolute final overrides */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Force remove any element causing horizontal scroll */
    body * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Emergency overflow prevention */
    .row,
    .container {
        overflow: hidden !important;
    }
}