/* Mobile Enhancements for A&P Test Prep Website */

/* GLOBAL HORIZONTAL SCROLL PREVENTION - Applied to all screen sizes */
* {
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Force all major containers to respect viewport width */
#SITE_CONTAINER,
#site-root,
#masterPage,
#PAGES_CONTAINER,
#SITE_HEADER,
#SITE_FOOTER,
#SITE_HEADER_WRAPPER,
#SITE_FOOTER_WRAPPER,
[data-mesh-id],
[data-mesh-id$=-gridContainer],
[data-mesh-id$=centeredContent],
[data-mesh-id$=inlineContent],
.mesh-layout {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Override any fixed widths that could cause overflow */
body:not(.responsive) #site-root {
    min-width: unset !important;
    width: 100% !important;
}

body.device-mobile-optimized:not(.responsive) #SITE_CONTAINER {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure all content respects container boundaries */
div, section, article, aside, header, footer, nav, main {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Fix any elements that might extend beyond viewport */
img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent tables from causing horizontal overflow */
table {
    width: 100% !important;
    table-layout: fixed !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

/* Base mobile optimizations with dynamic scaling */
@media screen and (max-width: 768px) {
    /* Dynamic scaling based on screen width */
    html {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (768 - 320))) !important;
    }
    
    /* Main container scaling */
    #site-root {
        /* Scale the entire site to fit the viewport */
        width: 100vw !important;
        max-width: 100vw !important;
        transform-origin: top left !important;
    }
    
    /* Ensure proper touch targets with responsive sizing */
    button, a, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
        padding: 12px;
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (768 - 320))) !important;
    }
    
    /* Improve text readability on mobile with responsive sizing */
    body {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (768 - 320))) !important;
        line-height: 1.5;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    h1 {
        font-size: calc(24px + (32 - 24) * ((100vw - 320px) / (768 - 320))) !important;
        line-height: 1.3;
        margin-bottom: calc(12px + (20 - 12) * ((100vw - 320px) / (768 - 320)));
    }
    
    h2 {
        font-size: calc(20px + (28 - 20) * ((100vw - 320px) / (768 - 320))) !important;
        line-height: 1.3;
        margin-bottom: calc(10px + (18 - 10) * ((100vw - 320px) / (768 - 320)));
    }
    
    h3 {
        font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (768 - 320))) !important;
        line-height: 1.3;
        margin-bottom: calc(8px + (16 - 8) * ((100vw - 320px) / (768 - 320)));
    }
    
    p, li {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (768 - 320))) !important;
        line-height: 1.6;
        margin-bottom: calc(8px + (12 - 8) * ((100vw - 320px) / (768 - 320)));
    }
    
    /* Optimize containers for mobile */
    [data-mesh-id$=-gridContainer],
    [data-mesh-id$=centeredContent],
    [data-mesh-id$=inlineContent] {
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    /* Improve spacing */
    section, div[data-mesh-id] {
        margin-bottom: 24px;
    }
    
    /* Navigation improvements */
    nav, [role="navigation"] {
        flex-direction: column;
    }
    
    nav a, [role="navigation"] a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px 0;
        border-bottom: 1px solid #eee;
    }
    
    /* Form improvements */
    form {
        width: 100% !important;
    }
    
    input, textarea, select {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }
    
    /* Button improvements */
    .StylableButton2545352419__root {
        width: 100% !important;
        padding: 16px !important;
        font-size: 18px !important;
        margin-bottom: 16px;
    }
    
    /* Image optimizations */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
    
    /* Remove horizontal overflow - AGGRESSIVE MOBILE FIXES */
    body, html {
        overflow-x: hidden !important;
    }
    
    /* ENHANCED Wix-specific overflow fixes for mobile */
    .JsJXaX,
    .AnQkDU {
        overflow-x: hidden !important;
        max-width: 100% !important;
        display: block !important;
    }
    
    /* Fix ALL Wix containers that might overflow */
    [class*="mesh"], 
    [class*="grid"],
    [class*="layout"],
    [class*="container"],
    [class*="wrapper"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix ANY positioned elements that might cause overflow */
    [style*="position: absolute"],
    [style*="position:absolute"],
    [style*="position: fixed"],
    [style*="position:fixed"] {
        max-width: 100% !important;
        right: auto !important;
        left: auto !important;
        position: relative !important;
    }
    
    /* Remove ALL transforms that might push content outside viewport */
    [style*="transform"],
    [class*="transform"] {
        transform: none !important;
    }
    
    /* ULTRA-STRICT: Ensure NO element can be wider than viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Fix ALL width declarations on mobile */
    [style*="width:"],
    [style*="min-width:"],
    [style*="max-width:"] {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }
    
    /* Target specific large width values */
    [style*="980px"],
    [style*="1200px"],
    [style*="1024px"],
    [style*="1440px"],
    [style*="1920px"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }
    
    /* Force flex and grid layouts to be mobile-friendly */
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    
    [style*="display: grid"],
    [style*="display:grid"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Prevent any content from escaping bounds */
    * {
        contain: layout !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Specifically target Wix component containers */
    [data-comp-id],
    [id^="comp-"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Wix-specific mobile optimizations */
    #SITE_CONTAINER {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    #site-root {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Optimize Wix grid layouts */
    .mesh-layout {
        grid-template-columns: 1fr !important;
        padding: 0 16px !important;
    }
    
    /* Mobile menu improvements */
    #MOBILE_ACTIONS_MENU {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
}

/* Tablet optimizations */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Ensure proper touch targets for tablets */
    button, a, input, select, textarea {
        min-height: 40px;
        min-width: 40px;
    }
    
    /* Slightly smaller text than mobile but larger than desktop */
    body {
        font-size: 15px !important;
    }
    
    h1 {
        font-size: 32px !important;
    }
    
    h2 {
        font-size: 26px !important;
    }
    
    h3 {
        font-size: 22px !important;
    }
}

/* Enhanced accessibility for mobile */
@media screen and (max-width: 768px) {
    /* Focus indicators */
    button:focus, a:focus, input:focus, select:focus, textarea:focus {
        outline: 3px solid #007cba !important;
        outline-offset: 2px !important;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        button, a {
            border: 2px solid currentColor !important;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Print styles for mobile */
@media print {
    nav, [role="navigation"],
    button:not(.print-button),
    #MOBILE_ACTIONS_MENU {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    a::after {
        content: " (" attr(href) ")" !important;
    }
}