/*
 * am-faq — an accordion FAQ (e.g. the workshop objection FAQ). Native
 * <details>/<summary> disclosure: accessible and JS-free.
 *
 * In Elementor use an HTML widget with this markup (or the Accordion widget if you
 * prefer, though that carries its own styling):
 *   <div class="am-faq">
 *     <details class="am-faq__item">
 *       <summary class="am-faq__q">Fråga?</summary>
 *       <div class="am-faq__a"><p>Svar.</p></div>
 *     </details>
 *   </div>
 */

.am-faq {
	max-width: var(--am-measure);
}

.am-faq__item {
	border-block-end: 1px solid var(--am-color-border);
}

.am-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-400);
	padding-block: var(--am-space-400);
	color: var(--am-color-heading);
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	list-style: none;
	cursor: pointer;
}

/* Hide the native disclosure triangle. */
.am-faq__q::-webkit-details-marker {
	display: none;
}

/* Chevron that flips when open. */
.am-faq__q::after {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	border-right: 2px solid var(--am-color-accent);
	border-bottom: 2px solid var(--am-color-accent);
	transform: rotate(45deg);
	transition: transform var(--am-transition);
}

.am-faq__item[open] .am-faq__q::after {
	transform: rotate(-135deg);
}

.am-faq__a {
	padding-block: 0 var(--am-space-400);
	color: var(--am-color-text);
}

.am-faq__a > :first-child { margin-block-start: 0; }
.am-faq__a > :last-child { margin-block-end: 0; }

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