/**
 * HelpForge — wp-login.php branding overrides.
 *
 * Loaded ONLY on wp-login.php and its action variants (logout, loggedout,
 * lostpassword, resetpass, reauth) via the `login_enqueue_scripts` hook.
 *
 * The PHP side injects `:root` CSS custom properties so admin's
 * `helpforge_primary_color` option flows through here automatically.
 *
 * Design parity with `.hf-login` (template-parts/login.php) — same card,
 * radius, palette, button.
 */

/* Reset WP body chrome */
html, body.login {
  background: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--hf-text, #1f2937);
}

body.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
}

/* Card wrapper — replicates .hf-login */
#login {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
}

/* HF logo replaces WP "W" anvil */
.login h1 a {
  background-image: var(--hf-login-logo, none) !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  width: 100%;
  height: 72px;
  text-indent: -9999px;
  outline: 0;
  overflow: hidden;
  display: block;
  margin: 0 auto 28px;
}

/* If no custom logo URL, show brand text instead */
body.login.hf-no-logo .login h1 a {
  background-image: none !important;
  text-indent: 0;
  height: auto;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--hf-text, #1f2937);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

/* Form card — looks like .hf-login */
#loginform,
#lostpasswordform,
#resetpassform,
#registerform {
  background: #ffffff;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  padding: 32px 28px 28px;
  margin-top: 0;
  overflow: visible;
}

/* Reset default <p> + .user-pass-wrap margins inside login forms.
   WP wraps each input in a <p> and the password field in a <div>;
   without WP's dequeued login.css, browser default margin (~16px top
   and bottom on every paragraph) creates an oversized vertical
   rhythm. Bring it back to a tight 14px gap between groups. */
.login form p,
.login form .user-pass-wrap {
  margin: 0 0 14px 0;
}

.login form p.forgetmenot {
  margin: 0 0 16px 0;
}

.login form p.submit {
  margin: 8px 0 0 0;
}

/* Labels */
#loginform label,
#lostpasswordform label,
#resetpassform label,
#registerform label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--hf-text, #1f2937);
  margin-bottom: 6px;
}

/* Inputs */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  background: #ffffff;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 10px;
  color: var(--hf-text, #1f2937);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0 0 18px 0;
  box-sizing: border-box; /* keep width:100% honoring padding-right for the show/hide toggle */
}

.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  outline: none;
  border-color: var(--hf-primary, #2563EB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-primary, #2563EB) 12%, transparent);
}

/* Remember-me row */
.login .forgetmenot {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--hf-text-muted, #6b7280);
}

