/* * streamline-wp-native — base.css * * Universal responsive + a11y safety net loaded on every front-end page * and inside the Site Editor (see functions.php → wp_enqueue_scripts and * add_editor_style). Every child theme inherits these rules; do NOT * re-declare them in a child theme — only override the bits that the * brand actually needs to differ on (e.g. focus-ring color). * * Rules belong here when they need a CSS selector (pseudo-class, * descendant, media query). Anything expressible via a block-style * attribute belongs in theme.json instead. */ /* ── Horizontal-overflow safety net ────────────────────────────────── `overflow-x: clip` (not `hidden`) prevents side-swipe without creating a scroll container, so `position: sticky` on a header or anchor links still work. Pair it with `overflow-wrap: break-word` so a single long word (German compound, telephone number with em-dash) wraps instead of pushing its row past the viewport. */ html, body { overflow-x: clip; } body { overflow-wrap: break-word; } /* Flex/grid children default to `min-width: auto` = intrinsic content width; one long word inside a column then pushes the whole row past the viewport edge. `min-width: 0` lets the column wrap. */ :where(.wp-block-columns) > .wp-block-column { min-width: 0; } /* Replaced elements scale to their container. Without this, an image wider than the constrained content area introduces horizontal scroll on phones. */ :where(img, video, iframe, svg, canvas) { max-width: 100%; height: auto; } /* Buttons honour their container. `padding: 1.75em` on a 100%-wide button overflows by 2 × 1.75em without `box-sizing`. */ :where(.wp-block-button), :where(.wp-block-button .wp-block-button__link) { max-width: 100%; box-sizing: border-box; } /* Tables fit. `word-break: break-word` on cells lets long URLs and compound words wrap rather than push the table wide. */ :where(table) { max-width: 100%; } :where(th, td) { overflow-wrap: anywhere; } /* ── Focus visible ─────────────────────────────────────────────────── Branded ring on every keyboard-focused interactive. The accent colour is read from theme.json, so children automatically get their own brand ring without touching this rule. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; border-radius: 4px; } /* ── Skip-link ─────────────────────────────────────────────────────── WP core auto-injects the `