/**
 * FAQ Manager — frontend styles.
 *
 * Intentionally minimal. The accordion uses native <details>/<summary> so it
 * inherits the theme's typography (font, color, headings). These rules only
 * provide layout, spacing, and the open/close affordance — they avoid setting
 * fonts or colors so the active theme stays in control.
 */

.fqm-faq {
	margin: 1.5em 0;
}

.fqm-faq .fqm-title {
	margin: 0 0 0.75em;
}

.fqm-item {
	border-bottom: 1px solid currentColor;
	border-color: rgba( 0, 0, 0, 0.12 );
}

.fqm-item:first-of-type {
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

/* Summary row — the clickable question. */
.fqm-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	cursor: pointer;
	padding: 0.9em 0.25em;
	list-style: none; /* remove default marker */
}

/* Remove the default disclosure triangle across browsers. */
.fqm-question::-webkit-details-marker {
	display: none;
}
.fqm-question::marker {
	content: "";
}

.fqm-question-text {
	margin: 0;
	font-size: inherit;
	line-height: 1.4;
}

/* Plus / minus icon drawn with CSS so no images or fonts are needed. */
.fqm-icon {
	position: relative;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}
.fqm-icon::before,
.fqm-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7em;
	height: 2px;
	background: currentColor;
	transform: translate( -50%, -50% );
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.fqm-icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

/* When open, turn the plus into a minus. */
.fqm-item[open] .fqm-icon::after {
	transform: translate( -50%, -50% ) rotate( 0deg );
	opacity: 0;
}

.fqm-answer {
	padding: 0 0.25em 1em;
	line-height: 1.6;
}

.fqm-answer > :first-child {
	margin-top: 0;
}
.fqm-answer > :last-child {
	margin-bottom: 0;
}