/* Global Mobile Optimization Patch 
   Overrides fixed widths and enables responsiveness for legacy templates. 
   Apply to pages by linking: <link rel="stylesheet" href="../css/mobile-patch.css">
*/

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media only screen and (max-width: 768px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }

    /* FIX TYPOGRAPHY */
    body {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* FIX TABLES */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* FIX IMAGES */
    img,
    svg,
    video,
    canvas,
    iframe,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
    }

    img,
    video,
    canvas {
        display: block;
    }

    /* FIX POSITIONING */
    .absolute-fix-mobile {
        position: static !important;
    }

    /* FIX LONG STRINGS / CODE */
    pre,
    code {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* FORM ELEMENTS SHOULD NOT OVERFLOW */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    /* UTILITY: HIDE ON MOBILE */
    .desktop-only {
        display: none !important;
    }

    /* UTILITY: SHOW ON MOBILE */
    .mobile-only {
        display: block !important;
    }

    /* CRITICAL FIX: FOOTER OVERLAP */
    body {
        padding-bottom: 0px !important;
        /* Reset body padding, let footer flow */
    }

    #legal-notice-js {
        position: relative !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #ccc !important;
        z-index: 9999 !important;
        padding: 20px !important;
        box-shadow: none !important;
        margin-top: 50px !important;
    }
}