/* S12 FAQ: native details elements. Works without scripting; the plus becomes a minus when open. */

.nbt-faq-list {
	max-width: 58rem;
	margin-block-start: var(--space-8);
	counter-reset: nbt-q;
	border-top: var(--border);
}

.nbt-faq-list > .wp-block-details {
	margin: 0;
	border-bottom: var(--border);
	counter-increment: nbt-q;
}

.nbt-faq-list > .wp-block-details[open] {
	background: var(--c-surface);
	box-shadow: inset 3px 0 0 var(--c-brand);
}

.nbt-faq-list summary {
	display: grid;
	min-height: 64px;
	grid-template-columns: 3.5rem minmax(0, 1fr) 36px;
	align-items: center;
	padding-block: var(--space-4);
	color: var(--c-ink);
	cursor: pointer;
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
}

.nbt-faq-list summary::-webkit-details-marker {
	display: none;
}

.nbt-faq-list summary::before {
	content: counter(nbt-q, decimal-leading-zero);
	padding-inline-start: var(--space-3);
	color: var(--c-ink-3);
	font: 500 var(--text-sm) / 1 var(--font-mono);
}

.nbt-faq-list summary::after {
	content: "";
	width: 36px;
	height: 36px;
	border: var(--border-strong);
	border-radius: var(--radius-xs);
	background:
		linear-gradient(currentcolor, currentcolor) center / 14px 2px no-repeat,
		linear-gradient(currentcolor, currentcolor) center / 2px 14px no-repeat;
}

.nbt-faq-list details[open] > summary::after {
	background-size: 14px 2px, 0 0;
}

.nbt-faq-list summary:hover {
	color: var(--c-brand);
}

.nbt-faq-list summary:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: -3px;
}

.nbt-faq-list details > :not(summary) {
	max-width: 68ch;
	margin: 0;
	padding: 0 var(--space-4) var(--space-4) 3.5rem;
	color: var(--c-ink-2);
}

/* Print: every answer is shown, open or not. */
@media print {

	.nbt-faq-list details::details-content {
		display: block;
		content-visibility: visible;
	}
}