/**
 * FAQ accordion
 *
 * Shared by every block with a question list — currently Text + FAQ and FAQ.
 * Registered as its own style handle in inc/enqueue.php and named in each
 * block's block.json, so it stays a single source of truth without loading on
 * pages that have no accordion on them.
 *
 * Built on <details>/<summary>: keyboard operable, announced correctly by
 * screen readers, and open/closable before any JavaScript runs. "One open at a
 * time" uses the `name` attribute, which is native, so no block using this
 * ships a script.
 *
 * @package Norwegian_Flagstone
 */

.nf-faq {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nf-faq__item {
	border-block-end: var(--nf-border-width) solid var(--nf-color-border);
	margin: 0;
}

.nf-faq__question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var(--nf-font-body);
	font-size: var(--nf-fs-body);
	font-weight: var(--nf-font-weight-medium);
	gap: var(--nf-space-m);
	justify-content: space-between;
	line-height: var(--nf-lh-body);

	/* Removes the default disclosure triangle. */
	list-style: none;
	padding-block: var(--nf-space-s);
	transition: color var(--nf-transition);
}

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

.nf-faq__question:hover,
.nf-faq__details[open] > .nf-faq__question {
	color: var(--nf-color-link-hover);
}

.nf-faq__question:focus-visible {
	outline: 2px solid var(--nf-color-accent);
	outline-offset: 2px;
}

.nf-faq__label {
	min-width: 0;
}

/* Plus / minus icon -------------------------------------------------------- */

/*
 * Two crossed bars: the vertical one rotates flat when the item opens, turning
 * the plus into a minus. Sharper than an icon file at any zoom, and it inherits
 * currentcolor so it follows the hover and dark-background states.
 */
.nf-faq__icon {
	flex: 0 0 auto;
	height: 0.75rem;
	position: relative;
	width: 0.75rem;
}

.nf-faq__icon::before,
.nf-faq__icon::after {
	background-color: currentcolor;
	content: "";
	height: 1.5px;
	inset-block-start: 50%;
	inset-inline-start: 0;
	position: absolute;
	transform: translateY(-50%);
	transition: transform var(--nf-transition);
	width: 100%;
}

.nf-faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.nf-faq__details[open] .nf-faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
}

/* Answer ------------------------------------------------------------------- */

.nf-faq__answer {
	color: var(--nf-color-text);
	font-size: var(--nf-fs-body);
	line-height: var(--nf-lh-loose);
	padding-block-end: var(--nf-space-s);

	/* Clear of the icon column. */
	padding-inline-end: var(--nf-space-xl);
}

.nf-faq__answer p + p {
	margin-top: var(--nf-space-s);
}

/*
 * Progressive enhancement: animate the open/close where the browser can
 * interpolate to and from `auto`. Everywhere else the panel simply snaps open,
 * which is the normal <details> behaviour.
 */
@supports (interpolate-size: allow-keywords) {

	.nf-faq__details {
		interpolate-size: allow-keywords;
	}

	.nf-faq__details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size var(--nf-duration) var(--nf-ease),
			content-visibility var(--nf-duration) allow-discrete;
	}

	.nf-faq__details[open]::details-content {
		block-size: auto;
	}
}