/* ══════════════════════════════════════════════════════════════
   Webage Base – Intrinsic Layout System
   ══════════════════════════════════════════════════════════════

   Statt starrer Breakpoints setzen wir auf:
   ✦ Fluid Spacing & Typography (via theme.json + clamp())
   ✦ Container Queries für komponentenbasierte Responsivität
   ✦ Intrinsische Layout-Patterns (Every Layout-inspiriert)
   ✦ Minimale Media Queries nur für echte Layout-Wechsel (Nav)
   ══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────────── */
:root {
	/* Breakpoint-Referenzen — für Media Queries & JS-Zugriff */
	--bp-sm: 36rem;   /* 576px  – Kleine Geräte */
	--bp-md: 48rem;   /* 768px  – Tablets */
	--bp-lg: 64rem;   /* 1024px – Desktop */
	--bp-xl: 80rem;   /* 1280px – Grosse Screens */

	/* Fluid Gutter — passt sich dem Viewport an */
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

	/* Content-Breiten (Fallbacks, theme.json überschreibt) */
	--content-width: var(--wp--style--global--content-size, 800px);
	--wide-width: var(--wp--style--global--wide-size, 1200px);
}

/* ── Box-Sizing Reset ───────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Container Query Setup ──────────────────────────────────── */
/* Hauptbereiche als Query-Container registrieren.
   Kinder können mit @container reagieren statt @media. */
.site-header {
	container-name: header;
	container-type: inline-size;
}

.site-main {
	container-name: main;
	container-type: inline-size;
}

.site-footer {
	container-name: footer;
	container-type: inline-size;
}

.entry-content {
	container-name: content;
	container-type: inline-size;
}

/* ── Site Shell ─────────────────────────────────────────────── */
/* Sticky Footer ohne feste Höhen */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-main {
	flex-grow: 1;
}

/* ══════════════════════════════════════════════════════════════
   INTRINSISCHE LAYOUT-PRIMITIVES
   Inspiriert von Every Layout (https://every-layout.dev)
   Layouten sich selbst — ohne Breakpoints.
   ══════════════════════════════════════════════════════════════ */

/* ── Stack ──────────────────────────────────────────────────── */
/* Vertikaler Rhythmus mit konsistenten Abständen.
   Verwendung: <div class="stack"> ... </div>
   Variable:   --stack-gap (Standard: Spacing M)                */
.stack {
	display: flex;
	flex-direction: column;
}

.stack > * + * {
	margin-block-start: var(--stack-gap, var(--wp--preset--spacing--40, 1rem));
}

/* Enge Variante */
.stack--sm > * + * {
	margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
}

/* Weite Variante */
.stack--lg > * + * {
	margin-block-start: var(--wp--preset--spacing--60, 2rem);
}

/* ── Cluster ────────────────────────────────────────────────── */
/* Flexible horizontale Elemente, die automatisch umbrechen.
   Verwendung: <div class="cluster"> ... </div>
   Variable:   --cluster-gap (Standard: Spacing S)             */
.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cluster-gap, var(--wp--preset--spacing--30, 0.75rem));
	align-items: center;
}

/* ── Sidebar Layout ─────────────────────────────────────────── */
/* Content + Sidebar, bricht automatisch um wenn zu eng.
   Verwendung: <div class="with-sidebar">
                 <aside>...</aside>
                 <main>...</main>
               </div>
   Variablen: --sidebar-width, --sidebar-threshold            */
.with-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
}

.with-sidebar > :first-child {
	flex-basis: var(--sidebar-width, 18rem);
	flex-grow: 1;
}

.with-sidebar > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: var(--sidebar-threshold, 60%);
}

/* ── Switcher ───────────────────────────────────────────────── */
/* Elemente nebeneinander ODER untereinander — je nach Platz.
   Bricht um wenn weniger als --switcher-threshold Platz.
   Verwendung: <div class="switcher"> ... </div>               */
.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* ── Auto Grid ──────────────────────────────────────────────── */
/* Grid das sich automatisch anpasst — nie zu gross, nie zu klein.
   Verwendung: <div class="auto-grid"> ... </div>
   Variable:   --auto-grid-min (Standard: 16rem ≈ 256px)       */
.auto-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--auto-grid-min, 16rem), 100%), 1fr)
	);
	gap: var(--gutter);
}

/* ── Center ─────────────────────────────────────────────────── */
/* Zentrierter Content-Container mit max-width.
   Verwendung: <div class="center"> ... </div>
   Variable:   --measure                                        */
.center {
	box-sizing: content-box;
	max-inline-size: var(--measure, var(--content-width));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Wide-Variante */
.center--wide {
	--measure: var(--wide-width);
}

/* ── Cover ──────────────────────────────────────────────────── */
/* Vollhöhe-Sektion mit vertikaler Zentrierung.
   Verwendung: <div class="cover">
                 <div class="cover__center">Inhalt</div>
               </div>                                           */
.cover {
	display: flex;
	flex-direction: column;
	min-block-size: var(--cover-height, 100dvh);
	padding: var(--gutter);
}

.cover > * {
	margin-block: var(--wp--preset--spacing--30, 0.75rem);
}

.cover > .cover__center {
	margin-block: auto;
}

/* ── Full Bleed ─────────────────────────────────────────────── */
/* Bricht aus dem Content-Container aus auf volle Breite.
   Verwendung: <div class="full-bleed"> ... </div>             */
.full-bleed {
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
}

/* ══════════════════════════════════════════════════════════════
   CONTAINER QUERY UTILITIES
   Kinder von Container-Elementen können hiermit reagieren.
   ══════════════════════════════════════════════════════════════ */

/* Unter 40rem Container-Breite → als Stack */
@container (max-width: 40rem) {
	.cq\:stack {
		flex-direction: column;
	}

	.cq\:hide {
		display: none;
	}

	.cq\:full-width {
		width: 100%;
	}

	.cq\:text-center {
		text-align: center;
	}
}

/* Ab 40rem Container-Breite */
@container (min-width: 40rem) {
	.cq\:show {
		display: initial;
	}

	.cq\:row {
		flex-direction: row;
	}
}

/* Ab 64rem Container-Breite */
@container (min-width: 64rem) {
	.cq\:show-lg {
		display: initial;
	}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════════ */

/* Visuell versteckt, aber für Screen-Reader zugänglich */
.visually-hidden,
.screen-reader-text {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Skip-to-Content Link */
.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary, #1a1a2e);
	color: var(--wp--preset--color--white, #fff);
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Responsive Bilder */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Fluid iframes/video */
iframe,
video,
embed,
object {
	max-width: 100%;
}

/* Tabellen responsive wrappen */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════════════════════ */
@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.post-navigation,
	.page-links {
		display: none;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000;
		background: #fff;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	h1, h2, h3 {
		page-break-after: avoid;
	}
}