/**
 * SectionHeading Widget (#40)
 *
 * 7 Stile + Seitenlinien-Feature (kombinierbar mit jedem Stil).
 * Alle Effekte CSS-only, kein JavaScript.
 *
 * Dark-Mode-Strategie:
 *   Titel + Untertitel: erben vom Container (kein eigener Hintergrund nötig).
 *   Gold-Tokens: funktionieren auf hellem UND dunklem Hintergrund.
 *   Outline + Shimmer: verwenden --kwl-primary bzw. --kwl-accent als Fallback.
 */

/* =========================================================
   1. Widget-Scope Custom Properties
   ========================================================= */

.kw-sh {
	--kwl-sh-eyebrow-color: var(--kwl-accent, #BD9B5C);
	--kwl-sh-accent-color: var(--kwl-accent, #BD9B5C);
	--kwl-sh-separator-color: var(--kwl-accent, #BD9B5C);
	--kwl-sh-separator-height: 2px;
	--kwl-sh-icon-size: 40px;
	--kwl-sh-icon-color: var(--kwl-accent, #BD9B5C);
	--kwl-sh-gap: var(--kwl-space-sm, 0.5rem);
}

/* =========================================================
   2. Base Layout + Alignment
   ========================================================= */

.kw-sh {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-sh-gap);
	align-self: flex-start;
}

.kw-sh[data-kwl-heading-align="left"] {
	align-items: flex-start;
	text-align: left;
}

.kw-sh[data-kwl-heading-align="center"] {
	align-items: center;
	text-align: center;
}

.kw-sh[data-kwl-heading-align="right"] {
	align-items: flex-end;
	text-align: right;
}

/* =========================================================
   3. Eyebrow
   ========================================================= */

.kw-sh__eyebrow {
	margin: 0;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-ultra);
	text-transform: uppercase;
	color: var(--kwl-sh-eyebrow-color);
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	line-height: var(--kwl-lh-body, 1.5);
}

.kw-sh [data-kwl-icon-circle] {
	--kwl-icon-color: var(--kwl-sh-icon-color);
	--kwl-icon-size: var(--kwl-sh-icon-size);
}

/* =========================================================
   4. Title
   ========================================================= */

/* --kwl-sh-title-color ist absichtlich undefiniert → erbt vom Container.
   Elementor-Style-Control setzt die Property nur bei expliziter Nutzerwahl.
   .kw-sh__title-text: display: contents → transparent fuer alle Stile
   AUSSER "lined" (dort flex-item fuer die Linien-Positionierung). */

.kw-sh__title-text {
	display: contents;
}

.kw-sh__title {
	margin: 0;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h2);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-sh-title-color);
	text-wrap: balance;
}

.kw-sh__accent {
	color: var(--kwl-sh-accent-color);
}

/* =========================================================
   5. Separator (Basis)
   Bug-Fix: width: 100% ist PFLICHT — ohne explizite Breite
   kollabiert ein leerer <div> im Flex-Column-Layout auf 0px.
   ========================================================= */

.kw-sh__separator {
	width: 100%;
	max-width: 80px;
	height: var(--kwl-sh-separator-height);
	border-radius: 1px;
	background: linear-gradient(
		to right,
		var(--kwl-sh-separator-color),
		color-mix(in srgb, var(--kwl-sh-separator-color) 40%, transparent),
		transparent
	);
}

.kw-sh[data-kwl-heading-align="center"] .kw-sh__separator {
	max-width: 120px;
	background: linear-gradient(
		to right,
		transparent,
		var(--kwl-sh-separator-color),
		transparent
	);
}

.kw-sh[data-kwl-heading-align="right"] .kw-sh__separator {
	background: linear-gradient(
		to left,
		var(--kwl-sh-separator-color),
		color-mix(in srgb, var(--kwl-sh-separator-color) 40%, transparent),
		transparent
	);
}

.kw-sh__ornament {
	display: none;
}

/* =========================================================
   6. Subtitle
   ========================================================= */

/* --kwl-sh-subtitle-color ist absichtlich undefiniert → erbt vom Container.
   Differenzierung durch Typografie: italic + leichteres Gewicht. */
.kw-sh__subtitle {
	margin: 0;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body);
	font-style: italic;
	font-weight: var(--kwl-fw-light);
	color: var(--kwl-sh-subtitle-color);
	line-height: var(--kwl-lh-body, 1.5);
	max-width: 60ch;
	text-wrap: pretty;
}

/* =========================================================
   7. Stil: Classic Gold
   ========================================================= */

/* Basis-Styles reichen aus — Gold-Gradient-Linie ist der Standard. */

/* =========================================================
   8. Stil: Ornamental
   ========================================================= */

