/**
 * H (Hardbody) registration form styles. Loaded after ra-form.css (see
 * enqueue_assets() dependency array), so .fed-reg-field / .fed-reg-modal*
 * / .fed-reg-checkbox / .fed-reg-summary are already styled — this file
 * only adds what's new: the black+gold CTA (Section 0: Hardbody-specific
 * screens use the black/orange-gold brand, unlike RA's neutral navy/teal),
 * the lookup row, the running total, and link-style buttons.
 */

.fed-reg-h {
	--fed-h-ink: #1a1a1a;
	--fed-h-gold: #8a5a06; /* darkened until white text cleared 4.5:1 (was #c8860d at 3.06:1) */
	--fed-h-gold-light: #8f6710; /* also darkened — the gradient's lighter endpoint (was #d69b1f) only hit 2.45:1 with white CTA text; the self-audit above had only checked --fed-h-gold in isolation, not this end of the actual rendered gradient */
	--fed-h-paper: #f7f2e7;

	/*
	 * Re-declare the SAME custom property names ra-form.css's shared
	 * .fed-reg-field / .fed-reg-checkbox / .fed-reg-modal rules read
	 * (border, label, focus, error colors) — those rules are global
	 * selectors, not scoped to .fed-reg-ra, but their var(--fed-*)
	 * values ARE only declared on .fed-reg-ra. Reusing that markup here
	 * under .fed-reg-h without redeclaring these would leave every
	 * color/border undefined. Redeclaring them with Hardbody's
	 * black/gold values (instead of RA's navy/teal) is what makes the
	 * *same* field/checkbox/modal CSS come out on-brand for each module
	 * — this is the intended mechanism, not a workaround. The nested
	 * embedded RA form (inside the "not found" modal) still renders in
	 * RA's own neutral colors regardless: its own .fed-reg-ra wrapper
	 * re-declares these same names again, and CSS custom properties
	 * resolve to the nearest ancestor that sets them, so RA's values win
	 * within its own subtree without any extra rule needed here.
	 */
	--fed-navy: var(--fed-h-ink);
	--fed-navy-deep: #0d0d0d;
	--fed-steel: #6b5d47;
	--fed-steel-light: #cbbfa4;
	--fed-teal: var(--fed-h-gold);
	--fed-teal-deep: #6b4605;
	--fed-paper: var(--fed-h-paper);
	--fed-paper-dim: #efe6d3;
	--fed-ink: var(--fed-h-ink);
	--fed-error-bg: #fff3b0;
	--fed-error-text: #7a5300;
	--fed-radius: 14px;

	max-width: 640px;
	margin: 0 auto;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	color: var(--fed-h-ink);
}

/* ra-form.css hardcodes this glow to the RA teal (it's not var()-driven
   the way border-color is), so on H it needs its own gold-tinted glow —
   otherwise every input would show a teal ring on an otherwise
   black/gold form. */
.fed-reg-h .fed-reg-field__input:focus {
	box-shadow: 0 0 0 3px rgba(138, 90, 6, 0.18);
}

.fed-reg-h__header {
	text-align: center;
	margin-bottom: 1.5rem;
}
.fed-reg-h__logo {
	max-width: 340px;
	width: 100%;
	height: auto;
}

.fed-reg-h__step {
	background: linear-gradient(165deg, var(--fed-h-paper) 0%, #efe6d3 100%);
	border: 1px solid rgba(26, 26, 26, 0.08);
	border-radius: 14px;
	padding: 2rem;
	box-shadow: 0 20px 45px -25px rgba(26, 26, 26, 0.35);
}
.fed-reg-h__step[hidden] {
	display: none;
}
.fed-reg-h__step + .fed-reg-h__step {
	margin-top: 1rem;
}

.fed-reg-h__lookup-row {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}
.fed-reg-h__lookup-row .fed-reg-field {
	flex: 1;
}

.fed-reg-h__summary {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

.fed-reg-h__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 1.5rem 0 1rem;
	padding: 0.9rem 1.1rem;
	background: rgba(138, 90, 6, 0.08);
	border: 1px solid rgba(138, 90, 6, 0.25);
	border-radius: 10px;
	font-size: 0.95rem;
}
.fed-reg-h__total strong {
	font-size: 1.25rem;
	color: var(--fed-h-gold);
}

.fed-reg-h-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(120deg, var(--fed-h-gold-light) 0%, var(--fed-h-gold) 100%);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 12px 24px -12px rgba(138, 90, 6, 0.65);
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	white-space: nowrap;
}
.fed-reg-h-cta:hover:not(:disabled) {
	transform: translateY(-1px);
}
.fed-reg-h-cta:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}
.fed-reg-h-cta--block {
	display: flex;
	width: 100%;
}

.fed-reg-h-link {
	display: inline-block;
	margin-top: 0.9rem;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--fed-h-gold);
	text-decoration: underline;
	cursor: pointer;
}

.fed-reg-h-notice {
	max-width: 640px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	background: #f7f2e7;
	border: 1px solid rgba(26, 26, 26, 0.1);
	border-radius: 10px;
	font-size: 0.95rem;
	color: var(--fed-h-ink, #1a1a1a);
}

/* RA embedded inline (the "athlete not found" modal) needs more room
   than the compact H confirm/success modals. */
.fed-reg-modal__panel--wide {
	max-width: 640px;
}
.fed-reg-modal__panel--wide .fed-reg-ra__form {
	box-shadow: none;
	padding: 0;
	background: none;
	border: none;
}

@media (max-width: 480px) {
	.fed-reg-h__lookup-row {
		flex-direction: column;
	}
	.fed-reg-h__lookup-row .fed-reg-h-cta {
		width: 100%;
	}
}