/*
 * REACH Supply shared guidance / process components.
 *
 * Reusable patterns for dark informational cards, gold CTAs,
 * process guides, numbered steps, form section headings and
 * readable supporting copy. All colours consume the canonical
 * REACH design tokens.
 */

/* Gold CTAs must always use the canonical dark on-gold colour. */
body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent),
body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent) * {
	color: var(--rs-color-on-gold) !important;
	-webkit-text-fill-color: var(--rs-color-on-gold) !important;
}

body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent):hover,
body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent):focus-visible,
body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent):hover *,
body.reach-design-system :where(.rs-button--accent, a.rs-button--accent, button.rs-button--accent):focus-visible * {
	color: var(--rs-color-on-gold) !important;
	-webkit-text-fill-color: var(--rs-color-on-gold) !important;
}

/* Dark informational card for use inside dark heroes. */
body.reach-design-system .rs-dark-info-card {
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--rs-radius-md);
	box-sizing: border-box;
	color: #f1f6f8;
	padding: var(--rs-space-5);
}

body.reach-design-system .rs-dark-info-card__eyebrow {
	color: #ffd77c;
	display: block;
	font-size: var(--rs-font-size-xs);
	font-weight: var(--rs-font-weight-bold);
	letter-spacing: .08em;
	line-height: 1.35;
	margin: 0 0 var(--rs-space-2);
	text-transform: uppercase;
}

body.reach-design-system .rs-dark-info-card__title {
	color: #fff;
	font-size: var(--rs-font-size-xl);
	font-weight: var(--rs-font-weight-bold);
	line-height: 1.28;
	margin: 0;
}

body.reach-design-system .rs-dark-info-card__copy {
	color: #f1f6f8;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-medium);
	line-height: 1.65;
	margin: var(--rs-space-3) 0 0;
}

/* Reusable request/process guide. */
body.reach-design-system .rs-process-guide {
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-top: 4px solid var(--rs-color-gold);
	border-radius: var(--rs-radius-md);
	box-shadow: var(--rs-shadow-sm);
	box-sizing: border-box;
	color: var(--rs-color-ink);
	padding: var(--rs-space-5);
}

body.reach-design-system .rs-process-guide__eyebrow {
	color: var(--rs-color-warning);
	display: block;
	font-size: var(--rs-font-size-xs);
	font-weight: var(--rs-font-weight-bold);
	letter-spacing: .08em;
	line-height: 1.35;
	margin: 0 0 var(--rs-space-2);
}

body.reach-design-system .rs-process-guide > h3,
body.reach-design-system .rs-process-guide__title {
	color: var(--rs-color-ink);
	font-size: var(--rs-font-size-card-title);
	font-weight: var(--rs-font-weight-bold);
	line-height: var(--rs-line-height-heading);
	margin: 0;
}

body.reach-design-system .rs-process-guide > p,
body.reach-design-system .rs-process-guide__copy {
	color: #334d5c;
	font-size: var(--rs-font-size-base);
	font-weight: var(--rs-font-weight-medium);
	line-height: var(--rs-line-height-body);
}

body.reach-design-system .rs-process-guide__steps {
	display: grid;
	gap: var(--rs-space-2);
	list-style: none;
	margin: var(--rs-space-5) 0 0;
	padding: 0;
}

body.reach-design-system .rs-process-step {
	align-items: center;
	background: var(--rs-color-surface);
	border: var(--rs-border-default);
	border-radius: var(--rs-radius-sm);
	display: grid;
	gap: var(--rs-space-3);
	grid-template-columns: 2.75rem minmax(0, 1fr);
	padding: var(--rs-space-3);
}

body.reach-design-system .rs-process-step.is-active {
	background: var(--rs-color-warning-soft);
	border-color: #e1bc60;
	box-shadow: inset 4px 0 0 var(--rs-color-gold);
}

body.reach-design-system .rs-process-step__number {
	background: var(--rs-color-ink);
	border-radius: var(--rs-radius-sm);
	box-shadow: inset 0 -3px 0 var(--rs-color-gold);
	color: #ffd77c;
	display: grid;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-bold);
	height: 2.625rem;
	place-items: center;
	width: 2.625rem;
}

body.reach-design-system .rs-process-step.is-active .rs-process-step__number {
	background: var(--rs-color-gold);
	box-shadow: none;
	color: var(--rs-color-on-gold);
}

body.reach-design-system .rs-process-step__copy strong {
	color: var(--rs-color-ink);
	display: block;
	font-size: var(--rs-font-size-base);
	font-weight: var(--rs-font-weight-bold);
	line-height: 1.35;
}

body.reach-design-system .rs-process-step__copy small {
	color: #334d5c;
	display: block;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-semibold);
	line-height: 1.5;
	margin-top: var(--rs-space-1);
}

body.reach-design-system .rs-process-guide__note {
	border-top: var(--rs-border-default);
	color: #334d5c;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-semibold);
	line-height: 1.6;
	margin-top: var(--rs-space-5);
	padding-top: var(--rs-space-4);
}

/* Reusable numbered form-section divider. */
body.reach-design-system .rs-form-section-heading,
body.reach-design-system .rs-form-group-heading {
	align-items: center;
	box-sizing: border-box;
	display: grid;
	gap: var(--rs-space-3);
	grid-template-columns: 2.5rem minmax(0, 1fr);
	width: 100%;
}

body.reach-design-system :where(.rs-form-section-heading__number, .rs-form-group-heading__number) {
	background: var(--rs-color-ink);
	border-radius: var(--rs-radius-sm);
	box-shadow: inset 0 -3px 0 var(--rs-color-gold);
	color: #ffd77c;
	display: grid;
	font-size: var(--rs-font-size-xs);
	font-weight: var(--rs-font-weight-bold);
	height: 2.375rem;
	place-items: center;
	width: 2.375rem;
}

body.reach-design-system :where(.rs-form-section-heading, .rs-form-group-heading) strong {
	color: var(--rs-color-ink);
	display: block;
	font-size: var(--rs-font-size-lg);
	font-weight: var(--rs-font-weight-bold);
	line-height: 1.32;
}

body.reach-design-system :where(.rs-form-section-heading, .rs-form-group-heading) p {
	color: #334d5c;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-semibold);
	line-height: 1.55;
	margin: var(--rs-space-1) 0 0;
}

/* Stronger helper text for pages where normal muted text is too faint. */
body.reach-design-system .rs-help--strong {
	color: #405d6e;
	font-size: var(--rs-font-size-sm);
	font-weight: var(--rs-font-weight-medium);
	line-height: 1.58;
}

@media (max-width: 767px) {
	body.reach-design-system .rs-process-guide {
		padding: var(--rs-space-4);
	}

	body.reach-design-system .rs-process-step {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	body.reach-design-system .rs-form-section-heading,
	body.reach-design-system .rs-form-group-heading {
		grid-template-columns: 2.25rem minmax(0, 1fr);
	}
}