/**
 * FAQ component styles (thisismyurl 2027).
 *
 * Styles the page-content FAQ output that the FAQ system renders: the
 * service-vertical-faq definition-list block (Questions. + dt/dd) that ships
 * inside service-page content. The "Common questions" h2/h3/p blocks used on
 * posts, landing pages, and the /faqs/ hub inherit the theme's default block
 * typography and need no extra rules here.
 *
 * Self-contained and enqueued from inc/faq-schema.php only on pages that carry
 * the block, so it never touches the shared app.css. Colours use the 2027
 * preset tokens with fallbacks so it renders correctly even before the wider
 * service-vertical page-design system lands.
 */

.service-vertical-faq {
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

.service-vertical-faq h2 {
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 0 1.5rem;
	max-width: 38rem;
	color: var(--wp--preset--color--brand-navy, #123456);
}

.service-faq-list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.service-faq-list dt {
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.08rem);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--brand-navy, #123456);
}

.service-faq-list dd {
	margin: 0;
}

.service-faq-list dd p {
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.08rem);
	line-height: 1.7;
	margin: 0;
	max-width: 62ch;
}