/**
 * GigLad Learning Engine: premium sign-in page (Batch 3, authentication).
 *
 * Loaded only on the premium sign-in page (Learner\AuthPage), where the theme's stylesheet is removed.
 * Scoped to body.gle-auth-body. Brand values are the repository's tokens (as gle-workspace.css): navy
 * #17153a, orange #c24e1b (white text 4.77:1), teal text #127a70; Plus Jakarta Sans for headings and
 * Inter for text, self-hosted (SIL OFL). WooCommerce's forms, notices and password toggle keep their
 * own markup and behaviour; this file only styles them.
 *
 * @package GigLad\LearningEngine
 */

/* ---------------------------------------------------------------- fonts (self-hosted, SIL OFL) */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens and base */
body.gle-auth-body {
	--au-navy: #17153a;
	--au-navy-deep: #0d0c22;
	--au-blue: #0f3b5f;
	--au-teal: #45e0d6;
	--au-teal-text: #127a70;
	--au-orange: #c24e1b;
	--au-orange-hover: #a3410f;
	--au-ink: #17153a;
	--au-text: #2b2a40;
	--au-muted: #5b6478;
	--au-line: #8a8592; /* 3.6:1 on white: visible field boundaries. */
	--au-soft: #f4f6fa;
	--au-heading: "Plus Jakarta Sans", "Segoe UI", -apple-system, blinkmacsystemfont, roboto, helvetica, arial, sans-serif;
	--au-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif;
	margin: 0;
	background: #fff;
	color: var(--au-text);
	font-family: var(--au-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body.gle-auth-body *,
body.gle-auth-body *::before,
body.gle-auth-body *::after {
	box-sizing: border-box;
}

/* WordPress's visually-hidden text (the theme's stylesheet, which normally provides it, is removed here). */
body.gle-auth-body .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

body.gle-auth-body a {
	color: var(--au-teal-text);
}

body.gle-auth-body a:focus-visible,
body.gle-auth-body button:focus-visible,
body.gle-auth-body input:focus-visible {
	outline: 3px solid var(--au-teal-text);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout: brand panel and form */
.gle-auth {
	display: grid;
	grid-template-columns: minmax(320px, 40%) minmax(0, 1fr);
	min-height: 100vh;
}

.gle-auth__brand {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 48px 48px 0;
	background:
		radial-gradient(70% 50% at 100% 100%, rgba(31, 174, 159, 0.28) 0%, rgba(31, 174, 159, 0) 70%),
		linear-gradient(160deg, var(--au-navy-deep) 0%, var(--au-navy) 55%, var(--au-blue) 100%);
	color: #fff;
}

.gle-auth__logo img {
	display: block;
	width: 180px;
	height: auto;
}

.gle-auth__tagline {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--au-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.gle-auth__pitch {
	margin: auto 0 32px;
	padding-top: 56px;
}

.gle-auth__pitch-title {
	max-width: 14ch;
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--au-heading);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.gle-auth__pitch-text {
	max-width: 32ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 17px;
}

.gle-auth__points {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.gle-auth__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.92);
}

.gle-auth__points li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--au-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317153a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.gle-auth__art {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-top: auto;
}

.gle-auth__main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 32px;
	background: #fff;
}

.gle-auth__inner {
	width: 100%;
	max-width: 420px;
}

.gle-auth__mobile-brand {
	display: none;
}

/* ---------------------------------------------------------------- headings and copy */
.gle-auth-title {
	margin: 0 0 8px;
	color: var(--au-ink);
	font-family: var(--au-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.gle-auth-lead {
	margin: 0 0 28px;
	color: var(--au-muted);
	font-size: 16px;
}

.gle-auth-note,
.gle-auth-body .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	color: var(--au-muted);
	font-size: 14px;
}

/* A link inside a sentence is underlined, not told apart by colour alone. */
.gle-auth-body .woocommerce-privacy-policy-text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- WooCommerce's forms */
.gle-auth-body .woocommerce form.login,
.gle-auth-body .woocommerce form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.gle-auth-body .woocommerce form .form-row {
	display: block;
	margin: 0 0 18px;
	padding: 0;
}

.gle-auth-body .woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--au-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.gle-auth-body .woocommerce form .form-row .required {
	color: var(--au-orange);
	text-decoration: none;
}

.gle-auth-body .woocommerce form .input-text {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--au-line);
	border-radius: 10px;
	background: #fff;
	color: var(--au-ink);
	font-family: var(--au-body);
	font-size: 16px; /* 16px: phones do not zoom on focus. */
	line-height: 1.4;
	box-shadow: none;
}

/* WooCommerce's stylesheet removes the focus outline from its fields; the page's ring and border return it. */
.gle-auth-body .woocommerce form .input-text:focus {
	border-color: var(--au-teal-text);
	outline: 3px solid var(--au-teal-text);
	outline-offset: 1px;
}

.gle-auth-body .woocommerce form .input-text::placeholder {
	color: var(--au-muted);
}

/* WooCommerce's own password reveal control (woocommerce.js adds it to password fields). */
.gle-auth-body .woocommerce form .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.gle-auth-body .woocommerce form .password-input .input-text {
	padding-right: 52px;
}

/* Edge adds its own reveal icon to password fields; WooCommerce's toggle is the only one shown. */
.gle-auth-body .woocommerce form input[type="password"]::-ms-reveal,
.gle-auth-body .woocommerce form input[type="password"]::-ms-clear {
	display: none;
}

.gle-auth-body .woocommerce form .show-password-input {
	position: absolute;
	top: calc(50% - 22px);
	right: 4px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: none;
	translate: none; /* WooCommerce's stylesheet also offsets the toggle; the position above is the only one. */
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--au-muted);
	cursor: pointer;
}

/* The toggle's icon: WooCommerce draws it with its icon font, placed for the theme's layout; here an eye
   (show) and an eye with a slash (WooCommerce's display-password state: hide), centred in the button. */
.gle-auth-body .woocommerce form .show-password-input::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: 0;
	transform: translate(-50%, -50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
	font-family: inherit;
}

.gle-auth-body .woocommerce form .show-password-input.display-password::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* WooCommerce moves focus to its notices after a failed post (so they are announced): the brand ring. */
.gle-auth-body .woocommerce-notices-wrapper:focus,
.gle-auth-body .woocommerce-NoticeGroup:focus {
	outline: 3px solid var(--au-teal-text);
	outline-offset: 2px;
	border-radius: 10px;
}

.gle-auth-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: -4px 0 20px;
}

