/**
 * Entry-page chrome — shared CSS for all six SONGREPS entry-point surfaces.
 *
 * Surfaces (theme-rendered + wp-login.php family):
 *   /sign-up/, /signup/{round-slug}/, /sign-up/?intake=success
 *   /login/, /forgot-password/, /reset-password/
 *
 * Source of truth: docs/design/entry-page-mockups.html
 * Spec: docs/superpowers/specs/2026-05-10-entry-page-redesign-design.md
 *
 * Loaded conditionally:
 *   - Theme family — Songreps_Chrome::is_entry_point_page()
 *   - wp-login.php family — Songreps_Login::enqueue_assets()
 *
 * Replaces: assets/css/login.css, assets/css/signup.css, assets/css/intake-form.css
 * (retired in Phase 7).
 *
 * @package Songreps_Platform
 */

/* =============================================================
   TOKEN ALIASES — mockup-friendly names → theme.json slugs
   Mockup uses --color-primary etc.; theme.json emits
   --wp--preset--color--<slug>. Aliases live at .entry-page scope
   so the rest of this file reads verbatim from the mockup.
   ============================================================= */
.entry-page {
	--color-primary: var( --wp--preset--color--primary );          /* #5b6f7d  SONGREPS Slate */
	--color-accent:  var( --wp--preset--color--accent );           /* #b58655  Warm Bronze */
	--color-bg:      var( --wp--preset--color--background );       /* #f4ede0  Off White */
	--color-bg-warm: color-mix( in srgb,
	                   var( --wp--preset--color--background ) 70%,
	                   white );                                    /* ~#f7f2e8 derived */
	--color-fg:      var( --wp--preset--color--foreground );       /* #2a3744  Deep Slate */
	--color-muted:   var( --wp--preset--color--muted );            /* #8c8478  Sand Gray */
	--color-error:   var( --wp--preset--color--error );            /* #a85a4a  Rust */
	--color-success: var( --wp--preset--color--success );          /* #7a8c6f  Sage */

	/* Form-inner width. Decoupled from badge size so the form keeps
	   readable input width on wider viewports while the badge is
	   capped smaller. They match at viewports up to ~1100px (where
	   both clamp at 32vw); above that, badge stops at 350 while
	   form-inner keeps growing to its 540 ceiling. */
	--entry-element-width: clamp( 320px, 32vw, 540px );

	--color-card:         rgba( 255, 251, 242, 0.7 );
	--color-border-soft:  rgba( 43, 55, 68, 0.08 );
	--color-border-input: rgba( 43, 55, 68, 0.16 );
	--color-error-bg:     rgba( 168, 90, 74, 0.08 );
	--color-error-border: rgba( 168, 90, 74, 0.22 );
	--color-success-bg:   rgba( 122, 140, 111, 0.18 );

	--font-display: 'Manrope', system-ui, sans-serif;
	--font-body:    'Inter', system-ui, sans-serif;

	--radius-card:   16px;
	--radius-input:  10px;
	--radius-button: 999px;

	--shadow-card: 0 1px 2px rgba( 43, 55, 68, 0.04 ),
	               0 8px 24px rgba( 43, 55, 68, 0.06 );

	--gradient-page: linear-gradient( 180deg,
		var( --color-bg ) 0%,
		var( --color-bg-warm ) 35%,
		#ffffff 100% );
}

/* =============================================================
   BOX-SIZING — scoped so a conditional-load misfire can't bleed
   ============================================================= */
.entry-page * { box-sizing: border-box; }

/* =============================================================
   PAGE WRAPPER
   Break out of WP's block-layout constraint. .entry-page is a
   direct child of .wp-block-post-content (which carries
   .is-layout-constrained), and WP applies max-width: var(--wp--style--global--content-size)
   to all direct children of constrained-layout parents — caps us
   at 720px. Override with !important + width:100% so the grid can
   fill the viewport up to its own max-width: 1800px.
   ============================================================= */
.entry-page {
	background: var( --gradient-page );
	min-height: 100vh;
	position: relative;
	font-family: var( --font-body );
	color: var( --color-fg );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	max-width: none !important;
	width: 100%;
	margin: 0 !important;
	padding: 0;
}

/* =============================================================
   GRID — desktop two-column, mobile single-column (see media query)
   ============================================================= */
.entry-grid {
	/* Flex with justify-content: space-evenly — distributes EQUAL
	   space before, between, and after children. Two children:
	   .entry-brand-column (sized to badge width) and
	   .entry-content-column (sized to form-inner width). Result:
	   identical gap between (1) viewport-left and badge,
	   (2) badge and form, (3) form and viewport-right.
	   Per Blake's spacing review — the previous grid+padding+gap
	   model couldn't produce equal three-way spacing.
	   Mobile flips to flex-direction: column in the breakpoint below. */
	display: flex;
	flex-direction: column; /* mobile default; desktop overrides */
	max-width: 1800px;
	margin: 0 auto;
	min-height: 100vh;
}

/* =============================================================
   BRAND COLUMN — sticky to viewport vertical center
   The trick: position: sticky + top: 0 + height: 100vh on the
   column itself, with flex-center inside to anchor the badge.
   No grid-track distribution gymnastics.
   ============================================================= */
.entry-brand-column {
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	height: 100vh;
}

/* The brand badge can be either a div wrapper (mockup pattern) or an
   img-with-class (production pattern from templates/parts/signup-nav.php).
   These rules size and round either form. Badge has its own clamp
   (max 350) so the brand presence stays disciplined; form-inner uses
   --entry-element-width for its own (wider) clamp. They match up to
   ~1100px viewport, then diverge. */
.entry-brand-badge {
	width: clamp( 320px, 32vw, 350px );
	height: auto;
	display: block;
	border-radius: 50%;
}
.entry-brand-badge img,
.entry-brand-badge svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}
.entry-brand-link {
	display: block;
	width: clamp( 320px, 32vw, 350px );
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.entry-brand-link:hover {
	transform: scale( 1.02 );
}
.entry-brand-link:focus-visible {
	outline: 2px solid var( --color-accent );
	outline-offset: 4px;
}
.entry-brand-link img.entry-brand-badge {
	width: 100%;
}
@media ( prefers-reduced-motion: reduce ) {
	.entry-brand-link { transition: none; }
}

/* =============================================================
   CONTENT COLUMN — flex-center vertically when content fits;
   scrolls inside its own column (not the page) when content >
   viewport. Body and .entry-page lock to viewport height so the
   ONLY scrollable region is this column — brand column stays
   put visually as the form column scrolls. justify-content:
   safe center means: center when content fits, fall back to
   top-aligned when content overflows so nothing gets clipped
   above the viewport.
   ============================================================= */
.entry-content-column {
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	min-height: 100vh;
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-top: clamp( 24px, 4vw, 48px );
	padding-bottom: clamp( 24px, 4vw, 48px );
}

/* =============================================================
   DESKTOP LAYOUT (≥768px)
   - Two columns side-by-side via flex with justify-content:
     space-evenly. Each column is sized to its content (badge or
     form-inner width), so the browser distributes equal space at
     start, between, and end. That gives the three matched gaps:
     viewport-left → badge, badge → form, form → viewport-right.
   - Page-level scroll lock: body and .entry-page lock to viewport
     height with overflow hidden so only the right column scrolls
     when content overflows. Brand column stays visually fixed.
   ============================================================= */
@media ( min-width: 768px ) {
	body.songreps-entry-point-page {
		overflow: hidden;
	}
	.entry-page {
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
	}
	.entry-grid {
		flex-direction: row;
		justify-content: space-evenly;
		align-items: stretch;
		height: 100vh;
		max-height: 100vh;
	}
	.entry-brand-column {
		/* Sized to badge width so flex space distribution leaves
		   equal gap on each side of the badge. */
		flex: 0 0 clamp( 320px, 32vw, 350px );
		width: clamp( 320px, 32vw, 350px );
	}
	.entry-content-column {
		/* Sized to form-inner width (--entry-element-width). With
		   the column matching the form, content-inner doesn't need
		   margin: 0 auto centering — it just fills the column. */
		flex: 0 0 var( --entry-element-width );
		width: var( --entry-element-width );
	}
}

.entry-content-inner {
	width: 100%;
	/* Content-inner now fills its sized column on desktop (column
	   width matches the form-inner clamp). On mobile, max-width:
	   none in the mobile media query so it fills the single column. */
	max-width: var( --entry-element-width );
}

/* =============================================================
   TYPOGRAPHY — eyebrow + headline + subhead
   ============================================================= */
.entry-eyebrow {
	font-family: var( --font-display );
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --color-accent );
	margin: 0 0 20px;
	text-align: center;
}

