/* ═══════════════════════════════════════════════════════════════════════════
   SITE CONTAINER
   Max-width 1280px, centred, with 2rem side padding.
   Use .site-container on any custom wrapper that needs to respect the grid.
   WP block content width is set via theme.json contentSize (1280px) which
   generates --wp--style--global--content-size for use in block templates.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--ci-container-width: 1280px;
	--ci-container-padding: 2rem;
}

/* ── Global box model ───────────────────────────────────────────────────────
   Border-box sizing prevents padding from pushing elements wider than their
   container — the most common cause of mobile horizontal overflow. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Overflow containment ───────────────────────────────────────────────────
   overflow-x: clip does not create a new scroll container (unlike hidden),
   so position: sticky headers continue to work correctly on all devices.
   Applied to both html and body as a belt-and-suspenders safety net. */
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

/* ── Media safety ───────────────────────────────────────────────────────────
   Images, videos and iframes should never exceed their container width. */
img,
video,
iframe {
	max-width: 100%;
}

.site-container {
	max-width: var(--ci-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ci-container-padding);
	padding-right: var(--ci-container-padding);
}