.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator {
	width: 100%;
	max-width: 280px;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	background: none;
	height: auto;
}

.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator::before,
.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator::after {
	content: '';
	flex: 1;
	height: 1px;
}

.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator::before {
	background: linear-gradient(to right, transparent, var(--kwl-sh-separator-color));
}

.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator::after {
	background: linear-gradient(to left, transparent, var(--kwl-sh-separator-color));
}

.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__ornament {
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background: var(--kwl-sh-separator-color);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* =========================================================
   9. Stil: Split-Color
   ========================================================= */

.kw-sh[data-kwl-heading-style="split-color"] .kw-sh__separator {
	max-width: 100%;
	height: 1px;
	background: var(--kwl-border, #e2e8f0);
}

.kw-sh[data-kwl-heading-style="split-color"][data-kwl-heading-align="center"] .kw-sh__separator,
.kw-sh[data-kwl-heading-style="split-color"][data-kwl-heading-align="right"] .kw-sh__separator {
	background: var(--kwl-border, #e2e8f0);
}

/* =========================================================
   10. Stil: Shimmer
   Stärkerer Kontrast im Gradient + schnellerer Zyklus (8s)
   für deutlich sichtbare Animation.
   ========================================================= */

.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__title {
	font-size: var(--kwl-fsize-h1);
	color: var(--kwl-sh-accent-color);
}

@supports (background-clip: text) {
	.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__title {
		background: linear-gradient(
			105deg,
			var(--kwl-sh-accent-color) 0%,
			var(--kwl-sh-accent-color) 20%,
			color-mix(in srgb, var(--kwl-sh-accent-color) 40%, #fff) 40%,
			color-mix(in srgb, var(--kwl-sh-accent-color) 30%, #fff) 50%,
			color-mix(in srgb, var(--kwl-sh-accent-color) 40%, #fff) 60%,
			var(--kwl-sh-accent-color) 80%,
			var(--kwl-sh-accent-color) 100%
		);
		background-size: 300% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: kw-sh-shimmer 8s ease-in-out infinite;
	}

	.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__accent {
		color: transparent;
	}
}

@keyframes kw-sh-shimmer {
	0%,
	100% {
		background-position: 100% 50%;
	}

	50% {
		background-position: 0% 50%;
	}
}

/* =========================================================
   11. Stil: Minimal
   ========================================================= */

/* Bewusst leer — nutzt nur Basis-Styles ohne Separator. */

/* =========================================================
   12. Stil: Outline
   Stroke immer in --kwl-primary (dunkelblau Light / hellblau Dark).
   Accent-Wort in Gold.
   ========================================================= */

.kw-sh[data-kwl-heading-style="outline"] .kw-sh__title {
	font-size: var(--kwl-fsize-h1);
	color: var(--kwl-sh-title-color, var(--kwl-primary, #00315d));
}

@supports (-webkit-text-stroke: 1px black) {
	.kw-sh[data-kwl-heading-style="outline"] .kw-sh__title {
		-webkit-text-stroke: 2px var(--kwl-sh-title-color, var(--kwl-primary, #00315d));
		color: transparent;
	}

	.kw-sh[data-kwl-heading-style="outline"] .kw-sh__accent {
		-webkit-text-stroke-color: var(--kwl-sh-accent-color);
		color: transparent;
	}
}

/* =========================================================
   13. Stil: Depth (Letterpress / Praegung)
   Highlight oben (weiss) + Schatten unten (dunkel) = 3D-Praegung.
   ========================================================= */

.kw-sh[data-kwl-heading-style="depth"] .kw-sh__title {
	text-shadow:
		0 -1px 0 color-mix(in srgb, #fff 35%, transparent),
		0 1px 1px color-mix(in srgb, var(--kwl-primary, #00315d) 25%, transparent),
		0 3px 6px color-mix(in srgb, var(--kwl-primary, #00315d) 20%, transparent),
		0 8px 16px color-mix(in srgb, var(--kwl-primary, #00315d) 10%, transparent);
}

/* =========================================================
   14. Feature: Seitenlinien (--lined)
   Goldene Linien links und rechts neben der Ueberschrift.
   Unabhaengig vom Stil per Toggle aktivierbar.
   .kw-sh__title-text haelt den Text als ein Flex-Item zusammen.
   ========================================================= */

/* Mobile First: Auf Mobil kein Flex, normaler Textumbruch.
   Ab 600px: Flex-Layout mit Seitenlinien.
   Darunter: Heading verhält sich wie jede andere Ueberschrift. */

@media (min-width: 600px) {
	.kw-sh--lined .kw-sh__title {
		align-self: stretch;
		display: flex;
		align-items: center;
		gap: var(--kwl-space-md, 1rem);
	}

	.kw-sh--lined .kw-sh__title-text {
		display: inline;
		flex-shrink: 0;
	}

	.kw-sh--lined .kw-sh__title::before,
	.kw-sh--lined .kw-sh__title::after {
		content: '';
		flex: 1;
		height: 1px;
		min-width: 24px;
	}

	/* --kwl-sh-lines-color: eigene Property, Fallback auf Separator-Gold */
	.kw-sh--lined .kw-sh__title::before {
		background: linear-gradient(to right, transparent, var(--kwl-sh-lines-color, var(--kwl-sh-separator-color)));
	}

	.kw-sh--lined .kw-sh__title::after {
		background: linear-gradient(to left, transparent, var(--kwl-sh-lines-color, var(--kwl-sh-separator-color)));
	}

	/* Linksbuendig: Nur rechte Linie */
	.kw-sh[data-kwl-heading-align="left"].kw-sh--lined .kw-sh__title::before {
		display: none;
	}

	/* Rechtsbuendig: Nur linke Linie */
	.kw-sh[data-kwl-heading-align="right"].kw-sh--lined .kw-sh__title::after {
		display: none;
	}
}

/* =========================================================
   15. Scroll-Reveal (unabhaengig vom Stil)
   Einfacher Fade-In + Slide-Up beim Scrollen ins Bild.
   ========================================================= */

@supports (animation-timeline: view()) {
	.kw-sh--reveal {
		animation: kwl-reveal-up linear forwards;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}
}

/* =========================================================
   16. Dark Mode
   Titel/Untertitel erben vom Container — kein eigener Hintergrund.
   Nur stil-spezifische Anpassungen für Dekorationen.
   ========================================================= */

@media (prefers-color-scheme: dark) {
	/* Depth: Letterpress → Gold-Glow (3 Schichten) */
	.kw-sh[data-kwl-heading-style="depth"] .kw-sh__title {
		text-shadow:
			0 0 8px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 45%, transparent),
			0 0 24px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent),
			0 0 48px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, transparent);
	}

	/* Split-Color: Dunklerer Border-Separator */
	.kw-sh[data-kwl-heading-style="split-color"] .kw-sh__separator,
	.kw-sh[data-kwl-heading-style="split-color"][data-kwl-heading-align="center"] .kw-sh__separator,
	.kw-sh[data-kwl-heading-style="split-color"][data-kwl-heading-align="right"] .kw-sh__separator {
		background: var(--kwl-border, #4a5568);
	}

}

/* Dark-Mode Shimmer: Wärmere Highlight-Farbe */
@media (prefers-color-scheme: dark) {
	@supports (background-clip: text) {
		.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__title {
			background-image: linear-gradient(
				105deg,
				var(--kwl-sh-accent-color) 0%,
				var(--kwl-sh-accent-color) 20%,
				color-mix(in srgb, var(--kwl-sh-accent-color) 50%, #e8d5a8) 40%,
				color-mix(in srgb, var(--kwl-sh-accent-color) 35%, #e8d5a8) 50%,
				color-mix(in srgb, var(--kwl-sh-accent-color) 50%, #e8d5a8) 60%,
				var(--kwl-sh-accent-color) 80%,
				var(--kwl-sh-accent-color) 100%
			);
		}
	}
}

/* Dark-Mode Outline: primary wechselt automatisch (dunkelblau → hellblau) */
@media (prefers-color-scheme: dark) {
	@supports (-webkit-text-stroke: 1px black) {
		.kw-sh[data-kwl-heading-style="outline"] .kw-sh__title {
			-webkit-text-stroke: 2px var(--kwl-sh-title-color, var(--kwl-primary, #63b3ed));
		}
	}
}

/* =========================================================
   17. Reduced Motion (BFSG)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__title {
		animation: none;
		background: none;
		-webkit-background-clip: unset;
		background-clip: unset;
		color: var(--kwl-sh-accent-color);
	}

	.kw-sh[data-kwl-heading-style="shimmer"] .kw-sh__accent {
		color: var(--kwl-sh-accent-color);
	}

	.kw-sh--reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   18. Responsive
   ========================================================= */

@media (min-width: 768px) {
	.kw-sh__eyebrow {
		font-size: var(--kwl-fsize-small);
	}

	.kw-sh[data-kwl-heading-style="ornamental"] .kw-sh__separator {
		max-width: 360px;
	}
}

/* =========================================================
   19. Elementor V4 Reset
   ========================================================= */

.elementor-widget .kw-sh .kw-sh__title,
.elementor-widget .kw-sh .kw-sh__eyebrow,
.elementor-widget .kw-sh .kw-sh__subtitle {
	margin: 0;
}