/*
 * Portal home page-specific styles.
 * Shared components/tokens are loaded globally via web_include_css.
 *
 * Keep church_admin_app/www/onboarding/index.css in the repo: this @import is a website route; if the
 * file is missing, /portal loses onboarding shell styles (see test_portal_home_imports_onboarding_stylesheet).
 */
@import url("/onboarding/index.css");

/* Same .onboarding-portal .card-body padding as portal_home_card (onboarding/index.css). */
.onboarding-portal .ca-portal-reimbursement-flow .card-body > h2 {
	margin-top: 0;
}

/* Reimbursement flow (portal home): numbered steps, design-system spacing */
.ca-portal-reimbursement-flow__steps {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.ca-portal-reimbursement-flow__steps {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 1rem;
		align-items: start;
	}
}

.ca-portal-reimbursement-flow__step {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.ca-portal-reimbursement-flow__n {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Inherited heading line-height inflates the glyph box and skews vertical centering in the circle. */
	line-height: 1;
	font-size: 0.875rem;
	font-weight: 600;
	/* Darker blue so ~12px white text meets WCAG AA (axe portal contract). */
	background-color: #084298;
	color: #fff;
}

/*
 * Step card title: step number + title share .onboarding-card-title__label (inline with heading)
 * so they stay one copy/selection unit; center like .card.text-center body + CTA.
 */
.onboarding-portal .onboarding-card .card-body > h3.onboarding-card-title--with-step {
	width: 100%;
	text-align: center;
}

.onboarding-portal .onboarding-card-title--with-step .onboarding-card-title__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	max-width: 100%;
	line-height: 1.4;
}

.onboarding-portal
	.onboarding-card-title--with-step
	.onboarding-card-title__label
	.ca-portal-reimbursement-flow__n {
	flex: none;
}

/* Full-width row so the link sits at the inline end of the card (not text-align inside a shrink-to-fit box). */
.onboarding-portal .ca-portal-reimbursement-flow__program-details {
	display: flex;
	width: 100%;
	justify-content: end;
}

/* .ca-portal-program-details-link — see church_admin/components.css (portal_design_system) */

/* Coming soon teaser: heading + non-interactive feature rows */
.onboarding-portal .ca-portal-coming-soon .card-body {
	text-align: center;
}

/* Title rhythm matches .onboarding-card-title → .onboarding-card-text (onboarding/index.css). */
.onboarding-portal .ca-portal-coming-soon .ca-portal-coming-soon__title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1a1a2e;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.onboarding-portal .ca-portal-coming-soon__list {
	padding: 0;
	margin: 0;
}

.onboarding-portal .ca-portal-coming-soon__row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ca-color-text-muted, #5c5c6b);
	line-height: 1.35;
}

.onboarding-portal .ca-portal-coming-soon__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.onboarding-portal .ca-portal-coming-soon__list .ca-portal-coming-soon__row:first-child {
	padding-top: 0;
}