/* 
    Global mobile fixes for responsive layout
    Applied programmatically to all templates
*/

/* Ensure base html/body doesn't scroll horizontally */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Keep media from overflowing its container.
   Deliberately NOT !important, and deliberately no blanket `height: auto`:
   this file loads after the theme, so forcing height here overrode every
   intentional dimension in the vw-based layout (the homepage bull rendered
   at its natural 1018x1024 and left a screen of dead space). Let the theme
   size its own media; only stop it spilling out. */
img, video, iframe, embed, object {
    max-width: 100%;
}

/* Images with an intrinsic width attribute still need the aspect ratio kept
   when that max-width kicks in -- scoped to those, not to every element. */
img[width][height] {
    height: auto;
}

/* Mobile specific overrides */
@media screen and (max-width: 768px) {
    /* Stack generic flex containers */
    .wp-block-columns,
    .wp-block-group.is-layout-flex,
    .acf-innerblocks-container,
    .apex-benefits-block,
    .product-picker,
    .is-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Override forced widths */
    [style*="width"] {
        max-width: 100% !important;
    }
    
    /* Make block columns 100% wide */
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix table horizontal scrolling */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    /* Reduce huge padding/margins on mobile */
    .has-large-font-size {
        font-size: 1.5rem !important;
    }
    
    .has-huge-font-size {
        font-size: 2rem !important;
    }

    .wp-block-group,
    .wp-block-columns,
    .wp-block-cover {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* aMember forms mobile overrides */
    .am-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-bottom: 15px !important;
    }
    .am-form .am-row .am-element-title {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 5px !important;
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
    }
    .am-form .am-row .am-element {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
    }
    .am-element input[type="text"],
    .am-element input[type="password"],
    .am-element input[type="email"],
    .am-element input[type="tel"],
    .am-element input[type="number"],
    .am-element select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .am-element.group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
}