.entry-headline {
	font-family: var( --font-display );
	font-weight: 700;
	font-size: clamp( 32px, 3.6vw, 44px );
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var( --color-fg );
	margin: 0 0 12px;
	text-align: center;
}
.entry-headline em {
	font-style: italic;
	font-weight: 400;
	color: var( --color-primary );
}

.entry-subhead {
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.55;
	color: var( --color-muted );
	margin: 0 auto 36px;
	text-align: center;
	max-width: 380px;
}

/* =============================================================
   FOOTER MARK — below content column on entry pages
   ============================================================= */
.entry-footer-mark {
	margin-top: 48px;
	text-align: center;
	font-family: var( --font-body );
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var( --color-muted );
	opacity: 0.7;
}
.entry-footer-mark a {
	color: var( --color-primary );
	text-decoration: none;
}
.entry-footer-mark a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================
   FORM CARD — translucent, used on /login/ family only
   ============================================================= */
.entry-card {
	background: var( --color-card );
	border: 1px solid var( --color-border-soft );
	border-radius: var( --radius-card );
	padding: 36px 32px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	box-shadow: var( --shadow-card );
}

@media ( prefers-reduced-transparency: reduce ) {
	.entry-card {
		background: rgba( 255, 251, 242, 0.95 );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* =============================================================
   FORM FIELDS
   ============================================================= */
.entry-field { margin-bottom: 18px; }
.entry-field:last-child { margin-bottom: 0; }

.entry-label {
	display: block;
	font-family: var( --font-body );
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var( --color-fg );
	margin-bottom: 6px;
}

.entry-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --color-border-input );
	border-radius: var( --radius-input );
	background: rgba( 255, 255, 255, 0.85 );
	font-family: var( --font-body );
	font-size: 15px;
	color: var( --color-fg );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entry-input:focus,
.entry-input:focus-visible {
	outline: none;
	border-color: var( --color-accent );
	box-shadow: 0 0 0 3px rgba( 181, 134, 85, 0.15 );
}

textarea.entry-input {
	resize: vertical;
	min-height: 96px;
	font-family: var( --font-body );
}

.entry-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 24px;
}
.entry-checkbox-row input[ type="checkbox" ] {
	width: 16px;
	height: 16px;
	accent-color: var( --color-accent );
}
.entry-checkbox-row label {
	font-family: var( --font-body );
	font-size: 14px;
	color: var( --color-muted );
	margin: 0;
}

