/**
 * Component: FAQ
 *
 * Gebouwd op <details>/<summary>: toegankelijk zonder JavaScript.
 */

.bw-faq__inner {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

@media (min-width: 60rem) {
	.bw-faq__inner {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}

	.bw-faq__intro {
		position: sticky;
		top: calc(var(--bw-header-height) + 2rem);
	}
}

.bw-faq__title {
	max-width: 16ch;
}

.bw-faq__list {
	display: grid;
}

.bw-faq__item {
	border-block-end: 1px solid var(--bw-surface-border, var(--bw-border));
}

.bw-faq__item:first-child {
	border-block-start: 1px solid var(--bw-surface-border, var(--bw-border));
}

.bw-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bw-space-md);
	padding-block: var(--bw-space-md);
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-lg);
	line-height: var(--bw-leading-snug);
	cursor: pointer;
	list-style: none;
	transition: color var(--bw-duration) var(--bw-ease);
}

.bw-faq__question::-webkit-details-marker {
	display: none;
}

.bw-faq__question:hover {
	color: var(--bw-accent-text, var(--bw-caramel-ink));
}

.bw-faq__marker {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--bw-accent-text, var(--bw-caramel-ink));
	transition: transform var(--bw-duration) var(--bw-ease);
}

.bw-faq__item[open] .bw-faq__marker {
	transform: rotate(45deg);
}

.bw-faq__answer {
	padding-block-end: var(--bw-space-md);
	max-width: 60ch;
	color: var(--bw-surface-muted, var(--bw-text-muted));
}

.bw-faq__answer p + p {
	margin-block-start: var(--bw-space-sm);
}