/*
 * StrategistKit "my account" styling for the laki-membership blocks.
 * Uses the theme's design tokens (theme.json emits --wp--preset--color--*),
 * with hard fallbacks so the page still reads correctly if loaded standalone.
 * Navy #1E3A5F / gold #C9A84C. WCAG AA contrast; PSI-friendly (no images).
 *
 * @package laki-membership
 */

:root {
	--lm-navy: var( --sk-navy, var( --wp--preset--color--navy, #1E3A5F ) );
	--lm-navy-deep: var( --sk-navy-deep, var( --wp--preset--color--navy-deep, #15294A ) );
	--lm-navy-ink: var( --sk-navy-ink, var( --wp--preset--color--navy-ink, #0F1F38 ) );
	--lm-gold: var( --sk-gold, var( --wp--preset--color--gold, #C9A84C ) );
	--lm-gold-deep: var( --sk-gold-deep, var( --wp--preset--color--gold-deep, #A88735 ) );
	--lm-gold-text: var( --sk-gold-text, #7E6420 );
	--lm-paper: var( --wp--preset--color--white, #ffffff );
	--lm-bg-alt: var( --sk-bg-alt, var( --wp--preset--color--bg-alt, #F2EFE9 ) );
	--lm-line: var( --sk-border, var( --wp--preset--color--border, #E2DDD7 ) );
	--lm-ink: var( --sk-ink, var( --wp--preset--color--ink, #1C1C1E ) );
	--lm-muted: var( --sk-muted, var( --wp--preset--color--muted, #6B6B70 ) );
	--lm-r: 8px;
}

/* ---- Account header (page-my.html) ------------------------------------- */
.lm-account-head {
	margin-bottom: 1.6rem;
}

.lm-account-head .wp-block-post-title {
	margin: 0.5rem 0 0;
	font-family: var( --sk-display, inherit );
	font-size: clamp( 2.1rem, 4.2vw, 3rem );
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --lm-navy );
}

/* ---- Cards: each section becomes a panel ------------------------------- */
.lm-status,
.lm-sub,
.lm-purchases,
.lm-history,
.lm-tokens,
.lm-login-gate {
	/* Align to the same content width as the page H1 (constrained layout), so the
	 * cards and the heading share one left/right edge instead of the cards bleeding
	 * ~30px wider. */
	box-sizing: border-box;
	max-width: var( --wp--style--global--content-size, 1120px );
	margin: 0 auto 1.25rem;
	background: var( --lm-paper );
	border: 1px solid var( --lm-line );
	border-radius: var( --lm-r );
	padding: 1.6rem 1.7rem;
	box-shadow: 0 1px 2px rgba( 15, 31, 56, 0.04 );
}

/* ---- Section header: gold kicker + navy heading (design system) -------- */
.lm-sec__head {
	margin: 0 0 1rem;
}

.lm-kicker {
	margin: 0 0 0.35rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --lm-gold-text );
}

.lm-sec__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var( --lm-navy );
}

/* ---- Membership status card -------------------------------------------- */
.lm-status {
	border-top: 2px solid var( --lm-gold );
}

.lm-status__credits {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.lm-status__num {
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	color: var( --lm-navy );
}

.lm-status__unit {
	font-size: 1rem;
	color: var( --lm-muted );
}

.lm-facts {
	margin: 1.3rem 0 0;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	border: 1px solid var( --lm-line );
	border-radius: var( --lm-r );
	overflow: hidden;
}

.lm-facts > div {
	padding: 0.85rem 1rem;
	border-left: 1px solid var( --lm-line );
}

.lm-facts > div:first-child {
	border-left: 0;
}

.lm-facts dt {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --lm-muted );
}

.lm-facts dd {
	margin: 0.3rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --lm-navy );
}

.lm-status__actions {
	margin: 1.2rem 0 0;
}

.lm-freeskill {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --lm-line );
	font-size: 0.92rem;
	color: var( --lm-muted );
}

.lm-freeskill__label {
	font-weight: 600;
	color: var( --lm-navy );
}

.lm-freeskill a {
	color: var( --lm-gold-text );
	font-weight: 600;
}

@media ( max-width: 600px ) {
	.lm-facts {
		grid-template-columns: 1fr;
	}

	.lm-facts > div {
		border-left: 0;
		border-top: 1px solid var( --lm-line );
	}

	.lm-facts > div:first-child {
		border-top: 0;
	}
}

/* ---- Empty state (Your skills) ----------------------------------------- */
.lm-empty {
	margin: 0;
	color: var( --lm-muted );
}

.lm-empty__cta {
	margin: 1rem 0 0;
}

/* ---- Buttons ------------------------------------------------------------ */
.lm-btn {
	display: inline-block;
	padding: 0.62rem 1.15rem;
	border: 1.5px solid var( --lm-navy );
	border-radius: 8px;
	background: var( --lm-paper );
	color: var( --lm-navy );
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lm-btn:hover,
.lm-btn:focus-visible {
	background: var( --lm-navy );
	color: #fff;
}

.lm-btn:focus-visible {
	outline: 3px solid var( --lm-gold );
	outline-offset: 2px;
}

/* Primary = solid navy with white text (the bug was navy-on-navy). */
.lm-btn--primary {
	background: var( --lm-navy );
	border-color: var( --lm-navy );
	color: #fff;
}

.lm-btn--primary:hover,
.lm-btn--primary:focus-visible {
	background: var( --lm-navy-deep );
	border-color: var( --lm-navy-deep );
	color: #fff;
}

.lm-btn--ghost {
	border-color: var( --lm-line );
	color: var( --lm-muted );
}

.lm-btn--sm {
	padding: 0.4rem 0.8rem;
	font-size: 0.875rem;
}

.lm-btn[disabled] {
	opacity: 0.55;
	cursor: progress;
}

.lm-input {
	padding: 0.55rem 0.7rem;
	border: 1.5px solid var( --lm-line );
	border-radius: 8px;
	background: var( --lm-paper );
	color: var( --lm-navy );
	font: inherit;
}

.lm-input:focus-visible {
	outline: 3px solid var( --lm-gold );
	outline-offset: 1px;
}

/* ---- Subscription + CTA ------------------------------------------------- */
.lm-sub__status {
	font-weight: 600;
	color: var( --lm-navy );
	margin: 0 0 0.9rem;
}

.lm-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
}

.lm-cta--soon {
	color: var( --lm-muted );
	font-style: italic;
}

.lm-cta__msg,
.lm-fetch__msg,
.lm-checkout-msg {
	color: var( --lm-muted );
	font-size: 0.9rem;
}

/* ---- Lists: skills, purchases, tokens ----------------------------------- */
.lm-history__list,
.lm-purchases__list,
.lm-tokens__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-history__item,
.lm-purchases__item,
.lm-tokens__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var( --lm-line );
}

.lm-history__item:last-child,
.lm-purchases__item:last-child,
.lm-tokens__item:last-child {
	border-bottom: 0;
}

.lm-history__title,
.lm-purchases__title,
.lm-tokens__label {
	font-weight: 600;
	color: var( --lm-navy );
	margin-right: auto;
}

.lm-history__ver,
.lm-purchases__date,
.lm-tokens__state {
	font-size: 0.82rem;
	color: var( --lm-muted );
}

.lm-history__ver {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lm-purchases__note {
	margin: 0.9rem 0 0;
	font-size: 0.88rem;
	color: var( --lm-muted );
}

.lm-tokens__item--revoked {
	opacity: 0.55;
}

.lm-tokens__new {
	display: none;
	margin-top: 0.8rem;
	padding: 0.7rem 0.9rem;
	border: 1px dashed var( --lm-gold-deep );
	border-radius: 8px;
	background: rgba( 201, 168, 76, 0.08 );
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	word-break: break-all;
	color: var( --lm-navy );
}

.lm-tokens__new--show {
	display: block;
}

.lm-tokens__newlabel {
	font-size: 0.9rem;
	color: var( --lm-muted );
}

/* ---- Public pricing (/membership/) ------------------------------------- */
/* Two-column hero matching bundle-single: text + fine print on the left, the
 * price card on the right, inside the theme's constrained .sk-container--wide.
 * Reflows to a single column (intro → card → support) at the theme's hero
 * breakpoint. */
.lm-membership {
	padding: 48px 0 80px;
}

.lm-membership__hero {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	grid-template-areas:
		"intro aside"
		"support aside";
	gap: 12px 64px;
	align-items: start;
}

.lm-membership__intro {
	grid-area: intro;
}

.lm-membership__aside {
	grid-area: aside;
	align-self: center;
}

.lm-membership__support {
	grid-area: support;
	margin-top: 1.6rem;
}

.lm-membership__title {
	margin: 1rem 0 0;
	font-size: clamp( 2.2rem, 4.6vw, 3.5rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var( --sk-navy, var( --lm-navy ) );
}

.lm-membership__lede {
	margin: 1.1rem 0 0;
	max-width: 33rem;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var( --sk-ink-2, var( --lm-muted ) );
}

@media ( max-width: 900px ) {
	.lm-membership {
		padding: 28px 0 56px;
	}

	.lm-membership__hero {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"aside"
			"support";
		gap: 1.4rem;
	}

	.lm-membership__support {
		margin-top: 0;
	}
}

.lm-pricing__card {
	background: var( --lm-paper );
	border: 1.5px solid var( --lm-navy );
	border-radius: 14px;
	padding: 1.8rem 1.8rem 1.6rem;
	box-shadow: 0 6px 22px rgba( 15, 31, 56, 0.08 );
}

.lm-pricing__plan {
	margin: 0;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --lm-gold-deep );
}

.lm-pricing__price {
	margin: 0.3rem 0 1.1rem;
	color: var( --lm-navy );
}

.lm-pricing__amount {
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
}

.lm-pricing__per {
	color: var( --lm-muted );
	font-size: 1rem;
}

.lm-pricing__features {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.lm-pricing__features li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.6rem;
	color: var( --lm-navy );
	border-bottom: 1px solid var( --lm-line );
}

.lm-pricing__features li:last-child {
	border-bottom: 0;
}

.lm-pricing__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var( --lm-gold-deep );
	border-bottom: 2px solid var( --lm-gold-deep );
	transform: rotate( -45deg );
}

.lm-pricing__action {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.lm-pricing__cta {
	font-size: 1.05rem;
	padding: 0.8rem 1.5rem;
}

.lm-pricing__soon {
	color: var( --lm-muted );
	font-style: italic;
	margin: 0;
}

.lm-pricing__qualify {
	margin: 1.1rem 0 0;
	font-weight: 600;
	color: var( --lm-navy );
}

.lm-pricing__how,
.lm-pricing__trust {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var( --lm-muted );
}

.lm-pricing__trust a,
.lm-pricing__how a {
	color: var( --lm-navy );
}

.lm-login-gate__join {
	margin: 0.6rem 0 0;
	color: var( --lm-muted );
}

/* ---- Fetch control (skill pages) --------------------------------------- */
.lm-fetch {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

/* Credits → value bridge line: full-width row under the button, muted + small. */
.lm-fetch__bridge {
	flex-basis: 100%;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var( --sk-ink-2, #5a5f6b );
}

@media ( max-width: 600px ) {
	.lm-balance,
	.lm-sub,
	.lm-purchases,
	.lm-history,
	.lm-tokens,
	.lm-login-gate {
		padding: 1.15rem 1.1rem;
	}
}