/**
 * ZZZippy theme — canonical mobile layout bundle (all zzzippysites + hostzzz).
 * Source of truth: edit this file in master, run hostzzz/_local_tools/sync-mobile-theme-fixes.sh
 *
 * Load in header.php after grid.css. Header/nav/overflow overrides live in mobile-site.css
 * (loaded last, after CMS inline #header rules).
 */
/* ========== Grid / global row (grid.css uses max-width: 90% on .row) ========== */
@media (max-width: 768px) {
    #main .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ========== Image slider ========== */
@media (max-width: 1020px) {
    #main [id^="ccm-image-slider"],
    #main .ccm-image-slider {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    #main .rslides,
    #main [id^="ccm-image-slider"] .rslides,
    .rslides {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #main .rslides li,
    #main .rslides img {
        max-width: 100% !important;
    }
}

/* ========== Image float ========== */
@media (max-width: 768px) {
    #main .imagefloat-fullwidth-bg,
    #main .imageFloat,
    #main [id^="me"].imageFloat {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #main .imageFloat {
        flex-direction: column !important;
    }

    #main .imageFloat.imgleft,
    #main .imageFloat.imgright,
    #main .imageFloat.imgtop,
    #main .imageFloat.imgbottom,
    #main .imageFloat.rightFloat {
        flex-direction: column !important;
    }

    #main .imageFloat .widerMan,
    #main .imageFloat a.widerMan,
    #main .imageFloat > .widerMan,
    #main .imageFloat > a.widerMan {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    #main .imageFloat img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none;
    }

    #main .imageFloat.imgleft img,
    #main .imageFloat.imgright img,
    #main .imageFloat.imgtop img,
    #main .imageFloat.imgbottom img,
    #main .imageFloat.shaded img {
        margin: 0 !important;
    }

    #main .imageFloat .embed-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 56.25%;
    }

    #main .imageFloat .listOneText {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem 4vw 0 !important;
        box-sizing: border-box;
        text-align: center;
    }
}

/* ========== Content columns ========== */
@media (max-width: 768px) {
    #main .content-columns-wrapper,
    #main .content-columns-wrapper .content-columns,
    #main .content-columns,
    #main .content-columns[id^="pf-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    #main .ccm-block-content-columns,
    #main .content-columns-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }

    #main .content-columns-wrapper .content-columns {
        width: 100% !important;
        max-width: 100% !important;
    }

    #main .content-columns .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main .content-columns .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 1.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main .content-columns .colFlex,
    #main .content-columns a.colFlex {
        flex: 0 0 auto !important;
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #main .content-columns a.colFlex {
        display: block !important;
    }

    #main .content-columns .image-wrapper,
    #main .content-columns .content-columns-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    #main .content-columns .content-column-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        box-sizing: border-box;
    }
}