/*
 * FAQ block (news-element/bm-faq), loaded by ne_bm_enqueue_assets. Defaults sit in :where(), which gives them zero specificity, so the
 * block's own Style-tab values (written as .ne-block-{id} rules) always win.
 */

:where(.ne-bm-faq__list) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

:where(.ne-bm-faq__item) {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	background-color: #ffffff;
}

:where(.ne-bm-faq__question) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

:where(.ne-bm-faq__question)::-webkit-details-marker {
	display: none;
}

/* The indicator is drawn with backgrounds, not text, so screen readers do not read it out. */
:where(.ne-bm-faq__question)::after {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	/* content-box: the Icon tab's frame padding and border sit around the sign, not under it. */
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat content-box,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat content-box;
}

/* Outside :where() so it beats the controls' border-box reset; Size is the sign itself. */
.ne-bm-faq__list .ne-bm-faq__question::after {
	box-sizing: content-box;
}

:where(.ne-bm-faq__item[open] > .ne-bm-faq__question)::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat content-box;
}

:where(.ne-bm-faq__answer) {
	padding-top: 0.5rem;
}

.ne-bm-faq__question:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Tabs layout: the questions in a column, the answer beside them. Narrow screens stack them. */
:where(.ne-bm-faq__tabs) {
	display: grid;
	gap: 1rem;
}

:where(.ne-bm-faq__tablist) {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

:where(.ne-bm-faq__panels) {
	min-width: 0;
}

:where(.ne-bm-faq__tab) {
	width: 100%;
	margin: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	appearance: none;
	cursor: pointer;
}

/* Tab buttons use the question style, so the indicator from the accordion is off. */
.ne-bm-faq__tab::after {
	content: none;
}

:where(.ne-bm-faq__tab[aria-selected="true"]) {
	border-color: #2563eb;
	box-shadow: inset 3px 0 0 #2563eb;
}

:where(.ne-bm-faq__panel) {
	padding: 0.25rem 0;
}

.ne-bm-faq__tabs.is-enhanced .ne-bm-faq__panel:not(.is-active) {
	display: none;
}

@media (min-width: 768px) {
	:where(.ne-bm-faq__tabs) {
		grid-template-columns: minmax(14rem, 1fr) 2fr;
		align-items: start;
	}
}