/*
 * AeroIDX — post-activation welcome screen.
 *
 * Colours and easing come from tokens.css, enqueued as a dependency of this
 * stylesheet — the same layer the settings and onboarding screens consume, so
 * the three stay in step. Success header + a two-up fork: sign up (new users)
 * and add API key (returning users), co-equal weight.
 */

.aeroidx-welcome {
	margin: 0;
	padding: 7vh 20px 48px;
	font-family: var(--ax-font-body);
	color: var(--ax-ink);
}

/* Full width, same decision as the wizard's inner column. */
.aeroidx-welcome__inner {
	margin: 0 auto;
	text-align: center;
}

/* Green success check — green reads as "success" universally, even though the
 * brand colour is violet. */
.aeroidx-welcome__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--ax-success-wash);
	color: var(--ax-success);
}

/* Scoped with the wrapper class so wp-admin's own `.wrap h1` rules (which would
 * otherwise out-specify a single class) can't override our size/weight. */
.aeroidx-welcome .aeroidx-welcome__title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ax-ink);
}

/* AeroIDX brand wordmark — mirrors the .hl-accent heading gradient from the
 * marketing site's /agencies page (violet → pink, 135deg). inline-block keeps
 * background-clip:text reliable across engines. */
.aeroidx-welcome .aeroidx-welcome__brand {
	display: inline-block;
	background: linear-gradient(135deg, var(--ax-violet-500) 0%, var(--ax-magenta-400) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--ax-violet-500); /* fallback where background-clip:text is unsupported */
}

.aeroidx-welcome__lead {
	margin: 0 auto 36px;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ax-secondary);
}

/* The fork: two co-equal cards, stacking to one column on narrow screens. */
.aeroidx-welcome__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	text-align: left;
}

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

.aeroidx-welcome__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 34px;
	text-align: center;
	background: var(--ax-card);
	border: 1px solid var(--ax-border-soft);
	border-radius: var(--ax-radius-card);
	box-shadow: 0 1px 2px var(--ax-shadow-a04),
		0 10px 30px var(--ax-shadow-a06);
}

/* The "Add API Key" path gets a subtle violet wash + tinted border — present,
 * not loud. */
.aeroidx-welcome__card--accent {
	background: linear-gradient(180deg, var(--ax-violet-a07) 0%, var(--ax-violet-a07) 100%);
	border-color: var(--ax-violet-edge);
}

.aeroidx-welcome__card-title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ax-ink);
}

.aeroidx-welcome__card-text {
	margin: 0 0 26px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ax-secondary);
}

/* Push the button to the card foot so both align even when the copy above
 * runs to different lengths. */
/*
 * WHAT IS LEFT HERE IS ABOUT THE CARD, NOT ABOUT THE BUTTON.
 *
 * The gradient, the pill, the colour and the weight are gone: these are
 * `.button.button-primary` now, styled once in admin.css like every other
 * primary control in the plugin. This rule had been a third copy of that
 * button, at a third size (15px with 13/30 padding, against the admin's 12px
 * with 9/26 and the wizard's 14.5px with 12/28) — three sizes nobody chose.
 *
 * Sticking the button to the bottom of a flex card IS this file's business,
 * because it is about the card, so it stays.
 */
.aeroidx-welcome__cta {
	margin-top: auto;
	align-self: center;
	text-decoration: none;
}

.aeroidx-welcome__cta:focus-visible {
	outline: 2px solid var(--ax-violet-500);
	outline-offset: 2px;
}

.aeroidx-welcome__cta-icon {
	font-size: 15px;
	line-height: 1;
}

/* Right-align the foot, but keep only the link text clickable (an inline-block
 * link hugs its text instead of spanning the whole row). */
.aeroidx-welcome__foot {
	margin: 28px 0 0;
	text-align: right;
}

.aeroidx-welcome__skip {
	display: inline-block;
	font-size: 13px;
	color: var(--ax-muted);
	text-decoration: none;
}

.aeroidx-welcome__skip:hover,
.aeroidx-welcome__skip:focus {
	color: var(--ax-ink);
	text-decoration: underline;
}