/* ---------- General page background ---------- */
body.login {
  /* Solid colour or gradient */
  background: #F0F0F0; /* slate-900 */
  /* Or use an image:
  background: url('../assets/login-bg.jpg') center/cover no-repeat fixed;
  */
}

/* Center card styling */
body.login #loginform,
body.login .message,
body.login .success,
body.login #lostpasswordform {
  border: 0;
}

/* Form background + spacing */
body.login #loginform {
  background: #ffffff;
  padding: 24px 24px 16px;
}

/* Optional: make the login area narrower/wider */
body.login #login {
  width: 340px;
}

/* ---------- Logo ---------- */
#login h1 a {
  background-image: url('https://aspirewiltshire.co.uk/wp-content/themes/AspireWiltshire/images/aspire-wiltshire.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin: 0 auto 16px;
}

/* ---------- Inputs ---------- */
body.login .input,
body.login input[type="text"],
body.login input[type="password"] {
  border-radius: 8px;
  border: 1px solid #e5e7eb; /* gray-200 */
  box-shadow: none;
  padding: 10px 12px;
}

body.login .input:focus {
  border-color: #239C3E; /* indigo-500 */
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

/* ---------- Primary button (Log In) ---------- */
.wp-core-ui .button-primary {
  background: #239C3E;
  border-color: #239C3E;
  color: #fff;
  text-shadow: none;
  padding: 8px 14px;
  transition: transform .02s ease-in-out, filter .2s ease;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  background: #188931;
  border-color: #188931;
}

.wp-core-ui .button.button-primary:active {
  transform: translateY(1px);
}

/* ---------- Secondary buttons/links ---------- */
/* "Remember me" and links */
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: #239C3E; /* indigo-200 for dark bg */
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
  color: #239C3E;
}

/* ---------- Error/notice message styling ---------- */
body.login .message,
body.login .notice,
body.login .success {
  border-left: 4px solid #239C3E;
  background: white; /* indigo-50 */
  color: #464646;      /* gray-900 */
}

/* ---------- Make it a bit nicer on small screens ---------- */
@media (max-width: 400px) {
  body.login #login {
    width: auto;
    padding: 0 16px;
  }
  #login h1 a {
    width: 200px;
    height: 64px;
  }
}



/* Hide the "eye" button for password preview */
body.login .wp-pwd .button.wp-hide-pw {
  display: none !important;
}