/*
 * wp-login.php as Pickleheart — see includes/site-login.php.
 *
 * Overrides WordPress's own login.css (this loads after it). Every value
 * comes from pickleheart-tokens.css; the phone button copies .pkl-btn's
 * look, since the button's markup belongs to the OpenID Connect plugin.
 */

body.pkl-login {
  background: var(--background-neutral-weak);
  font-family: var(--font-body);
  color: var(--text-neutral-strong);
  min-height: 100vh;
}

.pkl-login #login {
  width: min(420px, calc(100% - 32px));
  padding: 8vh 0 64px;
  display: flex;
  flex-direction: column;
}

/* The card: "Welcome to", the logo, the line and the button, together. */
.pkl-login--phone-first #login {
  background: var(--background-neutral);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  border: 1px solid var(--border-neutral-weak);
  padding: 40px 32px 36px;
  margin-top: 10vh;
}

/* "Welcome to" goes above the logo, which is a sibling before it. */
.pkl-login-title { order: -1; }

/* The logo, in place of WordPress's. */
.pkl-login h1 a {
  background-image: var(--pkl-login-logo);
  background-size: contain;
  background-position: center;
  width: 240px;
  height: 48px;
  margin: 0 auto 20px;
}

.pkl-login-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--text-neutral-strong);
  text-align: center;
  margin: 0 0 14px;
}

.pkl-login-lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-neutral-weak);
  text-align: center;
  margin: 0;
}

/* The phone button: the plugin's link, drawn as .pkl-btn. */
.pkl-login .openid-connect-login-button {
  margin: 28px 0 0 !important;
}
.pkl-login .openid-connect-login-button .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-button);
  box-shadow: var(--elevation-2);
  background: var(--foreground-primary);
  color: var(--text-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--tracking-button);
  line-height: 1.2;
  text-shadow: none;
  white-space: normal;
  transition: transform 130ms ease, filter 130ms ease;
}
.pkl-login .openid-connect-login-button .button:hover,
.pkl-login .openid-connect-login-button .button:focus {
  background: var(--foreground-primary);
  color: var(--text-on-primary);
  filter: brightness(1.1);
}
.pkl-login .openid-connect-login-button .button:active { transform: translateY(1px); filter: brightness(0.94); }
.pkl-login .openid-connect-login-button .button:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
  box-shadow: var(--elevation-2);
}

.pkl-login #nav a,
.pkl-login #backtoblog a,
.pkl-login .privacy-policy-page-link a {
  color: var(--text-neutral-weak);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pkl-login #nav a:hover,
.pkl-login #backtoblog a:hover {
  color: var(--foreground-primary);
}

/* Phone first: no password form, no "Lost your password?", and no
   "Go to Pickleheart" (the logo links home). */
.pkl-login--phone-first #loginform,
.pkl-login--phone-first #nav,
.pkl-login--phone-first #backtoblog {
  display: none;
}

/* The privacy link, spaced off the button. */
.pkl-login--phone-first .privacy-policy-page-link {
  margin-top: 28px;
}

/* WordPress's notices ("You are now logged out", errors) and the form,
   as quiet cards rather than boxed panels. */
.pkl-login .message,
.pkl-login .notice,
.pkl-login #login_error {
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid var(--border-neutral-weak);
  border-left-width: 4px;
  background: var(--background-neutral);
  font-size: 15px;
}

.pkl-login #loginform,
.pkl-login #lostpasswordform,
.pkl-login #registerform,
.pkl-login #resetpassform {
  margin-top: 24px;
  border: 1px solid var(--border-neutral-weak);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: 26px 26px 30px;
}

.pkl-login form .input,
.pkl-login input[type="text"],
.pkl-login input[type="password"],
.pkl-login input[type="email"] {
  border-radius: 10px;
  border-color: var(--border-neutral);
  font-family: var(--font-body);
}
.pkl-login form .input:focus,
.pkl-login input[type="text"]:focus,
.pkl-login input[type="password"]:focus {
  border-color: var(--foreground-primary);
  box-shadow: 0 0 0 1px var(--foreground-primary);
}

.pkl-login .button-primary {
  background: var(--foreground-primary);
  border-color: var(--foreground-primary);
  border-radius: var(--radius-button);
  font-weight: 700;
  padding: 0 18px;
}
.pkl-login .button-primary:hover,
.pkl-login .button-primary:focus {
  background: var(--foreground-primary);
  border-color: var(--foreground-primary);
  filter: brightness(1.1);
}

.pkl-login #nav,
.pkl-login #backtoblog {
  text-align: center;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .pkl-login .openid-connect-login-button .button { transition: none; }
}

/* Staging's email sign-in for test accounts: the quieter, second button. */
.pkl-login .openid-connect-login-button.pkl-login-email {
  margin-top: 12px !important;
}
.pkl-login .openid-connect-login-button.pkl-login-email .button,
.pkl-login .openid-connect-login-button.pkl-login-email .button:hover,
.pkl-login .openid-connect-login-button.pkl-login-email .button:focus {
  background: transparent;
  color: var(--foreground-primary);
  box-shadow: inset 0 0 0 2px var(--foreground-primary);
  font-size: 16px;
}