/* [bm_faq] – scoped to .bm-faq. Follows the surrounding text colour, so it works on light and dark sections. */

.bm-faq {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	font: 400 17px/1.55 var(--bm-body);
}
.bm-faq *, .bm-faq *::before, .bm-faq *::after { box-sizing: border-box; }

.bm-faq__item { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.bm-faq__item:first-child { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

.bm-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.bm-faq__question::-webkit-details-marker { display: none; }
.bm-faq__question::after {
	content: "";
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background:
		linear-gradient(var(--bm-dark), var(--bm-dark)) center / 12px 2px no-repeat,
		linear-gradient(var(--bm-dark), var(--bm-dark)) center / 2px 12px no-repeat,
		var(--bm-green);
	transition: transform .2s ease;
}
.bm-faq__item[open] .bm-faq__question::after { transform: rotate(45deg); }
.bm-faq__question:focus-visible { outline: 3px solid var(--bm-green); outline-offset: 2px; border-radius: 8px; }

.bm-faq__answer { padding: 0 52px 22px 4px; opacity: .8; }
.bm-faq__answer p { margin: 0 0 10px; }
.bm-faq__answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.bm-faq__question::after { transition: none; }
}