/* EMERGENCY MOBILE FIX - Makes site usable on all mobile devices */
/* This overrides EVERYTHING to create a simple, readable mobile experience */

@media only screen and (max-width: 767px) {
    
    /* ========================================
       NUCLEAR RESET - Fix all layout issues
       ======================================== */
    
    * {
        /* Prevent any horizontal overflow */
        max-width: 100vw !important;
        overflow-x: hidden !important;
        
        /* Reset positioning that might break layout */
        position: relative !important;
        float: none !important;
        
        /* Ensure proper box model */
        box-sizing: border-box !important;
    }
    
    /* Force body to prevent scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ========================================
       FORCE SINGLE COLUMN LAYOUT
       ======================================== */
    
    /* Any row or grid becomes single column */
    .row,
    .grid,
    .flex,
    .d-flex,
    .flex-row,
    .grid-container,
    [class*="grid"],
    [class*="flex"] {
        display: block !important;
        width: 100% !important;
    }
    
    /* All columns become full width */
    [class*="col-"],
    [class*="column"],
    .col,
    .column {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 10px !important;
        float: none !important;
    }
    
    /* ========================================
       FIX CARDS AND CONTAINERS
       ======================================== */
    
    /* All cards stack vertically */
    .card,
    .box,
    .panel,
    .tile,
    [class*="card"],
    [class*="box"] {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
        display: block !important;
        float: none !important;
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Prevent card content overflow */
    .card-body,
    .card-content,
    .box-content {
        padding: 15px !important;
        overflow: hidden !important;
    }
    
    /* ========================================
       FIX TEXT AND TYPOGRAPHY
       ======================================== */
    
    /* Prevent text from being cut off */
    h1, h2, h3, h4, h5, h6,
    .heading,
    .title {
        font-size: clamp(18px, 5vw, 28px) !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        margin: 10px 0 !important;
        padding: 0 10px !important;
    }
    
    p, span, div, li, td {
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* ========================================
       FIX IMAGES AND GRAPHICS
       ======================================== */
    
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Hide complex graphics that break on mobile */
    .complex-graphic,
    .animated-element,
    .parallax,
    .pattern,
    .shape,
    .decoration,
    [class*="pattern"],
    [class*="shape"],
    [class*="animation"] {
        display: none !important;
    }
    
    /* ========================================
       FIX SECTIONS AND CONTAINERS
       ======================================== */
    
    section,
    .section,
    .container,
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 10px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* ========================================
       FIX NAVIGATION
       ======================================== */
    
    /* Hide desktop nav */
    .desktop-nav,
    .main-menu,
    .nav-menu,
    .navbar-nav {
        display: none !important;
    }
    
    /* Ensure mobile menu toggle is visible */
    .mobile-menu-toggle,
    .hamburger,
    .mobile-nav-toggler {
        display: block !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999 !important;
    }
    
    /* ========================================
       FIX BUTTONS AND FORMS
       ======================================== */
    
    /* All buttons full width */
    button,
    .btn,
    .button,
    a.btn,
    input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px !important;
        font-size: 16px !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Fix form inputs */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevents zoom */
        padding: 12px !important;
        margin: 5px 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }
    
    /* ========================================
       FIX TABLES
       ======================================== */
    
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    
    /* ========================================
       HIDE PROBLEMATIC ELEMENTS
       ======================================== */
    
    /* Hide anything that might cause issues */
    .desktop-only,
    .hide-mobile,
    .no-mobile,
    video,
    iframe {
        display: none !important;
    }
    
    /* ========================================
       FIX Z-INDEX ISSUES
       ======================================== */
    
    /* Reset z-index to prevent overlapping */
    * {
        z-index: auto !important;
    }
    
    /* Ensure header stays on top */
    header,
    .header,
    .main-header {
        z-index: 1000 !important;
    }
    
    /* Mobile menu on top of everything */
    .mobile-menu,
    .mobile-menu-panel {
        z-index: 99999 !important;
    }
    
    /* ========================================
       SPECIFIC FIXES FOR NATROY
       ======================================== */
    
    /* Fix the cards with icons */
    .feature-card,
    .service-card,
    .stat-card {
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
        margin: 10px 0 !important;
    }
    
    /* Stack icon and text vertically */
    .card-icon {
        display: block !important;
        margin: 0 auto 10px !important;
        float: none !important;
    }
    
    .card-content {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Fix overlapping text on graphics */
    .text-overlay,
    .hero-content,
    .banner-content {
        position: relative !important;
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 20px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* ========================================
       EMERGENCY READABILITY
       ======================================== */
    
    /* Ensure all text is readable */
    * {
        min-height: auto !important;
        line-height: normal !important;
    }
    
    /* Add padding to prevent edge touching */
    body > * {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* ========================================
       FOOTER FIX
       ======================================== */
    
    footer,
    .footer {
        text-align: center !important;
    }
    
    .footer-column,
    .footer-widget {
        width: 100% !important;
        margin-bottom: 20px !important;
        display: block !important;
    }
}

/* ========================================
   TINY PHONES (iPhone SE, etc)
   ======================================== */

@media only screen and (max-width: 375px) {
    /* Even smaller padding and fonts */
    section,
    .section,
    .container {
        padding: 15px 5px !important;
    }
    
    h1, h2, h3 {
        font-size: 20px !important;
    }
    
    p, span, div {
        font-size: 13px !important;
    }
    
    button,
    .btn {
        padding: 12px !important;
        font-size: 14px !important;
    }
}