/**
 * IAS Login + Password Reset page styles.
 *
 * Styles the [ias_login_page] and [ias_password_reset_page] shortcodes,
 * including overrides for the MemberPress [mepr_login_form] and the WP
 * lostpassword form embedded inside the rainbow card.
 *
 * All selectors are scoped to `.ias-login-hero` so this can't leak into
 * other pages / the rest of the site.
 *
 * @package IAS_My_Account
 */

.ias-login-hero {
	/* Design tokens (scoped) */
	--cream: #faf5ec;
	--cream-2: #f4ede0;
	--ink: #1d1d1f;
	--ink-2: #45484d;
	--muted: #7a7e85;
	--line: #e8e2d3;
	--white: #ffffff;
	--brand-blue: #2b7dbf;

	position: relative;
	/* Break out of Avada's content container so the hero spans the full
	   browser width edge-to-edge. We deliberately do NOT set min-height:100vh
	   here — Avada still renders its own page wrapper + footer below, and
	   100vh would leave a blank gap. Grid min-height + padding already fill
	   a normal viewport.
	   Background is transparent — the radial gradient wash + cream base is
	   painted on <body> via the inline <style> in print_page_body_style()
	   so it flows continuously across the whole viewport instead of ending
	   at the hero's edge. */
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding: 72px 56px;
	background: transparent;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var( --ink );
	line-height: 1.5;
	box-sizing: border-box;
}
.ias-login-hero *,
.ias-login-hero *::before,
.ias-login-hero *::after {
	box-sizing: border-box;
}

.ias-login-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	min-height: 560px;
}

/* Tiny, unobtrusive "back to dashboard" escape hatch pinned in the hero's
   top-right corner. Shows only when we pass $atts['dashboard_url'] into
   the template. Muted gray, tiny — easy to find on purpose, invisible
   otherwise. */
.ias-login-escape {
	position: absolute;
	top: 20px;
	right: 28px;
	font-size: 12px;
	color: var( --muted );
	text-decoration: none;
	opacity: .65;
	letter-spacing: .02em;
	transition: opacity .15s ease, color .15s ease;
	z-index: 2;
}
.ias-login-escape:hover {
	opacity: 1;
	color: var( --brand-blue );
}

/* ---------- Left: text column ---------- */
.ias-login-text {
	max-width: 500px;
}
.ias-login-logo {
	margin-bottom: 0;
}
.ias-login-logo img {
	display: block;
	max-width: 180px;
	width: 100%;
	height: auto;
}
.ias-login-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: var( --brand-blue );
	text-transform: uppercase;
	margin: 28px 0 14px;
}
.ias-login-headline {
	font-size: 48px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	color: var( --ink );
	margin: 0 0 18px;
}
.ias-login-highlight {
	background: linear-gradient( 120deg, #5cb0d9, #a989d0 60%, #e88b9a );
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ias-login-desc {
	font-size: 16px;
	color: var( --ink-2 );
	margin: 0 0 24px;
	max-width: 440px;
}
.ias-login-nudge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var( --white );
	border: 1px solid var( --line );
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ink-2 );
	box-shadow: 0 1px 2px rgba( 20, 20, 30, .04 );
}
.ias-login-nudge a {
	color: var( --brand-blue );
	text-decoration: none;
	font-weight: 700;
	margin-left: 2px;
}
.ias-login-nudge a:hover {
	text-decoration: underline;
}
.ias-login-heart {
	background: linear-gradient( 135deg, #e88b9a, #f4a94a );
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 15px;
}

/* ---------- Right: rainbow card ---------- */
.ias-login-card {
	background: var( --white );
	border-radius: 22px;
	overflow: hidden;
	max-width: 440px;
	width: 100%;
	justify-self: end;
	border: 1px solid rgba( 232, 226, 211, .6 );
	box-shadow: 0 8px 24px rgba( 20, 20, 30, .06 ), 0 32px 64px rgba( 20, 20, 30, .08 );
}
.ias-login-card-stripe {
	height: 6px;
	background: linear-gradient( 90deg,
		#5cb0d9 0%, #8bc586 25%, #f4a94a 50%, #e88b9a 75%, #a989d0 100% );
}
.ias-login-card-body {
	padding: 44px 40px 40px;
}
.ias-login-card-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var( --ink );
	margin: 0 0 8px;
	line-height: 1.2;
}
.ias-login-card-sub {
	font-size: 14px;
	color: var( --ink-2 );
	margin: 0 0 28px;
}
.ias-login-footer {
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba( 232, 226, 211, .7 );
	text-align: center;
	font-size: 13px;
	color: var( --ink-2 );
}
.ias-login-footer a {
	color: var( --brand-blue );
	font-weight: 600;
	text-decoration: none;
}
.ias-login-footer a:hover {
	text-decoration: underline;
}

/* Password-reset reassurance box */
.ias-login-reassurance {
	margin-top: 20px;
	padding: 14px 16px;
	background: linear-gradient( 135deg, rgba( 92, 176, 217, .08 ), rgba( 139, 197, 134, .08 ) );
	border: 1px solid rgba( 92, 176, 217, .15 );
	border-radius: 12px;
	font-size: 13px;
	color: var( --ink-2 );
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.4;
}
.ias-login-reassurance svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var( --brand-blue );
}
.ias-login-reassurance a {
	color: var( --brand-blue );
	font-weight: 600;
	text-decoration: none;
}

