/* ==========================================================================
   login.css — Rentl branded wp-login.php styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@800&family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

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

/* Solid orange, matching .rentl-flex-bg--orange (08-flexible.css) - the
   same treatment the homepage Hero section uses when its own Background
   is set to "Orange Accent". Confirmed live: the wave/blobs/geometric
   canvas shapes are a light, translucent highlight layer (~0.25-0.35
   alpha) meant to sit on top of a saturated orange base for visible
   depth/texture - not a standalone color, which is why they read as pale
   against this page's previous near-white background regardless of the
   canvas's own opacity. Literal hex here, not var(--rentl-orange) - that
   token lives in 00-tokens.css, which this page never loads (see this
   file's own existing literal hex values throughout, e.g. the wordmark
   below - established convention for this specific file, not an
   oversight). color: #fff sets the page's own text default to match -
   see the link/privacy-link rules further down, which follow the same
   .rentl-flex-bg--orange precedent of flipping to light text once the
   background actually is orange. */
body.login {
  background: #ff5700;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
}

/* ---- Animated background ----
   Canvas element itself is echoed via login_footer (functions.php) - fixed
   full-viewport placement here means its actual DOM position doesn't
   matter. pointer-events: none keeps it from ever intercepting a click
   meant for the real form - the "net" variant's own mouse-interactivity
   listens on window, not the canvas element, so this doesn't disable that
   if it's ever swapped in via data-hero-graphic. No opacity dampener here
   deliberately - every non-interactive variant (blobs/wave/geometric)
   already draws its own shapes at a moderate baked-in alpha (~0.25-0.35)
   tuned for their homepage use, confirmed live: stacking an additional
   opacity: 0.6 here on top of that produced a washed-out ~15-20% result
   instead of the intended bright orange. Let each variant's own tuning
   stand on its own instead of dampening it a second time. color only
   matters for the variants that read currentColor (geometric/globe/net's
   ambient layers) - "wave", the current default, bakes its own on-brand
   orange into the script directly and ignores this, but it's harmless to
   set regardless and saves a step if the variant ever changes. */
.rentl-login-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  color: #ffffff;
}

/* ---- Logo / brand ----
   WP core ships its own #login h1.wp-login-logo a rule with the same
   .login h1 a selector this block used to rely on (background-image,
   height: 84px, font-size: 20px) - a specificity tie in places, resolved
   by source order rather than reliably losing to this file. Confirmed
   live via DevTools: the ::before/::after below existed in the DOM with
   the right content/color/font-size the whole time, just rendering
   invisible - text-indent is core's standard way of visually hiding the
   real link text (the site title, "Rentl" as of WP now printing that
   instead of "Powered by WordPress") in favor of its background-image
   logo, and text-indent affects the first line of inline content
   including generated content, so an unreset value inherited straight
   through to the replacement text too. Explicit text-indent: 0 closes
   that specific gap; display: inline-block on both pseudo-elements is
   the more robust fix underneath it - an inline-block establishes its
   own box and stops inheriting the parent's text-indent shove at all,
   regardless of whatever exact value core happens to be using. */
#login h1 a {
  background-image: none;
  background-color: transparent;
  width: auto;
  height: auto;
  overflow: visible;
  display: block;
  font-size: 0;
  line-height: normal;
  color: transparent;
  text-decoration: none;
  text-indent: 0;
  padding-bottom: 0;
  margin-bottom: 0.25rem;
}

#login h1 a::before {
  content: 'rentl';
  display: inline-block;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 2rem;
  line-height: normal;
  font-weight: 800;
  /* White, not the brand orange - the page background is solid orange
     now (see body.login above), and orange-on-orange would undo the
     whole point of the earlier fix that made this render at all. Same
     "headings go white on an orange section" rule .rentl-flex-bg--orange
     h1...h6 already applies elsewhere (08-flexible.css) - the dot stays
     green below, that pairing already reads fine on orange sitewide. */
  color: #ffffff;
  letter-spacing: -0.01em;
  text-indent: 0;
}

