/**
 * Learner — shared block styles (loaded on the front end AND in the editor,
 * so every pattern looks identical in both places).
 */

/* Keep the site title clean (theme.json underlines links globally). */
.wp-block-site-title a,
.wp-block-site-title a:hover,
.wp-block-site-title a:focus {
	text-decoration: none;
}

/* ---- Feature icon chip ------------------------------------------------- */
.learner-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--secondary);
	margin-bottom: 4px;
}
.learner-ico svg { display: block; }

/* ---- Feature cards ----------------------------------------------------- */
.learner-feature {
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.learner-feature:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(66, 0, 255, .10);
}

/* ---- Numbered steps ---------------------------------------------------- */
.learner-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.15rem;
	font-family: var(--wp--preset--font-family--serif);
	margin-bottom: 6px;
}

/* ---- Checkmark lists (pricing, etc.) ----------------------------------- */
.learner-check { list-style: none; padding-left: 0; margin: 0; }
.learner-check li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .55rem;
}
.learner-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .1em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}
.learner-check li::after {
	content: "";
	position: absolute;
	left: .42rem;
	top: .36em;
	width: .38rem;
	height: .68rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
}

/* ---- Pricing plans ----------------------------------------------------- */
.learner-plan { height: 100%; }
.learner-plan--featured { box-shadow: 0 22px 48px rgba(66, 0, 255, .16); }
@media (min-width: 782px) {
	.learner-plan--featured { transform: translateY(-10px); }
}
.learner-pill { display: inline-block; width: auto; }

/* ---- Logo / trust row -------------------------------------------------- */
.learner-logos p { opacity: .5; margin: 0; }

/* ---- Screenshots ------------------------------------------------------- */
.learner-shot img {
	box-shadow: 0 24px 60px rgba(66, 0, 255, .14);
	border: 1px solid var(--wp--preset--color--border);
}

/* ---- Testimonials ------------------------------------------------------ */
.learner-quote { height: 100%; }

/* ---- FAQ accordions ---------------------------------------------------- */
.learner-faq .wp-block-details { background: var(--wp--preset--color--base); }
.learner-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1rem;
	list-style-position: outside;
}
.learner-faq details[open] > summary { color: var(--wp--preset--color--primary); }

/* ---- Outline buttons --------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---- Footer link lists ------------------------------------------------- */
.learner-footer-list { list-style: none; padding-left: 0; }
.learner-footer-list li { margin-bottom: .45rem; }
.learner-footer-list a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }
.learner-footer-list a:hover { color: var(--wp--preset--color--primary); }

/* ---- 404 gradient number ---------------------------------------------- */
.learner-404-number {
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
	margin: 0;
}

/* ---- Thank-you check badge -------------------------------------------- */
.learner-check-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 14px 34px rgba(66, 0, 255, .28);
}

/* ---- Native waitlist form (in blocks.css so it also styles the block's
 *      live preview inside the editor iframe) ---------------------------- */
.learner-waitlist-block { width: 100%; }
.learner-form { width: 100%; }
.learner-form__row {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: stretch;
}
.learner-form__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .9rem 1.1rem;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	appearance: none;
}
.learner-form__input::placeholder { color: #9a95a8; }
.learner-form__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(66, 0, 255, .16);
}
.learner-form__submit { flex: 0 0 auto; cursor: pointer; border: none; white-space: nowrap; }
.learner-form.is-loading .learner-form__submit { opacity: .7; pointer-events: none; }
.learner-form__message { margin: .6rem 0 0; font-size: .9rem; min-height: 1.2em; }
.learner-form__message.is-success { color: #0a7d33; }
.learner-form__message.is-error { color: #c0143c; }
.learner-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.learner-form--on-dark .learner-form__input { border-color: transparent; }
.learner-form--on-dark .learner-form__submit { background: #fff; color: var(--wp--preset--color--primary); }
.learner-form--on-dark .learner-form__submit:hover { background: var(--wp--preset--color--secondary); }
.learner-form--on-dark .learner-form__message.is-success,
.learner-form--on-dark .learner-form__message.is-error { color: #fff; }