/* =============================================================
   BUTTONS — primary + secondary
   ============================================================= */
.entry-button {
	display: block;
	width: 100%;
	padding: 14px 24px;
	background: var( --color-fg );
	color: #fff;
	border: none;
	border-radius: var( --radius-button );
	font-family: var( --font-display );
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	text-align: center;
	text-decoration: none;
}
.entry-button:hover { background: #1f2a35; }
.entry-button:active { transform: translateY( 1px ); }
.entry-button:focus-visible {
	outline: 2px solid var( --color-accent );
	outline-offset: 2px;
}

.entry-button-secondary {
	display: block;
	width: 100%;
	padding: 12px;
	margin-top: 12px;
	background: transparent;
	border: 1px solid var( --color-border-input );
	border-radius: var( --radius-button );
	font-family: var( --font-display );
	font-weight: 500;
	font-size: 14px;
	color: var( --color-primary );
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.entry-button-secondary:hover {
	border-color: var( --color-primary );
	color: var( --color-fg );
}
.entry-button-secondary:focus-visible {
	outline: 2px solid var( --color-accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.entry-button,
	.entry-input,
	.entry-button-secondary {
		transition: none;
	}
}

/* =============================================================
   META LINKS — secondary actions below card
   ============================================================= */
.entry-meta {
	margin-top: 24px;
	text-align: center;
}
.entry-meta a {
	display: inline-block;
	font-family: var( --font-body );
	font-size: 14px;
	color: var( --color-primary );
	text-decoration: none;
	padding: 6px 12px;
	transition: color 0.15s ease;
}
.entry-meta a:hover {
	color: var( --color-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-meta-divider {
	display: inline-block;
	color: var( --color-border-input );
	margin: 0 4px;
}

/* =============================================================
   ERROR — page-level + field-level
   ============================================================= */
.entry-error {
	font-family: var( --font-body );
	font-size: 14px;
	line-height: 1.45;
	color: var( --color-error );
	background: var( --color-error-bg );
	border: 1px solid var( --color-error-border );
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 16px;
}

.entry-input--invalid {
	border-color: var( --color-error );
	box-shadow: 0 0 0 3px rgba( 168, 90, 74, 0.12 );
}

.entry-field-error {
	font-family: var( --font-body );
	font-size: 13px;
	color: var( --color-error );
	margin: 6px 0 0;
}

/* =============================================================
   PROGRESS — sign-up wizard
   ============================================================= */
.entry-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var( --font-display );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --color-muted );
	margin: 0 auto 12px;
	max-width: 380px;
}
.entry-progress-step { color: var( --color-fg ); }

.entry-progress-bar {
	width: 100%;
	max-width: 380px;
	margin: 0 auto 32px;
	height: 3px;
	background: rgba( 43, 55, 68, 0.08 );
	border-radius: 999px;
	overflow: hidden;
}
.entry-progress-fill {
	height: 100%;
	background: var( --color-accent );
	border-radius: 999px;
	transition: width 0.3s ease;
}
@media ( prefers-reduced-motion: reduce ) {
	.entry-progress-fill { transition: none; }
}

/* =============================================================
   WIZARD STEP HEADING + HELPER
   ============================================================= */
.entry-step-heading {
	font-family: var( --font-display );
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	text-align: left;
	color: var( --color-fg );
}
.entry-step-helper {
	font-family: var( --font-body );
	color: var( --color-muted );
	font-size: 14px;
	margin: 0 0 24px;
	text-align: left;
}

@media ( max-width: 767.98px ) {
	.entry-step-heading { font-size: 20px; }
}

/* =============================================================
   SUCCESS ICON — used on /sign-up/?intake=success
   ============================================================= */
.entry-success-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --color-success-bg );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: var( --color-success );
	font-size: 26px;
	line-height: 1;
}

/* =============================================================
   INFO PANEL — used on confirmation "What happens next" + similar
   ============================================================= */
.entry-panel {
	background: rgba( 255, 251, 242, 0.7 );
	border: 1px solid var( --color-border-soft );
	border-radius: var( --radius-card );
	padding: 24px;
	margin: 0 0 32px;
	text-align: left;
}
.entry-panel h2 {
	font-family: var( --font-display );
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 12px;
	color: var( --color-fg );
}
.entry-panel ol,
.entry-panel ul {
	font-family: var( --font-body );
	font-size: 15px;
	line-height: 1.6;
	color: var( --color-fg );
	margin: 0;
	padding-left: 20px;
}
.entry-panel li { margin-bottom: 4px; }
.entry-panel li:last-child { margin-bottom: 0; }

/* =============================================================
   BODY COPY — neutral block used between headline and panels
   (e.g. confirmation's two-paragraph thank-you, signup's confirm
   prompt). Centered to match the eyebrow/headline/subhead rhythm.
   ============================================================= */
.entry-body-copy {
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.55;
	color: var( --color-fg );
	text-align: center;
	max-width: 460px;
	margin: 0 auto 32px;
}
.entry-body-copy p { margin: 0 0 16px; }
.entry-body-copy p:last-child { margin: 0; }

/* =============================================================
   SIGNOFF — founder signature on confirmation
   ============================================================= */
.entry-signoff {
	font-family: var( --font-body );
	font-size: 15px;
	color: var( --color-fg );
	line-height: 1.6;
	text-align: center;
	margin: 0 0 32px;
}

/* =============================================================
   READING LIST — link cards on confirmation
   ============================================================= */
.entry-reading-list {
	border-top: 1px solid var( --color-border-soft );
	padding-top: 24px;
}
.entry-reading-list h2 {
	font-family: var( --font-display );
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --color-muted );
	margin: 0 0 16px;
	text-align: center;
}

