/* Bentley Christian Centre - mobile portability fixes
   Loaded last so these rules are not overridden by the legacy theme CSS. */

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

html, body {
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
}

img, video {
    height: auto;
}

/* The original theme hard-coded these layers to 1349px. Keep them tied to
   the viewport instead so they cannot force a desktop-width canvas. */
.mt_parallax_1,
.mt_parallax_2,
.mt_parallax_3,
.mt_parallax_4,
.mt_parallax_5 {
    width: 100vw !important;
    max-width: 100vw !important;
}

@media only screen and (max-width: 767px) {
    html,
    body {
        width: 100%;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #page,
    #primary,
    #main,
    .site,
    .site-main,
    .main-content,
    .entry-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Mobile header / Bootstrap collapse. Later legacy header styles were
       able to reassert desktop dimensions, so make the mobile state explicit. */
    #modeltheme-main-head,
    #modeltheme-main-head .navbar_background {
        width: 100%;
        max-width: 100%;
    }

    #modeltheme-main-head .navbar_background {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #modeltheme-main-head .navbar-header {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    #modeltheme-main-head .navbar-toggle {
        display: block !important;
        float: right !important;
        margin-right: 0 !important;
    }

    #modeltheme-main-head .navbar-header .logo {
        float: left !important;
        width: calc(100% - 70px) !important;
        max-width: calc(100% - 70px) !important;
        margin: 10px 0 !important;
    }

    #modeltheme-main-head .navbar-header .logo img,
    .logo img {
        width: auto !important;
        max-width: 180px !important;
        height: auto !important;
    }

    #modeltheme-main-head .navbar-collapse.collapse {
        display: none !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #modeltheme-main-head .navbar-collapse.collapse.in,
    #modeltheme-main-head .navbar-collapse.collapsing {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #modeltheme-main-head .navbar-collapse.collapse.in {
        overflow: visible !important;
    }

    #navbar .menu-01-main-menu-container,
    #navbar .menu,
    #navbar .menu > li,
    #navbar .menu-item {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #navbar .menu > li,
    #navbar .menu-item {
        display: block !important;
    }

    #navbar .menu > li > a,
    #navbar .menu-item > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    header .header-nav-actions {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* WPBakery / full-width rows: prevent JS or old desktop values from
       creating a canvas wider than the handset. */
    .row[data-vc-full-width="true"],
    [data-vc-full-width="true"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .column,
    .column_container,
    [class*="col-xs-"],
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Parallax/fixed backgrounds are unreliable and expensive on iOS/Android.
       Preserve the artwork but use a normal scrolling layer on small screens. */
    .mt_parallax_size_images {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 140px !important;
        padding-bottom: 140px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .mt_parallax_1,
    .mt_parallax_2,
    .mt_parallax_3,
    .mt_parallax_4,
    .mt_parallax_5 {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .gambit_parallax_row {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .mt_parallax_1_left,
    .mt_parallax_1_right {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 7% !important;
        padding-right: 7% !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .mt_parallax_h1 {
        font-size: clamp(27px, 9vw, 42px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* General embedded/content safety. */
    iframe,
    table,
    pre,
    code {
        max-width: 100% !important;
    }

    iframe {
        width: 100% !important;
    }

    table {
        display: block;
        overflow-x: auto;
    }

    .template-footer,
    .template-footer .container,
    .template-footer .row {
        max-width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .mt_parallax_1,
    .mt_parallax_2,
    .mt_parallax_3,
    .mt_parallax_4,
    .mt_parallax_5 {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}