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

    /* CMS header padding (inline in header.php) — reset on mobile */
    #header {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    #header img#logo,
    #header img#logoPlace,
    #header #logoPlace {
        max-width: 58vw !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }

    #mobHam {
        right: 14px !important;
        top: 14px !important;
        z-index: 10001;
    }

    #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;
        box-sizing: border-box !important;
    }

    #main [id^="ccm-image-slider"],
    #main .ccm-image-slider,
    #main .ccm-image-slider-inner {
        max-width: 100% !important;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    #main {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }

    /* Full-bleed blocks: cancel #main side padding (direct or nested in block wrappers) */
    #main > [id^="ccm-image-slider"],
    #main > .ccm-image-slider,
    #main > .imageFloat,
    #main > [id^="me"].imageFloat,
    #main .imageFloat,
    #main [id^="me"].imageFloat,
    #main .imagefloat-fullwidth-bg {
        margin-left: -4vw !important;
        margin-right: -4vw !important;
        width: calc(100% + 8vw) !important;
        max-width: calc(100% + 8vw) !important;
        box-sizing: border-box;
    }

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

    #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;
    }

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

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