/* === Beslock Login Page — centered form + clean password field === */

/* Center the login container */
body.login {
  background: #1F4A3C;
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 0 !important;
}

/* Make #login the positioning context for the logo */
body.login #login {
  position: relative;
  margin: 0 !important;
}

/* Logo sits just above the form but the FORM is centered */
body.login #login h1 {
  position: absolute;
  bottom: calc(100% + 24px);  /* gap between logo and form */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* Logo image (invert) */
.login h1 a {
  background-image: url('images/beslock_login_logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 320px;
  height: 84px;
  filter: brightness(0) invert(1);
}

/* Login box */
.login form {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 26px 28px 24px;
}

/* Inputs (normalize height to avoid tall caret) */
.login form .input,
.login form input[type="text"],
.login form input[type="password"] {
  border-radius: 6px;
  border: 1px solid #d1d1d1;
  padding: 12px 42px 12px 14px;
  line-height: 1.35;
  height: auto;
  box-sizing: border-box;
}

/* Password eye button centered vertically */
.login .wp-pwd { position: relative; }
.login .wp-pwd .button.wp-hide-pw {
  position: absolute !important;
  right: 10px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Primary button */
.wp-core-ui .button-primary {
  background-color: #1F4A3C;
  border-color: #1F4A3C;
  text-shadow: none;
  box-shadow: none;
}
.wp-core-ui .button-primary:hover {
  background-color: #163a2e;
  border-color: #163a2e;
}

/* Links on dark bg */
.login #nav a, .login #backtoblog a { color: #ffffffcc; }
.login #nav a:hover, .login #backtoblog a:hover { color: #ffffff; }

/* No shadow on logo wrapper */
.login h1 { box-shadow: none; }
/* --- Fix: logo positioned relative to the form, tight gap --- */
body.login #login { 
  position: relative !important; 
  margin: 0 !important;
}

/* Place the logo just above the form (relative to #login’s top edge) */
body.login #login h1 {
  position: absolute !important;
  top: 0;                          /* anchor to the form’s top */
  left: 50%;
  transform: translate(-50%, calc(-100% - 20px));  /* logo height + 20px gap */
  margin: 0 !important;
  z-index: 2;
}

/* Ensure the form itself has no extra top margin so centering uses the form box */
body.login #login form { 
  margin-top: 0 !important; 
}

/* Kill any accidental border/outline around the logo */
.login h1 a {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ===== Mobile tweaks (<= 540px) ===== */
@media (max-width: 540px) {

  /* Safe spacing on iOS + keep everything centered */
  body.login {
    padding: max(env(safe-area-inset-top, 0px), 16px) 16px 24px !important;
    height: auto;            /* let content define height when keyboard opens */
    min-height: 100vh;       /* still fills screen */
    display: grid;
    place-items: center;
  }

  /* Form container width on mobile */
  body.login #login {
    width: 100% !important;
    max-width: 360px;        /* choose 340–380px if you want different */
    margin: 0 auto !important;
  }

  /* Put the logo back in normal flow above the form */
  body.login #login h1 {
    position: static !important;
    transform: none !important;
    margin: 0 0 14px !important;   /* gap above the form */
    text-align: center;
  }

  /* Smaller logo */
  .login h1 a {
    width: 180px;
    height: 48px;
    filter: brightness(0) invert(1);
  }

  /* Compact form styling */
  .login form {
    padding: 16px 14px 14px;
    border-radius: 10px;
  }

  /* Smaller inputs (keep 16px font to prevent iOS zoom) */
  .login form .input,
  .login form input[type="text"],
  .login form input[type="password"] {
    font-size: 16px;                 /* prevents iOS zoom */
    padding: 10px 38px 10px 12px;    /* slimmer, leaves room for the eye */
    line-height: 1.3;
  }

/* ✅ Eye icon perfectly centered vertically *//* === Fix the eye icon vertical offset from WP core === */
.login .wp-pwd .button.wp-hide-pw .dashicons,
.login .wp-pwd .button.wp-cancel-pw .dashicons,
.login .wp-pwd .wp-hide-pw > .dashicons,
.login .wp-pwd .wp-cancel-pw > .dashicons {
  position: static !important;    /* drop relative offset */
  bottom: 0.25rem !important;  /* kill WP's top: .25rem / 3px */
  top:0 !important;
  line-height: 1 !important;
  width: 1em !important;          /* let flex centering do the work */
  height: 1em !important;
  font-size: 18px;                /* adjust if you want smaller/larger */
}

/* Keep the button itself perfectly centered (works desktop + mobile) */
.login .wp-pwd { position: relative; }
.login .wp-pwd .button.wp-hide-pw {
  position: absolute !important;
  right: 10px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


  /* Smaller primary button */
  .wp-core-ui .button-primary {
    padding: 10px 14px;
    font-size: 16px;
  }
}

/* ===== Desktop tightening (applies above mobile breakpoint) ===== */

/* Keep the form column narrow on desktop as well */
body.login #login {
  width: 100% !important;
  max-width: 420px;          /* was full width; now a compact column */
  margin: 0 auto !important; /* center the column */
}

/* More compact form box (to match mobile feel) */
.login form {
  padding: 18px 16px 16px;   /* smaller than the original desktop padding */
  border-radius: 10px;
}

/* Shorter inputs with consistent 16px font (prevents zoom + looks cleaner) */
.login form .input,
.login form input[type="text"],
.login form input[type="password"] {
  font-size: 16px;                 /* matches mobile; keeps caret tidy */
  padding: 10px 38px 10px 12px;    /* slimmer vertical padding */
  line-height: 1.3;
  height: auto;
  box-sizing: border-box;
}

/* Slightly smaller logo for the narrower column (optional) */
@media (min-width: 541px) {
  .login h1 a {
    width: 240px;
    height: 64px;
  }
}