/**
 * FAQ Widget — Picklemall Widgets
 *
 * Accordion of question/answer rows under an A Love of Thunder title with a
 * graffiti accent span, plus an optional CTA heading + .custom-btn below.
 * One row open at a time; the toggle morphs between a plus and a minus.
 * Answers animate open via grid-template-rows: 0fr → 1fr.
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.pm-faq-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--pm-color-white, #FFFFFF);
}

.pm-faq {
	/* Theming hooks — overridden by the Style tab via Elementor selectors */
	--pm-faq-accent: var(--pm-color-orange, #E85D22);
	--pm-faq-item-bg: var(--pm-color-white, #FFFFFF);
	--pm-faq-item-border: rgba(31, 33, 33, 0.12);
	--pm-faq-question: var(--pm-color-dark, #1F2121);
	--pm-faq-answer: var(--pm-color-type-body, #333741);

	--pm-faq-max-width: 900px;
	--pm-faq-item-gap: 16px;
	--pm-faq-item-radius: 16px;
	--pm-faq-item-pad-y: 22px;
	--pm-faq-item-pad-x: 28px;

	width: 100%;
	max-width: var(--pm-faq-max-width);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 2rem);
	box-sizing: border-box;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.pm-faq-header {
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.pm-faq-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: clamp(2rem, 8vw, 3rem);
	color: var(--pm-color-dark, #1F2121);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.15;
	margin: 0;
}

.pm-faq-title-graffiti {
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	color: var(--pm-color-orange, #E85D22);
	text-transform: none;
	letter-spacing: 0.01em;
}

/* ── List ─────────────────────────────────────────────────────────────────── */

.pm-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--pm-faq-item-gap);
}

.pm-faq-item {
	background-color: var(--pm-faq-item-bg);
	border: 1px solid var(--pm-faq-item-border);
	border-radius: var(--pm-faq-item-radius);
	overflow: hidden;
	transition: border-color var(--pm-duration-base, 250ms) var(--pm-ease, ease),
	            box-shadow var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-faq-item:hover {
	border-color: color-mix(in srgb, var(--pm-faq-accent), transparent 60%);
}

.pm-faq-item.is-open {
	border-color: color-mix(in srgb, var(--pm-faq-accent), transparent 45%);
	box-shadow: var(--pm-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
}

/* ── Trigger row (question + toggle) ──────────────────────────────────────── */

.pm-faq-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: var(--pm-faq-item-pad-y) var(--pm-faq-item-pad-x);
	margin: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

/*
 * Themes routinely give button:hover/:focus a dark fill, which would flood the
 * whole row — pin the trigger transparent across every interaction state.
 */
.pm-faq-trigger:hover,
.pm-faq-trigger:focus,
.pm-faq-trigger:active {
	background: transparent;
	color: inherit;
	box-shadow: none;
}

/* Keyboard users still get a visible ring. */
.pm-faq-trigger:focus-visible {
	outline: 2px solid var(--pm-faq-accent);
	outline-offset: -3px;
}

.pm-faq-question {
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-subtitle, 1.0625rem);
	font-weight: var(--pm-weight-semibold, 600);
	line-height: var(--pm-leading-normal, 1.4);
	letter-spacing: 0;
	color: var(--pm-faq-question);
	text-transform: none;
}

/* ── Plus / minus toggle ──────────────────────────────────────────────────── */

.pm-faq-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var(--pm-radius-full, 9999px);
	background-color: color-mix(in srgb, var(--pm-faq-accent), transparent 88%);
	transition: background-color var(--pm-duration-base, 250ms) var(--pm-ease, ease);
}

.pm-faq-toggle::before,
.pm-faq-toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--pm-faq-accent);
	transform: translate(-50%, -50%);
	transition: transform var(--pm-duration-slow, 400ms) var(--pm-ease, ease),
	            opacity var(--pm-duration-slow, 400ms) var(--pm-ease, ease);
}

/* Vertical bar — rotated flat and faded out to turn the plus into a minus. */
.pm-faq-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pm-faq-item.is-open .pm-faq-toggle::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.pm-faq-item.is-open .pm-faq-toggle {
	background-color: color-mix(in srgb, var(--pm-faq-accent), transparent 78%);
}

/* ── Answer — collapsed via grid-template-rows: 0fr → 1fr ─────────────────── */

.pm-faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s var(--pm-ease, ease);
}

.pm-faq-item.is-open .pm-faq-answer {
	grid-template-rows: 1fr;
}

.pm-faq-answer-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 var(--pm-faq-item-pad-x);
	font-family: var(--pm-font-sans, 'Inter', system-ui, sans-serif);
	font-size: var(--pm-text-body-sm, 1rem);
	line-height: var(--pm-leading-loose, 1.6);
	color: var(--pm-faq-answer);
}

/* Bottom breathing room only exists while the row is expanded. */
.pm-faq-item.is-open .pm-faq-answer-inner {
	padding-bottom: var(--pm-faq-item-pad-y);
}

.pm-faq-answer-inner p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 0.875rem;
}

.pm-faq-answer-inner a {
	color: var(--pm-faq-accent);
	text-decoration: underline;
}

.pm-faq-answer-inner ul,
.pm-faq-answer-inner ol {
	margin: 0 0 0.875rem;
	padding-left: 1.375rem;
	list-style-position: outside;
}

.pm-faq-answer-inner ul {
	list-style: disc;
}

.pm-faq-answer-inner ol {
	list-style: decimal;
}

.pm-faq-answer-inner li {
	display: list-item;
	margin: 0 0 0.375rem;
	color: inherit;
}

.pm-faq-answer-inner > *:last-child,
.pm-faq-answer-inner li:last-child {
	margin-bottom: 0;
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */

.pm-faq-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	text-align: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pm-faq-cta-heading {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-text-medium, clamp(1.5rem, 1.062rem + 1.798vw, 2.5rem));
	line-height: var(--pm-leading-snug, 1.2);
	color: var(--pm-color-dark, #1F2121);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

	.pm-faq {
		--pm-faq-item-gap: 12px;
		--pm-faq-item-pad-y: 18px;
		--pm-faq-item-pad-x: 18px;
	}

	.pm-faq-trigger {
		gap: 16px;
	}

	.pm-faq-toggle {
		width: 28px;
		height: 28px;
	}

	.pm-faq-toggle::before,
	.pm-faq-toggle::after {
		width: 11px;
	}
}