/* =====================================================================
   MSM Markets -- the embedded registration page layout: the real
   /{market}/{program}/register/ page (registration-embed-template.php,
   dev spec 2026-10-17, "Registration Flow Switch") and the disposable
   staging /msm-embed-preview/ test page it was proven on
   (embed-preview-template.php; look & feel pass, dev spec 2026-10-17).
   Both render the same markup, parts/registration-embed-body.php. Keep
   this file when the test page is retired.

   Everything is scoped to body.msm-reg-embed or this layout's own
   msm-reg-embed-* classes, so the shared .msm-mini-header keeps its
   cream look on /vip/, the confirmation page and the package-upgrade
   page.

   Layout: navy header (--hero-navy, as .msm-sticky-nav), a mist page
   (--hero-mist, Formstack's own native card color), and two white cards
   -- the form (Formstack's own form background made transparent inside
   the iframe by formstack-embed-card.css) and a trust panel that sticks
   beside it on wide screens. Below 960px the panel drops under the form,
   un-stuck, and a one-line stat strip shows under the header instead.
   ===================================================================== */

body.msm-preview.msm-reg-embed { background: var(--hero-mist); }

/* ---------- Header ---------- */
.msm-reg-embed .msm-mini-header {
	background: var(--hero-navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 10px 0;
}
.msm-reg-embed-header-inner { display: flex; align-items: center; gap: 13px; }

/* ---------- Mobile stat strip (hidden on wide screens) ---------- */
.msm-reg-embed-strip {
	display: none;
	background: var(--fnl-white);
	border-bottom: 1px solid var(--fnl-cream-line);
	padding: 9px 16px;
	text-align: center;
	font-family: var(--msm-font-display);
	font-weight: 700;
	font-size: 13px;
	color: var(--fnl-navy);
}
.msm-reg-embed-strip-sep { color: var(--hero-muted); margin: 0 6px; }

/* ---------- Page body ---------- */
.msm-reg-embed-main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 48px; }
.msm-reg-embed-main h1 { margin: 0 0 20px; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); }
.msm-preview .msm-reg-embed-back {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.msm-preview .msm-reg-embed-back:hover { text-decoration-thickness: 2px; }
.msm-preview .msm-reg-embed-back:focus-visible { outline: 2px solid var(--hero-sky); outline-offset: 3px; }

.msm-reg-embed-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 28px;
	align-items: start;
}

.msm-reg-embed-card,
.msm-reg-embed-panel {
	background: var(--fnl-white);
	border-radius: 12px;
	box-shadow: var(--msm-shadow);
}
.msm-reg-embed-card { padding: 12px; min-width: 0; }
.msm-reg-embed-state { padding: 24px 12px; color: var(--fnl-text-gray); }

/* ---------- Trust panel ----------
   Sticky with NO height cap (dev spec, 2026-10-17, "Stop the Embedded
   Registration Panel From Getting an Internal Scrollbar on Desktop"): a
   max-height + overflow-y pair gave it a nested scrollbar whenever its real
   content outgrew the window. Taller than the window, it now just runs
   below the fold like any block. Don't re-add a clamp. */
.msm-reg-embed-panel {
	position: sticky;
	top: 24px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.msm-preview .msm-reg-embed-panel h2 {
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: 0.3px;
	text-wrap: balance;
}
.msm-reg-embed-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 14px;
	margin: 0;
}
.msm-reg-embed-stat { margin: 0; }
.msm-reg-embed-stat-num {
	display: block;
	font-family: var(--msm-font-display);
	font-weight: 900;
	font-size: 1.35rem;
	line-height: 1.15;
	color: var(--fnl-navy);
	font-variant-numeric: tabular-nums;
}
.msm-reg-embed-stat-label {
	display: block;
	margin: 2px 0 0;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--hero-muted);
}

.msm-reg-embed-secure {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px;
	border-radius: 10px;
	background: rgba(46, 158, 91, 0.08);
	border: 1px solid rgba(46, 158, 91, 0.28);
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--fnl-text-gray-dark);
}
.msm-reg-embed-secure svg { flex: none; width: 20px; height: 20px; color: var(--fnl-success); margin-top: 1px; }
.msm-reg-embed-secure strong { display: block; color: var(--fnl-navy); font-family: var(--msm-font-display); font-size: 0.92rem; }
.msm-reg-embed-secure p { margin: 2px 0 0; }