/* ---------- MemberPress form overrides ---------- */
/* Written against the actual rendered HTML from learn.artsintegration.com:
   - Login form:  form.mepr-form > .mp-form-row.mepr_username / .mepr_password
                                  > .mp-form-label > label
                                  > input (text / password-with-toggle)
                                  > div > label > input[type=checkbox] "Remember Me"
                                  > .mp-spacer
                                  > .submit > input.button-primary
   - Reset form:  .mp_wrapper > h3 "Request a Password Reset"
                              > form#mepr_forgot_password_form > .mp-form-row
                              > .submit > input.button-primary
   Selectors below target those exact class names; !important is used on the
   submit button so we win against WP admin's .button-primary styles. */

/* Force a consistent font inside anything MemberPress renders */
.ias-login-card .mepr-form,
.ias-login-card .mp_wrapper,
.ias-login-card .mepr-form *,
.ias-login-card .mp_wrapper * {
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* In-place password reset view: MP wraps it in .mp_wrapper with its own h3 */
.ias-login-card .mp_wrapper {
	margin: 0;
}
.ias-login-card .mp_wrapper > h3 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var( --ink );
	margin: 0 0 6px;
	line-height: 1.2;
}

/* Form containers */
.ias-login-card form.mepr-form,
.ias-login-card form#mepr_forgot_password_form,
.ias-login-card form.ias-lostpassword-form {
	display: block;
	margin: 0;
}

/* Row spacing */
.ias-login-card .mepr-form .mp-form-row,
.ias-login-card form#mepr_forgot_password_form .mp-form-row,
.ias-login-card form.ias-lostpassword-form p {
	margin: 0 0 16px;
}

/* Labels (the real ones MP renders: wrapped in .mp-form-label, or bare in
   the reset form, or an inline <label><input> Remember Me</label>) */
.ias-login-card .mepr-form .mp-form-label label,
.ias-login-card form#mepr_forgot_password_form > .mp-form-row > label,
.ias-login-card form.ias-lostpassword-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var( --ink );
	letter-spacing: -.005em;
	margin: 0 0 8px;
}

/* Inputs */
.ias-login-card .mepr-form input[type="text"],
.ias-login-card .mepr-form input[type="email"],
.ias-login-card .mepr-form input[type="password"],
.ias-login-card form#mepr_forgot_password_form input[type="text"],
.ias-login-card form#mepr_forgot_password_form input[type="email"],
.ias-login-card form.ias-lostpassword-form input[type="text"],
.ias-login-card form.ias-lostpassword-form input[type="email"] {
	display: block;
	width: 100%;
	height: auto;
	min-height: 54px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: var( --cream );
	border: 1.5px solid var( --line );
	border-radius: 12px;
	padding: 18px 18px;
	font-family: inherit;
	font-size: 15px;
	color: var( --ink );
	line-height: 1.3;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
	box-shadow: none;
}
.ias-login-card .mepr-form input[type="text"]:focus,
.ias-login-card .mepr-form input[type="email"]:focus,
.ias-login-card .mepr-form input[type="password"]:focus,
.ias-login-card form#mepr_forgot_password_form input:focus,
.ias-login-card form.ias-lostpassword-form input:focus {
	outline: none;
	border-color: var( --brand-blue );
	background: var( --white );
	box-shadow: 0 0 0 4px rgba( 43, 125, 191, .12 );
}
.ias-login-card .mepr-form input::placeholder,
.ias-login-card form#mepr_forgot_password_form input::placeholder,
.ias-login-card form.ias-lostpassword-form input::placeholder {
	color: #b6b1a6;
}

/* Password field: .mp-hide-pw wraps the input + eye-toggle button.
 * The eye toggle uses WordPress's dashicons font, which isn't loaded on the
 * frontend by default — so without it, the icon renders as three horizontal
 * lines (a broken font fallback). Rather than force-load dashicons site-wide
 * for one micro-affordance, we just hide the toggle. The password field
 * still behaves normally; users can still toggle via browser password managers. */
.ias-login-card .mepr-form .mp-form-row.mepr_password .mp-hide-pw {
	display: block;
	position: static;
}
.ias-login-card .mepr-form button.mp-hide-pw,
.ias-login-card .mepr-form .mp-hide-pw button {
	display: none !important;
}

/* Remember Me row — MP renders it as a bare <div> containing
   <label><input type="checkbox" name="rememberme"> Remember Me</label>.
   We pull it inline with the forgot-password link (see below). */
.ias-login-card .mepr-form > div:has( > label > input[type="checkbox"][name="rememberme"] ) {
	margin: 4px 0 18px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}
.ias-login-card .mepr-form label:has( > input[type="checkbox"][name="rememberme"] ) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 13px;
	color: var( --ink-2 );
	cursor: pointer;
	margin: 0;
}
.ias-login-card .mepr-form input[type="checkbox"][name="rememberme"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --brand-blue );
	vertical-align: middle;
}

