/**
 * Utility: Collapsible / accordion  (assets/js/collapsible.js)
 *
 * A reusable show/hide utility used by patterns, not a pattern itself. Kept as
 * its own partial so a pattern that opts into it has a stable, shared dependency.
 */

.kd-collapsible--hidden {
	display: none;
}

.kd-collapsible-content {
	margin-top: var(--blg-space-md);
}

.kd-collapsible-toggle {
	display: inline-block;
	margin-top: var(--blg-space-md);
	padding: 0.75em 2em;
	background-color: var(--blg-btn-bg);
	color: var(--blg-btn-fg);
	border: 2px solid var(--blg-btn-bg);
	border-radius: 100px;
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-btn, 1.125rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: all 250ms ease;
}

.kd-collapsible-toggle:hover {
	background-color: var(--blg-btn-bg-hover);
	border-color: var(--blg-btn-bg-hover);
	color: var(--blg-btn-fg);
	transform: translateY(-2px);
}