/*
 * CODFIX-CO v5.16.0 HF2
 * Mobile Horizontal Overflow Permanent Fix
 *
 * Runtime evidence at 360px:
 * - body.scrollWidth: 482px
 * - footer.scrollWidth: 482px
 * - cfx32-global-fx internal scrollWidth: 540px
 * - cfx5121-footer-topline descendant width: ~453px
 * - cfx33-service-card internal scrollWidth: ~400px
 *
 * This patch fixes the sources and keeps a root clipping guard.
 */

/* HF8: root overflow guard removed to preserve the known-good local sticky header behavior. */

@media (max-width: 640px) {
    /* 1) Global decorative FX must never participate in page overflow. */
    .cfx32-global-fx {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow: clip !important;
        contain: paint !important;
        pointer-events: none !important;
    }

    .cfx32-noise {
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: clip !important;
        contain: paint !important;
        transform: none !important;
        pointer-events: none !important;
    }

    /* Keep orbs/glows visually large, but clip them inside their visual layer. */
    .cfx32-global-fx .orb,
    .cfx5121-hero .orb,
    .cfx5121-hero-glow {
        pointer-events: none !important;
    }

    .cfx5121-hero {
        position: relative;
        max-width: 100% !important;
        overflow: clip !important;
        contain: paint;
    }

    /* 2) Footer was the exact 482px body-width source at a 360px viewport. */
    .cfx32-footer,
    .cfx5121-footer,
    .cfx5151-footer,
    .cfx5151-footer.cfx5151-font-comfortable {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: clip !important;
        contain: paint;
        box-sizing: border-box !important;
    }

    .cfx32-footer .cfx-container,
    .cfx5121-footer .cfx-container,
    .cfx5151-footer .cfx-container {
        width: auto !important;
        max-width: calc(100vw - 28px) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    /* Footer top line had a ~453px unbroken child. Allow clean mobile wrapping. */
    .cfx5121-footer-topline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        overflow-x: clip !important;
        box-sizing: border-box !important;
    }

    .cfx5121-footer-topline > *,
    .cfx5121-footer-topline div,
    .cfx5121-footer-topline span,
    .cfx5121-footer-topline strong,
    .cfx5121-footer-topline p {
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-wrap: pretty;
        box-sizing: border-box !important;
    }

    /* 3) Service cards had internal scrollWidth around 400px at 303px visible width. */
    .cfx33-service-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: clip !important;
        box-sizing: border-box !important;
    }

    .cfx33-service-card > *,
    .cfx33-service-card div,
    .cfx33-service-card span,
    .cfx33-service-card strong,
    .cfx33-service-card p {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    /* 4) Explicitly normalize the public sections seen in the runtime trace. */
    .cfx5130-promo-bar,
    .cfx32-header,
    .cfx-mobile-header,
    main,
    .cfx5211-trust-band,
    .cfx5121-hero,
    .cfx5121-slide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5) Generic safety for media and flex/grid descendants on narrow screens. */
    img,
    picture,
    video,
    canvas,
    iframe,
    svg {
        max-width: 100%;
    }

    :where(
        .cfx-container,
        [class*="grid"],
        [class*="flex"],
        [class*="row"]
    ) > * {
        min-width: 0;
    }
}