.login .forgetmenot input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.login .forgetmenot label {
  display: inline;
  font-weight: 400;
  margin: 0;
  color: var(--hf-text-muted, #6b7280);
  font-size: 14px;
}

/* Primary submit button */
.wp-core-ui .button.button-primary,
.login .button-primary,
.login .submit .button-primary {
  width: 100%;
  background: var(--hf-primary, #2563EB);
  border: 1px solid var(--hf-primary, #2563EB);
  color: #ffffff;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
  float: none;
  height: auto;
  line-height: 1.2;
}

.wp-core-ui .button.button-primary:hover,
.login .button-primary:hover {
  filter: brightness(0.92);
}

.wp-core-ui .button.button-primary:active,
.login .button-primary:active {
  transform: translateY(1px);
}

.wp-core-ui .button.button-primary:focus,
.login .button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-primary, #2563EB) 24%, transparent);
}

/* Password visibility toggle button */
.login .button.wp-hide-pw {
  background: transparent;
  border: none;
  color: var(--hf-text-muted, #6b7280);
  box-shadow: none;
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 8px 12px;
  top: 4px;
  right: 4px;
}

.login .button.wp-hide-pw:hover {
  color: var(--hf-primary, #2563EB);
  background: transparent;
}

.login .button.wp-hide-pw:focus {
  outline: 2px solid var(--hf-primary, #2563EB);
  outline-offset: 2px;
  box-shadow: none;
}

/* wrap password input correctly so toggle button stays aligned */
.login .wp-pwd {
  position: relative;
}

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

/* WP renders the "Caps Lock is on" warning as a giant SVG with no
   inline size attributes — clamp it. We dequeued WP's login.css which
   normally constrains this, so handle it here. */
.login .wp-pwd .button.wp-hide-pw svg,
.login .button.wp-hide-pw svg,
.login .dashicons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
}

.login .caps-warning {
  /* Default hidden. WordPress's inline JS adds `style="display:..."` to
     toggle the warning when caps-lock is detected — that inline style
     wins over our display:none here, while the other rules (border,
     padding, color) still apply. We dequeued WP's login.css which
     normally provides this default, so we have to re-add it. */
  display: none;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 8px;
  font-size: 12px;
  color: #854d0e;
  width: auto;
}

.login .caps-warning .dashicons,
.login .caps-warning svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  fill: currentColor;
}

.login .caps-warning .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Hide WP's top "Log In" h1 page heading — we have the logo + form card */
.login .privacy-policy-page-link + h1,
.login > h1:first-of-type {
  display: none;
}

/* The "Log In" / "Lost Password" page heading lives in .login > div > h1
   when the form area itself doesn't have one. Hide top-level page H1s
   only — keep h1 inside our own .hf-login-notice cards visible. */
body.login > h1,
.login-action-login > h1 {
  display: none !important;
}

/* Links below form */
#nav,
#backtoblog {
  text-align: center;
  margin: 16px 0 0;
  padding: 0;
  font-size: 14px;
}

#nav a,
#backtoblog a {
  color: var(--hf-primary, #2563EB);
  font-weight: 500;
  text-decoration: none;
}

#nav a:hover,
#backtoblog a:hover {
  text-decoration: underline;
}

#nav {
  border-top: 1px solid var(--hf-border, #e5e7eb);
  padding-top: 16px;
  margin-top: 20px;
}

#backtoblog {
  margin-top: 12px;
}

/* WP notice / error messages */
.login #login_error,
.login .notice,
.login .message {
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 14px;
  border-left-width: 1px;
  border-left-style: solid;
  box-shadow: none;
  margin: 0 0 20px 0;
}

.login #login_error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.login .notice-success,
.login .message {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* When we suppress WP's default info messages via login_messages filter,
   the empty .message div still renders with its background and padding —
   hide it so it doesn't leave a green strip below our branded notice. */
.login .message:empty,
.login #login_error:empty,
.login p.message:empty {
  display: none;
}

/* Privacy policy link footer (WP 5.3+) */
.privacy-policy-page-link {
  text-align: center;
  margin-top: 16px;
}

.privacy-policy-page-link a {
  color: var(--hf-text-muted, #6b7280);
  font-size: 13px;
}

/* Language switcher (WP 5.9+) — keep but de-emphasize */
.language-switcher {
  text-align: center;
  margin-top: 12px;
}

.language-switcher select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--hf-border, #e5e7eb);
  font-size: 13px;
  background: #ffffff;
}

/* Strong password indicator — keep WP's behavior, restyle pill */
.login #pass-strength-result {
  margin: 12px 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  background: var(--hf-bg-muted, #f9fafb);
  border: 1px solid var(--hf-border, #e5e7eb);
}

/* Branded confirmation screens (logout confirm, password reset success) */
.login .akismet-link,
.login p[role="alert"],
.login .button.button-large {
  border-radius: 10px;
}

/* HelpForge-injected logout/loggedout confirmation card */
.hf-login-notice {
  background: #ffffff;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  padding: 32px 28px;
  text-align: center;
  margin: 0 auto 16px;
  max-width: 100%;
}

.hf-login-notice__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hf-primary, #2563EB) 10%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--hf-primary, #2563EB);
}

.hf-login-notice__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-login-notice__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--hf-text, #1f2937);
  margin: 0 0 8px;
}

