/* Mercury Child: shared component classes (buttons, badges, sections, grid). */

.mrc-section {
	padding: 48px 0;
}

.mrc-section-dark {
	background-color: #14171f;
	color: #fff;
}

.mrc-grid {
	display: grid;
	gap: 24px;
}

.mrc-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.mrc-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.mrc-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.mrc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: currentColor;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.mrc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mrc-button-primary {
	background-color: #ff5a1f;
	color: #fff;
	border: 1px solid #ff5a1f;
}

.mrc-button-primary:hover {
	background-color: #e44e16;
	border-color: #e44e16;
	color: #fff;
}

.mrc-button-secondary {
	background-color: transparent;
	color: #14171f;
	border: 1px solid #d7d9e0;
}

.mrc-button-secondary:hover {
	background-color: #f4f5f8;
}

.mrc-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
}

.mrc-rating-value {
	background-color: #14171f;
	color: #fff;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.875rem;
}

.mrc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: #f4f5f8;
	color: #14171f;
	font-size: 0.75rem;
	font-weight: 600;
}

.mrc-badge img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* Accessibility */
.mrc-skip-link {
	position: absolute;
	top: -100px;
	left: var(--mrc-page-padding);
	z-index: 100000;
	padding: 8px 16px;
	background: var(--mrc-gold);
	color: var(--mrc-black);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--mrc-radius-sm);
}

.mrc-skip-link:focus,
.mrc-skip-link:focus-visible {
	top: 8px;
	outline: var(--mrc-focus-ring);
	outline-offset: 2px;
}

.mrc-main-content-anchor {
	position: relative;
}

.mrc-main-content-anchor:focus {
	outline: none;
}

:focus-visible {
	outline: var(--mrc-focus-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* One-page sticky scrollspy menu (Phase 6). */
.mrc-scrollspy-bar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 8px 0;
	margin-bottom: 24px;
	border-bottom: 1px solid #e3e5eb;
	position: sticky;
	top: var( --mrc-header-height, 0px );
	background-color: #fff;
	z-index: 30;
}

.mrc-scrollspy-bar::-webkit-scrollbar {
	display: none;
}

.mrc-scrollspy-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
	color: #14171f;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	background-color: #f4f5f8;
}

.mrc-scrollspy-item.is-active {
	background-color: #14171f;
	color: #fff;
}