/**
 * MrStiff FAQ widget.
 *
 * Two stacked full-width rows: the benefit images row (the two images sit side
 * by side in one row) and the ACF-driven FAQ accordion row beneath it. Either
 * row can be hidden from Elementor; because the rows are flex children, a
 * hidden row leaves no gap behind. Every value the Elementor controls write
 * lives in a custom property on .msps-faq, so the panel can restyle the block
 * without extra selectors.
 *
 * @package MrStiffProductShop
 */

.msps-faq {
	--msps-faq-row-gap: 48px;
	--msps-faq-image-gap: 24px;
	--msps-faq-item-gap: 0px;
	--msps-faq-divider-color: rgba(0, 0, 0, 0.12);
	--msps-faq-icon-color: currentColor;
	--msps-faq-icon-size: 18px;
	--msps-faq-icon-stroke: 2px;
	--msps-faq-duration: 320ms;
	--msps-faq-ease: cubic-bezier(0.4, 0, 0.2, 1);

	display: flex;
	flex-direction: column;
	gap: var(--msps-faq-row-gap);
	width: 100%;
}

/* Swap the row order without touching the DOM order (the FAQ stays last in
   the markup, so its heading still follows the images for screen readers). */
.msps-faq--faq-first {
	flex-direction: column-reverse;
}

.msps-faq__row {
	width: 100%;
	min-width: 0;
}

/* Images row — the two images share the row, each taking an equal half. */
.msps-faq__media {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--msps-faq-image-gap);
}

/* A single surviving image fills the row rather than leaving a blank half. */
.msps-faq__media > .msps-faq__image {
	flex: 1 1 0;
	min-width: 0;
}

.msps-faq__image {
	margin: 0;
	line-height: 0;
}

.msps-faq__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Heading */
.msps-faq__heading {
	margin: 0 0 0.75em;
}

/* Accordion list */
.msps-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--msps-faq-item-gap);
}

.msps-faq__item {
	border-bottom: 1px solid var(--msps-faq-divider-color);
}

.msps-faq__question-heading {
	margin: 0;
	font: inherit;
	color: inherit;
}

.msps-faq__question {
	--msps-faq-question-color: inherit;
	--msps-faq-question-color-active: var(--msps-faq-question-color);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 20px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--msps-faq-question-color);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color var(--msps-faq-duration) var(--msps-faq-ease);
}

.msps-faq__question:hover,
.msps-faq__item.is-open .msps-faq__question {
	color: var(--msps-faq-question-color-active);
}

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

.msps-faq--icon-pos-left .msps-faq__question {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.msps-faq--icon-pos-left .msps-faq__question-text {
	margin-right: auto;
}

.msps-faq__question-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Icons — drawn with pseudo-elements so no icon font is needed. */
.msps-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--msps-faq-icon-size);
	height: var(--msps-faq-icon-size);
	color: var(--msps-faq-icon-color);
}

.msps-faq__icon::before,
.msps-faq__icon::after {
	content: "";
	position: absolute;
	background-color: currentColor;
	transition: transform var(--msps-faq-duration) var(--msps-faq-ease),
		opacity var(--msps-faq-duration) var(--msps-faq-ease);
}

/* Plus / minus: the vertical bar collapses, leaving the horizontal one. */
.msps-faq--icon-plus-minus .msps-faq__icon::before,
.msps-faq--icon-plus-cross .msps-faq__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--msps-faq-icon-stroke);
	transform: translateY(-50%);
}

.msps-faq--icon-plus-minus .msps-faq__icon::after,
.msps-faq--icon-plus-cross .msps-faq__icon::after {
	top: 0;
	left: 50%;
	width: var(--msps-faq-icon-stroke);
	height: 100%;
	transform: translateX(-50%);
}

.msps-faq--icon-plus-minus .msps-faq__item.is-open .msps-faq__icon::after {
	transform: translateX(-50%) scaleY(0);
}

/* Plus / cross: the whole glyph rotates 45°. */
.msps-faq--icon-plus-cross .msps-faq__item.is-open .msps-faq__icon {
	transform: rotate(45deg);
}

.msps-faq--icon-plus-cross .msps-faq__icon {
	transition: transform var(--msps-faq-duration) var(--msps-faq-ease);
}

/* Chevron: two strokes forming a v, rotated when open. */
.msps-faq--icon-chevron .msps-faq__icon::before,
.msps-faq--icon-chevron .msps-faq__icon::after {
	top: 42%;
	width: 62%;
	height: var(--msps-faq-icon-stroke);
	border-radius: 2px;
}

.msps-faq--icon-chevron .msps-faq__icon::before {
	left: 0;
	transform: rotate(45deg);
	transform-origin: right center;
}

.msps-faq--icon-chevron .msps-faq__icon::after {
	right: 0;
	transform: rotate(-45deg);
	transform-origin: left center;
}

.msps-faq--icon-chevron .msps-faq__item.is-open .msps-faq__icon::before {
	transform: rotate(-45deg);
}

.msps-faq--icon-chevron .msps-faq__item.is-open .msps-faq__icon::after {
	transform: rotate(45deg);
}

/* Caret: a solid triangle that flips. */
.msps-faq--icon-caret .msps-faq__icon::before {
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: none;
	border-left: calc(var(--msps-faq-icon-size) * 0.32) solid transparent;
	border-right: calc(var(--msps-faq-icon-size) * 0.32) solid transparent;
	border-top: calc(var(--msps-faq-icon-size) * 0.4) solid currentColor;
	transform: translate(-50%, -50%);
}

.msps-faq--icon-caret .msps-faq__icon::after {
	content: none;
}

.msps-faq--icon-caret .msps-faq__item.is-open .msps-faq__icon::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

/* Answer panel — height is animated from JS, which sets --msps-faq-panel-height. */
.msps-faq__answer {
	overflow: hidden;
}

.msps-faq__answer[hidden] {
	display: none;
}

.msps-faq__answer.is-animating {
	transition: height var(--msps-faq-duration) var(--msps-faq-ease);
}

.msps-faq__answer-inner {
	padding: 0 0 22px;
}

.msps-faq__answer-inner > *:first-child {
	margin-top: 0;
}

.msps-faq__answer-inner > *:last-child {
	margin-bottom: 0;
}

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

/* Editor-only placeholder. */
.msps-faq--empty {
	padding: 20px;
	border: 1px dashed var(--msps-faq-divider-color);
	color: #6b7280;
	font-size: 13px;
	text-align: center;
}

/* Stacking — the two images drop from side by side to one above the other.
   The rows themselves are always full width, so nothing else changes. */
@media (max-width: 1024px) {
	.msps-faq--stack-tablet .msps-faq__media {
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.msps-faq--stack-mobile .msps-faq__media {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msps-faq__answer.is-animating,
	.msps-faq__icon,
	.msps-faq__icon::before,
	.msps-faq__icon::after,
	.msps-faq__question {
		transition-duration: 1ms;
	}
}