/**
 * Product FAQ — front end.
 *
 * Theme-neutral: inherits the theme's fonts and colors, only adds spacing,
 * a chevron drawn from the current text color, the pointer cursor on
 * questions and a faint divider. The open/close motion itself comes from
 * wda-aisgp-faq-front.js; the chevron turns with a CSS transition.
 */

.wda-aisgp-faq {
	margin: 1.5em 0;
}

.wda-aisgp-faq__title {
	margin: 0 0 0.75em;
}

.wda-aisgp-faq__item {
	box-sizing: border-box;
	border-top: 1px solid rgba(128, 128, 128, 0.3);
	border-top-color: color-mix(in srgb, currentColor 20%, transparent);
}

.wda-aisgp-faq__item:last-child {
	border-bottom: 1px solid rgba(128, 128, 128, 0.3);
	border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}

.wda-aisgp-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.75em 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

/* Focus ring for keyboard users only. Some themes (Twenty Twenty-Four's
   theme.json, for one) outline every focused element, which turns a mouse
   click on a question into a box around it; plain focus is quiet here.
   The ring sits inside the row so the height animation never clips it. */
.wda-aisgp-faq__question:focus {
	outline: none;
	box-shadow: none;
}

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

/* Chevron: a rotated corner, pointing down when closed and up when open. */
.wda-aisgp-faq__question::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin: 0 0.35em 0.25em 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.7;
	transform: rotate(45deg);
	transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), margin 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.wda-aisgp-faq__item[open] > .wda-aisgp-faq__question::after {
	margin-bottom: -0.25em;
	transform: rotate(-135deg);
}

/* With the script active the class, not the attribute, reflects the state,
   so the chevron turns as soon as the motion starts, not when it ends. */
.wda-aisgp-faq--js .wda-aisgp-faq__item[open] > .wda-aisgp-faq__question::after {
	margin-bottom: 0.25em;
	transform: rotate(45deg);
}

.wda-aisgp-faq--js .wda-aisgp-faq__item.is-open > .wda-aisgp-faq__question::after {
	margin-bottom: -0.25em;
	transform: rotate(-135deg);
}

.wda-aisgp-faq__answer {
	padding: 0 0 1em 1.25em;
}

.wda-aisgp-faq__answer > :first-child {
	margin-top: 0;
}

.wda-aisgp-faq__answer > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wda-aisgp-faq__question::after {
		transition: none;
	}
}