/*
 * Drift draws its page effects on canvas layers added straight to <body>,
 * bleeding about 40px past every page edge so effects can enter from
 * off-screen. That made every page 40px wider than the window (sideways
 * scrolling) and short pages 40px taller than their footer (scrolling past
 * the footer). Clip the layers to the page instead:
 *
 * - <body> becomes their containing block (position: relative) and clips
 *   them (overflow: clip), so they no longer enlarge the page.
 * - <html> gets a non-visible overflow so the body's overflow applies to the
 *   body itself rather than being handed to the window (which would stop
 *   the page scrolling). On the root it only affects sideways scrolling.
 *
 * `clip` (not `hidden`) creates no scroll container, so position: sticky and
 * fixed elements (cookie banners, the admin bar, popups) keep working. The
 * `hidden` lines are fallbacks for browsers without `overflow: clip`.
 */
html {
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	position: relative;
	overflow: hidden;
	overflow: clip;
}

/*
 * Logged-in users: WordPress makes room for the admin bar with a top margin on
 * <html>, and on phones (600px and narrower) the bar is position: absolute.
 * Because <body> is now the bar's containing block, the bar would sit below
 * that margin (over the header) with an empty strip above it. Move the room
 * for the bar inside <body> instead, so the bar is back at the very top.
 * `:root:has()` outranks core's `html { margin-top: … !important }`.
 */
:root:has(> body.admin-bar) {
	margin-top: 0 !important;
}

body.admin-bar {
	padding-top: var(--wp-admin--admin-bar--height, 32px);
}