/**
 * Registration pages — student and instructor forms.
 *
 * @package Learnomy
 */

/* ==========================================================================
   Layout — centered card
   ========================================================================== */

.lrn-register {
	display: flex;
	justify-content: center;
	padding-top: var(--lrn-sp-10);
	padding-bottom: var(--lrn-sp-16);
}

.lrn-register__card {
	width: 100%;
	max-width: 640px;
	padding: var(--lrn-sp-8);
}

.lrn-register--instructor .lrn-register__card {
	max-width: 560px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.lrn-register__header {
	text-align: center;
	margin-bottom: var(--lrn-sp-6);
}

.lrn-register__title {
	font-size: var(--lrn-text-xl);
	font-weight: var(--lrn-weight-semibold);
	line-height: var(--lrn-leading-tight);
	color: var(--lrn-text);
	margin: 0 0 var(--lrn-sp-2);
}

.lrn-register__subtitle {
	font-size: var(--lrn-text-base);
	color: var(--lrn-text-secondary);
	margin: 0;
}

/* ==========================================================================
   Alert messages
   ========================================================================== */

.lrn-register__alert {
	padding: var(--lrn-sp-3) var(--lrn-sp-4);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	line-height: var(--lrn-leading-normal);
	margin-bottom: var(--lrn-sp-4);
}

.lrn-register__alert--error {
	background: var(--lrn-danger-bg);
	color: var(--lrn-danger);
	border: 1px solid var(--lrn-danger);
}

.lrn-register__alert--success {
	background: var(--lrn-success-bg);
	color: var(--lrn-success);
	border: 1px solid var(--lrn-success);
}

/* ==========================================================================
   Form
   ========================================================================== */

.lrn-register__form {
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-4);
}

.lrn-register__fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-4);
}

.lrn-register__legend {
	font-size: var(--lrn-text-md);
	font-weight: var(--lrn-weight-semibold);
	color: var(--lrn-text);
	padding-bottom: var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-2);
	border-bottom: 1px solid var(--lrn-divider);
	width: 100%;
}

.lrn-register__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lrn-sp-4);
}

/* Form groups, labels, hints — shared classes from learnomy.css */
.lrn-register .lrn-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-1);
}

.lrn-register .lrn-form-label {
	font-size: var(--lrn-text-sm);
	font-weight: var(--lrn-weight-medium);
	color: var(--lrn-text);
}

.lrn-register .lrn-form-label span {
	color: var(--lrn-danger);
}

.lrn-register .lrn-form-hint {
	font-size: var(--lrn-text-xs);
	color: var(--lrn-text-tertiary);
	margin: 0;
}

/* Input styles */
.lrn-register .lrn-input,
.lrn-register .lrn-textarea {
	width: 100%;
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	font-family: var(--lrn-font);
	font-size: var(--lrn-text-base);
	color: var(--lrn-text);
	background: var(--lrn-bg);
	border: 1px solid var(--lrn-border-heavy);
	border-radius: var(--lrn-radius-md);
	transition: border-color var(--lrn-dur) var(--lrn-ease),
	            box-shadow var(--lrn-dur) var(--lrn-ease);
}

/* Keyboard focus — visible 2px ring (companion to the outline: none rule
   below; both must ship together to keep keyboard a11y intact). */
.lrn-register .lrn-input:focus-visible,
.lrn-register .lrn-textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--lrn-accent) 30%, transparent);
	outline-offset: 0;
}
/* Mouse focus only — suppress the native outline since the :focus-visible
   block above already paints a ring for keyboard users. */
.lrn-register .lrn-input:focus:not(:focus-visible),
.lrn-register .lrn-textarea:focus:not(:focus-visible) {
	outline: none;
	border-color: var(--lrn-accent);
	box-shadow: 0 0 0 3px var(--lrn-accent-bg);
}

.lrn-register .lrn-input::placeholder,
.lrn-register .lrn-textarea::placeholder {
	color: var(--lrn-text-placeholder);
}

/* Error state */
.lrn-register .lrn-input--error {
	border-color: var(--lrn-danger);
}

.lrn-register .lrn-input--error:focus {
	box-shadow: 0 0 0 3px var(--lrn-danger-bg);
}

.lrn-register .lrn-form-error {
	font-size: var(--lrn-text-xs);
	color: var(--lrn-danger);
	min-height: 0;
}

.lrn-register .lrn-form-error[hidden] {
	display: none;
}

/* ==========================================================================
   Submit button
   ========================================================================== */

.lrn-register__submit {
	width: 100%;
	margin-top: var(--lrn-sp-2);
}

/* ==========================================================================
   Footer links
   ========================================================================== */

.lrn-register__footer {
	text-align: center;
	margin-top: var(--lrn-sp-6);
	padding-top: var(--lrn-sp-4);
	border-top: 1px solid var(--lrn-divider);
}

.lrn-register__footer p {
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
	margin: 0 0 var(--lrn-sp-2);
}

.lrn-register__footer p:last-child {
	margin-bottom: 0;
}

.lrn-register__footer a {
	color: var(--lrn-accent);
	font-weight: var(--lrn-weight-medium);
}

.lrn-register__footer a:hover {
	color: var(--lrn-accent-hover);
}

/* ==========================================================================
   Become-instructor (application form)
   --------------------------------------------------------------------------
   Renders on the /become-instructor/ route via templates/become-instructor.php.
   Shares the auth slice because it's the same onboarding family as the two
   register routes — applicant-facing forms enqueued conditionally.
   ========================================================================== */

.lrn-become-instructor__header {
	text-align: center;
	margin-block-end: var(--lrn-sp-8);
}

.lrn-become-instructor__header h1 {
	font-size: var(--lrn-text-2xl);
	font-weight: var(--lrn-weight-semibold);
	margin: 0 0 var(--lrn-sp-2);
}

.lrn-become-instructor__subtitle {
	color: var(--lrn-text-secondary);
}

.lrn-become-instructor__status {
	text-align: center;
	padding: var(--lrn-sp-8);
}

.lrn-become-instructor__status-icon {
	width: var(--lrn-icon-xl);
	height: var(--lrn-icon-xl);
	color: var(--lrn-warn);
	margin-block-end: var(--lrn-sp-3);
}

.lrn-become-instructor__status--rejected .lrn-become-instructor__status-icon {
	color: var(--lrn-danger);
}

.lrn-become-instructor__submitted-date {
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-tertiary);
}

.lrn-become-instructor__form {
	max-width: 768px;
	margin-inline: auto;
	padding: var(--lrn-sp-6);
}

/* Tap target: submit button must reach 40 px. */
.lrn-become-instructor__form .lrn-btn {
	min-height: 40px;
}

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   Two width breakpoints total — 640px (tablet/mobile) and 480px (small phone).
   Aligns with ux-foundation responsive contract.
   ========================================================================== */

@media ( max-width: 640px ) {
	.lrn-register__card {
		padding: var(--lrn-sp-5);
	}

	.lrn-register__row {
		grid-template-columns: 1fr;
	}

	.lrn-become-instructor__form {
		padding: var(--lrn-sp-4) var(--lrn-sp-3);
	}

	.lrn-become-instructor__form .lrn-btn {
		width: 100%;
		justify-content: center;
	}
}

@media ( max-width: 640px ) {
	.lrn-register__card {
		padding: var(--lrn-sp-3);
	}

	.lrn-register__title {
		font-size: var(--lrn-text-lg);
	}
}