/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

.fw-faqs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fw-faqs-gap, 0);
	align-items: start;
}

/* Heading spans the full width of the grid. */
.fw-faqs > h2,
.fw-faqs > .wp-block-heading,
.fw-faqs > .fw-faqs__heading {
	grid-column: 1 / -1;
	margin: var(--fw-faqs-heading-margin, 0);
}

/* Each Q&A = a core/details block. */
.fw-faqs > .wp-block-details {
	margin: 0;
	transition: background .2s ease;
}
.fw-faqs > .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fw-wp-block-details-gap, 0);
	padding: var(--fw-wp-block-details-padding, 0);
	cursor: pointer;
	user-select: none;
}
.fw-faqs > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.fw-faqs > .wp-block-details > summary::marker {
	content: '';
}

/* Turquoise chevron that rotates when open. */
.fw-faqs > .wp-block-details > summary::after {
	content: '';
	flex-shrink: 0;
	width: var(--fw-wp-block-details-width, 0);
	height: var(--fw-wp-block-details-height, 0);
	transition: transform .25s ease;
}
.fw-faqs > .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

/* The answer (inner blocks after the summary). */
.fw-faqs > .wp-block-details > *:not(summary) {
	padding: var(--fw-wp-block-details-padding, 0);
	margin: 0;
}

@media (max-width: 1024px) {
	.fw-faqs {
	grid-template-columns: 1fr;
}
	.fw-faqs > h2,
	.fw-faqs > .wp-block-heading,
	.fw-faqs > .fw-faqs__heading {
	grid-column: auto;
}
}