/**
 * FAQs with Schema — default accordion styles.
 *
 * Deliberately light: inherits the theme's fonts and colours. Turn off under
 * FAQs → Settings → Load default styles to style it yourself.
 *
 * Colours from FAQs → Settings → Appearance arrive as custom properties on
 * .fws-faqs (--fws-question-color, --fws-question-bg, --fws-answer-color,
 * --fws-answer-bg, --fws-border, --fws-icon-color, plus --fws-pad, a side-padding factor used
 * with backgrounds, and --fws-pad-y), spacing as --fws-question-pad, --fws-answer-pad-top and
 * --fws-answer-pad-bottom. Unset ones fall back to the theme or the default spacing.
 *
 * With a Question style chosen, the question text sits in an h1–h5 or p (.fws-faq__question-text)
 * and takes the theme's styles for that element. The icon column and side padding stay in the
 * base text size, so answers line up with the question text whatever its size.
 */

.fws-faqs {
	--fws-border: color-mix(in srgb, currentColor 20%, transparent);
	--fws-gap: 0.9em;
	margin-block: 1.5em;
}

/*
 * The icon sits in a fixed 1.25em column with a 1em gap, so answers can be kept clear of it
 * (2.25em on the icon's side) and line up with the question text.
 */

.fws-group + .fws-group {
	margin-block-start: 2em;
}

.fws-group__title {
	margin-block: 0 0.5em;
}

.fws-faq {
	border-block-end: 1px solid var(--fws-border);
}

.fws-faq:first-of-type {
	border-block-start: 1px solid var(--fws-border);
}

.fws-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-block: var(--fws-question-pad, var(--fws-gap));
	padding-inline: calc(var(--fws-pad, 0) * 1em);
	color: var(--fws-question-color, inherit);
	background: var(--fws-question-bg, transparent);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

/* Question style: an h1–h5 or p keeps the theme's size, font and weight, without its outer margins. */
.fws-faq__question-text {
	flex: 1;
	margin: 0;
}

/* Icon: plus / minus (default). */
.fws-faq__question::after {
	content: "+";
	content: "+" / ""; /* Empty alt text: decorative, so screen readers don't announce it. */
	flex-shrink: 0;
	width: 1em; /* 1.25em of the question's text size, as this icon is 1.25× larger. */
	color: var(--fws-icon-color, currentColor);
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1;
	text-align: center;
}

.fws-faq[open] > .fws-faq__question::after {
	content: "\2212";
	content: "\2212" / "";
}

/* Icon: chevron. */
.fws-faqs--icon-chevron .fws-faq__question::after,
.fws-faqs--icon-chevron .fws-faq[open] > .fws-faq__question::after {
	content: "";
	content: "" / "";
	box-sizing: content-box;
	width: 0.45em;
	height: 0.45em;
	margin-inline: calc((1.25em - 0.45em - 2px) / 2); /* Fills the 1.25em icon column. */
	font-size: 1em;
	border-inline-end: 2px solid var(--fws-icon-color, currentColor);
	border-block-end: 2px solid var(--fws-icon-color, currentColor);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.fws-faqs--icon-chevron .fws-faq[open] > .fws-faq__question::after {
	transform: translateY(25%) rotate(-135deg);
}

/* Icon: arrow. */
.fws-faqs--icon-arrow .fws-faq__question::after,
.fws-faqs--icon-arrow .fws-faq[open] > .fws-faq__question::after {
	content: "\25B8";
	content: "\25B8" / "";
	width: 1.25em;
	font-size: 1em;
	transition: transform 0.2s ease;
}

.fws-faqs--icon-arrow .fws-faq[open] > .fws-faq__question::after {
	transform: rotate(90deg);
}

/* Icon: none. */
.fws-faqs--icon-none .fws-faq__question::after {
	display: none;
}

/* Icon on the left. */
.fws-faqs--icon-left .fws-faq__question {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Keep answers clear of the icon on whichever side it sits; use the full width when there's no icon. */
.fws-faqs--icon-left .fws-faq__answer {
	padding-inline: calc((var(--fws-pad, 0) + 2.25) * 1em) calc(var(--fws-pad, 0) * 1em);
}

.fws-faqs--icon-none .fws-faq__answer {
	padding-inline: calc(var(--fws-pad, 0) * 1em);
}

.fws-faq__question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.fws-faq__question:focus-visible {
		outline-color: Highlight;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fws-faq__question::after {
		transition: none !important;
	}
}

.fws-faq__answer {
	padding-block: var(--fws-answer-pad-top, var(--fws-pad-y, 0)) var(--fws-answer-pad-bottom, var(--fws-gap));
	padding-inline: calc(var(--fws-pad, 0) * 1em) calc((var(--fws-pad, 0) + 2.25) * 1em);
	color: var(--fws-answer-color, inherit);
	background: var(--fws-answer-bg, transparent);
}

.fws-faq__answer > :first-child {
	margin-block-start: 0;
}

.fws-faq__answer > :last-child {
	margin-block-end: 0;
}

.fws-faq__answer img {
	max-width: 100%;
	height: auto;
}