/* ==========================================================================
   ShortcodeShowcase Widget — Sidebar-Shortcode-Container
   Bis zu 5 Shortcodes mit Heading, Intro-Text und Footer-Links
   ========================================================================== */

@layer kwl-shortcode-showcase {

/* --- 1. Custom Properties --- */
.kw-shortcode-showcase {
	--kwl-ss-text: var(--kwl-text, #1a202c);
	--kwl-ss-text-muted: var(--kwl-text-muted, #64748b);
	--kwl-ss-accent: var(--kwl-accent, #BD9B5C);
	--kwl-ss-border: var(--kwl-border, #e2e8f0);
	--kwl-ss-gap: var(--kwl-space-lg, 1.5rem);
	--kwl-ss-item-heading-color: var(--kwl-ss-text);
	--kwl-ss-item-intro-color: var(--kwl-ss-text-muted);

	display: flex;
	flex-direction: column;
	gap: var(--kwl-ss-gap);
	color: var(--kwl-ss-text);
}

/* --- 2. Heading --- */
.kw-shortcode-showcase .kw-shortcode-showcase__heading {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h2, clamp(1.5rem, 3.5vw, 2rem));
	line-height: var(--kwl-lh-heading, 1.2);
	margin: 0;
	color: var(--kwl-ss-text);
}

/* --- 3. Items --- */
.kw-shortcode-showcase__items {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-ss-gap);
}

.kw-shortcode-showcase__item {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-shortcode-showcase__item + .kw-shortcode-showcase__item {
	padding-top: var(--kwl-ss-gap);
	border-top: 1px solid var(--kwl-ss-border);
}

/* --- 4. Item Heading --- */
.kw-shortcode-showcase__item-title {
	margin: 0;
	font-family: var(--kwl-font-heading, inherit);
	font-size: var(--kwl-fsize-h4, clamp(1.05rem, 2vw, 1.25rem));
	font-weight: var(--kwl-fw-semibold, 600);
	line-height: var(--kwl-lh-snug, 1.3);
	letter-spacing: var(--kwl-ls-subtle, -0.005em);
	color: var(--kwl-ss-item-heading-color);
}

/* --- 5. Item Intro --- */
.kw-shortcode-showcase__item-intro {
	margin: 0;
	font-size: var(--kwl-fsize-body, 1rem);
	font-weight: var(--kwl-fw-regular, 400);
	line-height: var(--kwl-lh-body, 1.55);
	color: var(--kwl-ss-item-intro-color);
	max-width: 75ch;
	text-wrap: pretty;
}

/* --- 6. Shortcode Content --- */
.kw-shortcode-showcase__item-content {
	margin-top: var(--kwl-space-xs, 0.25rem);
}

/* --- 7. Footer --- */
.kw-shortcode-showcase__footer {
	--kwl-link-color: var(--kwl-ss-accent);

	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-md, 1rem);
	padding-top: var(--kwl-space-md, 1rem);
	border-top: 1px solid var(--kwl-ss-border);
}

.kw-shortcode-showcase__footer a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-weight: var(--kwl-fw-medium, 500);
}

/* --- 8. Editor Placeholder --- */
.kw-shortcode-showcase__placeholder {
	padding: var(--kwl-space-lg, 1.5rem);
	text-align: center;
	color: var(--kwl-text-muted, #64748b);
	font-style: italic;
	border: 2px dashed var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-lg, 12px);
}

/* --- 9. Dark Mode --- */
@media (prefers-color-scheme: dark) {
	.kw-shortcode-showcase__item + .kw-shortcode-showcase__item,
	.kw-shortcode-showcase__footer {
		border-color: var(--kwl-border, #4a5568);
	}
}

/* --- 10. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	.kw-shortcode-showcase,
	.kw-shortcode-showcase a {
		transition: none;
	}
}

/* --- 11. Forced Colors (Windows High Contrast) --- */
@media (forced-colors: active) {
	.kw-shortcode-showcase__item + .kw-shortcode-showcase__item,
	.kw-shortcode-showcase__footer {
		border-color: CanvasText;
	}

	.kw-shortcode-showcase__item-title {
		color: CanvasText;
	}

	.kw-shortcode-showcase__footer a {
		color: LinkText;
	}
}

} /* end @layer kwl-shortcode-showcase */