.hf-login-notice__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--hf-text-muted, #6b7280);
  margin: 0 0 24px;
}

.hf-login-notice__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.hf-login-notice__btn {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.hf-login-notice__btn--primary {
  background: var(--hf-primary, #2563EB);
  color: #ffffff;
}

.hf-login-notice__btn--primary:hover {
  filter: brightness(0.92);
  color: #ffffff;
}

.hf-login-notice__btn--secondary {
  background: #ffffff;
  color: var(--hf-text, #1f2937);
  border: 1px solid var(--hf-border, #e5e7eb);
}

.hf-login-notice__btn--secondary:hover {
  background: var(--hf-bg-muted, #f9fafb);
  color: var(--hf-text, #1f2937);
}

/* Footer attribution — keep wp_die screens reading "Powered by HelpForge"
   not "Powered by WordPress" */
.hf-branded-footer {
  text-align: center;
  font-size: 12px;
  color: var(--hf-text-muted, #6b7280);
  margin-top: 24px;
  padding: 16px;
}

.hf-branded-footer a {
  color: var(--hf-text-muted, #6b7280);
  text-decoration: none;
}

/* wp_die() branded screen */
body.hf-wp-die {
  background: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

body.hf-wp-die .hf-error-wrap {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.hf-wp-die .hf-error-card {
  background: #ffffff;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  padding: 40px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

body.hf-wp-die .hf-error-card h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--hf-text, #1f2937);
  margin: 16px 0 12px;
}

body.hf-wp-die .hf-error-card .hf-error-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hf-text-muted, #6b7280);
  margin-bottom: 24px;
  /* WP error messages occasionally contain long tokens/URLs (request
     IDs, stack traces). Break instead of overflowing the card. */
  word-break: break-word;
  overflow-wrap: break-word;
}

body.hf-wp-die .hf-error-card .hf-error-body p {
  margin: 0 0 12px;
}

body.hf-wp-die .hf-error-card .hf-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Password-protected post unlock form */
.hf-password-form {
  max-width: 440px;
  margin: 24px auto;
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  text-align: center;
}

.hf-password-form__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--hf-primary, #2563EB) 10%, transparent);
  border-radius: 50%;
  color: var(--hf-primary, #2563EB);
  margin-bottom: 12px;
}

.hf-password-form__icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hf-password-form__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hf-text, #1f2937);
}

.hf-password-form__desc {
  font-size: 14px;
  color: var(--hf-text-muted, #6b7280);
  margin: 0 0 18px;
}

.hf-password-form__row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.hf-password-form__row input[type="password"] {
  flex: 1;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--hf-border, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
  color: var(--hf-text, #1f2937);
}

.hf-password-form__row input[type="password"]:focus {
  outline: none;
  border-color: var(--hf-primary, #2563EB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-primary, #2563EB) 12%, transparent);
}

.hf-password-form__row button {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--hf-primary, #2563EB);
  color: #ffffff;
  border: 1px solid var(--hf-primary, #2563EB);
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.hf-password-form__row button:hover {
  filter: brightness(0.92);
}

/* Mobile (< 375px) — clamp card max-widths so the white card never
   horizontally overflows on iPhone SE-class devices, and stack the
   "feature unavailable" / password form action buttons. */
@media (max-width: 374px) {
  #login,
  #loginform,
  #lostpasswordform,
  #resetpassform,
  #registerform {
    max-width: 100%;
  }

  body.hf-wp-die .hf-error-card,
  .hf-login-notice,
  .hf-password-form {
    max-width: 100%;
  }

  .hf-login-notice__actions,
  body.hf-wp-die .hf-error-card .hf-error-actions {
    flex-direction: column;
  }

  .hf-login-notice__btn,
  body.hf-wp-die .hf-error-card .hf-login-notice__btn {
    width: 100%;
    text-align: center;
  }

  .hf-password-form__row {
    flex-direction: column;
    gap: 10px;
  }
}