/**
 * Skyemotion – global layout safety net.
 *
 * Runs on every page (loaded by the child theme, after Kadence). Prevents any
 * horizontal viewport overflow from leaking into the visible layout, even when
 * a single rogue block (table, oversized image, fixed-width column …) tries to
 * push the page wider than the viewport.
 *
 * Strategy = belt + suspenders:
 *   1. `overflow-x: clip` on html/body so horizontal scroll cannot appear.
 *   2. `max-width: 100%` on visual elements so they never exceed their parent.
 *   3. `overflow-wrap: anywhere` on text so long words / URLs break instead of
 *      stretching the container.
 *   4. `min-width: 0` on flex/grid children so they collapse instead of
 *      pushing siblings off-screen (classic flexbox overflow fix).
 */

/* 1. Hard guard – nothing may scroll the document horizontally. */
html, body { overflow-x: clip; }

/* Fallback for browsers without `overflow-x: clip` (Safari < 15.4). */
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* 2. Media never exceeds its container. */
img, svg, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* 3. Long text wraps instead of pushing the layout. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, blockquote, figcaption, cite, a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 4. Flex / grid children must be allowed to shrink. */
.wp-block-columns > .wp-block-column,
.wp-block-column,
.wp-block-quote,
.wp-block-media-text,
.wp-block-group {
    min-width: 0;
}

/* Code / pre blocks scroll inside themselves rather than blowing up the page. */
pre, code {
    max-width: 100%;
    overflow-x: auto;
}

/* Tables get an inline scroll container automatically. */
.wp-block-table { max-width: 100%; overflow-x: auto; }
.wp-block-table table { width: 100%; }