/**
 * /enroll/ — Paddle-era signup funnel (inc/hooks-enroll.php, v0.13.59).
 *
 * Design language is NOT invented here. The plan card reuses the homepage
 * pricing-card system (.ca-price-card / .ca-price-card-featured and its
 * children) and the form reuses the sign-in modal's field language
 * (.ca-auth-input). Those live in homepage.css / auth.css, neither of
 * which is enqueued on this surface, so the shared blocks are
 * re-declared below with the SAME token values.
 *
 * ⚠ If you restyle pricing cards in homepage.css or inputs in auth.css,
 * mirror the change here — the two copies are deliberately identical.
 *
 * Contrast note: every value below was chosen against the brand audit
 * (variables.css §"AA-passing"): --gold on --navy is 6.33:1, white on
 * --navy is 13.6:1, and body copy on cream uses --charcoal, never gray.
 */

/* ═════════════════════════════════════════════════════════
   Layout
   ═════════════════════════════════════════════════════════ */
.ca-enroll {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 1040px;
	margin: 48px auto 72px;
	padding: 0 20px;
	box-sizing: border-box;
}
@media (min-width: 900px) {
	.ca-enroll {
		grid-template-columns: 360px 1fr;
		gap: 44px;
		align-items: start;
	}
}

/* The aside is the sticky element, NOT the card — sticking the card
 * itself made it a positioned ancestor that stacked over the Google
 * button on narrow viewports. Sticky is desktop-only: on mobile the two
 * columns are a single scrolling flow and a stuck card just eats the
 * screen. */
.ca-enroll-aside {
	min-width: 0;
}
@media (min-width: 900px) {
	.ca-enroll-aside {
		position: sticky;
		top: 96px;
	}
}

.ca-enroll-main {
	min-width: 0; /* lets long words wrap instead of blowing out the grid */
}

/* ═════════════════════════════════════════════════════════
   Plan card — mirrors .ca-price-card-featured (homepage.css)
   ═════════════════════════════════════════════════════════ */
