/*
 * 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) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/*
 * Sticky Footer: der Inhalt zwischen Header und Footer fuellt den Restplatz,
 * sodass der Footer auch bei kurzem Inhalt am Viewport-Ende klebt. Header ist
 * ein <header>-Tag, der Footer-Part ein <footer>-Tag – beide ausgenommen, der
 * Rest (i.d.R. <main class="compendion-main">) waechst. Normale Spezifitaet
 * (nicht :where), damit die Regel ueber Block-Defaults am Main-Element greift.
 */
.wp-site-blocks > :not(header):not(footer) {
	flex: 1 0 auto;
}

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

/*
 * Maus-/Touch-Fokus (NICHT :focus-visible) zeigt keinen Outline. WordPress/Core
 * setzt global `:where(.wp-site-blocks :focus){outline:2px solid}` — der greift
 * auch beim Klick und legt einen haesslichen, eng anliegenden Kasten um Karten,
 * Buttons und Links. Hier fuer den Zeiger neutralisiert; der Tastatur-Fokus
 * (:focus-visible, Regel oben + Komponenten-Ringe) bleibt voll sichtbar.
 */
:where(.wp-site-blocks *:focus:not(:focus-visible)) {
	outline: none;
}

: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;
	}
}

/* === Geraetekanten (viewport-fit=cover, includes/viewport-edges.php) ======
 * Nach Apples Rezept (webkit.org „Designing Websites for iPhone X“): Safe-Area
 * als Innenabstand, Vollbreit-Flaechen per negativem Rand darunter gezogen.
 * Insets als Variablen, damit sich das Layout ohne Geraet pruefen laesst
 * (Override der Variablen im Browser). Ohne Insets alles 0 = unveraendert. */
:root {
	--cmp-sa-left: env(safe-area-inset-left, 0px);
	--cmp-sa-right: env(safe-area-inset-right, 0px);
	--cmp-sa-bottom: env(safe-area-inset-bottom, 0px);
}

/* 1. Alles rueckt um die Safe-Area ein (Inhalt bleibt mittig). Der Seiten-
 * grund (base) liegt auf .wp-site-blocks, NICHT auf body: Safari faerbt seine
 * Leisten (Statusleiste oben, Toolbar unten) mit der body-Hintergrundfarbe
 * (Arne 2026-10-08, iPhone-Screenshots) – die setzt compendion-edge-color.js
 * beim Scrollen auf die Flaeche an der Ober- bzw. Unterkante. Innerhalb des
 * Bildschirms aendert sich dadurch nichts: .wp-site-blocks deckt body ab. */
.wp-site-blocks {
	position: relative;
	padding-left: var(--cmp-sa-left);
	padding-right: var(--cmp-sa-right);
	background: transparent;
}

/* Der Seitengrund als Pseudo-Element auf derselben Ebene (z-index -1) wie die
 * Bleed-Flaechen unten – frueher im Baum, also darunter. Laege das Gelb als
 * normaler Hintergrund auf .wp-site-blocks, wuerde es die Randstreifen ueber
 * den Footer-/Header-Pseudos malen (Arnes Querformat-Screenshot 2026-10-08). */
.wp-site-blocks::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background: var(--wp--preset--color--base);
	z-index: -1;
	pointer-events: none;
}

body {
	background-color: var(--wp--preset--color--base);
	min-height: 100vh;
	min-height: 100dvh;
}

/* 2. Vollbreit-Flaechen dreimal so breit wie der Bildschirm (Arne 2026-10-08):
 * Header, Footer und die drei Vollbreit-Sektionen der Startseite bekommen ein
 * Pseudo-Element, das ihre eigene Hintergrundfarbe (background: inherit, also
 * auch im Dark Mode richtig) 100vw nach links und rechts hinaus malt – unter
 * Notch, Duo-Kante, Safe-Area-Streifen, egal wie breit das Geraet ist. Es
 * liegt mit z-index -1 hinter allem Inhalt und ist nur dort sichtbar, wo
 * kein Inhalt liegt (die Randstreifen). body{overflow-x:hidden} schluckt die
 * Breite, keine Scrollleiste. Header nutzt ::after (Dreieck), Footer ::before
 * (Dreieck) – deshalb hier jeweils das andere Pseudo-Element. */
.wp-site-blocks .compendion-site-header,
.wp-site-blocks .compendion-site-footer,
.compendion-netzwerk .compendion-netzwerk__section--fresh,
.compendion-netzwerk .compendion-netzwerk__section--mosaic {
	position: relative;
}

.wp-site-blocks .compendion-site-header::before,
.wp-site-blocks .compendion-site-footer::after,
.compendion-netzwerk .compendion-netzwerk__section--fresh::before,
.compendion-netzwerk .compendion-netzwerk__section--mosaic::before::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: -100vw;
	background: inherit;
	z-index: -1;
	pointer-events: none;
}

/* 3. Vollbreit-Sektionen der Startseite (margin-inline 50% − 50vw bleedet von
 * selbst bis zur Geraetekante): der Innenabstand waechst um den Inset. */
.compendion-netzwerk .compendion-netzwerk__section--fresh,
.compendion-netzwerk .compendion-netzwerk__section--mosaic {
	padding-left: max(calc(1.25rem + var(--cmp-sa-left)), calc((100vw - 75rem) / 2));
	padding-right: max(calc(1.25rem + var(--cmp-sa-right)), calc((100vw - 75rem) / 2));
}

/* 4. Ueberzieh-Bereich (Gummiband) in Header-Farbe statt Browser-Weiss;
 * compendion-edge-color.js setzt sie beim Scrollen auf die Flaeche an der
 * Oberkante. */
html {
	background-color: var(--compendion-header-bg, var(--wp--preset--color--contrast, #1a1a1a));
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) {
		background-color: var(--compendion-header-bg-dark, var(--compendion-header-bg, #1a1a1a));
	}
}

html[data-color-scheme="dark"] {
	background-color: var(--compendion-header-bg-dark, var(--compendion-header-bg, #1a1a1a));
}