/* ============================================================================
   Faith on Motion - login / register surfaces
   ============================================================================
   Two surfaces, one design language:

   1. The WordPress screens  -  /wp-login.php (sign in),
      /wp-login.php?action=register, /wp-login.php?action=lostpassword.
      These are printed by core, not by the theme, so they need their own
      treatment: navy canvas, a brand plate (white lockup + tagline) and a
      white card with the FOM form controls.

   2. The theme's own front-end overlays  -  the "Login" / "Register" panels
      that live inside the mobile drawer (.td-login-*).  The parent theme
      styles them with white text on a white drawer, which makes them
      invisible; they are re-coloured with the FOM palette here.

   Section 1 is printed INLINE on the login screen (functions.php,
   fom_login_head_css) because core prints wp-admin/css/login.min.css late
   in the head - the declarations therefore carry !important so the result
   does not depend on the order of the two style blocks.

   Contents
     1. Tokens
     2. WordPress login / register / lost-password screen
     3. Front-end login & register overlays (mobile drawer / popup)
     4. Responsive
   ========================================================================== */

:root,
.fom-root {
  --fom-white:     #ffffff;
  --fom-paper:     #fbf8f3;
  --fom-ink:       #17131c;
  --fom-ink-soft:  #433d4b;
  --fom-grey:      #71697c;
  --fom-rule:      #e8e1d6;
  --fom-gold:      #b98d3e;
  --fom-gold-soft: #d8b96e;
  --fom-navy:      #01175e;
  --fom-navy-deep: #010c38;
  --fom-serif:     'Zilla Slab', Georgia, 'Times New Roman', serif;
  --fom-sans:      'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. WORDPRESS LOGIN / REGISTER / LOST-PASSWORD SCREEN
   ------------------------------------------------------------------------- */
body.login {
  min-height: 100vh !important;
  background-color: var(--fom-navy-deep) !important;
  background-image:
    radial-gradient(120% 78% at 50% -12%, rgba(185, 141, 62, .38), rgba(185, 141, 62, 0) 58%),
    linear-gradient(165deg, #04227a 0%, var(--fom-navy) 46%, var(--fom-navy-deep) 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--fom-sans) !important;
  color: var(--fom-ink) !important;
}

/* --- layout ------------------------------------------------------------- */
body.login #login {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 5vh 18px 44px !important;
}
body.login #login h1.wp-login-logo { display: none !important; }

/* --- brand plate (printed by functions.php on the login_header hook) ----- */
.fom-login-brand {
  box-sizing: border-box;
  max-width: 430px;
  margin: 5vh auto 16px;
  padding: 20px 22px 18px;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  border: 1px solid rgba(185, 141, 62, .45);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(1, 8, 40, .45);
}
.fom-login-brand-link {
  display: block;
  text-decoration: none !important;
  color: #fff !important;
}
.fom-login-brand-logo {
  display: block;
  width: auto;
  height: 52px;
  margin: 0 auto 10px;
}
.fom-login-brand-name {
  display: block;
  font-family: var(--fom-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}
.fom-login-brand-tag {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--fom-gold-soft);
}
.fom-login-brand-title {
  display: block;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(185, 141, 62, .38);
  font-family: var(--fom-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
}

/* --- the card ----------------------------------------------------------- */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
  margin: 0 !important;
  padding: 28px 28px 24px !important;
  background: var(--fom-white) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 70px rgba(1, 8, 40, .45) !important;
}
body.login #loginform p,
body.login #registerform p,
body.login #lostpasswordform p { margin: 0 0 16px !important; }

/* --- labels ------------------------------------------------------------- */
body.login #loginform label,
body.login #registerform label,
body.login #lostpasswordform label {
  display: block !important;
  margin: 0 0 7px !important;
  font-family: var(--fom-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--fom-ink-soft) !important;
  line-height: 1.4 !important;
}

/* --- inputs ------------------------------------------------------------- */
body.login #loginform input[type="text"],
body.login #loginform input[type="email"],
body.login #loginform input[type="password"],
body.login #registerform input[type="text"],
body.login #registerform input[type="email"],
body.login #registerform input[type="password"],
body.login #lostpasswordform input[type="text"],
body.login #lostpasswordform input[type="email"] {
  width: 100% !important;
  height: 47px !important;
  padding: 0 14px !important;
  border: 1px solid var(--fom-rule) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--fom-ink) !important;
  font-family: var(--fom-sans) !important;
  font-size: 15px !important;
  line-height: 47px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.login #loginform input[type="text"]:focus,
