/*
 * wp-login.php
 *
 * The 2012 theme did this by echoing a <style> block from a login_head action.
 * This is a real stylesheet, enqueued with filemtime() versioning like every
 * other asset, so it caches properly and can be edited without hunting through
 * PHP.
 *
 * Tokens are duplicated here rather than imported: wp-login.php does not load
 * the theme's stylesheet, and pulling in 60KB of site CSS to colour one form
 * would be silly. Six values, kept in step by hand.
 * ⚠ If the brand palette changes in style.css, change it here too.
 */

:root {
  --rm-cream:  #EFE9D9;
  --rm-ink:    #1A1512;
  --rm-red:    #B80442;
  --rm-red-dk: #8B0332;
  --rm-white:  #FFFFFF;
  --rm-muted:  #5A5148;
}

body.login {
  background: var(--rm-cream);
  color: var(--rm-ink);
}

/* The wordmark replaces WordPress's own logo. The INK-lettered variant, because
   this page has a cream ground and the standard mark's "RECORDS" is pure white
   - it would vanish here. Same reason the site header uses the white version on
   its dark teal band. */
body.login h1 a {
  background-image: url('../images/rushmor-logo-ink.png');
  background-size: contain;
  background-position: center center;
  width: 260px;
  height: 118px;
  margin-bottom: 24px;
}

.login form {
  background: var(--rm-white);
  border: 2px solid var(--rm-ink);
  border-radius: 3px;
  box-shadow: 5px 5px 0 var(--rm-ink);
}

.login label { color: var(--rm-ink); font-weight: 600; }

.login input[type='text'],
.login input[type='password'],
.login input[type='email'] {
  border: 2px solid var(--rm-ink);
  border-radius: 3px;
  background: var(--rm-white);
  color: var(--rm-ink);
  min-height: 44px;
}

/* Two-tone focus ring, same reasoning as the front end: a single colour cannot
   clear 3:1 against both the cream page and the white form panel. */
.login :focus-visible {
  outline: 3px solid var(--rm-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--rm-white);
}
.login input[type='text']:focus,
.login input[type='password']:focus,
.login input[type='email']:focus {
  border-color: var(--rm-red);
  box-shadow: none;
}

/* Matches .rm-btn--primary on the site: filled red, ink keyline, hard offset
   shadow, and it darkens on hover - never lightens. */
.login .button-primary {
  background: var(--rm-red);
  border: 2px solid var(--rm-ink);
  border-radius: 3px;
  color: var(--rm-white);
  box-shadow: 3px 3px 0 var(--rm-ink);
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 20px;
  transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1),
              transform 120ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 120ms cubic-bezier(0.2, 0, 0, 1);
}
.login .button-primary:hover,
.login .button-primary:focus {
  background: var(--rm-red-dk);
  border-color: var(--rm-ink);
  color: var(--rm-white);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--rm-ink);
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link {
  color: var(--rm-muted);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-link:hover {
  color: var(--rm-red);
}

.login .message,
.login .success { border-left-color: var(--rm-red); }

@media (prefers-reduced-motion: reduce) {
  .login .button-primary { transition-duration: 0.01ms; }
}