/**
 * CAS skin for the native WordPress password reset screens.
 *
 * Scope is intentionally limited to body.custausu-native-reset-skin, which is added
 * only for Core actions `rp` and `resetpass`, `lostpassword` when
 * WordPress reports an invalid or expired reset key, and the Core
 * `checkemail=confirm` handoff after requesting a reset email.
 */

body.login.custausu-native-reset-skin {
  --custausu-auth-page-bg: #ffffff;
  --custausu-auth-box-bg: #f2f2f2;
  --custausu-auth-box-border: #222222;
  --custausu-auth-title-color: #222222;
  --custausu-auth-text-color: #444444;
  --custausu-auth-link-color: #222222;
  --custausu-auth-button-bg: #222222;
  --custausu-auth-button-text: #ffffff;
  --custausu-auth-input-border: #555555;
  --custausu-auth-title-size: 36px;
  --custausu-auth-label-size: 18px;
  --custausu-auth-body-size: 16px;
  --custausu-auth-button-size: 16px;

  display: flex;
  min-height: 100vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--custausu-auth-page-bg);
  color: var(--custausu-auth-text-color);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--custausu-auth-body-size);
}

body.login.custausu-native-reset-skin * {
  box-sizing: border-box;
}

body.login.custausu-native-reset-skin #login {
  width: min(460px, 100%);
  padding: 0;
  margin: 0 auto;
}

body.login.custausu-native-reset-skin #login h1 {
  margin: 0 0 22px;
}

body.login.custausu-native-reset-skin #login h1 a {
  width: 92px;
  height: 100px;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

body.login.custausu-native-reset-skin .custausu-native-reset-title {
  margin: 0 0 18px;
  color: var(--custausu-auth-title-color);
  font-size: var(--custausu-auth-title-size);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
}

body.login.custausu-native-reset-skin #loginform,
body.login.custausu-native-reset-skin #lostpasswordform,
body.login.custausu-native-reset-skin #resetpassform,
body.login.custausu-native-reset-skin #login .message,
body.login.custausu-native-reset-skin #login #login_error,
body.login.custausu-native-reset-skin #login .success {
  border: 1px solid var(--custausu-auth-box-border);
  border-radius: 22px;
  background: var(--custausu-auth-box-bg);
  color: var(--custausu-auth-text-color);
  box-shadow: 0 16px 36px rgb(0 0 0 / 8%);
}

body.login.custausu-native-reset-skin #loginform,
body.login.custausu-native-reset-skin #lostpasswordform,
body.login.custausu-native-reset-skin #resetpassform {
  padding: 30px;
}

body.login.custausu-native-reset-skin #login .message,
body.login.custausu-native-reset-skin #login #login_error,
body.login.custausu-native-reset-skin #login .success {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-left-width: 4px;
  font-size: var(--custausu-auth-body-size);
  line-height: 1.55;
}

body.login.custausu-native-reset-skin #login #login_error {
  border-left-color: #d63638;
}

body.login.custausu-native-reset-skin #login .message,
body.login.custausu-native-reset-skin #login .success {
  border-left-color: var(--custausu-auth-button-bg);
}

body.login.custausu-native-reset-skin #login label,
body.login.custausu-native-reset-skin #login .user-pass1-wrap > p:first-child {
  color: var(--custausu-auth-text-color);
  font-size: var(--custausu-auth-label-size);
  font-weight: 600;
}

body.login.custausu-native-reset-skin #login input[type="text"],
body.login.custausu-native-reset-skin #login input[type="password"] {
  min-height: 52px;
  border: 2px solid var(--custausu-auth-input-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--custausu-auth-text-color);
  font-size: var(--custausu-auth-body-size);
  box-shadow: none;
}

body.login.custausu-native-reset-skin #login input[type="text"]:focus,
body.login.custausu-native-reset-skin #login input[type="password"]:focus,
body.login.custausu-native-reset-skin #login select:focus,
body.login.custausu-native-reset-skin #login button:focus,
body.login.custausu-native-reset-skin #login a:focus {
  border-color: var(--custausu-auth-button-bg);
  box-shadow: none;
  outline: 2px solid var(--custausu-auth-button-bg);
  outline-offset: 2px;
}

