/*
 * Login (page 428, key "login"), rulebook P-15.
 * Code-rendered: eam-login/templates/login-redesign.php ([eam_login] inside the
 * eam/section "login" block), used only while the redesign switch is on.
 * Loaded by includes/redesign.php only on this view.
 *
 * RS model: the two-column "Email updates" band
 * (clone:src/components/sites/royalsociety-org-56b184c7/shared/EmailSubscription.tsx:93-170):
 * text in columns 1-6, the form in an indigo panel in columns 8-12 (32px
 * padding, white fields with no line, labels white semibold 10px above the
 * field, ink submit). EAM: the band is the light tint (B-02, image hero on
 * home only), the panel indigo (RS crimson, D-07).
 *
 * Shared parts underneath: components.css (band colour and padding, eyebrow,
 * H1, lede, benefit ticks), forms.css (every control), templates.css
 * (breadcrumb). This file lays the page out and turns the sign-in card into
 * the indigo panel. Inside the panel it only adapts colours to the dark
 * surface through the forms.css button variables (--rd-btn-*) and the same
 * on-indigo values forms.css uses for the Contact band (forms.css:483-492,
 * 627-630). Tokens only; every rule starts with body.eam-redesign.rd-page-login
 * (MemberPress can drop page-id-428 from the body, the page key survives).
 */

/* ---- 1. Band: size to the content (eam-login.css:17-20 forced 92vh) ------ */

body.eam-redesign.rd-page-login .rd-login {
  display: block;
  min-height: 0;
}

/* The band meets the footer: Kadence's content-area bottom margin (48px at
 * <= 1024, 32px on phones) left a white strip between them. */
body.eam-redesign.rd-page-login #primary.content-area:has(.rd-login) {
  margin-bottom: 0;
}

/* ---- 2. Grid: RS 12 columns; text 1-6, panel 8-12 ------------------------ */

/* The text block (intro + benefits) starts at the top of the band, so the
 * breadcrumb sits 80px under the header as on every other hero; the last
 * row is flexible and the panel spans all rows. */
body.eam-redesign.rd-page-login .rd-login .rd-login__inner {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--rd-grid-gap);
  row-gap: 0;
  align-items: start;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__intro {
  grid-column: 1 / 7;
  grid-row: 1;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__benefits {
  grid-column: 1 / 7;
  grid-row: 2;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__panel {
  grid-column: 8 / 13;
  grid-row: 1 / 4;
  align-self: start;
}

/* Lede: no extra space above the list (the list sets its own gap). */
body.eam-redesign.rd-page-login .rd-login .rd-login__intro > :last-child {
  margin-bottom: 0;
}

/* Benefits: shown at every width now (eam-login.css:113 hid them up to
 * 880px); below the lede on desktop, below the panel on phones. */
body.eam-redesign.rd-page-login .rd-login .rd-login__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-s);
  margin: var(--rd-space-m) 0 0;
  padding: 0;
  list-style: none;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__benefits li {
  align-items: center;
  gap: var(--rd-space-xs);
  margin: 0;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__benefits svg {
  margin-top: 0;
}

/* ---- 3. The indigo panel (RS .email-subscription-form) ------------------ */

body.eam-redesign.rd-page-login .rd-login .rd-login__panel {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--rd-space-m);
  border-radius: var(--rd-radius);
  background: var(--rd-color-primary);
  color: var(--rd-color-on-primary);
  box-shadow: none;
}

/* Title: RS panel title (h2 style, here one step down so the H1 leads). */
body.eam-redesign.rd-page-login .rd-login .rd-login__panel .rd-login__panel-title {
  margin: 0 0 var(--rd-space-base);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-h3);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-h3);
  letter-spacing: var(--rd-ls-heading);
  text-transform: none;
  color: var(--rd-color-on-primary);
}

