/**
 * BMP FAQ block — front-end styles.
 *
 * Deliberately minimal: layout and affordances only, no colours or type scale,
 * so the BMP theme and the Twenty Twenty-Five child theme can each style it
 * without fighting the plugin.
 */

.wp-block-bmp-faq {
	/* Default separation from whatever precedes the block — typically a product
	   loop or the end of page content. Overridden by any margin set on the block
	   in the editor, which emits an inline style. */
	margin-block-start: 4em;
	margin-block-end: 4em;

	.bmp-faq__heading {
		margin-block-end: 0.75em;
	}

	.bmp-faq__list {
		display: flex;
		flex-direction: column;
	}

	.bmp-faq__group-heading {
		border-block-end: 1px solid currentColor;
		border-color: color-mix(in srgb, currentColor 20%, transparent);
		margin-block: 1.5em 0;
		padding-block-end: 0.5em;

		/* The list may open with a heading, which needs no leading gap */
		&:first-child {
			margin-block-start: 0;
		}
	}

	.bmp-faq__item {
		border-block-end: 1px solid currentColor;
		border-color: color-mix(in srgb, currentColor 20%, transparent);
		padding-block: 0.75em;

		/* :first-child rather than :first-of-type — where a group heading opens
		   the list, its own bottom rule already closes the gap above. */
		&:first-child {
			border-block-start: 1px solid currentColor;
			border-block-start-color: color-mix(in srgb, currentColor 20%, transparent);
		}
	}

	.bmp-faq__question {
		cursor: pointer;
		font-weight: 600;
		list-style: none;
		padding-inline-end: 1.5em;
		position: relative;

		/* Hide the native disclosure marker in Safari */
		&::-webkit-details-marker {
			display: none;
		}

		&::after {
			content: '+';
			position: absolute;
			inset-inline-end: 0;
			line-height: 1;
			transition: transform 0.15s ease;
		}
	}

	.bmp-faq__item[open] .bmp-faq__question::after {
		content: '\2013'; /* en dash */
	}

	.bmp-faq__answer {
		padding-block-start: 0.5em;

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

	.bmp-faq__placeholder {
		border: 1px dashed currentColor;
		border-color: color-mix(in srgb, currentColor 35%, transparent);
		padding: 1em;
		text-align: center;
	}
}