/* === AIMS Login Page (cleaned) === */

/* Background image for /wp-login.php */
body.login {
  /* image path is relative to the CSS (root of theme) */
  background: #0f1115 url("images/login-bg.jpg") center center / cover no-repeat fixed;
}

/* optional: dark overlay for readability */
body.login:before{
  content:"";
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  pointer-events:none;
}


/* Page background + full-page centering (your login page ID) */
body.page-id-10,
body.page-id-10 .wp-site-blocks {
  background-color: rgb(227, 221, 219);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

body.page-id-10 .wp-site-blocks > header,
body.page-id-10 .wp-block-template-part {
  display: none !important;
}

/* Center the MAIN content area */
body.page-id-10 main,
body.page-id-10 .wp-block-post-content,
body.page-id-10 .entry-content,
body.page-id-10 .site-main {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* White login box */
.aims-login-wrapper {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* AIMS logo inside the box (twice as big) */
.aims-login-logo {
  text-align: center;
  margin-bottom: 20px;
}
.aims-login-logo img {
  max-width: 300px;
  height: auto;
}

/* Form stack */
#loginform-aims {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left; /* labels left for readability */
}
#loginform-aims p { margin: 0; }


#loginform-aims input[type="text"],
#loginform-aims input[type="password"] {
  width: 100%;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;

  /* fix: stop tiny/different initial font (esp. password + autofill) */
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  -webkit-text-size-adjust: 100%;
}

#loginform-aims input:-webkit-autofill,
#loginform-aims input:-webkit-autofill:hover,
#loginform-aims input:-webkit-autofill:focus,
#loginform-aims input:-webkit-autofill:active {
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: #111 !important;
  transition: background-color 99999s ease-out 0s;
}


/* Submit button — centered label + your blue */
#loginform-aims input[type="submit"] {
  width: 100%;
  padding: 0.7rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #BFEFFF;   /* requested color */
  color: #00334d;
  text-align: center;     /* keeps text centered */
  font-weight: 300;
  font-size: 22px;
}
#loginform-aims input[type="submit"]:hover {
  filter: brightness(0.95);
}

/* Lock font size so it doesn't jump on focus (front-end form) */
#loginform-aims input[type="text"],
#loginform-aims input[type="password"]{
  font-size: 16px;
  line-height: 1.2;
}

#loginform-aims input[type="text"]:focus,
#loginform-aims input[type="password"]:focus{
  font-size: 16px;
  line-height: 1.2;
}


/* Remember Me row (works for both possible WP class names) */
#loginform-aims p.forgetmenot,
#loginform-aims p.login-remember {
  display: flex;
  justify-content: center;   /* center the pair under fields */
}
#loginform-aims p.forgetmenot label,
#loginform-aims p.login-remember label {
  display: flex;
  align-items: center;        /* perfect vertical centering */
  gap: 10px;
  cursor: pointer;
  font-weight: 350;
  font-size: 18px;
}

/* === Custom Checkbox for Login Page === */
#loginform-aims #rememberme {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #666;
  border-radius: 4px;
  background: #fff;
  position: relative;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* Hover effect */
#loginform-aims #rememberme:hover {
  border-color: #3b82f6;
}

/* Checked state */
#loginform-aims #rememberme:checked {
  background-color: #0073aa;
  border-color: #0073aa;
}

/* Draw custom tick */
#loginform-aims #rememberme:checked::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg); /* perfectly center tick */
}

/* Focus outline */
#loginform-aims #rememberme:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,115,170,.25);
}

/* Lost password link */
.login-links {
  margin-top: 10px;
  text-align: center;
}
.login-links a {
  font-size: 13px;
  color: #444;
  text-decoration: none;
}
.login-links a:hover {
  text-decoration: underline;
}

/* (Optional) Center AIMS header logo on other pages */
.header-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.header-right img.aims-logo {
  max-height: 60px;
  height: auto;
  width: auto;
}

/* ===== Hard-center the login card on page ID 10 (bulletproof) ===== */

/* Full-height canvas + remove header */
body.page-id-10 { background:#e7e0de; margin:0 !important; }
body.page-id-10 .wp-site-blocks > header,
body.page-id-10 .wp-block-template-part { display:none !important; }

/* Make the page wrapper a vertical flex container */
body.page-id-10 .wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;          /* header (hidden) + main stack */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Big wrapper card (logo + form + links) */
body.login #login{
  background: rgba(255,255,255,0.80);
  padding: 26px 26px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.45);
}

/* Make the inner form stop looking like a second box */
body.login #loginform{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 16px;
}

body.login #nav,
body.login #backtoblog{
  text-align: center;
  margin: 14px 0 0;
  padding: 0;
}

/* Hard-center the whole login block on any screen */
body.login{
  min-height: 100vh;
}

body.login #login{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: min(350px, calc(100vw - 40px)); /* responsive width */
  box-sizing: border-box;
}

/* Make sure the logo doesn’t push it weirdly */
body.login h1{
  margin: 0 0 14px !important;
}

/* Stop input font changing size on focus */
body.login #login form .input,
body.login #login form input[type="text"],
body.login #login form input[type="password"]{
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body.login #login form .input:focus,
body.login #login form input[type="text"]:focus,
body.login #login form input[type="password"]:focus{
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* FORCE the initial (not-focused) font size on wp-login.php fields */
body.login #login form#loginform input#user_login,
body.login #login form#loginform input#user_pass{
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* === Fix Edge/Chrome autofill making login text look tiny / different === */
body.login #loginform input:-webkit-autofill,
body.login #loginform input:-webkit-autofill:hover,
body.login #loginform input:-webkit-autofill:focus,
body.login #loginform input:-webkit-autofill:active,
body.login #loginform input:autofill,
body.login #loginform input:autofill:hover,
body.login #loginform input:autofill:focus,
body.login #loginform input:autofill:active,
body.login #loginform input:-internal-autofill-selected {
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;

  /* prevents that weird autofill “style swap” look */
  transition: background-color 99999s ease-out 0s;
}

/* === WP login: put Remember Me ABOVE Log In (force order) === */
body.login form#loginform{
  display: flex !important;
  flex-direction: column !important;
}

body.login form#loginform > p{
  width: 100% !important;
}

body.login form#loginform p.forgetmenot{
  order: 90 !important;
  float: none !important;
  margin: 10px 0 8px !important;
}

body.login form#loginform p.submit{
  order: 100 !important;
  float: none !important;
  margin: 0 !important;
  text-align: left !important;
}

body.login form#loginform p.submit #wp-submit{
  width: 100% !important;
  display: block !important;
}

/* Hide "Go to AIMS" link on wp-login */
body.login #backtoblog{
  display: none !important;
}