.entry-reading-list-item {
	display: block;
	text-decoration: none;
	padding: 14px 16px;
	border: 1px solid var( --color-border-soft );
	border-radius: var( --radius-card );
	margin-bottom: 10px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.entry-reading-list-item:last-child { margin-bottom: 0; }
.entry-reading-list-item:hover {
	border-color: var( --color-accent );
	background: rgba( 255, 251, 242, 0.5 );
}

.entry-reading-list-title {
	display: block;
	font-family: var( --font-display );
	font-weight: 600;
	font-size: 15px;
	color: var( --color-fg );
	margin-bottom: 4px;
}
.entry-reading-list-arrow { color: var( --color-accent ); }

.entry-reading-list-teaser {
	display: block;
	font-family: var( --font-body );
	font-size: 13px;
	color: var( --color-muted );
	line-height: 1.5;
}

/* =============================================================
   MOBILE — single column, 120px badge above content
   Breakpoint matches mockup. If theme.json defines a different
   breakpoint elsewhere, reconcile here on conflict.
   ============================================================= */
@media ( max-width: 767.98px ) {
	.entry-grid {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 32px 24px 48px;
		min-height: auto;
	}

	.entry-brand-column {
		position: static;
		height: auto;
		margin-bottom: 32px;
	}

	.entry-brand-badge,
	.entry-brand-link,
	.entry-brand-link img.entry-brand-badge {
		width: 120px;
	}

	/* Hide the /sign-up/ Step 1 brand eyebrow on mobile. The 120px
	   round badge above the form is the brand presence on small
	   screens; a "SONGREPS" wordmark above the headline would
	   duplicate it. Only Step 1 ever renders .signup-eyebrow (see
	   intake-form.php $is_first guard); /login/, /forgot-password/,
	   /reset-password/ use their own .songreps-login-eyebrow which
	   names the action and stays visible on mobile by design. */
	.entry-page .signup-eyebrow {
		display: none;
	}

	/* On mobile, content-inner fills the single column. Matched-widths
	   model is desktop-only — at mobile, badge is 120px so locking
	   form to 120px width is wrong. */
	.entry-content-inner {
		max-width: none;
	}

	.entry-content-column {
		min-height: auto;
		max-height: none;
		overflow-y: visible;
		padding-top: 0;
		padding-bottom: 0;
	}

	.entry-headline {
		font-size: 30px;
	}

	.entry-card {
		padding: 24px 20px;
	}

	.entry-success-icon {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}

	.entry-panel {
		padding: 20px;
	}

	.entry-reading-list-item {
		padding: 12px 14px;
	}
}