/* ============================================================
   Pixeroom — native wp-login.php restyle
   Makes the WordPress core login/register/lost-password screens
   match the site's own .pix-auth-card design (see styles.css),
   so the sign-in experience is identical everywhere: /register/,
   /contact/, WooCommerce My Account, AND the native wp-login.php
   that WordPress/Jetpack/plugins redirect to. Everything is scoped
   to body.login so it can never leak into wp-admin or the site.
   styles.css is enqueued alongside this file for the :root design
   tokens (--grad, --ink, --line, etc.); Quicksand is enqueued too.
   ============================================================ */

body.login {
  background: var(--bg-soft, #F7F7F7) !important;
  font-family: 'Quicksand', sans-serif !important;
}
body.login #login {
  width: 100%;
  max-width: 440px;
  padding: 8% 0 40px;
}

/* Card wrapper: the logo heading + Google button + form all sit
   inside #login; give the whole column a card by wrapping the form
   and its siblings visually. We style #loginform (and register/
   lostpassword forms) as the white card. */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform {
  background: #fff;
  border: 1px solid var(--line, #ECECEC);
  border-radius: var(--radius-lg, 26px);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.09));
  padding: 40px 36px;
  margin-top: 16px;
}

/* Order the login form so it reads exactly like the site's auth card:
   Google button first, then the 'or with email' divider, then the email
   fields. #loginform's Nextend button (#nsl-custom-login-form-main) is the
   last DOM child by default, so flex + order pulls it to the top. */
body.login #loginform {
  display: flex;
  flex-direction: column;
}
body.login #nsl-custom-login-form-main {
  order: -2;
  width: 100%;
  margin: 0 0 2px !important;
}

/* Matches the H1 + one-line sub every other auth card opens with (see
   pixeroom_register_content() and pixeroom_contact_content()). Pulled to
   the very top of the card via order, ahead of the Google button (-2). */
