/*
 * WordPress login, wearing Anna's colours.
 * Colours, type and controls mirror the owner dashboard (owner.css).
 * WordPress's own markup, errors, remember-me, password toggle and
 * lost-password screens are left exactly as core renders them.
 */

:root {
  --al-ink: #3d3236;
  --al-muted: #6a5a61;
  --al-rose: #925f73;
  --al-rose-dark: #744b5e;
  --al-line: #e2d3d9;
  /* Control boundaries, not decoration: must clear 3:1 on white. */
  --al-boundary: #9b8991;
  --al-serif: Georgia, 'Times New Roman', serif;
  --al-sans: ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.login {
  margin: 0;
  min-height: 100vh;
  padding: 24px 16px 40px;
  background: #faf7f2;
  color: var(--al-ink);
  font: 16px/1.6 var(--al-sans);
}

/* Soft blush wash behind the card without disturbing core's layout. */
body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%, #f3e3e9 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #ead6ad59 0%, transparent 60%);
}

/* --------------------------------------------------------------- lockup */
#login {
  width: 100%;
  max-width: 400px;
  padding: 18px 0 0;
}

#login h1 { margin: 0 0 18px; }
#login h1 a {
  width: 220px;
  max-width: 100%;
  height: 60px;
  margin: 0 auto;
  background-image: url('assets/logo.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@supports (background-image: image-set(url('assets/logo.png') 1x)) {
  /* Retina screens get the same asset; it is already high resolution. */
  #login h1 a { background-image: image-set(url('assets/logo.png') 1x); }
}

.login .message,
.login .success,
#login_error {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--al-line);
  border-left-width: 4px;
  border-radius: 14px;
  background: #fffdfb;
  box-shadow: none;
  font-size: 16px;
  color: var(--al-ink);
  overflow-wrap: anywhere;
}
.login .message { border-left-color: var(--al-rose); }
.login .success { border-left-color: #6f8f6f; }
#login_error { border-left-color: #b4554f; }
#login_error p { margin: 0; }

.anna-login-heading {
  margin: 0 0 8px;
  font-family: var(--al-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--al-ink);
}

.anna-login-message {
  margin: 0 0 10px;
  color: var(--al-muted);
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ the form */
.login form {
  margin: 0 0 18px;
  padding: 26px 24px;
  border: 1px solid #ffffffed;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffffd9, #fffaf4a8 58%, #ede5e79c);
  box-shadow: 0 16px 40px #744b5e1a;
  overflow-wrap: anywhere;
}

.login label {
  font-family: var(--al-serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--al-ink);
}

.login form .input,
.login form input[type='text'],
.login form input[type='password'],
.login form input[type='email'] {
  margin-top: 8px;
  padding: 13px 14px;
  min-height: 52px;
  border: 1px solid var(--al-boundary);
  border-radius: 12px;
  background-color: #fff;
  box-shadow: none;
  font: 16px/1.5 var(--al-sans);
  color: var(--al-ink);
  transition: border-color .15s;
}

/* The show/hide control floats over the password field: keep the text clear of
   it whether the field is currently a password or revealed as plain text. The
   field carries its own id, so the rule is written against it directly rather
   than by type, which would lose the specificity contest. */
.login .wp-pwd #user_pass { padding-right: 78px; }
.login form .input:focus,
.login form input[type='text']:focus,
.login form input[type='password']:focus,
.login form input[type='email']:focus {
  border-color: var(--al-rose-dark);
  box-shadow: 0 0 0 1px var(--al-rose-dark);
  outline: 2px solid transparent;
}

/* ------------------------------------------------------------ controls */
.login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 0;
  font-size: 15px;
}
.login .forgetmenot label {
  font-family: var(--al-sans);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
.login .forgetmenot input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  border: 1px solid var(--al-boundary);
  border-radius: 4px;
}

.login .submit {
  margin: 14px 0 0;
  padding: 0;
}
.login .button-primary,
.login .button.wp-hide-pw {
  font: 600 16px/1.2 var(--al-sans);
}
.login .button-primary {
  width: 100%;
  min-height: 52px;
  padding: 13px 22px;
  float: none;
  border: 1px solid #7c5365;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--al-rose), var(--al-rose-dark));
  color: #fff;
  text-shadow: none;
  box-shadow: inset 0 1px #ffffff45, 0 6px 15px #744b5e1a;
}
.login .button-primary:hover,
.login .button-primary:focus {
  background: linear-gradient(135deg, #9c6a7e, #7e5265);
  color: #fff;
  border-color: #744b5e;
}
.login .button-primary:active {
  background: linear-gradient(135deg, var(--al-rose-dark), #68434f);
  transform: translateY(1px);
}
.login .button-primary:disabled,
.login .button-primary[disabled] {
  background: #b9a5ad;
  border-color: #a9969e;
  color: #fff;
}

/* The show/hide control keeps core's behaviour and screen-reader text; only
   its size and shape change. */
.login .button.wp-hide-pw {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--al-boundary);
  border-radius: 12px;
  background: #fff;
  color: var(--al-rose-dark);
  box-shadow: none;
}
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus { background: #fdf3f7; border-color: var(--al-rose-dark); }
/* Core owns the show/hide affordance and its screen-reader text. */
.login .button.wp-hide-pw .dashicons { width: 20px; height: 20px; font-size: 20px; margin: 0; }

/* Revealing the password changes the field's type, so the field and the toggle
   are laid out as one grid cell that both variants share. The toggle is 44px and
   inset 4px, which keeps it entirely inside the 52px field in both states. */
.login .wp-pwd { position: relative; display: grid; }
.login .wp-pwd input,
.login .wp-pwd .button.wp-hide-pw { grid-area: 1 / 1; }
.login .wp-pwd #user_pass { margin-top: 0; }
.login .wp-pwd .button.wp-hide-pw {
  position: static;
  align-self: start;
  justify-self: end;
  margin: 4px 4px 0 0;
}

/* ------------------------------------------------------- links and text */
.login #nav,
.login #backtoblog {
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  text-align: center;
}
.login #nav a,
.login #backtoblog a {
  display: inline-block;
  min-height: 44px;
  padding: 11px 6px;
  color: var(--al-rose-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.login #backtoblog a:first-child { font-weight: 400; }
.login .privacy-policy-page-link { font-size: 14px; }

.login #language-switcher label { font-family: var(--al-sans); font-size: 15px; }
.login #language-switcher select { min-height: 44px; font-size: 16px; }

/* -------------------------------------------------------------- focus */
body.login a:focus-visible,
body.login button:focus-visible,
body.login input:focus-visible,
body.login select:focus-visible,
body.login summary:focus-visible {
  outline: 3px solid var(--al-rose-dark);
  outline-offset: 3px;
}

/* --------------------------------------------------------- small sizes */
@media screen and (max-width: 400px) {
  body.login { padding: 16px 12px 32px; }
  #login { max-width: 100%; }
  .login form { padding: 20px 16px; border-radius: 18px; }
  #login h1 a { width: 190px; height: 52px; }
  .login label { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .login form .input,
  .login .button-primary { transition: none; }
  .login .button-primary:active { transform: none; }
}