body.login #loginform input[type="email"]:focus,
body.login #loginform input[type="password"]:focus,
body.login #registerform input[type="text"]:focus,
body.login #registerform input[type="email"]:focus,
body.login #registerform input[type="password"]:focus,
body.login #lostpasswordform input[type="text"]:focus,
body.login #lostpasswordform input[type="email"]:focus {
  border-color: var(--fom-gold) !important;
  box-shadow: 0 0 0 3px rgba(185, 141, 62, .18) !important;
  outline: 2px solid transparent !important;
}
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] { -webkit-appearance: none; appearance: none; }

/* --- password row + show/hide ------------------------------------------ */
body.login .user-pass-wrap { position: relative !important; }
body.login .user-pass-wrap .wp-pwd { position: relative !important; }
body.login .user-pass-wrap input[type="password"] { padding-right: 46px !important; }
body.login .wp-pwd .button.button-secondary {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 34px !important;
  height: 39px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--fom-grey) !important;
  cursor: pointer;
}
body.login .wp-pwd .button.button-secondary:hover {
  background: var(--fom-paper) !important;
  color: var(--fom-navy) !important;
}
body.login .wp-pwd .button.button-secondary .dashicons {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* --- remember me -------------------------------------------------------- */
body.login #loginform .forgetmenot {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px !important;
}
body.login #loginform .forgetmenot input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--fom-navy);
  flex: 0 0 auto;
}
body.login #loginform .forgetmenot label {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fom-ink-soft) !important;
}

/* --- submit ------------------------------------------------------------- */
body.login #loginform p.submit,
body.login #registerform p.submit,
body.login #lostpasswordform p.submit { margin: 18px 0 0 !important; }
body.login #loginform .button-primary,
body.login #registerform .button-primary,
body.login #lostpasswordform .button-primary,
body.login form .submit .button {
  width: 100% !important;
  height: 47px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--fom-navy) !important;
  color: #fff !important;
  font-family: var(--fom-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 47px !important;
  text-align: center !important;
  box-shadow: 0 12px 26px rgba(1, 23, 94, .28) !important;
  transition: background .18s ease, box-shadow .18s ease;
}
body.login #loginform .button-primary:hover,
body.login #registerform .button-primary:hover,
body.login #lostpasswordform .button-primary:hover,
body.login form .submit .button:hover,
body.login form .submit .button:focus {
  background: var(--fom-gold) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(185, 141, 62, .4) !important;
}
body.login form .submit .button:focus-visible {
  outline: 2px solid var(--fom-gold-soft) !important;
  outline-offset: 2px !important;
}

/* --- inline notes inside the card --------------------------------------- */
body.login #reg_passmail,
body.login #loginform p.description,
body.login #registerform p.description {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--fom-grey) !important;
}

/* --- nav + back to site (outside the card, on the navy canvas) --------- */
body.login #nav {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}
body.login #nav a {
  color: var(--fom-gold-soft) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
body.login #nav a:hover { color: #fff !important; text-decoration: underline !important; }
body.login #nav a.wp-login-lost-password { color: rgba(255, 255, 255, .8) !important; }
body.login #backtoblog {
  margin: 12px 0 0 !important;
  text-align: center !important;
}
body.login #backtoblog a {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
body.login #backtoblog a:hover { color: var(--fom-gold-soft) !important; }

