/**
 * Mobile layout safety net — load last in header.php (after CMS inline #header rules).
 * Fixes horizontal scroll, copy overflow, and desktop header/nav padding on small screens.
 */
@media (max-width: 1020px) {
    html {
        overflow-x: hidden;
        width: 100%;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100%;
        width: 100%;
    }

    #page-wrapper {
        overflow-x: hidden;
        max-width: 100%;
        width: 100%;
    }

    /* ATS mobile header: logo left, hamburger + CTA stacked on the right */
    #header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo ham"
            "logo btn";
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        flex-direction: row !important;
        justify-content: stretch !important;
        min-height: 0 !important;
        padding: 10px 14px 10px 12px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    #header .header-logo-link {
        grid-area: logo;
        justify-self: start;
        align-self: center;
        line-height: 0;
        width: auto;
        height: auto;
        max-width: 100%;
        z-index: 2;
    }

    /* width + max-height together distort the oval — cap with max-* only */
    #header img#logo,
    #header img#logoPlace {
        width: auto !important;
        max-width: min(54vw, 180px) !important;
        max-height: 82px !important;
        height: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        object-fit: contain !important;
        object-position: left center;
        display: block;
    }

    #mobHam {
        grid-area: ham;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        justify-self: end;
        align-self: start;
        margin: 0 !important;
        padding: 2px 0 0 !important;
        z-index: 10001;
    }

    #header .header-btn {
        grid-area: btn;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        justify-self: end;
        align-self: end;
        margin: 0 !important;
        height: auto !important;
        width: auto !important;
        font-size: 10px !important;
        padding: 7px 11px !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap;
        z-index: 2;
    }

    #header .nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: min(18rem, 88vw) !important;
        max-width: 88vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 3.5rem 1.25rem 2rem 1.25rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #000;
        z-index: 10000;
        transition: right 0.25s ease;
    }

    body.mobMe #header .nav {
        right: 0 !important;
    }

    #header .nav > li,
    #header .nav li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
    }

    #header .nav li a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.6rem 0 !important;
        font-size: 1rem !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }

    #header ul.nav ul,
    #header ul ul {
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
        margin: 0 !important;
    }

    #main {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Edge-to-edge media — no white gutters from #main padding */
    #main [id^="ccm-image-slider"],
    #main .ccm-image-slider,
    #main .ccm-image-slider-inner,
    #main .imageFloat,
    #main [id^="me"].imageFloat,
    #main .imagefloat-fullwidth-bg,
    #main .content-columns-wrapper,
    #main .ccm-block-content-columns,
    #main > img,
    div#main > img {
        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;
        left: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

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

    #main .rslides li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #main .rslides img,
    #main [id^="ccm-image-slider"] img,
    #main .ccm-image-slider img,
    #main .imageFloat img,
    #main > img,
    div#main > img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #main .imageFloat,
    #main [id^="me"].imageFloat {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Footer social icons — keep inline row, icon-sized (not full column width) */
    footer .content-columns-wrapper {
        width: auto !important;
        max-width: 100% !important;
        margin: 0.75rem auto 0 !important;
    }

    footer .content-columns,
    footer .content-columns .container-fluid {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    footer .content-columns .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.25rem !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    footer .content-columns .colFlex,
    footer .content-columns a.colFlex {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    footer .content-columns .image-wrapper {
        width: auto !important;
        max-width: none !important;
        display: inline-block !important;
    }

    footer .content-columns .content-columns-image,
    footer .content-columns img {
        width: 40px !important;
        max-width: 40px !important;
        height: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    footer .list-inline {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    footer .list-inline li a {
        font-size: 1.35rem !important;
    }
}

@media (max-width: 768px) {
    /* Text inset only — images/sliders stay full bleed from 1020px rules above */
    #main .listOneText,
    #main .contenter {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        box-sizing: border-box;
    }

    #main .imageFloat .listOneText {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Avoid 100vw breakout (causes horizontal scroll on iOS) */
    #main .imageFloat .widerMan,
    #main .imageFloat a.widerMan,
    #main .imageFloat > .widerMan,
    #main .imageFloat > a.widerMan,
    #main .imageFloat .embed-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .listOneText,
    .listOneText h1,
    .listOneText h2,
    .listOneText h3,
    .listOneText h1 span,
    .listOneText h2 span,
    .listOneText h3 span,
    .listOneText p,
    .listOneText p span,
    .listOneText p strong {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .listOneText h1,
    .listOneText h2,
    .listOneText h3,
    .listOneText h1 span,
    .listOneText h2 span,
    .listOneText h3 span {
        font-size: clamp(1.25rem, 6.5vw, 2rem) !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .listOneText p,
    .listOneText p span {
        text-align: center;
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
        line-height: 1.45 !important;
    }

    #main .ccm-image-slider-text {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
    }

    .contenter,
    .properCont {
        max-width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Standalone content images inside prose blocks */
    #main .listOneText img,
    #main .contenter img,
    #main p img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    video,
    iframe,
    table {
        max-width: 100% !important;
        height: auto;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* styles.css sets all footer imgs to 60vw — override for logo + social */
    footer .imageFloat .widerMan img {
        width: auto !important;
        max-width: min(200px, 55vw) !important;
        margin: 0 auto !important;
    }

    footer .content-columns .content-columns-image,
    footer .content-columns img {
        width: 40px !important;
        max-width: 40px !important;
    }
}