/* ==========================================================================
   LCQM Admin — Login / Forgot / Reset / Register
   --------------------------------------------------------------------------
   Restyles wp-login.php via WordPress' own markup — no core files replaced.
   Everything resolves from tokens.css (loaded as a dependency), so this sheet
   contains no hard-coded brand values and follows dark/light automatically.

   The logo image URL is injected as --lcqm-login-logo by the PHP feature
   (wp_add_inline_style), keeping this file free of plugin paths.
   ========================================================================== */

body.login {
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--lcqm-primary-soft), transparent 60%),
    var(--lcqm-bg);
  color: var(--lcqm-text);
  font-family: var(--lcqm-font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--lcqm-space-5);
}

/* WordPress wraps everything in #login (width 320 by default). Widen slightly
   and remove the top padding so we can center vertically. */
body.login #login {
  width: 100%;
  max-width: 384px;
  padding: 0;
}

/* --- Brand logo (replaces the WordPress mark) ---------------------------- */
/* The LCQM emblem sits on a white "chip" so the navy/orange badge reads
   cleanly on the dark background (and looks intentional on light too). */
body.login h1 {
  margin: 0 0 var(--lcqm-space-4);
  text-align: center;
}

body.login h1 a {
  display: inline-block;
  width: 92px;
  height: 92px;
  margin: 0;
  background-color: #ffffff;
  background-image: var(--lcqm-login-logo);
  background-size: 70px 70px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--lcqm-radius-xl);
  box-shadow: var(--lcqm-shadow-md), var(--lcqm-shadow-ring);
  text-indent: -9999px;
  overflow: hidden;
  outline-offset: 4px;
}

/* --- Branded intro block (rendered by LoginRenderer) --------------------- */
.lcqm-login-intro {
  text-align: center;
  margin: 0 0 var(--lcqm-space-4);
}

.lcqm-login-intro__title {
  margin: 0 0 var(--lcqm-space-2);
  font-size: var(--lcqm-text-2xl);
  font-weight: var(--lcqm-font-semibold);
  line-height: var(--lcqm-leading-tight);
  letter-spacing: -0.01em;
  color: var(--lcqm-text);
}

.lcqm-login-intro__subtitle {
  margin: 0;
  font-size: var(--lcqm-text-base);
  line-height: var(--lcqm-leading-normal);
  color: var(--lcqm-text-muted);
}

/* --- The form card ------------------------------------------------------- */
body.login form {
  background: var(--lcqm-surface);
  border: 1px solid var(--lcqm-border);
  border-radius: var(--lcqm-radius-lg);
  box-shadow: var(--lcqm-shadow-md), var(--lcqm-shadow-ring);
  padding: var(--lcqm-space-5);
  margin-top: 0;
  overflow: visible;
}

/* Core lays the login form out with floats — .forgetmenot floats left, the
   primary button floats right — and relies on `overflow: hidden` on the form to
   contain them. We opt out of that layout entirely (block rows, full-width
   button), so every float has to be cancelled here; leaving one behind lets it
   escape the card and overlap the rows below it. The clearfix is belt-and-braces
   for anything a login plugin injects with a float still on it. */
body.login form .forgetmenot,
body.login form p.submit,
body.login form .submit {
  float: none;
}

body.login form::after {
  content: "";
  display: table;
  clear: both;
}

/* The gap above the submit button is owned by the button's own top margin, so
   the "Remember Me" row and the submit paragraph carry no extra bottom margin. */
body.login form .forgetmenot {
  margin-bottom: 0;
}

body.login form p.submit {
  margin: 0;
}

/* Labels */
body.login form label {
  color: var(--lcqm-text-muted);
  font-size: var(--lcqm-text-sm);
  font-weight: var(--lcqm-font-medium);
}

/* Text inputs */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  background: var(--lcqm-surface-raised);
  border: 1px solid var(--lcqm-border-strong);
  border-radius: var(--lcqm-radius-md);
  color: var(--lcqm-text);
  font-size: var(--lcqm-text-md);
  padding: 12px 14px;
  margin: 6px 0 var(--lcqm-space-4);
  width: 100%;
  box-shadow: none;
  transition: border-color var(--lcqm-duration) var(--lcqm-ease),
    box-shadow var(--lcqm-duration) var(--lcqm-ease);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
  border-color: var(--lcqm-primary);
  box-shadow: 0 0 0 var(--lcqm-ring-width) var(--lcqm-focus-ring);
  outline: none;
}

body.login input::placeholder {
  color: var(--lcqm-text-subtle);
}

/* Password field wrapper + WP's built-in show/hide button */
body.login .wp-pwd {
  position: relative;
}

body.login .wp-pwd input[type="text"],
body.login .wp-pwd input[type="password"] {
  padding-right: 44px;
}

