/**
 * Shared section: FAQ accordion.
 *
 * Mobile-first: centered title and intro, one column of red cards
 * (accent-linear), a full-width button. From laptop (64em) two independent
 * columns and a centered button at its natural width. The photo sits at 5%
 * over primary-darkest, as in Figma.
 *
 * Light variant (.faq--light, the FAQs page): white section, primary title,
 * blue cards (primary) and the open card in primary-dark, as in Figma.
 *
 * The question bars read the faq.* hooks (theme.json settings.custom.faq.*,
 * shared with the firm/faq block) with today's values as fallbacks.
 *
 * One column (.faq--single): the two-column split is off at every width and
 * the content is centered, capped at faq.singleWidth (unset: the container).
 *
 * Card items (.faq--card): bordered, rounded (radius.lg), soft shadow, in
 * either variant; colors from faq.cardBackground (base), faq.cardBorder
 * (divider), faq.cardText (foreground) and faq.icon (primary). The open
 * card keeps its colors.
 */

.faq {
	padding-block: var(--wp--preset--spacing--90);
	overflow: hidden;
	border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--muted);
}

/* The photo covers the whole section, not just the container. */
.faq .firm-section__container {
	position: static;
}

.faq__background {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.05; /* Figma layer opacity. */
	pointer-events: none;
}

.faq__content {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.faq__header {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	text-align: center;
}

.faq__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.faq__columns,
.faq__column {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--30);
}

.faq__item {
	background: var(--wp--custom--faq--bar, var(--wp--preset--gradient--accent-linear));
}

/* The heading only carries the type style; the button fills it. */
.faq__question {
	margin: 0;
}

.faq__button {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	cursor: pointer;
}

.faq__question-text {
	flex: 1;
}

.faq__button:hover .faq__question-text {
	text-decoration: underline;
}

.faq__icon {
	--firm-icon-size: var(--wp--custom--icon--md);
}

.faq__button[aria-expanded="true"] .faq__icon--expand,
.faq__button[aria-expanded="false"] .faq__icon--collapse {
	display: none;
}

.faq__panel {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

/* A collapsed panel (hidden="until-found" is content-visibility: hidden) keeps its box: drop the padding. */
.faq__panel[hidden] {
	padding: 0;
}

.faq__answer {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--divider);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

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

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

.faq__answer a {
	color: inherit;
}

.faq__actions {
	margin: 0;
}

/* Full width on mobile, as in Figma. */
.faq__button-link {
	display: flex;
	text-decoration: none;
}

/* Light variant (FAQs page). */
.faq--light {
	border-block-start: 0;
}

.faq--light .faq__title {
	color: var(--wp--preset--color--primary);
}

.faq--light .faq__item {
	background: var(--wp--custom--faq--bar, var(--wp--preset--color--primary));
	color: var(--wp--custom--faq--bar-text, var(--wp--preset--color--base));
}

.faq--light .faq__item:has([aria-expanded="true"]) {
	background: var(--wp--custom--faq--bar-open, var(--wp--preset--color--primary-dark));
}

/* The global outline is currentColor (white here), drawn outside the card: on white. */
.faq--light .faq__button:focus-visible {
	outline-color: var(--wp--preset--color--primary-dark);
}

/* One centered column. */
.faq--single .faq__content {
	max-inline-size: var(--wp--custom--faq--single-width, none);
	margin-inline: auto;
}

/* Card items. Listed after the light variant, with its open-card specificity. */
.faq--card .faq__item,
.faq--card .faq__item:has([aria-expanded="true"]) {
	border: var(--wp--custom--border-width--thin) solid var(--wp--custom--faq--card-border, var(--wp--preset--color--divider));
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--custom--faq--card-background, var(--wp--preset--color--base));
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--custom--faq--card-text, var(--wp--preset--color--foreground));
}

.faq--card .faq__icon {
	color: var(--wp--custom--faq--icon, var(--wp--preset--color--primary));
}

/* Inside the card, so the ring is on the card's own background in either variant. */
.faq.faq--card .faq__button:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid currentColor;
	outline-offset: calc(var(--wp--custom--border-width--thick) * -2);
	border-radius: var(--wp--custom--radius--lg);
}

/* Editors only: questions waiting for answers (whole section pending). */
.faq__pending-list {
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* laptop: two independent columns, larger type and padding, button at its width. */
@media (min-width: 64em) {
	.faq__content {
		gap: var(--wp--preset--spacing--80);
	}

	.faq__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50);
	}

	.faq--single .faq__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.faq__column {
		gap: var(--wp--preset--spacing--40);
	}

	.faq__button {
		padding: var(--wp--preset--spacing--60);
	}

	.faq__panel {
		padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	}

	/* Figma's desktop icons are a separate, larger export (32px). */
	.faq__icon {
		--firm-icon-size: var(--wp--custom--icon--lg);
	}

	.faq__icon--expand {
		-webkit-mask-image: url("../../icons/control-point-lg.svg");
		mask-image: url("../../icons/control-point-lg.svg");
	}

	.faq__icon--collapse {
		-webkit-mask-image: url("../../icons/remove-circle-outline-lg.svg");
		mask-image: url("../../icons/remove-circle-outline-lg.svg");
	}

	.faq__actions,
	.faq .faq__button-link {
		justify-self: center;
	}

	.faq__button-link {
		display: inline-flex;
	}
}