/**
 * Block: firm/faq (practice page accordion: blue question bar, white
 * answer). Also the editor stylesheet (add_editor_style), so the
 * selectors don't rely on main.css (icons are set here as masks).
 *
 * Mobile-first: 4px between items, +/− icons (Figma's mobile icons). From
 * laptop (64em): 1px between items, rounded top corners and the desktop
 * chevron, turned down when the item is open.
 *
 * The question bar reads the faq.* hooks (theme.json settings.custom.faq.*,
 * shared with the FAQ section) with today's values as fallbacks.
 */

.firm-faq {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.firm-faq__item {
	border: var(--wp--custom--border-width--thin) solid transparent;
	background: var(--wp--preset--color--base);
}

.firm-faq__item:has([aria-expanded="true"]) {
	border-color: var(--wp--preset--color--surface-alt);
}

.firm-content .firm-faq__question,
.firm-faq__question {
	margin: 0;
	color: var(--wp--custom--faq--bar-text, var(--wp--preset--color--base));
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--h-4);
}

.firm-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: var(--wp--custom--faq--bar, var(--wp--preset--color--primary));
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	cursor: pointer;
}

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

.firm-faq__button:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--accent);
	outline-offset: calc(var(--wp--custom--border-width--thick) * -1);
}

.firm-faq__question-text {
	flex: 1;
}

.firm-faq__icon {
	flex: none;
	inline-size: var(--wp--custom--icon--md);
	block-size: var(--wp--custom--icon--md);
	background-color: currentColor;
	-webkit-mask: url("../../icons/control-point.svg") center / contain no-repeat;
	mask: url("../../icons/control-point.svg") center / contain no-repeat;
}

[aria-expanded="true"] > .firm-faq__icon {
	-webkit-mask-image: url("../../icons/remove-circle-outline.svg");
	mask-image: url("../../icons/remove-circle-outline.svg");
}

.firm-faq__panel {
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

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

.firm-faq .firm-faq__answer {
	margin: 0;
}

.firm-faq__answer a {
	color: inherit;
}

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

/* Editor: the item tools sit on the blue bar. */
.firm-faq.is-editing .firm-faq__button {
	cursor: text;
}

.firm-faq__tools {
	display: inline-flex;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--custom--faq--bar-text, var(--wp--preset--color--base));
}

.firm-faq__tools .components-button {
	color: inherit;
}

.firm-faq__add {
	justify-self: start;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* laptop: the desktop look. */
@media (min-width: 64em) {
	.firm-faq {
		gap: var(--wp--custom--border-width--thin);
	}

	.firm-faq__item {
		border: 0;
	}

	.firm-faq__button {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
	}

	.firm-content .firm-faq__question,
	.firm-faq__question {
		line-height: var(--wp--custom--line-height--h-6);
	}

	.firm-faq__icon {
		inline-size: calc(var(--wp--custom--icon--md) + var(--wp--preset--spacing--10));
		block-size: calc(var(--wp--custom--icon--md) + var(--wp--preset--spacing--10));
		-webkit-mask-image: url("../../icons/arrow-forward-ios.svg");
		mask-image: url("../../icons/arrow-forward-ios.svg");
		transition: rotate 0.2s ease;
	}

	[aria-expanded="true"] > .firm-faq__icon {
		-webkit-mask-image: url("../../icons/arrow-forward-ios.svg");
		mask-image: url("../../icons/arrow-forward-ios.svg");
		rotate: 90deg;
	}
}