.ca-enroll .ca-price-card {
	background: white;
	border-radius: 18px;
	padding: 36px 32px 32px;
	position: relative;
	box-shadow:
		0 1px 2px rgba(18, 43, 105, 0.04),
		0 8px 24px rgba(18, 43, 105, 0.06);
	display: flex;
	flex-direction: column;
}
.ca-enroll .ca-price-card-featured {
	background: var(--navy, #122B69);
	color: white;
	box-shadow: var(--shadow-lg, 0 18px 36px rgba(18, 43, 105, 0.18));
}

.ca-enroll .ca-price-savings-badge {
	position: absolute;
	top: -14px;
	right: 28px;
	background: var(--gold, #FF9B03);
	color: var(--navy, #122B69);
	padding: 6px 16px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	box-shadow: var(--shadow-md, 0 8px 24px rgba(18, 43, 105, 0.12));
}

.ca-enroll .ca-price-plan {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold, #FF9B03); /* 6.33:1 on navy */
	margin-bottom: 14px;
}

.ca-enroll .ca-price-amount {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3rem;
	color: white;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 22px;
}
.ca-enroll .ca-price-amount span {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0;
	margin-left: 4px;
}

.ca-enroll .ca-price-features {
	list-style: none;
	margin: 0 0 22px;
	padding: 22px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* ⚠ SPECIFICITY. This shortcode renders inside `.entry-content`, so
 * global.css's `body.ca-framework .entry-content li` (0,2,2) applies and
 * beat a plain `.ca-enroll .ca-price-features li` (0,2,1) — the bullets
 * rendered charcoal on navy, i.e. invisible. homepage.css never hit this
 * because the pricing block renders outside `.entry-content`.
 * Every text rule inside the navy card therefore carries the
 * `.ca-price-card-featured` ancestor too, taking it to (0,3,1). */
.ca-enroll .ca-price-card-featured .ca-price-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ca-enroll .ca-price-card-featured .ca-price-features li .ca-icon {
	color: var(--gold, #FF9B03);
	flex-shrink: 0;
	margin-top: 2px;
}

.ca-enroll .ca-price-card-featured .ca-enroll-plan-switch {
	margin: auto 0 0;
	padding-top: 4px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}
.ca-enroll .ca-price-card-featured .ca-enroll-plan-switch a {
	color: white;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	transition: text-decoration-color 0.18s ease;
}
.ca-enroll .ca-price-card-featured .ca-enroll-plan-switch a:hover,
.ca-enroll .ca-price-card-featured .ca-enroll-plan-switch a:focus-visible {
	text-decoration-color: var(--gold, #FF9B03);
}

/* ═════════════════════════════════════════════════════════
   Form column
   ═════════════════════════════════════════════════════════ */
.ca-enroll-heading {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--navy, #122B69);
	letter-spacing: -0.02em;
}
/* `.ca-enroll` ancestor keeps these at (0,2,x) so they aren't flattened
 * to charcoal by global.css's .entry-content p rule — see the specificity
 * note above. */
.ca-enroll .ca-enroll-sub,
.ca-enroll .ca-enroll-signedin {
	font-size: 0.94rem;
	color: var(--charcoal, #2D2D2D);
	margin: 0 0 22px;
}

.ca-enroll-social {
	margin-bottom: 4px;
}
/* Nextend's button is injected markup — normalise it to full width so it
 * can't overhang the column on narrow screens (it was overlapping the
 * plan card on mobile before the sticky fix). */
.ca-enroll-social .nsl-container,
.ca-enroll-social .nsl-container-buttons,
.ca-enroll-social .nsl-container-buttons a {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ca-enroll-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--gray-500, #6b7280);
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ca-enroll-divider::before,
.ca-enroll-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gray-200, #e5e7eb), transparent);
}

.ca-enroll-name-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 14px;
}
@media (min-width: 560px) {
	.ca-enroll-name-row { grid-template-columns: 1fr 1fr; }
}

.ca-enroll-field { margin-bottom: 16px; }
.ca-enroll-field label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--navy, #122B69);
	margin-bottom: 6px;
}
/* Mirrors .ca-auth-input (auth.css) — same padding, radius, focus ring. */
.ca-enroll-field input {
	width: 100%;
	padding: 15px 18px;
	border: 1.5px solid var(--gray-200, #e5e7eb);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 0.98rem;
	color: var(--charcoal, #2D2D2D);
	background: white;
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ca-enroll-field input:focus {
	outline: 0;
	border-color: var(--navy, #122B69);
	box-shadow: 0 0 0 3px rgba(18, 43, 105, 0.12);
}
.ca-enroll .ca-enroll-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	color: var(--gray-500, #6b7280);
}

/* ═════════════════════════════════════════════════════════
   Consents
   ═════════════════════════════════════════════════════════ */
.ca-enroll-consents {
	display: grid;
	gap: 14px;
	margin: 22px 0;
	padding: 18px 20px;
	background: var(--gold-pale, #FFF3DC);
	border-radius: 14px;
}
.ca-enroll-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--charcoal, #2D2D2D);
	cursor: pointer;
}
.ca-enroll-consent input[type="checkbox"] {
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--navy, #122B69);
	cursor: pointer;
}
/* --gold-dark, not --gold: gold text on the pale gold panel fails AA
 * (variables.css §--gold-dark). */
.ca-enroll-consent a {
	color: var(--gold-dark, #8A5700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ═════════════════════════════════════════════════════════
   Errors / status / trust
   ═════════════════════════════════════════════════════════ */
.ca-enroll-error {
	background: #fdecec;
	border: 1px solid var(--coral, #FF6B6B);
	color: #a12b2b;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0 0 16px;
}
.ca-enroll-error.ca-enroll-status {
	background: #eef6ee;
	border-color: #4caf7d;
	color: #1e6b43;
}

#ca-enroll-submit {
	width: 100%;
}
#ca-enroll-submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.ca-enroll .ca-enroll-signin-hint {
	margin: 16px 0 0;
	font-size: 0.88rem;
	color: var(--charcoal, #2D2D2D);
}
.ca-enroll-signin-hint a {
	color: var(--navy, #122B69);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ca-enroll .ca-enroll-trust {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--gray-200, #e5e7eb);
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--gray-500, #6b7280);
}
.ca-enroll-trust .ca-icon {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--gray-400, #9ca3af);
}

.ca-enroll-unavailable {
	grid-column: 1 / -1;
	text-align: center;
	padding: 64px 20px;
	font-size: 1.02rem;
	color: var(--charcoal, #2D2D2D);
}

/* ═════════════════════════════════════════════════════════
   Account page: Paddle billing box (hooks-enroll §6)
   ═════════════════════════════════════════════════════════ */
.ca-paddle-billing {
	background: white;
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 28px;
	box-shadow:
		0 1px 2px rgba(18, 43, 105, 0.04),
		0 8px 24px rgba(18, 43, 105, 0.06);
}
.ca-paddle-billing h3 {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--navy, #122B69);
}
.ca-paddle-billing p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--charcoal, #2D2D2D);
}
.ca-paddle-billing-notice {
	background: var(--gold-pale, #FFF3DC);
	border-radius: 10px;
	padding: 10px 14px;
}
.ca-paddle-billing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}
@media (max-width: 520px) {
	.ca-paddle-billing-actions { flex-direction: column; }
	.ca-paddle-billing-actions .ca-btn { width: 100%; }
}
.ca-btn-danger { color: var(--coral, #FF6B6B) !important; }
.ca-paddle-billing-wait {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.82rem;
	color: var(--gray-500, #6b7280);
}

/* PMPro's own cancel / update-billing links dead-end into redirects under
 * Paddle (hooks-enroll §5) — hide them so the billing box above is the
 * single set of actions. */
body.ca-paddle-on .pmpro_actionlinks a[href*="membership-account/cancel"],
body.ca-paddle-on .pmpro_actionlinks a[href*="membership-billing"],
body.ca-paddle-on .pmpro_actionlink-cancel,
body.ca-paddle-on .pmpro_actionlink-update-billing {
	display: none !important;
}