/**
 * Globale Seitenleiste — Grid-Layout + Gold-Separator
 *
 * DOM-Struktur (via templates/with-sidebar.php):
 * <div class="kwl-sidebar-layout">
 *   <main id="content">…Elementor Content…</main>
 *   <a class="kwl-skip-link" href="#after-sidebar">…</a>
 *   <details class="kwl-sidebar-layout__aside" role="complementary" open>
 *     <summary class="kwl-sidebar-layout__summary">…</summary>
 *     <div class="kwl-sidebar-layout__content">…Template…</div>
 *   </details>
 *   <div id="after-sidebar"></div>
 * </div>
 *
 * Desktop: <summary> versteckt, <details open> zeigt Content direkt (Grid-Spalte).
 * Mobile: <summary> sichtbar, natives <details> klappbar.
 *
 * Sticky-Verhalten wird per Body-Klasse gesteuert:
 * body.kwl-sidebar-sticky → Sidebar scrollt mit und bleibt sichtbar
 *
 * Mobile-Anzeige wird per Body-Klasse gesteuert:
 * body.kwl-sidebar-mobile → Sidebar als klappbarer Bereich unter dem Content (nur < 1024px)
 */

/* ── Layout ────────────────────────────────────────────────────────── */

.kwl-sidebar-layout {
	--kwl-sidebar-width: 320px;

	/* Abstand links und rechts vom Divider — einzeln anpassbar */
	--kwl-sidebar-gap-content: 1.25rem;
	--kwl-sidebar-gap-aside: 1.25rem;

	display: grid;
	grid-template-columns: 1fr minmax(260px, var(--kwl-sidebar-width));
	gap: calc(var(--kwl-sidebar-gap-content) + var(--kwl-sidebar-gap-aside));
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--kwl-space-lg, 1.5rem);
}

/* Verhindert Grid-Blowout bei breiten Elementor-Sektionen */
.kwl-sidebar-layout > main,
.kwl-sidebar-layout > #content {
	min-width: 0;
}

/* ── Sidebar (<details> als Container) ────────────────────────────── */

.kwl-sidebar-layout__aside {
	position: relative;
	padding-top: var(--kwl-space-md, 1rem);
}

/* Desktop: Summary verbergen, Content immer sichtbar (auch ohne open-Attribut) */
.kwl-sidebar-layout__summary {
	display: none;
}

.kwl-sidebar-layout__aside::details-content {
	display: block;
	content-visibility: visible;
}

/* Gold-Separator: Vertikale Linie links an der Sidebar, fadet an beiden Enden aus */
.kwl-sidebar-layout__aside::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(var(--kwl-sidebar-gap-aside, 1.25rem) * -1);
	width: 2px;
	height: 100%;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 5%,
		var(--kwl-accent, #BD9B5C) 15%,
		var(--kwl-accent, #BD9B5C) 85%,
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 95%,
		transparent
	);
	pointer-events: none;
}

/* Sticky nur wenn per Setting aktiviert (Body-Klasse) */
body.kwl-sidebar-sticky .kwl-sidebar-layout__aside {
	position: sticky;
	top: calc(var(--kwl-nav-height, 80px) + var(--kwl-space-md, 1rem));
	max-height: calc(100vh - var(--kwl-nav-height, 80px) - var(--kwl-space-lg, 1.5rem));
	overflow-y: auto;
	padding-bottom: var(--kwl-space-md, 1rem);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent) transparent;
}

/* Elementor-Widgets in der Sidebar auf volle Breite */
.kwl-sidebar-layout__content .elementor-widget {
	width: 100%;
}

/* ── Skip-Link ────────────────────────────────────────────────────── */

