/**
 * Site-wide responsive layout — Analytude Analytics
 * - Consistent horizontal inset from the viewport on small/tablet screens
 * - Prevents accidental horizontal scroll from full-bleed content
 */

:root {
    /* Full horizontal gutter width; Bootstrap uses half per side via calc(* 0.5) */
    --site-mobile-gutter-x: 2rem;
}

@media (max-width: 991.98px) {
    /*
     * Do NOT set overflow-x on html/body/.content-wrapper — it breaks window scroll,
     * ScrollCue reveal, and Headhesive fixed navbar on mobile (scroll containment).
     * Horizontal overflow is avoided via container gutters + targeted fixes instead.
     */
    /*
     * Use :where() so utility gutters (.gx-*, .g-*) keep higher specificity and still work.
     */
    :where(.content-wrapper) .container,
    :where(.content-wrapper) .container-sm,
    :where(.content-wrapper) .container-md,
    :where(.content-wrapper) .container-lg,
    :where(.content-wrapper) .container-xl,
    :where(.content-wrapper) .container-xxl,
    :where(.content-wrapper) .container-fluid {
        --bs-gutter-x: var(--site-mobile-gutter-x);
        padding-left: max(
            calc(var(--bs-gutter-x) * 0.5),
            env(safe-area-inset-left, 0px)
        );
        padding-right: max(
            calc(var(--bs-gutter-x) * 0.5),
            env(safe-area-inset-right, 0px)
        );
    }

    :where(.content-wrapper) .row {
        --bs-gutter-x: var(--site-mobile-gutter-x);
    }

    /*
     * Site header + sticky clone: many pages set inline @media .container { padding: 10px }
     * (e.g. industries) which tied/won over :where(...) .container and made the nav bar
     * tighter than the home page. Lock nav padding with higher specificity (not :where).
     */
    .content-wrapper > header .container,
    .content-wrapper > header .container-fluid,
    nav.navbar.navbar-clone .container,
    nav.navbar.navbar-clone .container-fluid {
        --bs-gutter-x: var(--site-mobile-gutter-x);
        padding-left: max(
            calc(var(--site-mobile-gutter-x) * 0.5),
            env(safe-area-inset-left, 0px)
        );
        padding-right: max(
            calc(var(--site-mobile-gutter-x) * 0.5),
            env(safe-area-inset-right, 0px)
        );
    }

    /* Avoid pulling hero copy outside the shared gutter (home hero) */
    :where(.content-wrapper) .mx-md-n5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}