/* ==========================================================================
   Rise With Teagan — member login page
   Figma node 1437-4931

   Loaded only on the MemberPress login page, from rwt-login.php.

   Covers all four states this page renders, not just the login form:
     login            .mp_wrapper.mp_login_form
     forgot password  .mp_wrapper                    (form has NO .mepr-form class)
     reset requested  .mp_wrapper.mepr_password_reset_requested
     reset password   .mp_wrapper

   So the card and field rules hang off .mp_wrapper rather than .mepr-form —
   the forgot-password form doesn't carry that class and would otherwise render
   unstyled and full-bleed.

   Measurements come from the design: card 520 wide with 47/60 padding, fields
   400x48, button 400x40. Card height is left to its content rather than pinned
   to 560, so an error message pushes it taller instead of overflowing.

   Colours bind to the Elementor kit globals, same as blocks.css.
   ========================================================================== */

/* Scoped to body, NOT :root — Elementor defines its --e-global-* vars on
   body.elementor-kit-8, so a var() reference resolved at :root silently falls
   back to the hardcoded hex and stops tracking the kit. */
body {
	--rwt-terracotta: var(--e-global-color-primary,   #BC5F50);
	--rwt-sienna:     var(--e-global-color-f220437,   #A14A3A);
	--rwt-espresso:   var(--e-global-color-text,      #3D322B);
	--rwt-taupe:      var(--e-global-color-c2248c7,   #887D78);
	--rwt-warm-cream: var(--e-global-color-accent,    #F5E9E2);
	--rwt-warm-white: var(--e-global-color-secondary, #FFFBF8);
	--rwt-button:     var(--e-global-color-03edebf,   #C46A5A);

	--rwt-serif: var(--e-global-typography-3906c6f-font-family, "Fraunces"), Georgia, serif;
	--rwt-sans:  var(--e-global-typography-primary-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--rwt-login-field: 400px;
}

/* The page sits on warm cream rather than the usual warm white. */
body.rwt-login-page {
	background-color: var(--rwt-warm-cream);
}

/* --------------------------------------------------------------- the card -- */

body.rwt-login-page .mp_wrapper {
	box-sizing: border-box;
	width: 520px;
	max-width: 100%;
	margin: 110px auto;
	padding: 47px 60px;
	background: #fff;
	border-radius: 12px;
	text-align: left;
}

/* ------------------------------------------------------------- the header -- */

body.rwt-login-page .rwt-login__title,
body.rwt-login-page .mp_wrapper h3 {
	margin: 0 0 14px;
	font-family: var(--rwt-serif);
	font-size: 38px;
	line-height: 48px;
	font-weight: 500;
	color: var(--rwt-terracotta);
	text-align: center;
}

/* The reset screens use a longer h3 than "Welcome back." */
body.rwt-login-page .mp_wrapper h3 {
	margin-bottom: 28px;
	font-size: 30px;
	line-height: 38px;
}

body.rwt-login-page .rwt-login__lead {
	margin: 0 0 47px;
	font-family: var(--rwt-sans);
	font-size: 15px;
	line-height: 20px;
	color: var(--rwt-espresso);
	text-align: center;
}

/* Body copy on the "reset requested" confirmation. Scoped to that screen only
   — a bare `.mp_wrapper > p` outranks .rwt-login__lead / .rwt-login__footer
   (0,1,1 vs 0,1,0) and silently flattens their spacing. */
body.rwt-login-page .mepr_password_reset_requested p {
	margin: 0;
	font-family: var(--rwt-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--rwt-espresso);
	text-align: center;
}

/* -------------------------------------------------------------- the fields -- */

body.rwt-login-page .mp_wrapper .mp-form-row {
	margin: 0 0 28px;
}

/* Labels sit in three different shapes across the four templates: wrapped in
   .mp-form-label (login), a direct child of .mp-form-row (forgot password),
   and inside .mp-form-label alongside the input (reset). One rule covers all.

   Note: something in the vendor CSS keeps these labels at display:inline, and
   an inline box ignores vertical margins — so the 6px label/field gap is set
   on the input's margin-top below rather than the label's margin-bottom.
   Don't "tidy" it back onto the label; it silently collapses to zero. */
body.rwt-login-page .mp_wrapper .mp-form-row label {
	display: block;
	margin: 0;
	font-family: var(--rwt-sans);
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--rwt-espresso);
}

body.rwt-login-page .mp_wrapper input[type="text"],
body.rwt-login-page .mp_wrapper input[type="email"],
body.rwt-login-page .mp_wrapper input[type="password"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--rwt-login-field);
	height: 48px;
	margin-top: 6px;   /* the label/field gap — see the note on labels above */
	padding: 0 15px;
	font-family: var(--rwt-sans);
	font-size: 15px;
	line-height: 48px;
	color: var(--rwt-espresso);
	background: #fff;
	border: 1px solid rgba(61, 50, 43, 0.18);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.rwt-login-page .mp_wrapper input[type="text"]::placeholder,
body.rwt-login-page .mp_wrapper input[type="password"]::placeholder {
	color: var(--rwt-taupe);
	opacity: 1;
}

body.rwt-login-page .mp_wrapper input[type="text"]:focus,
body.rwt-login-page .mp_wrapper input[type="password"]:focus {
	outline: none;
	border-color: var(--rwt-terracotta);
	box-shadow: 0 0 0 3px rgba(188, 95, 80, 0.14);
}

/* MemberPress's show/hide-password toggle uses a dashicon, which isn't
   enqueued on the front end — it would render as an empty box. Not in the
   design either. Applies to the login and reset-password screens. */
body.rwt-login-page .mp_wrapper .mp-hide-pw button {
	display: none;
}

/* ------------------------------------------------------------ the meta row -- */

/* Emitted by rwt-login.php. MemberPress puts "Remember Me" inside the form and
   "Forgot Password" in a sibling block after it, so the two can't be flexed
   onto one line as designed — we render our own and hide both originals. */
body.rwt-login-page .rwt-login__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--rwt-login-field);
	margin: 6px 0 28px;   /* 6 + the row's 28 = the design's 34 below the field */
	font-family: var(--rwt-sans);
	font-size: 14px;
	line-height: 18px;
}

body.rwt-login-page .rwt-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rwt-espresso);
	cursor: pointer;
}

body.rwt-login-page .rwt-login__remember input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--rwt-terracotta);
	cursor: pointer;
}

body.rwt-login-page .rwt-login__forgot {
	color: var(--rwt-terracotta);
	text-decoration: none;
	white-space: nowrap;
}

body.rwt-login-page .rwt-login__forgot:hover,
body.rwt-login-page .rwt-login__forgot:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* MemberPress's own versions — left in the DOM, hidden. An unchecked hidden
   checkbox submits nothing, so there's no clash with ours. */
body.rwt-login-page .mepr-form > div:has(> label > #rememberme),
body.rwt-login-page .mepr-login-actions,
body.rwt-login-page .mp-spacer,
body.rwt-login-page .mepr_spacer {
	display: none;
}

/* ------------------------------------------------------------- the button -- */

body.rwt-login-page .mp_wrapper .submit {
	margin: 0;
}

body.rwt-login-page .mp_wrapper input[type="submit"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--rwt-login-field);
	height: 40px;
	padding: 0 20px;
	font-family: var(--rwt-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--rwt-warm-white);
	background: var(--rwt-button);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.rwt-login-page .mp_wrapper input[type="submit"]:hover,
body.rwt-login-page .mp_wrapper input[type="submit"]:focus {
	background: var(--rwt-sienna);
}

/* ------------------------------------------------------------- the footer -- */

body.rwt-login-page .rwt-login__footer {
	max-width: var(--rwt-login-field);
	margin: 27px 0 0;
	font-family: var(--rwt-sans);
	font-size: 14px;
	line-height: 18px;
	color: var(--rwt-espresso);
	text-align: center;
}

body.rwt-login-page .rwt-login__footer a {
	color: var(--rwt-sienna);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------- MemberPress messaging -- */

/* A failed login renders as:
 *
 *   <div class="mp_wrapper"><div class="mepr_error">…</div></div>   <- own wrapper
 *   <div class="mp_wrapper mp_login_form"> …the card… </div>
 *
 * The error gets its own .mp_wrapper, so the card rules above turned it into a
 * second white card floating 110px above the real one. Strip the card styling
 * back off that wrapper and let it be a plain banner sitting just above. */
body.rwt-login-page .mp_wrapper:has(> .mepr_error) {
	margin: 110px auto 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

/* …and the card that follows shouldn't re-apply its own 110px top margin. */
body.rwt-login-page .mp_wrapper:has(> .mepr_error) + .mp_wrapper {
	margin-top: 16px;
}

/* MemberPress styles these with !important throughout —
 *   .mepr_error { background-color:#feb9bb !important; border:1px solid #d40022 !important }
 *   .mepr_error, .mepr_updated { padding:5px 5px 5px 15px !important; margin-bottom:25px !important }
 * so specificity alone can't win and !important has to be matched. Only the
 * properties that actually collide are forced; the rest cascade normally. */
body.rwt-login-page .mepr_error,
body.rwt-login-page .mepr-login-error,
body.rwt-login-page .mepr_success {
	box-sizing: border-box;
	margin: 0 0 24px !important;
	padding: 14px 18px !important;
	font-family: var(--rwt-sans);
	font-size: 14px;
	line-height: 1.45;
	border-radius: 8px;
}

/* Inside a banner the message is a <ul><li>. MemberPress already kills the
   bullets, but leaves a 5px bottom padding that unbalances the box. */
body.rwt-login-page .mepr_error ul,
body.rwt-login-page .mepr-login-error ul,
body.rwt-login-page .mepr_success ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

body.rwt-login-page .mepr_error li + li,
body.rwt-login-page .mepr-login-error li + li {
	margin-top: 6px;
}

/* MemberPress shouts "ERROR:" in bold caps — softened to match the brand. */
body.rwt-login-page .mepr_error strong {
	font-weight: 600;
	text-transform: none;
}

/* Sitting directly above the card, the banner has no margin below it. */
body.rwt-login-page .mp_wrapper:has(> .mepr_error) .mepr_error {
	margin-bottom: 0 !important;
}

/* MemberPress's stock #feb9bb / #d40022 is a hard pink-and-red that has nothing
   to do with the brand. Softened to a terracotta tint. */
body.rwt-login-page .mepr_error,
body.rwt-login-page .mepr-login-error {
	color: #8A2D1F;
	background-color: #F7E2DE !important;
	border: 1px solid rgba(188, 95, 80, 0.35) !important;
}

body.rwt-login-page .mepr_success {
	color: #2F5D3A;
	background-color: #E6EEE7 !important;
	border: 1px solid rgba(47, 93, 58, 0.25) !important;
}

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 800px) {
	body.rwt-login-page .mp_wrapper {
		width: 100%;
		margin: 48px auto;
		padding: 36px 24px;
		border-radius: 10px;
	}

	body.rwt-login-page .rwt-login__title {
		font-size: 30px;
		line-height: 38px;
	}

	body.rwt-login-page .mp_wrapper h3 {
		font-size: 26px;
		line-height: 34px;
	}

	body.rwt-login-page .rwt-login__lead {
		margin-bottom: 32px;
	}

	/* Field and button widths are capped at 400px on desktop; on a phone they
	   should simply fill the card. */
	body.rwt-login-page .mp_wrapper input[type="text"],
	body.rwt-login-page .mp_wrapper input[type="email"],
	body.rwt-login-page .mp_wrapper input[type="password"],
	body.rwt-login-page .mp_wrapper input[type="submit"],
	body.rwt-login-page .rwt-login__meta,
	body.rwt-login-page .rwt-login__footer,
	body.rwt-login-page .mepr_error,
	body.rwt-login-page .mepr-login-error,
	body.rwt-login-page .mepr_success {
		max-width: none;
	}
}