/**
 * Seitenkopf (parts/page-header.html)
 *
 * Die Grafik-Datei kommt als --spnkt-grafik aus theme.json
 * (via inc/page-header.php); Position, Grösse und Deckkraft stehen hier.
 *
 * Kontrast auf primary-dark: 92 % Weiss ist das Maximum, das auf
 * Gemeindeschutz-Orange (#A05811) noch 4.5:1 erreicht.
 *
 * @package spnkt
 */

/* =========================================================================
   Band (Basis Mobile)
   ========================================================================= */

/* Spiegelt die Regel in global.css: Deren zweiter Selektor adressiert
   #wp--skip-link--target – eine ID, die jede klassenbasierte Regel schlägt. */
body:not(.home) > .wp-site-blocks > main#wp--skip-link--target:has(.spnkt-page-header) {
	padding-block-start: 0;
}

main > .wp-block-template-part:has(> .spnkt-page-header),
main > .spnkt-page-header {
	margin-block-start: 0;
}

/* Leere Störer-Gruppe vor dem Band erzeugt sonst einen Block-Gap. */
main > .wp-block-group:empty {
	display: none;
}

/* Folgt auf das Band direkt eine vollbreite Box mit eigener Hintergrundfarbe,
   stossen beide bündig aneinander – ein Abstand dazwischen zeigte sonst einen
   Streifen in der Seitenfarbe. Nur bei alignfull: Eine eingerückte Box steht
   ohnehin frei und behält ihren Abstand.
   Zwei Quellen: der Abstand von .entry-content selbst und der des Blocks
   darin. Nur die äusseren Abstände werden gekappt; den Innenabstand setzt die
   Redaktion im Editor, er liegt in der Farbfläche. !important nur beim Block,
   weil der Editor dessen margin-top als Inline-Style ablegt. */
.wp-block-template-part:has(> .spnkt-page-header) + .entry-content:has(> :first-child.alignfull[class*="is-style-spnkt-bg-"]) {
	margin-block-start: 0;
}

.wp-block-template-part:has(> .spnkt-page-header) + .entry-content > :first-child.alignfull[class*="is-style-spnkt-bg-"] {
	margin-block-start: 0 !important;
}

/* Spiegelbild am Seitenende: Endet der Inhalt mit einer vollbreiten Farbfläche,
   stösst sie bündig an den Footer. Der Abstand kommt hier von zwei Stellen –
   dem padding-bottom von main (global.css, via #wp--skip-link--target) und dem
   margin-top des Footer-Template-Parts. */
body:not(.home) > .wp-site-blocks > main#wp--skip-link--target:has(> .entry-content > :last-child.alignfull[class*="is-style-spnkt-bg-"]) {
	padding-block-end: 0;
}

main:has(> .entry-content > :last-child.alignfull[class*="is-style-spnkt-bg-"]) + .wp-block-template-part {
	margin-block-start: 0;
}

.spnkt-page-header {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--background);
	isolation: isolate;
	margin-block-start: 0;
	overflow: hidden;
	/* Seitenabstand am Band, nicht am Inner – gleiche Fluchtlinie wie
	   .spnkt-header, das sein Padding ebenfalls aussen trägt. */
	padding: 0 18px;
	position: relative;
}

/* Die Grafik-Ebene liefert die Utility .spnkt-grafik (utilities.css). */

/* Der Part nutzt bewusst layout: default statt constrained – dessen
   margin-inline: auto liesse sich von aussen nur mit !important schlagen.
   Die Breitenbegrenzung übernimmt stattdessen max-width. */
.spnkt-page-header__inner {
	align-items: flex-start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	margin: 0 auto;
	max-width: var(--wp--style--global--content-size);
	min-height: 160px;
	padding-block: 28px;
	text-align: left;
	width: 100%;
}

/* =========================================================================
   Breadcrumb im Band
   ========================================================================= */

.spnkt-page-header .wp-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.spnkt-page-header .wp-block-breadcrumbs a {
	color: var(--wp--preset--color--background);
	font-weight: 700;
	text-decoration: none;
}

.spnkt-page-header .wp-block-breadcrumbs a:hover,
.spnkt-page-header .wp-block-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

.spnkt-page-header .wp-block-breadcrumbs li:last-child {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 400;
}

/* Der Core-Block setzt hier zusätzlich opacity: .7 – zurückgenommen, sonst
   käme die Dämpfung doppelt und fiele unter den AA-Kontrast. */
.spnkt-page-header .wp-block-breadcrumbs li:not(:last-child)::after {
	color: rgba(255, 255, 255, 0.92);
	opacity: 1;
}

/* =========================================================================
   Titel und Leadtext
   ========================================================================= */

/* Eigener Wert statt Preset «large»: Dessen Fluid-Minimum (1.375rem) ist auf
   Mobile zu klein für einen Seitentitel – hier rund 20 % mehr. Das Maximum
   bleibt bei 1.875rem, damit der Übergang zur 782px-Stufe unverändert ist. */
.spnkt-page-header__title {
	color: var(--wp--preset--color--background);
	font-size: clamp(1.65rem, 1.3rem + 1.5vw, 1.875rem);
	margin: 0;
	padding: 0;
	text-indent: 0;
}

.spnkt-page-header__lead {
	margin: 0;
}

/* Überschreibt das max-width: none aus dem Flex-Kontext. */
.spnkt-page-header__inner > .spnkt-page-header__lead {
	max-width: 58ch;
}

.spnkt-page-header__lead:empty {
	display: none;
}

.spnkt-page-header__lead p {
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.spnkt-page-header__lead .wp-block-post-excerpt__more-link {
	display: none;
}

@media (min-width: 782px) {
	.spnkt-page-header__inner {
		gap: 14px;
		min-height: 260px;
		padding-block: 40px;
	}

	.spnkt-page-header__title {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

/* =========================================================================
   Datum (nur Beiträge)
   ========================================================================= */

.spnkt-page-header__datum {
	display: none;
}

.single .spnkt-page-header__datum {
	color: rgba(255, 255, 255, 0.92);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* =========================================================================
   Beitragstitel: rund 30 % kleiner, weil redaktionell deutlich länger
   ========================================================================= */

.single .spnkt-page-header__title {
	font-size: var(--wp--preset--font-size--x-large);
}

@media (min-width: 782px) {
	.single .spnkt-page-header__title {
		font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.9375rem);
	}
}

/* =========================================================================
   Seitenabstand: gleiche Stufen wie .spnkt-header
   ========================================================================= */

@media (min-width: 1024px) {
	.spnkt-page-header {
		padding: 0 24px;
	}
}

@media (min-width: 1200px) {
	.spnkt-page-header {
		padding: 0 40px;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.spnkt-page-header::after {
		display: none;
	}
}