/* --- messages ----------------------------------------------------------- */
body.login #login_error,
body.login .message,
body.login .notice {
  margin: 0 0 16px !important;
  padding: 12px 15px !important;
  border: 0 !important;
  border-left: 3px solid var(--fom-gold) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--fom-ink) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(1, 8, 40, .3) !important;
}
body.login .message p,
body.login .notice p { margin: 0 !important; }
body.login .message a { color: var(--fom-navy) !important; }
body.login .message.error,
body.login .notice-error { border-left-color: #c0392b !important; }
body.login .message.success,
body.login .notice-success { border-left-color: #1c7a4a !important; }
body.login .notice-info.message.register {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--fom-gold-soft) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

/* --- password strength meter -------------------------------------------- */
body.login .indicator {
  height: 4px !important;
  border-radius: 3px !important;
  background: var(--fom-rule) !important;
}
body.login #pass-strength-text {
  font-size: 12px !important;
  color: var(--fom-grey) !important;
}

/* ---------------------------------------------------------------------------
   3. FRONT-END LOGIN / REGISTER OVERLAYS (mobile drawer / popup)
        The parent theme paints these panels with white text and white inputs
        on the white drawer, so the form reads as blank.  Re-colour them with
        the FOM palette.  The selectors are scoped to the two hosts that carry
        the form (#td-mobile-nav and the .mfp-content popup) because the theme
        styles them with id-level specificity.
   ------------------------------------------------------------------------- */
#td-mobile-nav .td-login-animation,
.mfp-content .td-login-animation {
  font-family: var(--fom-sans) !important;
}
#td-mobile-nav .td-login-title,
.mfp-content .td-login-title {
  font-family: var(--fom-serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--fom-navy) !important;
  letter-spacing: .01em !important;
}
#td-mobile-nav .td-login-form-wrap,
.mfp-content .td-login-form-wrap {
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 26px 24px 24px !important;
  background: var(--fom-white) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(1, 8, 40, .3) !important;
  color: var(--fom-ink) !important;
}
#td-mobile-nav .td-login-panel-title,
.mfp-content .td-login-panel-title {
  padding: 0 0 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--fom-rule) !important;
  font-family: var(--fom-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--fom-navy) !important;
  text-align: left !important;
}
#td-mobile-nav .td-login-panel-title span,
.mfp-content .td-login-panel-title span {
  display: block !important;
  margin-bottom: 3px !important;
  font-family: var(--fom-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--fom-gold) !important;
}
#td-mobile-nav .td-login-inputs,
.mfp-content .td-login-inputs { margin-bottom: 14px !important; }
#td-mobile-nav .td-login-input,
.mfp-content .td-login-input {
  width: 100% !important;
  height: 46px !important;
  padding: 14px 10px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(23, 19, 28, .25) !important;
  border-radius: 0 !important;
  color: var(--fom-ink) !important;
  font-family: var(--fom-sans) !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}
#td-mobile-nav .td-login-input:focus,
.mfp-content .td-login-input:focus {
  outline: none !important;
  border-bottom-color: var(--fom-gold) !important;
}
#td-mobile-nav .td-login-inputs label,
.mfp-content .td-login-inputs label {
  color: var(--fom-grey) !important;
  font-family: var(--fom-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
#td-mobile-nav .td-login-button,
.mfp-content .td-login-button {
  display: block !important;
  width: 100% !important;
  height: 47px !important;
  margin-top: 6px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--fom-navy) !important;
  color: #fff !important;
  font-family: var(--fom-sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 47px !important;
  text-align: center !important;
  cursor: pointer;
  opacity: 1 !important;
  transition: background .18s ease;
}
#td-mobile-nav .td-login-button:hover,
#td-mobile-nav .td-login-button:focus,
.mfp-content .td-login-button:hover,
.mfp-content .td-login-button:focus {
  background: var(--fom-gold) !important;
  color: #fff !important;
}
#td-mobile-nav .td-login-info-text,
.mfp-content .td-login-info-text {
  margin-top: 12px !important;
  font-family: var(--fom-sans) !important;
  font-size: 13px !important;
  color: var(--fom-ink-soft) !important;
}
#td-mobile-nav .td-login-info-text a,
#td-mobile-nav .td-login-register-link a,
.mfp-content .td-login-info-text a,
.mfp-content .td-login-register-link a {
  color: var(--fom-gold) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#td-mobile-nav .td-login-info-text a:hover,
#td-mobile-nav .td-login-register-link a:hover,
.mfp-content .td-login-info-text a:hover,
.mfp-content .td-login-register-link a:hover { color: var(--fom-navy) !important; }
#td-mobile-nav .td-login-register-link,
.mfp-content .td-login-register-link {
  margin-top: 10px !important;
  font-family: var(--fom-sans) !important;
  font-size: 13.5px !important;
}
#td-mobile-nav .td_display_err,
.mfp-content .td_display_err {
  margin-bottom: 12px !important;
  font-size: 13px !important;
  color: #c0392b !important;
}
#td-mobile-nav .td-mobile-close span,
.mfp-content .td-mobile-close span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(1, 23, 94, .25) !important;
  border-radius: 50% !important;
  color: var(--fom-navy) !important;
}

/* ---------------------------------------------------------------------------
   4. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 479px) {
  body.login #login { padding: 3vh 14px 32px !important; }
  body.login #loginform,
  body.login #registerform,
  body.login #lostpasswordform { padding: 24px 20px 20px !important; }
  .fom-login-brand { margin: 3vh auto 14px; padding: 16px 16px 14px; }
  .fom-login-brand-logo { height: 42px; }
  .fom-login-brand-name { font-size: 17px; letter-spacing: .14em; }
  .fom-login-brand-title { font-size: 17px; }
  .td-login-animation .td-login-form-wrap { padding: 22px 18px 20px; }
}