nav#faq {
	height: max-content;
	display: block;
	background-color: var(--base-100);
	border-radius: var(--radius-outer);
	padding: 1.5rem;
	touch-action: auto;
	ol {
		list-style: decimal-leading-zero;
		height: fit-content;
		display: block;
		counter-reset: faq;
		li {
			counter-increment: faq;
			width: max-content;
			&::before {
				content: counter(faq);
				display: block;
				font-family: var(--heading);
				font-weight: var(--fw-h-bold);
			}
		}
	}
	h2 {
		left: 0;
		font-size: var(--txt-large);
		margin: .5rem 0 .5rem;
	}
	a {
		padding: .5rem;
	}
}

.faq-block {
	padding-bottom: 3rem;
	max-width: none;
	width: 100%;
	> * {
		max-width: var(--wide);
		margin: 1rem auto;
	}
	h2 {
		margin: 5rem 0 1.5rem;
	}
	h3 {
		margin: 0;
		text-transform: none;
	}
	:target {
		background-color: var(--base);
		outline: none;

		h2 {
			background-color: var(--base);
			padding: 1rem 1.5rem;
			border-radius: var(--radius-outer);
		}
	}
	details {
		max-width: var(--content);
		margin: 1rem auto;
		padding: .75rem;
	}
	details + details {
		margin-top: 3rem;
	}
	details .button {
		height: fit-content;
		display: flex;
		margin-left: auto;
	}
}