/*
 * NUCLEAR MOBILE FIXES - Simpson Longevity
 * Maximum strength overrides for page builder styles
 */

/* ========================================
   CRITICAL: Prevent ALL Horizontal Scroll
   ======================================== */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
}

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

/* Force box-sizing on everything */
*, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* ========================================
   Mobile Breakpoint: 768px and below
   ======================================== */
@media screen and (max-width: 768px) {

    /* FORCE all sections to full width with minimal padding */
    section,
    div[class*="section"],
    [class*="section-"],
    .section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        padding: 30px 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* FORCE all containers to full width */
    .container,
    .inner,
    div[class*="container"],
    div[class*="inner"],
    [class*="wrapper"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    /* FORCE all rows to stack vertically */
    [class*="row"],
    .row,
    div[class*="row-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* FORCE ALL columns to 100% width and stack */
    [class*="col"],
    .column,
    .col,
    div[class*="col-"],
    [style*="width: 33"],
    [style*="width:33"],
    [style*="width: 50"],
    [style*="width:50"],
    [style*="width: 52"],
    [style*="width:52"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 10px !important;
        float: none !important;
        display: block !important;
    }

    /* KILL fixed positioning on navigation - major mobile killer */
    nav,
    .navigation,
    [class*="nav-menu"],
    .nav-menu-desktop,
    header {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* FORCE popups to be mobile-friendly */
    [class*="popup"],
    .popup,
    .modal,
    div[style*="width:720px"],
    div[style*="width: 720px"],
    div[style*="width:380px"],
    div[style*="width: 380px"] {
        width: 90vw !important;
        max-width: 90vw !important;
        min-width: auto !important;
        left: 5vw !important;
        right: 5vw !important;
        margin: 20px auto !important;
        padding: 15px !important;
        position: fixed !important;
        transform: none !important;
    }

    /* Reduce ALL excessive padding on mobile */
    [style*="padding:140px"],
    [style*="padding: 140px"],
    [style*="padding:80px"],
    [style*="padding: 80px"] {
        padding: 30px 15px !important;
    }

    /* Responsive typography - smaller on mobile */
    h1,
    [class*="heading"] h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin: 10px 0 !important;
    }

    h2,
    [class*="heading"] h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin: 10px 0 !important;
    }

    h3,
    [class*="heading"] h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 8px 0 !important;
    }

    h4, h5, h6 {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 8px 0 !important;
    }

    p,
    [class*="paragraph"],
    .text-output {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 10px 0 !important;
    }

    /* Touch-friendly buttons - MINIMUM 44px height */
    button,
    [class*="button"],
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"],
    a[class*="btn"] {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        width: auto !important;
        display: inline-block !important;
        margin: 8px 4px !important;
        touch-action: manipulation !important;
    }

    /* Form inputs - prevent iOS zoom */
    input,
    textarea,
    select {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-appearance: none !important;
    }

    /* Images must be flexible */
    img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
    }

    /* Hide desktop-only elements */
    .desktop-only,
    [class*="desktop-only"] {
        display: none !important;
    }

    /* Tables responsive */
    table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* KILL absolute positioning that breaks layout */
    [style*="position: absolute"],
    [style*="position:absolute"] {
        position: relative !important;
    }

    /* Force flexbox items to wrap */
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
}

/* ========================================
   Extra Small Mobile: 480px and below
   ======================================== */
@media screen and (max-width: 480px) {

    /* Even smaller typography */
    h1 {
        font-size: 22px !important;
    }

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

    h3 {
        font-size: 16px !important;
    }

    /* Minimal padding on tiny screens */
    section,
    [class*="section-"] {
        padding: 20px 10px !important;
    }

    /* Full-width buttons on small screens */
    button,
    [class*="button"],
    .btn {
        width: 100% !important;
        margin: 8px 0 !important;
    }

    /* Popups even smaller */
    [class*="popup"],
    .popup {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
        padding: 12px !important;
    }
}

/* ========================================
   Utility Overrides - Apply Everywhere
   ======================================== */

/* Ensure proper touch scrolling */
body, html {
    -webkit-overflow-scrolling: touch !important;
}

/* Fix for iOS Safari address bar */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available !important;
    }
}

/* Prevent text from being too small */
@media screen and (max-width: 768px) {
    * {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* NUCLEAR OPTION: Override ANY inline style width on mobile */
@media screen and (max-width: 768px) {
    div[style*="width"],
    section[style*="width"],
    article[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}