/**
 * Auth pages – shared design for wp-login.php and theme login/forgot/reset pages.
 * GOV.UK-inspired, matches design-system.css tokens.
 */

/* ========== WordPress wp-login.php (body.login) ========== */
body.login {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  background: #d4e5f7 !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.login div#login {
  width: 100%;
  max-width: 28rem;
  margin: 0;
  padding: 0;
}

body.login h1 a {
  background-size: contain !important;
  background-position: center !important;
  width: 100% !important;
  height: 60px !important;
  margin-bottom: 1.5rem !important;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
  background: #fff !important;
  border: 2px solid #b1b4b6 !important;
  border-radius: 0.75rem !important;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  padding: 2rem !important;
  margin: 0 0 1.5rem !important;
}

body.login #loginform label,
body.login #lostpasswordform label {
  color: #0b0c0c !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

body.login #loginform .input,
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #lostpasswordform input[type="text"] {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid #b1b4b6 !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  margin: 0.25rem 0 1rem !important;
  box-sizing: border-box !important;
}

body.login #loginform .input:focus,
body.login #loginform input:focus,
body.login #lostpasswordform input:focus {
  border-color: var(--color-gov-primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px #ffdd00 !important;
}

body.login #loginform .button-primary,
body.login #lostpasswordform .button-primary,
body.login .button.wp-generate-pw {
  width: 100% !important;
  background-color: #1d70b8 !important;
  background: var(--color-gov-primary, #1d70b8) !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  color: #ffffff !important;
  min-height: 3rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  padding: 0.75rem 1.5rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.2s ease !important;
}

body.login #loginform .button-primary:hover,
body.login #lostpasswordform .button-primary:hover {
  background-color: #003078 !important;
  background: var(--color-gov-primary-dark, #003078) !important;
}

body.login #loginform .button-primary:focus,
body.login #lostpasswordform .button-primary:focus {
  outline: 3px solid #ffdd00 !important;
  outline-offset: 2px !important;
}

body.login #nav a,
body.login #backtoblog a {
  color: var(--color-gov-primary) !important;
  font-weight: 500 !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: var(--color-gov-primary-dark) !important;
}

body.login .message,
body.login .success {
  border-left: 4px solid #00703c !important;
  background: #cce2d8 !important;
  color: #0b0c0c !important;
  padding: 1rem !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  margin-bottom: 1rem !important;
}

body.login #login_error {
  border-left: 4px solid #d4351c !important;
  background: #f8d7da !important;
  color: #0b0c0c !important;
  padding: 1rem !important;
  border-radius: 0 0.5rem 0.5rem 0 !important;
  margin-bottom: 1rem !important;
}

body.login #backtoblog {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #e5e7eb !important;
}

body.login .login-footer-links {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  color: #505a5f;
}

body.login .login-footer-links a {
  color: var(--color-gov-primary);
  text-decoration: none;
}

body.login .login-footer-links a:hover {
  color: var(--color-gov-primary-dark);
  text-decoration: underline;
}

/* ========== Theme auth pages (optional layout tweaks) ========== */
body.ds-auth-page .site-main {
  min-height: calc(100vh - 200px);
}

body.ds-auth-page .ds-auth-card {
  background: #fff;
  border: 2px solid #b1b4b6;
  border-radius: 0.75rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Auth pages should not show breadcrumb trail from shared header layout. */
body.ds-auth-page nav[aria-label="Breadcrumb"] {
  display: none !important;
}

/* Login + Forgot password: prevent left icon overlapping username/password text */
#public-login-form .relative input[type="text"],
#public-login-form .relative input[type="password"],
#lostpasswordform .relative input[type="text"],
.ds-auth-card .relative input.ds-auth-input-with-icon,
.ds-auth-card .relative input[type="text"] {
  padding-left: 2.75rem !important;
  box-sizing: border-box;
}

#public-login-form .relative input#user_pass {
  padding-right: 2.75rem !important;
}

/* Password visibility toggle icons */
#public-login-form .ds-eye-open.hidden,
#public-login-form .ds-eye-closed.hidden {
  display: none !important;
}

/* Ensure submit button contrast even when utility color classes are unavailable. */
body.login #public-login-form #wp-submit,
body.ds-auth-page #public-login-form #wp-submit {
  background-color: #1d70b8 !important;
  background: var(--color-gov-primary, #1d70b8) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

body.login #public-login-form #wp-submit:hover,
body.ds-auth-page #public-login-form #wp-submit:hover {
  background-color: #003078 !important;
  background: var(--color-gov-primary-dark, #003078) !important;
}