/* =========================================================================
   Page Header (TOA) — block styles
   Colours from Figma: section bg pink-100 #FFF2F8, heading/ink #410064.
   ========================================================================= */

.toa-pgh {
	--toa-purple: var(--wp--preset--color--brand-purple, #410064);

	background: #fff2f8;
	color: var(--toa-purple);
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2rem);
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.toa-pgh__inner {
	max-width: 1160px;
	margin-inline: auto;
	text-align: left;
}

.toa-pgh__heading {
	margin: 0;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-display, var(--wp--preset--font-family--heading, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-h1, 54px);
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
}

.toa-pgh__description {
	margin: 0.5rem 0 0;
	max-width: 60ch;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-lg, 18px);
	font-style: normal;
	font-weight: 400;
}