/* Destiny Rescue - Learning Portal login screen.
   Brand Book 2022: Montserrat; orange #f37121 (RGB 243/113/33); black #212222;
   logo horizontal, min 245px on screen, generous clear space; "uncluttered". */

:root {
  --dr-orange:        #f37121;
  --dr-orange-hover:  #d9611a;
  --dr-orange-tint:   #fcd9bc;   /* 25% tint, from the web theme */
  --dr-black:         #212222;
  --dr-ink-2:         #4d4f50;
  --dr-ink-3:         #7a7d7f;
  --dr-line:          #d9dadb;
  --dr-bg:            #f4f2ee;   /* warm off-white so the orange reads warm, not corporate blue-grey */
  --dr-card:          #ffffff;
  --dr-error:         #ba001a;   /* brand secondary red (CMYK 27/100/90/0) */
  --dr-error-bg:      #fdf1f2;
  --dr-ok:            #5db855;
  --dr-radius:        14px;
  --dr-shadow:        0 10px 30px rgba(33, 34, 34, .08), 0 1px 3px rgba(33, 34, 34, .06);
}

html, body.login.dr-login {
  background: var(--dr-bg);
  min-height: 100%;
}

body.login.dr-login {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--dr-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 16px 40px;
}

/* wp-login's #login has a fixed 320px width and 8%/9% top margins; take over the layout */
body.login.dr-login #login {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
}

/* --- logo ---------------------------------------------------------------- */
body.login.dr-login h1 a {
  /* background-image is set inline by dr-login.php */
  display: block;
  width: 300px;                 /* brand minimum is 245px across the full horizontal lockup */
  max-width: 100%;
  height: 60px;                 /* 2059 x 392 viewBox -> 5.25 : 1 */
  margin: 0 auto 28px;          /* clear space: the brand book says let it breathe */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  outline: none;
}
body.login.dr-login h1 a:focus-visible {
  box-shadow: 0 0 0 3px var(--dr-orange-tint);
  border-radius: 6px;
}

/* --- messages ------------------------------------------------------------ */
body.login.dr-login .message,
body.login.dr-login .success,
body.login.dr-login #login_error,
body.login.dr-login .notice {
  border: 0;
  border-left: 4px solid var(--dr-orange);
  border-radius: 10px;
  box-shadow: none;
  background: var(--dr-card);
  color: var(--dr-ink-2);
  font-size: 15px;
  line-height: 1.55;
  padding: 14px 16px;
  margin: 0 0 16px;
}
body.login.dr-login .message:empty { display: none; }
body.login.dr-login .dr-welcome {
  border-left: 0;
  background: transparent;
  text-align: center;
  color: var(--dr-ink-2);
  padding: 0 8px;
  margin-bottom: 20px;
}
body.login.dr-login #login_error {
  border-left-color: var(--dr-error);
  background: var(--dr-error-bg);
  color: var(--dr-black);
}
body.login.dr-login #login_error a { color: var(--dr-error); font-weight: 600; }
body.login.dr-login .success { border-left-color: var(--dr-ok); }

/* --- the card ----------------------------------------------------------- */
body.login.dr-login form {
  background: var(--dr-card);
  border: 0;
  border-radius: var(--dr-radius);
  box-shadow: var(--dr-shadow);
  padding: 28px 28px 24px;
  margin-top: 0;
}

body.login.dr-login label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dr-black);
  margin-bottom: 6px;
  display: block;
}

body.login.dr-login input[type="text"],
body.login.dr-login input[type="email"],
body.login.dr-login input[type="password"],
body.login.dr-login .wp-pwd input {
  font-family: inherit;
  font-size: 16px;
  color: var(--dr-black);
  background: #fff;
  border: 1.5px solid var(--dr-line);
  border-radius: 10px;
  box-shadow: none;
  padding: 11px 14px;
  min-height: 48px;
  margin: 0 0 18px;
  transition: border-color .15s, box-shadow .15s;
}
body.login.dr-login .wp-pwd input { margin-bottom: 0; }
body.login.dr-login .user-pass-wrap { margin-bottom: 18px; }
body.login.dr-login input[type="text"]:focus,
body.login.dr-login input[type="email"]:focus,
body.login.dr-login input[type="password"]:focus {
  border-color: var(--dr-orange);
  box-shadow: 0 0 0 3px var(--dr-orange-tint);
  outline: none;
}