.kwl-sidebar-layout .kwl-skip-link:focus-visible {
	position: fixed;
	top: calc(var(--kwl-nav-height, 80px) + var(--kwl-space-sm, 0.5rem));
	left: var(--kwl-space-sm, 0.5rem);
	z-index: 100000;
	padding: var(--kwl-space-xs, 0.5rem) var(--kwl-space-md, 1rem);
	background: var(--kwl-bg, #ffffff);
	color: var(--kwl-primary, #00315d);
	border: 2px solid var(--kwl-focus, #7B6835);
	border-radius: var(--kwl-radius-sm, 4px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
}

/* ── Dark Mode ────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
	/* Separator: rgba statt color-mix (Dark-Mode-Konvention) */
	.kwl-sidebar-layout__aside::before {
		background: linear-gradient(
			to bottom,
			transparent,
			rgba(189, 155, 92, 0.3) 5%,
			var(--kwl-accent, #BD9B5C) 15%,
			var(--kwl-accent, #BD9B5C) 85%,
			rgba(189, 155, 92, 0.3) 95%,
			transparent
		);
	}

	.kwl-sidebar-layout__summary {
		color: var(--kwl-primary, #63b3ed);
		background: var(--kwl-bg-alt, #2d3748);
		border-color: var(--kwl-border, #4a5568);
	}

	.kwl-sidebar-layout .kwl-skip-link:focus-visible {
		background: var(--kwl-bg, #1a202c);
		color: var(--kwl-primary, #63b3ed);
		border-color: var(--kwl-focus, #c9a84c);
	}

	body.kwl-sidebar-sticky .kwl-sidebar-layout__aside {
		scrollbar-color: rgba(189, 155, 92, 0.25) transparent;
	}
}

@media (hover: hover) and (prefers-color-scheme: dark) {
	.kwl-sidebar-layout__summary:hover {
		background: var(--kwl-bg, #1a202c);
		border-color: var(--kwl-accent, #BD9B5C);
	}
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.kwl-sidebar-layout {
		display: block;
		padding: 0;
	}

	/* Desktop-Aside-Darstellung und Skip-Link auf Mobile ausblenden */
	.kwl-sidebar-layout__aside,
	.kwl-sidebar-layout .kwl-skip-link {
		display: none;
	}

	/* Klappbarer Bereich nur wenn per Setting aktiviert */
	body.kwl-sidebar-mobile .kwl-sidebar-layout__aside {
		display: block;
		margin: var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem) 0;
	}

	/* Desktop-Override zurücknehmen: natives <details>-Verhalten auf Mobile */
	body.kwl-sidebar-mobile .kwl-sidebar-layout__aside:not([open])::details-content {
		display: none;
	}

	/* Mobile: Summary sichtbar */
	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
		font-family: var(--kwl-font-heading, serif);
		font-size: var(--kwl-fsize-body, 1rem);
		font-weight: var(--kwl-fw-semibold);
		color: var(--kwl-primary, #00315d);
		background: var(--kwl-bg-alt, #f7fafc);
		border: 1px solid var(--kwl-border, #e2e8f0);
		border-radius: var(--kwl-radius-md, 8px);
		cursor: pointer;
		list-style: none;
		user-select: none;
		transition: background var(--kwl-transition, 200ms ease),
		            border-color var(--kwl-transition, 200ms ease),
		            transform 150ms var(--kwl-ease-decel);
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary:active {
		transform: scale(0.98);
	}

	/* Eigenes Chevron statt nativer Marker — rechts positioniert */
	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary::-webkit-details-marker {
		display: none;
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary::after {
		content: '';
		display: block;
		width: 12px;
		height: 12px;
		border-right: 2px solid var(--kwl-accent, #BD9B5C);
		border-bottom: 2px solid var(--kwl-accent, #BD9B5C);
		transform: rotate(45deg);
		transition: transform var(--kwl-transition, 200ms ease);
		flex-shrink: 0;
		margin-left: var(--kwl-space-sm, 0.5rem);
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__aside[open] > .kwl-sidebar-layout__summary::after {
		transform: rotate(-135deg);
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary:focus-visible {
		outline: 3px solid var(--kwl-focus, #7B6835);
		outline-offset: 2px;
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__content {
		padding: var(--kwl-space-lg, 1.5rem) 0;
	}

	body.kwl-sidebar-mobile .kwl-sidebar-layout__content .elementor-widget {
		width: 100%;
	}

	/* Gold-Separator auf Mobile ausblenden */
	body.kwl-sidebar-mobile .kwl-sidebar-layout__aside::before {
		display: none;
	}

	/* Sticky auf Mobile deaktivieren */
	body.kwl-sidebar-sticky .kwl-sidebar-layout__aside {
		position: static;
		max-height: none;
		overflow-y: visible;
		padding-bottom: 0;
	}
}

@media (hover: hover) and (max-width: 1023px) {
	body.kwl-sidebar-mobile .kwl-sidebar-layout__summary:hover {
		background: var(--kwl-bg, #ffffff);
		border-color: var(--kwl-accent, #BD9B5C);
	}
}

/* ── Reduced Motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.kwl-sidebar-layout__summary {
		transition: none;
	}

	.kwl-sidebar-layout__summary::after {
		transition: none;
	}
}