/*
 * WP-Login + Password-Reset-Page Styling im AENDRING-Brand.
 * Eingebunden via login_enqueue_scripts Hook in functions.php.
 * Nutzt die selben Tokens wie /anfrage (Navy/Terracotta/Fraunces/Inter).
 *
 * WP-Login-Page hat eine eigene HTML-Struktur — wir muessen direkt mit
 * wp-Klassen arbeiten (#login, #loginform, #login_error, etc.).
 */

/* === Page Background + vertikal/horizontal Center === */
body.login {
  background: #FAFAF7 !important;
  font-family: "Inter", -apple-system, sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  box-sizing: border-box !important;
}
body.login #login {
  margin: 0 auto !important;
  flex: 0 0 auto;
}

/* === Logo: AENDRING-SVG via Background-Image, Text versteckt === */
.login h1.wp-login-logo,
#login h1.wp-login-logo,
.login h1[role="presentation"] {
  margin: 0 0 28px !important;
  padding: 0 !important;
  text-align: center !important;
}
.login h1.wp-login-logo a,
#login h1.wp-login-logo a,
.login h1[role="presentation"] a {
  background-image: url("https://dev.aendring.de/wp-content/uploads/2025/02/aendring_logo.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  width: 200px !important;
  height: 64px !important;
  margin: 0 auto !important;
  display: block !important;
  /* Hidden text — defensive on ALL methods */
  text-indent: 200% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  outline: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* === Wrapper === */
#login {
  width: 420px !important;
  padding: 24px 0 0 !important;
}

/* === Status-Box (Error-Notice etc.) — info-message ausgeblendet === */
.login #login_error,
.login .notice-error,
.login .notice-warning {
  border-left: 4px solid #C75B3E !important;
  background: #FFFFFF !important;
  color: #1E3A5F !important;
  border-radius: 6px !important;
  padding: 14px 18px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.9rem !important;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.06) !important;
  margin-bottom: 20px !important;
}
/* Notice-info (Standard-Hinweis "Gib dein Passwort ein...") →
   ausblenden, Text wird in der Form-Card als Subtitle gezeigt */
.login .notice-info,
.login .message:not(.notice-error):not(.notice-warning) {
  display: none !important;
}

/* === Resetpass-Form: "Neues Passwort" als Heading + Subtitle === */
.login #resetpassform::before {
  content: "Neues Passwort setzen";
  display: block;
  font-family: "Fraunces", serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1E3A5F;
  margin: 0 0 10px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}
/* User-Pass1-Wrap: Subtitle ÜBER dem Label hinzufuegen */
.login #resetpassform .user-pass1-wrap::before {
  content: "Gib unten dein neues Passwort ein oder generiere ein neues.";
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  color: #5C6477;
  margin: 0 0 28px;
  line-height: 1.5;
  text-align: center;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
/* Label "Neues Passwort" verstecken — Headline sagt's bereits */
.login #resetpassform label[for="pass1"] {
  display: none !important;
}

/* === Form-Container (weisses Card) — Gradient via border-top statt ::before
   damit ::before fuer die Headline frei bleibt === */
.login form {
  background: #FFFFFF !important;
  border: 1px solid #E5E1D8 !important;
  border-radius: 12px !important;
  padding: 40px 32px 32px !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  /* flow-root: contained den Float in .forgetmenot, damit p.submit innerhalb der Card bleibt */
  display: flow-root !important;
  position: relative;
}

