/*
 * Compendion base styles.
 *
 * Keep this file limited to global refinements that are not practical in
 * theme.json. Component-level rules belong in compendion-components.css.
 */

:where(.wp-site-blocks) {
	min-height: 100vh;
}

:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 0.18em;
}

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

:where(html, body) {
	overflow-x: hidden;
}

:where(html) {
	scroll-behavior: smooth;
}

:where(
	.entry-content,
	.wp-block-post-content,
	.wp-block-compendion-episode-content,
	.compendion-episode-summary,
	.compendion-episode-shownotes
) {
	overflow-wrap: break-word;
	word-break: break-word;
}

/*
 * Mobile Root-Padding reduzieren.
 *
 * theme.json setzt `styles.spacing.padding.left/right` auf
 * `var:preset|spacing|40` = `clamp(1.5rem, 4vw, 2.5rem)` und aktiviert
 * `useRootPaddingAwareAlignments: true`. Dadurch propagiert WordPress
 * die Werte als `--wp--style--root--padding-left/right` CSS-Variablen
 * und stackt sie in verschachtelten `is-layout-constrained`-Bloecken —
 * effektiv ~48px pro Seite auf einem 390px-Viewport, also fast ein
 * Achtel der Bildschirmbreite weg, bevor die erste Card sichtbar ist.
 *
 * Unter 768px die CSS-Variablen direkt auf 0.75rem (12px) runterziehen —
 * keine Template-Edits noetig, eine Regel fixt alle Grids (Startseite,
 * Mitwirkende, Episoden, Anderswo, Profil).
 *
 * WICHTIG: WP setzt diese Variablen auf `body` (nicht `:root`), wenn
 * `useRootPaddingAwareAlignments: true` aktiv ist. Eine `:root`-Regel
 * verliert, weil `body`-Definitionen tiefer im Vererbungsbaum greifen.
 * Deshalb beide Selektoren — `body` ueberschreibt WPs Inline, `:root`
 * deckt den Fallback ab.
 */
@media (max-width: 768px) {
	:root,
	body {
		--wp--style--root--padding-left: 0.75rem;
		--wp--style--root--padding-right: 0.75rem;
	}
}