/*
 * Layout primitives: page container, skip link, and the overall
 * header/main/footer structure. No component-specific styling here.
 */
.mc-section {
	padding-block: var(--mc-space-7);
}

.mc-section--narrow {
	max-width: 65ch;
}

.mc-section--centered {
	margin-inline: auto;
}

/*
 * Reusable intro/lede paragraph, used on the homepage hero AND on
 * solution/project single pages (moved here from the homepage-only
 * homepage-sections.css — it was previously unstyled outside the
 * homepage since that stylesheet only loads on is_front_page()).
 */
.mc-hero__lede {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--mc-text-muted);
	font-size: var(--mc-font-size-h4);
}

.mc-hero__lede--flush {
	margin-inline: 0;
}

.mc-process {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--mc-space-5);
	margin: var(--mc-space-6) 0 0;
	padding: 0;
	list-style: none;
}

.mc-process__step {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-2);
}

.mc-process__number {
	font-size: var(--mc-font-size-h3);
	font-weight: var(--mc-font-weight-bold);
	color: var(--mc-accent);
}

.mc-process__label {
	font-weight: var(--mc-font-weight-medium);
}

.mc-skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 1000;
	padding: var(--mc-space-3) var(--mc-space-5);
	background-color: var(--mc-primary-dark);
	color: var(--mc-on-primary);
	text-decoration: none;
}

.mc-skip-link:focus {
	top: 0;
}

.mc-container {
	width: 100%;
	max-width: var(--mc-container-max);
	margin-inline: auto;
	padding-inline: var(--mc-container-padding);
}

.mc-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mc-site-content {
	flex: 1 0 auto;
}

.mc-site-header {
	border-bottom: 1px solid var(--mc-border);
	background-color: var(--mc-background);
}

.mc-site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--mc-space-4);
	padding-block: var(--mc-space-4);
}

.mc-site-header__cta {
	margin-inline-start: auto;
	flex-shrink: 0;
}

.mc-site-footer {
	border-top: 1px solid var(--mc-border);
	background-color: var(--mc-surface);
	color: var(--mc-text-muted);
	padding-block: var(--mc-space-7);
}

.mc-site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-space-4);
}

.mc-site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--mc-space-1);
}

.mc-footer-tagline {
	margin: 0;
}