.gle-auth-meta .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	color: var(--au-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.gle-auth-meta .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--au-teal-text);
}

.gle-auth-meta .lost_password {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.gle-auth-meta .lost_password a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.gle-auth-body .woocommerce form .gle-auth-submit {
	margin: 0 0 8px;
}

.gle-auth-body .woocommerce form .gle-auth-submit .button {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--au-orange);
	color: #fff;
	font-family: var(--au-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.gle-auth-body .woocommerce form .gle-auth-submit .button:hover {
	background: var(--au-orange-hover);
	color: #fff;
}

.gle-auth-switch {
	margin: 24px 0 0;
	color: var(--au-muted);
	font-size: 14px;
	text-align: center;
}

.gle-auth-switch a {
	font-weight: 600;
}

/* ---------------------------------------------------------------- password recovery (lost-password endpoint) */
.gle-auth-icon {
	display: none;
}

/* WooCommerce's recovery forms place their fields side by side; here they stack, full width. */
.gle-auth-body .woocommerce form .form-row-first,
.gle-auth-body .woocommerce form .form-row-last {
	float: none;
	width: 100%;
}

.gle-auth-body .woocommerce form.lost_reset_password .clear {
	display: none;
}

.gle-auth-back {
	margin: 16px 0 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.gle-auth-back a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/* WooCommerce's own password strength meter and hint (woocommerce's password-strength-meter script). */
.gle-auth-body .woocommerce form .woocommerce-password-strength {
	margin: 8px 0 0;
	padding: 8px 12px;
	border: 1px solid #f3b7b7;
	border-radius: 8px;
	background: #fdecec;
	color: #8e1b1b;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

.gle-auth-body .woocommerce form .woocommerce-password-strength.good {
	border-color: #f1cf9b;
	background: #fff4e5;
	color: #7a4100;
}

.gle-auth-body .woocommerce form .woocommerce-password-strength.strong {
	border-color: #a9e2da;
	background: #e7f7f4;
	color: #0e5e58;
}

.gle-auth-body .woocommerce form .woocommerce-password-hint {
	display: block;
	margin: 8px 0 0;
	color: var(--au-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* WooCommerce disables the submit button until the new password is strong enough. */
.gle-auth-body .woocommerce form .gle-auth-submit .button:disabled,
.gle-auth-body .woocommerce form .gle-auth-submit .button.disabled {
	background: #b9b5bf;
	color: #2b2733;
	cursor: not-allowed;
	opacity: 1;
}

/* ---------------------------------------------------------------- WooCommerce notices */
.gle-auth-body .woocommerce-notices-wrapper:empty {
	display: none;
}

.gle-auth-body .woocommerce-error,
.gle-auth-body .woocommerce-message,
.gle-auth-body .woocommerce-info {
	margin: 0 0 24px;
	padding: 12px 16px 12px 44px;
	border: 1px solid #f3b7b7;
	border-top-width: 1px;
	border-radius: 10px;
	background: #fdecec;
	color: #8e1b1b;
	font-size: 15px;
	list-style: none;
}

.gle-auth-body .woocommerce-message,
.gle-auth-body .woocommerce-info {
	border-color: #a9e2da;
	background: #e7f7f4;
	color: #0e5e58;
}

.gle-auth-body .woocommerce-error::before,
.gle-auth-body .woocommerce-message::before,
.gle-auth-body .woocommerce-info::before {
	top: 13px;
	left: 16px;
	color: inherit;
}

.gle-auth-body .woocommerce-error li,
.gle-auth-body .woocommerce-message li,
.gle-auth-body .woocommerce-info li {
	margin: 0;
}

.gle-auth-body .woocommerce-error a {
	color: inherit;
	font-weight: 600;
}

/* ---------------------------------------------------------------- tablets and phones: single column */
@media (max-width: 899px) {
	.gle-auth {
		grid-template-columns: minmax(0, 1fr);
	}

	.gle-auth__brand {
		display: none;
	}

	.gle-auth__main {
		align-items: flex-start;
		padding: 32px 20px 40px;
	}

	.gle-auth__mobile-brand {
		display: block;
		margin: 0 0 32px;
		text-align: center;
	}

	.gle-auth__mobile-logo img {
		display: inline-block;
		width: 148px;
		height: auto;
	}

	.gle-auth__mobile-tagline {
		margin: 6px 0 0;
		color: var(--au-teal-text);
		font-family: var(--au-heading);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.18em;
	}

	.gle-auth-title {
		font-size: 26px;
	}

	.gle-auth-lead {
		margin-bottom: 24px;
	}

	.gle-auth-icon {
		display: block;
		width: 64px;
		height: 64px;
		margin: 0 auto 20px;
	}

	/* Phones (reference 08): "Back to sign in" is a full-width secondary button. */
	.gle-auth-back a {
		display: flex;
		width: 100%;
		min-height: 50px;
		border: 1px solid var(--au-line);
		border-radius: 10px;
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.gle-auth-body * {
		transition: none !important;
		animation: none !important;
	}
}