/* ===================================================================== * blocks.css — AUTHORITATIVE source for all .sg-block-* styling. * * As of 2026-04-18 (Option B migration, Phase B1), this file is canonical. * Edit directly. The Next.js preview's app/globals.css is a MIRROR that * gets overwritten when you run `npm run sync-blocks-css` in the Style * Guide repo (sync direction is now WP → Next.js). * * Enqueued by inc/enqueue.php on both frontend and editor. Palette-driven * rules (pair helpers, inverse-icon chips, per-color button hovers) are * NOT in this file — they're emitted dynamically by * ccc_build_color_pair_helpers_css() in inc/enqueue.php so they track the * active child theme's palette. * ===================================================================== */ /* Document-level horizontal overflow guard. Clips any descendant content * that visually extends past the viewport width — lets carousels, hero * bleeds, and any other block use `overflow: visible` without stretching * the page and triggering a horizontal scrollbar. * * Uses `overflow-x: clip` rather than `hidden` on purpose: `hidden` on * / creates a scroll-containing block and breaks * `position: sticky` on descendants (e.g. our sticky header). `clip` * does the visual clipping without the side effects. */ html { overflow-x: clip; } /* Edge-to-edge horizontal scrollers (mobile). A block that switches to a * horizontal scroll-snap carousel below 768px is otherwise trapped inside the * page's root padding and clips its cards. Pull it out by the root padding on * each side and re-add that gutter inside via padding so the first/last card * still rests at the margin while the track reaches the page edges. * NOTE: must be physical `margin-left`/`margin-right` + `!important` — the * logical `margin-inline` does NOT override WP's physical margin-left/right * centering on constrained-layout children. No `width:100vw` (that caused * body sidescroll on iOS). Add `.sg-hscroll` to any future scroller. */ @media (max-width: 768px) { .is-mobile-scroll, .sg-hscroll { margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-left)) !important; padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); } } /* System (chrome) styles for the style guide page itself. * These intentionally use fixed values, NOT client tokens, so the chrome * never shifts when client tokens change. Client tokens live in a scoped *