/* MP spacer divs — collapse; we control spacing ourselves */
.ias-login-card .mepr-form .mp-spacer,
.ias-login-card .mp_wrapper .mp-spacer {
	display: none;
}

/* .submit wrapper */
.ias-login-card .mepr-form .submit,
.ias-login-card .mp_wrapper .submit {
	margin-top: 4px;
}

/* Submit button. .button-primary is inherited from WP admin styles and has
   strong specificity, so we stack selectors AND use !important on the
   visual properties to win reliably across WP versions and MP theme packs. */
.ias-login-card .mepr-form .submit input[type="submit"],
.ias-login-card .mepr-form input.button-primary,
.ias-login-card .mepr-form input.mepr-share-button,
.ias-login-card .mp_wrapper .submit input[type="submit"],
.ias-login-card .mp_wrapper input.button-primary,
.ias-login-card form.ias-lostpassword-form button[type="submit"] {
	display: block !important;
	width: 100% !important;
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	outline: none;
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	color: var( --white ) !important;
	padding: 15px 20px !important;
	margin-top: 8px !important;
	border-radius: 12px !important;
	cursor: pointer;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-shadow: none !important;
	height: auto !important;
	background: linear-gradient( 120deg, #5cb0d9 0%, #a989d0 60%, #e88b9a 100% ) !important;
	background-color: #8ba1d0 !important; /* fallback solid if gradient fails */
	box-shadow: 0 2px 4px rgba( 90, 130, 180, .2 ), 0 8px 20px rgba( 90, 130, 180, .22 ) !important;
	transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.ias-login-card .mepr-form .submit input[type="submit"]:hover,
.ias-login-card .mepr-form input.button-primary:hover,
.ias-login-card .mepr-form input.mepr-share-button:hover,
.ias-login-card .mp_wrapper .submit input[type="submit"]:hover,
.ias-login-card .mp_wrapper input.button-primary:hover,
.ias-login-card form.ias-lostpassword-form button[type="submit"]:hover {
	filter: brightness( 1.05 );
	transform: translateY( -1px );
	background: linear-gradient( 120deg, #5cb0d9 0%, #a989d0 60%, #e88b9a 100% ) !important;
}
.ias-login-card .mepr-form .submit input[type="submit"]:focus,
.ias-login-card .mp_wrapper .submit input[type="submit"]:focus,
.ias-login-card form.ias-lostpassword-form button[type="submit"]:focus {
	outline: none;
	box-shadow:
		0 0 0 4px rgba( 43, 125, 191, .22 ),
		0 8px 20px rgba( 90, 130, 180, .22 ) !important;
}

/* Any link MP outputs inside the card (e.g. a "Forgot Password?" link that
   follows the form) */
.ias-login-card .mepr-form a,
.ias-login-card .mp_wrapper a,
.ias-login-card-body > p a,
.ias-login-card-body > a {
	color: var( --brand-blue );
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
}
.ias-login-card .mepr-form a:hover,
.ias-login-card .mp_wrapper a:hover,
.ias-login-card-body > p a:hover,
.ias-login-card-body > a:hover {
	text-decoration: underline;
}

/* "Forgot password" link — MP renders it as a <p> after the form. Give it
 * real room to breathe below the submit button so it reads as a separate
 * affordance, not a label glued to the button. */
.ias-login-card-body > form.mepr-form + p,
.ias-login-card-body > form.mepr-form ~ p {
	margin: 28px 0 4px !important;
	padding: 0;
	text-align: left;
	font-size: 13px;
	line-height: 1.4;
}
.ias-login-card-body > form.mepr-form + p a,
.ias-login-card-body > form.mepr-form ~ p a {
	color: var( --brand-blue );
	font-weight: 600;
	text-decoration: none;
}
.ias-login-card-body > form.mepr-form + p a:hover,
.ias-login-card-body > form.mepr-form ~ p a:hover {
	text-decoration: underline;
}

/* MemberPress error / success messages */
.ias-login-card .mepr-form-has-errors,
.ias-login-card .mepr_error,
.ias-login-card .mepr-error-box {
	background: #fff4f5;
	border: 1px solid #f4c2c8;
	border-radius: 10px;
	padding: 12px 14px;
	color: #a3323f;
	font-size: 13px;
	margin: 0 0 18px;
}
.ias-login-card .mepr_success,
.ias-login-card .mepr-success-box {
	background: #f0fbf2;
	border: 1px solid #b9e3c0;
	border-radius: 10px;
	padding: 12px 14px;
	color: #2a6b38;
	font-size: 13px;
	margin: 0 0 18px;
}

/* ---------- Responsive ---------- */
@media ( max-width: 960px ) {
	.ias-login-hero {
		padding: 48px 24px;
	}
	.ias-login-hero-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ias-login-text { max-width: none; }
	.ias-login-headline { font-size: 36px; }
	.ias-login-logo img { max-width: 160px; }
	.ias-login-card {
		justify-self: stretch;
		max-width: none;
	}
	.ias-login-card-body { padding: 36px 28px 32px; }
}
