/* ==========================================================================
   wp-login.php, wearing the portal's clothes.

   The site is gated by a whole-site restriction that redirects every
   logged-out visitor here, and that gate also covers /my-account/ — so the
   bespoke login template there is never reachable. Rather than fight the
   restriction, the canonical login page becomes the bespoke one. It is also
   the more robust place for it: lost-password, expired-session and
   re-authentication all land here too.
   ========================================================================== */

:root{
  --paper:#efe6d9;
  --panel:#faf5ec;
  --raise:#fffdf8;
  --espresso:#241a14;
  --ink:#1c1410;
  --graphite:#6b5d4c;
  --muted:#736553;
  --line:#e2d5c1;
  --pine:#1c4a37;
  --pine-700:#143726;
  --gold:#c79a2c;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --r:4px;
  --r-lg:8px;
}

/* The page is a two-column grid: the left column is empty and the fixed
   panel paints it, the right column holds the form and the language
   switcher, centred both ways. `safe` keeps tall content (a stack of
   error notices) from being centred off the top of the screen. */
body.login{
  margin:0;min-height:100dvh;
  display:grid;
  grid-template-columns:50vw 1fr;
  align-content:safe center;
  justify-items:center;
  padding:40px 0;
  box-sizing:border-box;
  background:var(--paper);
  font-family:"Instrument Sans",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* Left half: the dark roast, carrying the logo and the claim. */
body.login::before{
  content:"";
  position:fixed;left:0;top:0;bottom:0;width:50vw;
  background:
    radial-gradient(90% 70% at 22% 0%, rgba(199,154,44,.20), transparent 62%),
    var(--espresso);
  background-image:
    var(--scp-logo, none),
    radial-gradient(90% 70% at 22% 0%, rgba(199,154,44,.20), transparent 62%),
    linear-gradient(var(--espresso),var(--espresso));
  background-repeat:no-repeat;
  background-position:clamp(28px,6vw,72px) center, center, center;
  background-size:min(240px,42%) auto, cover, cover;
}

body.login::after{
  content:attr(data-claim);
  position:fixed;left:clamp(28px,6vw,72px);
  top:calc(50% + 70px);width:min(360px,34vw);
  color:rgba(239,230,217,.82);font-size:17px;line-height:1.4;letter-spacing:-.01em;
}

/* Right half: the form on paper, centred in its column. */
#login{
  grid-column:2;
  position:relative;z-index:1;
  width:min(400px,88%);
  margin:0;padding:0;
  box-sizing:border-box;
  text-align:left;
}

/* The default logo block becomes the heading. The anchor keeps its own text
   for screen readers and still links home, but that text is not shown —
   otherwise the site name and the title print as one run-on line. */
#login h1{margin:0 0 6px;}
#login h1 a{
  display:block;
  width:auto;height:auto;margin:0;padding:0;text-indent:0;overflow:visible;
  background:none;
  font-size:0;line-height:0;color:var(--ink);
}
#login h1 a::after{
  content:"Autentificare parteneri";
  display:block;
  font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.02em;
}
#login h1 a img{display:none;}

.login form{
  margin:18px 0 0;padding:24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 4px 16px rgba(74,48,28,.10);
}
.login form label{color:var(--graphite);font-size:13px;}
.login form .input,
.login input[type=text],
.login input[type=password]{
  width:100%;box-sizing:border-box;
  margin:6px 0 16px;padding:11px 13px;
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r);
  font-size:15px;color:var(--ink);
  box-shadow:none;
}
.login form .input:focus,
.login input[type=text]:focus,
.login input[type=password]:focus{
  border-color:var(--pine);outline:none;box-shadow:0 0 0 3px rgba(28,74,55,.12);
}
.login .button.wp-hide-pw{color:var(--muted);}
.login .button.wp-hide-pw:hover{color:var(--pine);}

.login .forgetmenot label{font-size:13.5px;color:var(--graphite);}
.login input[type=checkbox]{accent-color:var(--pine);}

.wp-core-ui .button-primary{
  display:block;width:100%;
  background:var(--pine);border-color:var(--pine);
  border-radius:var(--r);
  padding:11px 16px;min-height:46px;
  font-size:15px;font-weight:500;text-shadow:none;box-shadow:none;
  transition:background 140ms var(--ease-out),transform 120ms var(--ease-out);
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{background:var(--pine-700);border-color:var(--pine-700);box-shadow:none;}
.wp-core-ui .button-primary:active{transform:scale(.985);}

.login #nav,.login #backtoblog{
  padding:0;margin:14px 0 0;text-align:left;
  padding-left:0;
}
.login #nav a,.login #backtoblog a{color:var(--graphite);font-size:13.5px;}
.login #nav a:hover,.login #backtoblog a:hover{color:var(--pine);}

.login .message,.login .notice,.login #login_error{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--pine);
  border-radius:var(--r);box-shadow:none;color:var(--ink);
}
.login #login_error{border-left-color:#9c2b20;}

/* WordPress renders the language switcher outside #login and centres it on
   the page, which put half of it behind the dark panel. Keep it in the
   form column. */
.login .language-switcher{
  grid-column:2;
  width:min(400px,88%);
  margin:18px 0 0;padding:0;
  text-align:left;
}
.login .language-switcher form{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;
}
.login .language-switcher select{
  border-radius:var(--r);border:1px solid var(--line);background:var(--raise);
  padding:7px 10px;font-size:13.5px;color:var(--ink);max-width:200px;
}
.login .language-switcher .button{
  border-radius:var(--r);border:1px solid var(--line);background:var(--raise);
  color:var(--graphite);box-shadow:none;padding:6px 12px;font-size:13.5px;
}
.login .language-switcher .button:hover{border-color:var(--pine);color:var(--pine);}


/* Phone: one column, the roast becomes a band across the top. Out of
   `fixed` the panel becomes a real grid item and takes the first row. */
@media (max-width:820px){
  body.login{
    grid-template-columns:1fr;
    align-content:start;
    padding:0 0 40px;
  }
  body.login::before{
    position:static;width:auto;height:140px;display:block;
    justify-self:stretch;
    background-position:center center,center,center;
    background-size:min(190px,58%) auto, cover, cover;
  }
  body.login::after{display:none;}
  #login,
  .login .language-switcher{grid-column:1;width:min(400px,88%);}
  #login{margin-top:30px;}
}