/**
 * Cherry Tree — FAQ block styles
 *
 * Frontend styling for the Yoast-canonical FAQ markup Cherry Tree emits
 * (`.schema-faq` › `.schema-faq-section` › `.schema-faq-question` /
 * `.schema-faq-answer`). Out of the box a FAQ renders as an undifferentiated
 * run of bold lines and paragraphs that reads the same as body copy; this lifts
 * each question/answer pair into its own card with a left accent bar so the FAQ
 * stands apart from the article around it.
 *
 * Theme-agnostic by design: colours derive from `currentColor` and a single
 * `--ct-faq-accent` custom property (default Seresa pink) so the block inherits
 * the theme's text colour and works on light or dark backgrounds. A theme can
 * re-skin the whole FAQ by redefining the `--ct-faq-*` variables.
 *
 * Enqueued by Frontend\FAQ_Styles, only on singular views whose content
 * contains a FAQ block.
 *
 * @package Seresa\CherryTree
 * @since   4.4.1
 *
 * Last Audited: Sep 11 2026 00:00
 */

.schema-faq {
	--ct-faq-accent: #b3325a;
	--ct-faq-radius: 10px;
	margin: 2.5em 0;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.schema-faq .schema-faq-section {
	position: relative;
	padding: 1.15em 1.35em 1.15em 1.5em;
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-left: 3px solid var( --ct-faq-accent );
	border-radius: var( --ct-faq-radius );
	background: color-mix( in srgb, currentColor 4%, transparent );
}

.schema-faq .schema-faq-question {
	display: block;
	margin: 0 0 0.4em;
	font-weight: 700;
	font-size: 1.08em;
	line-height: 1.35;
	color: inherit;
}

.schema-faq .schema-faq-answer {
	margin: 0;
	line-height: 1.6;
	color: color-mix( in srgb, currentColor 82%, transparent );
}

/* Fallback for engines without color-mix(): keep the accent bar + a visible edge. */
@supports not ( background: color-mix( in srgb, currentColor 4%, transparent ) ) {
	.schema-faq .schema-faq-section {
		border-color: rgba( 128, 128, 128, 0.25 );
		background: rgba( 128, 128, 128, 0.05 );
	}
	.schema-faq .schema-faq-answer {
		opacity: 0.85;
	}
}