/**
 * WP FAQs frontend styles.
 *
 * Every color is a custom property so a theme can override any of them without
 * fighting specificity:
 *
 *   .wpfaq { --wpfaq-accent: #c00; }
 *
 * The settings page publishes the site defaults into these same properties.
 */

.wpfaq {
	--wpfaq-accent: #2271b1;
	--wpfaq-text: inherit;
	--wpfaq-border: #e0e0e0;
	--wpfaq-radius: 6px;
	--wpfaq-gap: 12px;
	--wpfaq-padding: 16px;

	color: var(--wpfaq-text);
}

.wpfaq__set + .wpfaq__set {
	margin-top: calc(var(--wpfaq-gap) * 2);
}

.wpfaq__set-title {
	margin: 0 0 var(--wpfaq-gap);
}

.wpfaq__intro {
	margin-bottom: var(--wpfaq-gap);
}

.wpfaq__intro > *:first-child {
	margin-top: 0;
}

.wpfaq__intro > *:last-child {
	margin-bottom: 0;
}

.wpfaq__item {
	position: relative;
}

/* Question */

.wpfaq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--wpfaq-padding);
	cursor: pointer;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
}

.wpfaq__question::-webkit-details-marker {
	display: none;
}

.wpfaq__question:hover .wpfaq__question-text,
.wpfaq__item[open] > .wpfaq__question .wpfaq__question-text {
	color: var(--wpfaq-accent);
}

.wpfaq__question:focus-visible {
	outline: 2px solid var(--wpfaq-accent);
	outline-offset: -2px;
}

/*
A summary keeps focus after a mouse click, which leaves a focus ring sitting
on the question until you click elsewhere. Drop it for pointer input only.
Keyboard focus still shows the ring above, so this costs nothing for anyone
navigating by keyboard.

The .wpfaq ancestor is here for specificity: themes commonly set a focus
outline with a broad selector, and this needs to outrank it.
*/

.wpfaq .wpfaq__question:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.wpfaq__question-text {
	min-width: 0;
}

/* Expand icon */

.wpfaq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--wpfaq-accent);
}

.wpfaq__icon::before,
.wpfaq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.wpfaq__icon::before {
	width: 100%;
	height: 2px;
}

.wpfaq__icon::after {
	width: 2px;
	height: 100%;
}

.wpfaq__item[open] > .wpfaq__question .wpfaq__icon::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

/* Answer */

.wpfaq__answer {
	padding: 0 var(--wpfaq-padding) var(--wpfaq-padding);
}

.wpfaq__answer > *:first-child {
	margin-top: 0;
}

.wpfaq__answer > *:last-child {
	margin-bottom: 0;
}

/* Boxed */

.wpfaq--boxed .wpfaq__item {
	margin-bottom: var(--wpfaq-gap);
	border: 1px solid var(--wpfaq-border);
	border-radius: var(--wpfaq-radius);
}

.wpfaq--boxed .wpfaq__item:last-child {
	margin-bottom: 0;
}

/* Bordered */

.wpfaq--bordered .wpfaq__item {
	border-bottom: 1px solid var(--wpfaq-border);
}

.wpfaq--bordered .wpfaq__item:first-child {
	border-top: 1px solid var(--wpfaq-border);
}

.wpfaq--bordered .wpfaq__question,
.wpfaq--bordered .wpfaq__answer {
	padding-left: 0;
	padding-right: 0;
}

/* Minimal */

.wpfaq--minimal .wpfaq__item {
	margin-bottom: var(--wpfaq-gap);
}

.wpfaq--minimal .wpfaq__item:last-child {
	margin-bottom: 0;
}

.wpfaq--minimal .wpfaq__question,
.wpfaq--minimal .wpfaq__answer {
	padding-left: 0;
	padding-right: 0;
}

.wpfaq--minimal .wpfaq__question {
	padding-top: 8px;
	padding-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.wpfaq__icon::before,
	.wpfaq__icon::after {
		transition: none;
	}
}