body.login .pix-login-title {
  order: -10;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink, #0A0A0A);
  margin: 0 0 6px;
  line-height: 1.25;
}
body.login .pix-login-sub {
  order: -9;
  color: var(--muted, #7A7A7A);
  font-size: .92rem;
  margin: 0 0 22px;
}

/* Suppress Google Site Kit's own 'Sign in with Google' button on the login
   screen. It is a cross-origin Google iframe that renders in the visitor's
   Google-account language (e.g. Hebrew) and cannot be restyled — the exact
   reason the site standardised on the Nextend button everywhere else. Hiding
   it here removes the duplicate so only our styled button remains. */
body.login [class*="sign-in-with-google"],
body.login .googlesitekit-sign-in-with-google__frontend-output-button {
  display: none !important;
}

/* Brand wordmark in place of the WordPress logo */
body.login h1 a {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--ink, #0A0A0A) !important;
  overflow: visible !important;
}

/* Inputs */
body.login form .input,
body.login input[type=text],
body.login input[type=password],
body.login input[type=email] {
  width: 100%;
  padding: .7em .9em !important;
  border: 1.5px solid var(--line-2, #D8D8D8) !important;
  border-radius: var(--radius-sm, 11px) !important;
  font: inherit !important;
  font-size: .95rem !important;
  background: #fff !important;
  color: var(--ink, #0A0A0A) !important;
  box-shadow: none !important;
}
/* Jetpack's math-captcha answer field ("Prove your humanity") ships an
   inline style="width:50px" that's too narrow for a 2-digit answer once our
   font-size/padding above are applied — too little visible room for e.g.
   "15", clipped to showing just "1". Inline styles beat a plain stylesheet
   rule, so this needs !important specifically for width (the shared rule
   above intentionally leaves width unstyled here since a 100% full-card
   width would look wrong for a 2-digit field). */
body.login #jetpack_protect_answer {
  width: 72px !important;
}
body.login form .input:focus,
body.login input[type=text]:focus,
body.login input[type=password]:focus,
body.login input[type=email]:focus {
  outline: none !important;
  border-color: var(--ink, #0A0A0A) !important;
  box-shadow: none !important;
}
body.login label {
  font-size: .85rem !important;
  font-weight: 700 !important;
  color: var(--ink, #0A0A0A) !important;
}

/* Primary submit button = our rounded gradient button */
body.login .button-primary,
body.login #wp-submit {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin-top: 8px !important;
  padding: .82em 1em !important;
  border: 1.5px solid transparent !important;
  /* WP core sets a large fixed line-height on #wp-submit (~2.9x font-size)
     meant for its own default button chrome; left alone it inflates this
     button well past the padding-driven height every other .btn uses.
     1.6 matches what Register's .btn actually renders at (confirmed via
     computed style: 26.656px / 16.66px font-size); plain "normal" resolves
     inconsistently here, likely because this page enqueues its own Quicksand
     @font-face separately rather than sharing Astra's already-loaded one. */
  line-height: 1.6 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--grad, linear-gradient(to right,#831EFE,#3565F6)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .98rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: filter .2s ease;
}
body.login .button-primary:hover,
body.login #wp-submit:hover {
  filter: brightness(1.05);
}
body.login p.submit { text-align: center; }

/* 'or with email' divider above the form, matching .pix-divider */
body.login #loginform::before {
  content: 'or with email';
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted, #7A7A7A);
  font-size: .85rem;
  margin: 16px 0 18px;
  white-space: nowrap;
}
body.login #loginform::before {
  width: 100%;
}

/* Nextend Social Login Google button (rendered above the form on
   wp-login.php) — restyle to our rounded white Google button, same
   look as .pix-nsl-wrap in styles.css but scoped to the login page
   since Nextend does not wrap it in our .pix-nsl-wrap container here. */
body.login .nsl-container { margin: 0 0 4px !important; box-shadow: none !important; }
body.login .nsl-container-buttons { display: flex !important; }
body.login a.nsl-button,
body.login .nsl-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: .75em 1em !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--line-2, #D8D8D8) !important;
  background: #fff !important;
  color: var(--ink, #0A0A0A) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  box-shadow: none !important;
  transition: background .2s ease;
}
body.login .nsl-button:hover { background: var(--bg-soft, #F7F7F7) !important; }
body.login .nsl-button-label-container {
  color: var(--ink, #0A0A0A) !important;
  font-weight: 700 !important;
  font-family: 'Quicksand', sans-serif !important;
  font-size: .95rem !important;
  /* Nextend's own default styles this label with a fixed 40px line-height;
     unlike the Register/Contact pages (where it's naturally overridden by
     source order), nothing else resets it on wp-login.php, so the label
     renders far taller than its actual text — inflating the whole button.
     1.6 matches Register's actual computed ratio (see #wp-submit above). */
  line-height: 1.6 !important;
  /* Nextend's default also pads this label 10px top/bottom — zero on
     Register (confirmed via computed style) since the outer .nsl-button
     already supplies the button's padding. */
  padding: 0 !important;
}
body.login .nsl-button-svg-container { display: flex !important; align-items: center; flex: none; padding: 0 !important; }
body.login .nsl-button-svg-container svg { width: 18px !important; height: 18px !important; }

/* Footer nav links (Register | Lost password, Back to site) */
body.login #nav,
body.login #backtoblog {
  text-align: center;
  padding: 0 24px;
}
body.login #nav a,
body.login #backtoblog a {
  color: var(--muted, #7A7A7A) !important;
  font-size: .85rem;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: var(--ink, #0A0A0A) !important;
}

/* Messages / errors, matching .pix-auth-error tone */
body.login #login .message,
body.login #login .success,
body.login #login #login_error {
  border-radius: var(--radius-sm, 11px);
  border-left: none;
  font-size: .88rem;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
body.login #login #login_error {
  border: 1px solid #F5C2C2;
  background: #FEECEC;
  color: #D92D20;
}