/* MemberPress spacer lines (a div holding &nbsp;) between the rows. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(.mp-spacer, .mepr_spacer) {
  display: none;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form .mp_wrapper {
  margin: 0;
}

/* Text MemberPress prints in the panel (requested-reset note, "already
 * logged in", reset errors): white on indigo. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(p, .mepr-already-logged-in, .mepr_password_reset_requested) {
  margin: 0 0 var(--rd-space-s);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-on-primary);
}

/* Field labels (sign in, reset) and the forgot-password label, which
 * MemberPress prints without .mp-form-label: RS .form__label in white. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(.mp-form-label label, .mepr_forgot_password_input > label) {
  display: block;
  margin: 0 0 10px;
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-on-primary);
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form .mepr_forgot_password_input {
  margin-bottom: var(--rd-space-s);
}

/* Fields: the white box is the edge on indigo (RS border-0; same as the
 * Contact band, forms.css:483-486). Hover line and focus come from forms.css,
 * with the focus ring repeated in white so it shows on the indigo. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(input[type="text"], input[type="email"], input[type="password"]) {
  border-color: var(--rd-white);
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(input[type="text"], input[type="email"], input[type="password"]):is(:focus, :focus-visible) {
  border-color: var(--rd-color-primary);
  box-shadow: inset 0 0 0 1px var(--rd-color-primary), 0 0 0 3px var(--rd-color-primary), 0 0 0 5px var(--rd-white);
}

/* Remember me: white label, white box (the indigo tick stays forms.css's). */
body.eam-redesign.rd-page-login .rd-login .rd-login__form label:has(> input[type="checkbox"]) {
  color: var(--rd-color-on-primary);
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form input[type="checkbox"]:not(:checked) {
  border-color: var(--rd-white);
}

/* Submit: RS .button--black (ink) through the forms.css button variables;
 * size, width, hover and focus ring stay forms.css's. The space above sits
 * on MemberPress's .submit wrapper (forms.css resets button margins at
 * (0,6,1), so its own 12px margin-top on the login submit never applies). */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(input[type="submit"], .mepr-submit) {
  --rd-btn-bg: var(--rd-color-dark);
  --rd-btn-fg: var(--rd-white);
  --rd-btn-line: var(--rd-color-dark);
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form form .submit {
  margin: var(--rd-space-base) 0 0;
}

/* Links in the panel ("Forgot Password", "Logout.", "View membership
 * options"): white semibold, underline on hover (B-02, components.css:1560). */
body.eam-redesign.rd-page-login .rd-login .rd-login__panel a {
  color: var(--rd-color-on-primary);
  font-weight: var(--rd-fw-semibold);
}

body.eam-redesign.rd-page-login .rd-login .rd-login__panel a:is(:hover, :focus-visible) {
  color: var(--rd-color-on-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.eam-redesign.rd-page-login .rd-login .rd-login__form .mepr-login-actions {
  margin: var(--rd-space-2xs) 0 0;
}

/* Tap target for the lone "Forgot Password" link without moving the text. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form .mepr-login-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Form messages keep forms.css's panels; only the MemberPress list inside. */
body.eam-redesign.rd-page-login .rd-login .rd-login__form :is(.mepr_error, .mepr-error) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "Don't have an account yet?" under a hairline. */
body.eam-redesign.rd-page-login .rd-login .rd-login__panel .rd-login__meta {
  margin: var(--rd-space-s) 0 0;
  padding: var(--rd-space-base) 0 0;
  border-top: var(--rd-border-width) solid color-mix(in srgb, var(--rd-white) 35%, transparent);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-on-primary);
}

/* ---- 4. Below desktop: text 1-6, panel 7-12 ------------------------------ */

@media (max-width: 1080px) {
  body.eam-redesign.rd-page-login .rd-login .rd-login__intro,
  body.eam-redesign.rd-page-login .rd-login .rd-login__benefits {
    padding-right: var(--rd-space-base);
  }

  body.eam-redesign.rd-page-login .rd-login .rd-login__panel {
    grid-column: 7 / 13;
  }
}

/* ---- 5. Tablet and phone: one column; text, panel, then benefits -------- */

@media (max-width: 820px) {
  body.eam-redesign.rd-page-login .rd-login .rd-login__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: var(--rd-space-m);
  }

  body.eam-redesign.rd-page-login .rd-login .rd-login__intro,
  body.eam-redesign.rd-page-login .rd-login .rd-login__panel,
  body.eam-redesign.rd-page-login .rd-login .rd-login__benefits {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-right: 0;
  }

  body.eam-redesign.rd-page-login .rd-login .rd-login__panel {
    padding: var(--rd-space-m);
    align-self: stretch;
  }

  body.eam-redesign.rd-page-login .rd-login .rd-login__benefits {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  body.eam-redesign.rd-page-login .rd-login .rd-login__panel {
    padding: var(--rd-space-base);
  }
}