/* show/hide password toggle */
body.login.dr-login .wp-pwd .button.wp-hide-pw {
  color: var(--dr-ink-3);
  min-height: 48px;
  right: 2px;
}
body.login.dr-login .wp-pwd .button.wp-hide-pw:hover,
body.login.dr-login .wp-pwd .button.wp-hide-pw:focus { color: var(--dr-orange); box-shadow: none; }

/* remember me + submit: stack them so the button can be full width */
body.login.dr-login .forgetmenot {
  float: none;
  margin: 2px 0 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dr-ink-2);
}
body.login.dr-login .forgetmenot label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; }
body.login.dr-login input[type="checkbox"] {
  width: 20px; height: 20px;
  border: 1.5px solid var(--dr-line);
  border-radius: 5px;
  margin: 0;
  box-shadow: none;
}
body.login.dr-login input[type="checkbox"]:checked { background: var(--dr-orange); border-color: var(--dr-orange); }
body.login.dr-login input[type="checkbox"]:checked::before {
  content: ""; display: block; width: 20px; height: 20px; margin: -1.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.login.dr-login input[type="checkbox"]:focus { box-shadow: 0 0 0 3px var(--dr-orange-tint); border-color: var(--dr-orange); }

body.login.dr-login .submit { float: none; }
body.login.dr-login .button-primary,
body.login.dr-login .wp-core-ui .button-primary {
  font-family: inherit;
  display: block;
  width: 100%;
  float: none;
  min-height: 50px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: var(--dr-orange);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
body.login.dr-login .button-primary:hover,
body.login.dr-login .button-primary:focus { background: var(--dr-orange-hover); color: #fff; }
body.login.dr-login .button-primary:focus { box-shadow: 0 0 0 3px var(--dr-orange-tint); outline: none; }
body.login.dr-login .button-primary:active { transform: translateY(1px); }
body.login.dr-login .button-primary[disabled],
body.login.dr-login .button-primary.disabled { background: var(--dr-orange-tint); color: #fff; }

/* Cloudflare Turnstile widget (simple-cloudflare-turnstile) sits inside the form */
body.login.dr-login .cf-turnstile { margin: 0 0 16px; display: flex; justify-content: center; }

/* --- links under the card ------------------------------------------------ */
body.login.dr-login #nav,
body.login.dr-login #backtoblog {
  text-align: center;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}
body.login.dr-login #nav { margin: 20px 0 0; }
body.login.dr-login #backtoblog { display: none; }         /* replaced by the helpdesk line */
body.login.dr-login #nav a,
body.login.dr-login .dr-help a { color: var(--dr-black); text-decoration: underline; text-decoration-color: var(--dr-orange); text-underline-offset: 3px; }
body.login.dr-login #nav a:hover,
body.login.dr-login .dr-help a:hover { color: var(--dr-orange); }

body.login.dr-login .dr-help {
  text-align: center;
  font-size: 13.5px;
  color: var(--dr-ink-2);
  margin: 28px 0 6px;
}
body.login.dr-login .dr-copy {
  text-align: center;
  font-size: 12px;
  color: var(--dr-ink-3);
  margin: 0;
}
body.login.dr-login .privacy-policy-page-link { display: none; }

/* password-strength meter on the reset screen */
body.login.dr-login #pass-strength-result { border-radius: 8px; font-family: inherit; font-weight: 600; }
body.login.dr-login .pw-weak { font-size: 14px; color: var(--dr-ink-2); }
body.login.dr-login #pass1 { margin-bottom: 8px; }
body.login.dr-login .indicator-hint { font-size: 13px; color: var(--dr-ink-2); }

/* --- small screens ------------------------------------------------------- */
@media (max-width: 480px) {
  body.login.dr-login { padding: 24px 12px 32px; justify-content: flex-start; }
  body.login.dr-login h1 a { width: 260px; height: 52px; margin-bottom: 22px; }
  body.login.dr-login form { padding: 22px 18px 18px; border-radius: 12px; }
}

/* WordPress's interim (re-auth) modal shouldn't get the flex centering */
body.login.dr-login.interim-login { display: block; padding: 0; }