/*
 * The login logo is a clickable anchor. Remove the Core/browser border and
 * mouse-focus decoration without suppressing an accessible keyboard cue.
 */
body.login.custausu-native-reset-skin #login h1.wp-login-logo a,
body.login.custausu-native-reset-skin #login h1.wp-login-logo a:hover,
body.login.custausu-native-reset-skin #login h1.wp-login-logo a:active,
body.login.custausu-native-reset-skin #login h1.wp-login-logo a:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

body.login.custausu-native-reset-skin #login h1.wp-login-logo a:focus-visible {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  outline: 2px solid var(--custausu-auth-link-color);
  outline-offset: 4px;
}

body.login.custausu-native-reset-skin #login .button-primary,
body.login.custausu-native-reset-skin #login .button.wp-generate-pw,
body.login.custausu-native-reset-skin .language-switcher .button {
  min-height: 48px;
  border-color: var(--custausu-auth-button-bg);
  border-radius: 12px;
  background: var(--custausu-auth-button-bg);
  color: var(--custausu-auth-button-text);
  font-size: var(--custausu-auth-button-size);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
}

body.login.custausu-native-reset-skin #login .button-primary:hover,
body.login.custausu-native-reset-skin #login .button-primary:focus,
body.login.custausu-native-reset-skin #login .button.wp-generate-pw:hover,
body.login.custausu-native-reset-skin #login .button.wp-generate-pw:focus,
body.login.custausu-native-reset-skin .language-switcher .button:hover,
body.login.custausu-native-reset-skin .language-switcher .button:focus {
  border-color: var(--custausu-auth-button-bg);
  background: var(--custausu-auth-button-bg);
  color: var(--custausu-auth-button-text);
  filter: brightness(.94);
}

body.login.custausu-native-reset-skin #login .submit .button-primary {
  width: 100%;
  float: none;
}

body.login.custausu-native-reset-skin #login .wp-pwd,
body.login.custausu-native-reset-skin #login .user-pass1-wrap,
body.login.custausu-native-reset-skin #login .pw-weak,
body.login.custausu-native-reset-skin #login .description,
body.login.custausu-native-reset-skin #login .indicator-hint {
  color: var(--custausu-auth-text-color);
  font-size: var(--custausu-auth-body-size);
}

body.login.custausu-native-reset-skin #login a,
body.login.custausu-native-reset-skin #nav a,
body.login.custausu-native-reset-skin #backtoblog a,
body.login.custausu-native-reset-skin .privacy-policy-page-link a {
  color: var(--custausu-auth-link-color);
}

body.login.custausu-native-reset-skin #nav,
body.login.custausu-native-reset-skin #backtoblog,
body.login.custausu-native-reset-skin .privacy-policy-page-link {
  margin: 16px 0 0;
  padding: 0;
  color: var(--custausu-auth-text-color);
  font-size: var(--custausu-auth-body-size);
  text-align: center;
}

body.login.custausu-native-reset-skin .language-switcher {
  width: min(460px, 100%);
  margin: 18px auto 0;
  padding: 0;
  text-align: center;
}

body.login.custausu-native-reset-skin .language-switcher form {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

body.login.custausu-native-reset-skin .language-switcher select {
  min-height: 48px;
  max-width: 100%;
  border: 2px solid var(--custausu-auth-input-border);
  border-radius: 12px;
  color: var(--custausu-auth-text-color);
  font-size: var(--custausu-auth-body-size);
}

body.login.custausu-native-reset-skin .dashicons-visibility,
body.login.custausu-native-reset-skin .dashicons-hidden {
  color: var(--custausu-auth-link-color);
}

@media (max-width: 520px) {
  body.login.custausu-native-reset-skin {
    justify-content: flex-start;
    padding: 18px 14px 28px;
  }

  body.login.custausu-native-reset-skin #login {
    width: 100%;
  }

  body.login.custausu-native-reset-skin #loginform,
  body.login.custausu-native-reset-skin #lostpasswordform,
  body.login.custausu-native-reset-skin #resetpassform {
    padding: 24px 20px;
  }

  body.login.custausu-native-reset-skin .language-switcher form {
    flex-wrap: wrap;
  }
}