#login h1 a::after {
  content: '.';
  /* No display: inline-block here (unlike ::before) - text-indent: 0
     alone is already sufficient to fix the text-hiding bug this pair was
     originally built to solve (::before is the one that actually needs
     the extra escape hatch, being first in the line). Also deliberately
     no manual position: relative/top nudge and no line-height: 0 - two
     rounds of guessing at those values live both landed wrong (too high,
     then too low), which just isn't a thing to keep guessing blind at.
     line-height: normal instead, matching ::before - letting the glyph
     sit at its own natural baseline is far more likely to land close to
     right than another manually tuned offset with nothing to check it
     against. */
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #2e933c;
  line-height: normal;
  text-indent: 0;
}

#login h1 a:hover::before,
#login h1 a:focus::before {
  /* A darker orange hover (the pre-orange-background value) would have
     the same invisible-on-invisible problem the base color just avoided -
     dimming the white slightly reads as a hover state without needing a
     hue that has to fight the background. */
  color: rgba(255, 255, 255, 0.8);
}

#login h1 a:hover,
#login h1 a:focus {
  box-shadow: none;
}

/* ---- Form card ---- */
/* min(340px, 100% - 2rem) instead of a flat 340px - WP core's #login has no
   responsive handling of its own, so a fixed 340px exceeds the viewport
   (forcing horizontal scroll on the whole login page) on any screen
   narrower than ~372px, e.g. a 320px-wide device. The 2rem floor guarantees
   an edge gutter instead of the card touching the screen edge once it does
   shrink - same idiom .rentl-container uses in 03-layout.css. */
#login {
  padding: 2rem 0;
  width: min(340px, 100% - 2rem);
}

/* color: #1a1a1a - without this, text here with no more specific rule of
   its own (WordPress's own "Don't have an account?" line, in particular)
   inherits body.login's white instead, meant for the orange page
   background, not this white box. Confirmed live as the actual cause of
   that exact line going invisible. */
#loginform,
#lostpasswordform,
#registerform {
  background: #ffffff;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.10);
  padding: 2rem;
  margin-top: 1.5rem;
  color: #1a1a1a;
}

/* ---- Labels ---- */
.login label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* ---- Inputs ---- */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  color: #1a1a1a;
  background: #ffffff;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  width: 100%;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: #2e933c;
  box-shadow: 0 0 0 3px rgba(46, 147, 60, 0.15);
  outline: none;
}

/* ---- Submit button ---- */
.login .button-primary,
#loginform .submit .button {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  background: #2e933c;
  border: none;
  border-radius: 0.5rem;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  width: 100%;
  cursor: pointer;
  transition: background 200ms ease, transform 140ms ease;
  text-shadow: none;
  box-shadow: none;
  height: auto;
  line-height: 1.4;
}

.login .button-primary:hover,
.login .button-primary:focus {
  background: #1f6b2a;
  border: none;
  box-shadow: none;
  color: #ffffff;
  transform: translateY(-1px);
}

.login .button-primary:active {
  transform: translateY(0);
}

/* ---- Checkbox / remember me ---- */
.login .forgetmenot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login input[type="checkbox"] {
  accent-color: #2e933c;
  width: 1rem;
  height: 1rem;
}

/* ---- Links ----
   #nav ("Lost your password?") and #backtoblog ("Go to rentl.") both sit
   outside #loginform, directly on the page background - confirmed via
   DevTools, they're siblings of the form inside #login, not children of
   the white card. The green they used against the old near-white
   background reads poorly on the new solid-orange one, so both flip to
   white - same "text directly on orange goes light" rule the wordmark
   and body.login above already follow. */
.login #nav a,
.login #backtoblog a {
  color: #ffffff;
  font-size: 0.875rem;
  text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
  color: #ffffff;
  text-decoration: underline;
}

#nav,
#backtoblog {
  text-align: center;
  padding: 0.75rem 0 0;
}

/* ---- Error / notice messages ---- */
.login #login_error,
.login .message,
.login .success {
  border-radius: 0.5rem;
  border-left: 4px solid #2e933c;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #eff8f0;
  color: #1a1a1a;
}

.login #login_error {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

/* ---- Privacy policy link ----
   Same "text directly on the page background goes light" reasoning as
   #nav/#backtoblog above - no plain background of its own to fall back
   on, so it needs the same flip rather than staying at a gray tuned for
   the old near-white page. */
.login .privacy-policy-page-link {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.5rem;
}