.msm-reg-embed-quotes { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.msm-reg-embed-quote {
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 3px solid var(--fnl-gold);
}
.msm-reg-embed-quote p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fnl-text-gray-dark); font-style: italic; }
.msm-reg-embed-quote footer { margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: var(--fnl-navy); }

/* ---------- Packages & Pricing (top of the panel) ----------
   parts/registration-embed-packages.php (dev spec, 2026-10-17, "Show
   Package Pricing on the Embedded Registration Page"): compact rows for
   the 340px column, in the panel's own type -- display-face numbers like
   the stat tiles, muted small text like the stat labels. The ul/li/p
   rules are two classes deep from the start so the legacy theme's bare
   element rules (see the guard below) can't reach them. */
.msm-reg-embed-packages {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--fnl-cream-line);
}
/* The Package Set's intro, in the stat labels' muted small type. pre-line
   keeps the admin's own line breaks (Baseball's is a short gear-value
   list), which the Event page's wide paragraph runs together. */
.msm-reg-embed .msm-reg-embed-packages-intro {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--hero-muted);
	white-space: pre-line;
}
.msm-reg-embed .msm-reg-embed-package-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.msm-reg-embed .msm-reg-embed-package {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--fnl-cream-line);
	border-radius: 10px;
	line-height: 1.4;
	background: none;
}
.msm-reg-embed .msm-reg-embed-package-popular {
	position: relative;
	margin-top: 6px;
	border-color: var(--fnl-gold);
	background: rgba(227, 178, 60, 0.08);
}
.msm-reg-embed-package-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.msm-reg-embed-package-name {
	font-family: var(--msm-font-display);
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--fnl-navy);
}
/* Pinned across the card's top border, like the Event page's own Most
   Popular flag -- beside the name it would need a line of its own. */
.msm-reg-embed-package-tag {
	position: absolute;
	top: -8px;
	left: 10px;
	padding: 2px 6px;
	border-radius: 20px;
	background: var(--fnl-gold);
	color: var(--fnl-navy);
	font-size: 0.58rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
}
.msm-reg-embed-package-price {
	flex: none;
	font-family: var(--msm-font-display);
	font-weight: 900;
	font-size: 1.2rem;
	color: var(--fnl-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.msm-reg-embed-package-price-missing { font-size: 0.82rem; color: var(--fnl-crimson); }
.msm-reg-embed .msm-reg-embed-package-items {
	margin: 4px 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--hero-muted);
}
.msm-reg-embed .msm-reg-embed-cap-note {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--fnl-text-gray-dark);
}
.msm-reg-embed-cap-note strong { color: var(--fnl-navy); }

/* ---------- Legacy theme guard ----------
   The real /register/ page calls wp_head(), which on production loads the
   old "squared" theme's style.css/reset.css/main_blue.css/
   apprentice_blue.css AFTER this file (same leak as the package-upgrade
   page, v0.76.1). Measured by loading those four sheets into this layout
   and diffing computed styles (2026-10-17): their bare dl/dd/p/blockquote
   rules padded the stats list 80px, thinned the stat labels to 300,
   loosened three line-heights, and turned each quote white on sky blue.
   Each rule below restores exactly the pre-leak value, two classes deep
   so it outranks those element selectors whatever the load order. */
.msm-reg-embed .msm-reg-embed-stats { padding: 0; line-height: 1.65; }
.msm-reg-embed .msm-reg-embed-stat { line-height: 1.65; }
.msm-reg-embed .msm-reg-embed-stat-label { font-weight: 400; }
.msm-reg-embed .msm-reg-embed-strip { line-height: 1.65; }
.msm-reg-embed .msm-reg-embed-secure p { line-height: 1.45; }
.msm-reg-embed .msm-reg-embed-quote { background: none; color: inherit; }
/* The shared market-footer.php's copyright line (p + links): 1.65 is
   its own inherited value; the theme's p/a rules set 24px. Scoped to
   this page -- the Event/Market pages never call wp_head(). */
.msm-reg-embed .msm-footer-small,
.msm-reg-embed .msm-footer-small a { line-height: 1.65; }

/* ---------- Narrow screens ---------- */
@media (max-width: 959px) {
	.msm-reg-embed-strip { display: block; }
	.msm-reg-embed-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.msm-reg-embed-panel { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 480px) {
	/* event-brand-fnl.css hides the nav's market name at this width to
	   make room for the real nav's Register button; this header has none. */
	.msm-reg-embed .msm-sticky-nav-market { display: inline-block; }
	.msm-reg-embed-card { padding: 4px; border-radius: 10px; }
	.msm-reg-embed-main { padding-top: 16px; }
}