/* Critical Mobile Override Styles - Force Mobile Responsiveness */
/* This file MUST be loaded LAST to override all other styles */

/* Reset box-sizing for all elements */
* {
    box-sizing: border-box !important;
}

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force all containers to be responsive */
@media only screen and (max-width: 768px) {
    
    /* Override any fixed widths */
    .container,
    .auto-container,
    .main-wrapper,
    .page-wrapper,
    [class*="container"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Fix navigation */
    .main-header,
    .header-upper,
    .main-menu,
    .navbar,
    nav {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .main-menu .navigation > li {
        display: block !important;
        width: 100% !important;
    }
    
    /* Show mobile menu toggle */
    .nav-outer .mobile-nav-toggler,
    .mobile-nav-toggler {
        display: block !important;
    }
    
    /* Hide desktop menu */
    .main-menu {
        display: none !important;
    }
    
    /* Fix all images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix all sections */
    section,
    .section,
    [class*="section"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 0 !important;
        overflow: hidden !important;
    }
    
    /* Fix grid layouts */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 30px !important;
    }
    
    /* Fix forms */
    .contact-form,
    .default-form,
    form {
        width: 100% !important;
    }
    
    .form-group {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix buttons */
    .btn,
    .theme-btn,
    button,
    input[type="submit"] {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        text-align: center !important;
    }
    
    /* Fix text sizes */
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    h4, .h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    
    p, body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Fix contact page specific elements */
    .contact-container {
        grid-template-columns: 1fr !important;
        padding: 15px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        display: block !important;
    }
    
    .form-row > * {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Fix hero/banner sections */
    .banner-section,
    .page-title,
    .hero-section {
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    /* Fix footer */
    .main-footer .widgets-section .column {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    
    /* Remove any absolute positioning that breaks mobile */
    .pattern-1,
    .pattern-2,
    .pattern-layer,
    [class*="pattern-"] {
        display: none !important;
    }
    
    /* Fix any overflow issues */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix tables */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* Hide elements that shouldn't show on mobile */
    .desktop-only,
    .hide-mobile {
        display: none !important;
    }
    
    /* Ensure mobile menu is styled */
    .mobile-menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 300px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 9999 !important;
        transition: all 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu.active {
        left: 0 !important;
    }
    
    /* Fix z-index issues */
    .mobile-nav-toggler {
        z-index: 9998 !important;
    }
}

/* Extra small devices (phones, less than 576px) */
@media only screen and (max-width: 575px) {
    
    /* Even smaller padding on very small screens */
    .container,
    .auto-container,
    [class*="container"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Smaller text on tiny screens */
    h1, .h1 {
        font-size: 24px !important;
    }
    
    h2, .h2 {
        font-size: 20px !important;
    }
    
    h3, .h3 {
        font-size: 18px !important;
    }
    
    /* Ensure touch targets are large enough */
    a, button, input, select, textarea {
        min-height: 44px !important;
    }
    
    /* Fix any remaining horizontal scroll issues */
    .inner-container,
    .outer-container,
    .content-box,
    [class*="box"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* iPhone 5/SE specific */
@media only screen and (max-width: 320px) {
    h1, .h1 {
        font-size: 22px !important;
    }
    
    h2, .h2 {
        font-size: 18px !important;
    }
    
    p, body {
        font-size: 13px !important;
    }
}

/* Landscape orientation fixes */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .banner-section,
    .hero-section {
        min-height: 70vh !important;
        padding: 30px 0 !important;
    }
}

/* Force override any !important declarations from other stylesheets */
@media only screen and (max-width: 768px) {
    * {
        max-width: 100vw !important;
    }
    
    body > * {
        overflow-x: hidden !important;
    }
}