/* "Angemeldet bleiben" — Float aufloesen, Checkbox + Label gestackt auf voller Breite */
.login form .forgetmenot {
  float: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.login form .forgetmenot input[type="checkbox"] {
  margin: 0 !important;
}
.login form .forgetmenot label {
  margin: 0 !important;
}

/* === Labels === */
.login form label,
.login label[for="pass1"],
.login label[for="pass2"],
.login label[for="user_login"],
.login label[for="user_pass"] {
  font-family: "Inter", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #1E3A5F !important;
  letter-spacing: 0.02em !important;
}

/* === Input-Fields === */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input.input,
.login .input {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E5E1D8 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.95rem !important;
  color: #1E3A5F !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}

/* === Form-Paragraphs: WP-Defaults zuruecksetzen, damit alles gleichbreit === */
.login form p,
.login form .user-pass-wrap {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.login form p.submit {
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login input.input:focus,
.login .input:focus {
  border-color: #1E3A5F !important;
  outline: none !important;
}

/* === Password-Strength-Box === */
.login .pw-weak label {
  font-size: 0.82rem !important;
}
.login #pass-strength-result {
  border-radius: 6px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
}

/* === Password-Strength-Colors via Brand === */
.login #pass-strength-result.strong {
  background-color: rgba(42, 128, 85, 0.12) !important;
  border-color: #2A8055 !important;
  color: #2A8055 !important;
}
.login #pass-strength-result.short,
.login #pass-strength-result.bad {
  background-color: rgba(199, 91, 62, 0.1) !important;
  border-color: #C75B3E !important;
  color: #C75B3E !important;
}

/* === Tipp-Text unter Password-Field === */
.login p.description,
.login .description,
.login form p.indicator-hint {
  font-family: "Inter", sans-serif !important;
  font-size: 0.82rem !important;
  color: #5C6477 !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

/* === Buttons-Container Stack mit Gap === */
.login .submit,
.login p.submit,
.login form .submit,
.login .wp-pwd {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* === Common Button Base — FULL WIDTH stretched ===
   WICHTIG: schliesst .wp-hide-pw (Eye-Toggle im Password-Field) aus */
.login .button-primary,
.login input[type="submit"].button,
.login button.button-primary,
.login .wp-generate-pw,
.login button.button.button-secondary:not(.wp-hide-pw) {
  display: flex !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  margin: 0 0 10px 0 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s !important;
}

/* === .wp-pwd Grid-Layout: input + eye-toggle nebeneinander, strength-result darunter === */
.login .wp-pwd {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "input  toggle"
    "result result" !important;
  align-items: center !important;
  gap: 8px 0 !important;
  position: relative !important;
}
.login .wp-pwd > input[type="password"],
.login .wp-pwd > input.password-input {
  grid-area: input !important;
  width: 100% !important;
  margin: 0 !important;
}
.login .wp-pwd #pass-strength-result {
  grid-area: result !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Eye-Toggle: klein, transparent, in der Grid-Column rechts vom Input === */
.login .wp-hide-pw,
.login .wp-pwd button.wp-hide-pw {
  grid-area: toggle !important;
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 4px 0 4px !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #5C6477 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.login .wp-hide-pw:hover {
  background: rgba(30, 58, 95, 0.06) !important;
  color: #1E3A5F !important;
}

/* === Primary (Terracotta filled) === */
.login .button-primary,
.login input[type="submit"].button,
.login button.button-primary {
  background: #C75B3E !important;
  color: #FFFFFF !important;
  border: 1.5px solid #C75B3E !important;
  box-shadow: 0 2px 6px rgba(199, 91, 62, 0.15) !important;
}
.login .button-primary:hover,
.login input[type="submit"].button:hover,
.login button.button-primary:hover {
  background: #B04E36 !important;
  border-color: #B04E36 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(199, 91, 62, 0.22) !important;
}

/* === Secondary (Outlined) === */
.login .wp-generate-pw,
.login button.button.button-secondary {
  background: #FFFFFF !important;
  color: #1E3A5F !important;
  border: 1.5px solid #E5E1D8 !important;
  box-shadow: none !important;
}
.login .wp-generate-pw:hover,
.login button.button.button-secondary:hover {
  border-color: #1E3A5F !important;
  background: rgba(30, 58, 95, 0.03) !important;
}

/* === Eye-Toggle (Show/Hide Password) === */
.login .wp-pwd .button.button-secondary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px !important;
}

/* === Links unter Form === */
.login #nav,
.login #backtoblog {
  text-align: center !important;
  margin-top: 16px !important;
}
.login #nav a,
.login #backtoblog a {
  color: #5C6477 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}
.login #nav a:hover,
.login #backtoblog a:hover {
  color: #C75B3E !important;
}

/* === Language-Switcher unten — KOMPLETT verstecken (UX-Clean) === */
.login .language-switcher,
.login-language-switcher,
body.login .language-switcher {
  display: none !important;
}

/* === Datenschutz / Privacy-Policy-Link unten — verstecken === */
.login .privacy-policy-page-link,
.login a.privacy-policy-link,
body.login .privacy-policy-page-link {
  display: none !important;
}
/* Trennlinie + Footer-Bereich um Language-Switcher dezent halten */
.login.wp-core-ui .login {
  padding-bottom: 0 !important;
}

/* === Headings (z.B. "Gib unten dein neues Passwort ein...") === */
.login h2,
.login form h2 {
  font-family: "Fraunces", serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #1E3A5F !important;
  text-align: center !important;
  margin: 0 0 18px !important;
}