/* 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;
    }
}