body.login .wp-pwd .button.wp-hide-pw {
  position: absolute;
  top: 6px;
  right: 4px;
  height: 36px;
  width: 36px;
  color: var(--lcqm-text-subtle);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.login .wp-pwd .button.wp-hide-pw:hover {
  color: var(--lcqm-text);
}

body.login .wp-pwd .button.wp-hide-pw:focus {
  box-shadow: 0 0 0 2px var(--lcqm-focus-ring);
  border-radius: var(--lcqm-radius-sm);
  outline: none;
}

/* Remember me */
body.login .forgetmenot label {
  display: inline-flex;
  align-items: center;
  gap: var(--lcqm-space-2);
  color: var(--lcqm-text-muted);
}

body.login input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--lcqm-border-strong);
  border-radius: var(--lcqm-radius-xs);
  background: var(--lcqm-surface-raised);
  cursor: pointer;
  position: relative;
  transition: background var(--lcqm-duration) var(--lcqm-ease),
    border-color var(--lcqm-duration) var(--lcqm-ease);
}

body.login input[type="checkbox"]:checked {
  background: var(--lcqm-primary);
  border-color: var(--lcqm-primary);
}

body.login input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--lcqm-text-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.login input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--lcqm-focus-ring);
  outline: none;
}

/* --- Primary submit button ----------------------------------------------
   WordPress core floats #wp-submit and sizes it via an ID selector, which
   out-specifies a plain class rule — so we match #wp-submit here to guarantee
   the button is a full-width block below the fields (not floated beside them,
   which is what pushed the "Lost your password?" link up alongside it). */
body.login #wp-submit.button-primary,
body.login .button.button-primary {
  background: var(--lcqm-primary);
  border: 1px solid transparent;
  border-radius: var(--lcqm-radius-md);
  box-shadow: var(--lcqm-shadow-sm);
  color: var(--lcqm-text-on-primary);
  font-size: var(--lcqm-text-base);
  font-weight: var(--lcqm-font-semibold);
  display: block;
  float: none;
  width: 100%;
  height: auto;
  padding: 10px 16px;
  margin: var(--lcqm-space-4) 0 0;
  text-align: center;
  text-shadow: none;
  transition: background var(--lcqm-duration) var(--lcqm-ease),
    transform var(--lcqm-duration-fast) var(--lcqm-ease),
    box-shadow var(--lcqm-duration) var(--lcqm-ease);
}

body.login #wp-submit.button-primary:hover,
body.login #wp-submit.button-primary:focus,
body.login .button.button-primary:hover,
body.login .button.button-primary:focus {
  background: var(--lcqm-primary-hover);
  color: var(--lcqm-text-on-primary);
}

body.login #wp-submit.button-primary:focus,
body.login .button.button-primary:focus {
  box-shadow: 0 0 0 var(--lcqm-ring-width) var(--lcqm-focus-ring);
  outline: none;
}

body.login #wp-submit.button-primary:active,
body.login .button.button-primary:active {
  transform: translateY(1px);
}

/* --- Messages, errors, notices ------------------------------------------ */
body.login .message,
body.login .notice,
body.login #login_error {
  background: var(--lcqm-surface);
  border: 1px solid var(--lcqm-border);
  border-left-width: 3px;
  border-radius: var(--lcqm-radius-md);
  box-shadow: var(--lcqm-shadow-sm);
  color: var(--lcqm-text);
  font-size: var(--lcqm-text-base);
  padding: 12px 14px;
  margin: 0 0 var(--lcqm-space-4);
}

body.login #login_error {
  border-left-color: var(--lcqm-danger);
  background: var(--lcqm-danger-soft);
}

body.login .message,
body.login .notice-success {
  border-left-color: var(--lcqm-success);
  background: var(--lcqm-success-soft);
}

body.login .notice-warning {
  border-left-color: var(--lcqm-warning);
  background: var(--lcqm-warning-soft);
}

/* --- Secondary navigation links ----------------------------------------- */
body.login #nav,
body.login #backtoblog {
  clear: both;
  text-align: center;
  padding: 0;
  margin: var(--lcqm-space-4) 0 0;
  font-size: var(--lcqm-text-sm);
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: var(--lcqm-text-muted);
  transition: color var(--lcqm-duration) var(--lcqm-ease);
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
  color: var(--lcqm-accent);
}

body.login a:focus {
  box-shadow: 0 0 0 2px var(--lcqm-focus-ring);
  border-radius: var(--lcqm-radius-xs);
  outline: none;
}

/* --- Powered-by footer (rendered by LoginRenderer) ----------------------
   WP fires `login_footer` *after* it closes #login, so this block is a sibling
   of the card. body.login is a centered column, so it stacks directly beneath
   the card — a tight margin keeps the whole page within the viewport. */
.lcqm-login-footer {
  text-align: center;
  margin-top: var(--lcqm-space-4);
  font-size: var(--lcqm-text-xs);
  color: var(--lcqm-text-subtle);
}

.lcqm-login-footer p {
  margin: 0;
  line-height: var(--lcqm-leading-normal);
}

.lcqm-login-footer a {
  color: var(--lcqm-text-muted);
  font-weight: var(--lcqm-font-medium);
  transition: color var(--lcqm-duration) var(--lcqm-ease);
}

.lcqm-login-footer a:hover {
  color: var(--lcqm-accent);
}

/* Language switcher (WP shows this below the form on some setups) */
body.login .language-switcher {
  margin-top: var(--lcqm-space-4);
  text-align: center;
}

/* Interim login (session-expired modal) keeps the same card treatment */
body.login.interim-login #login {
  padding-top: var(--lcqm-space-4);
}