/* Native WordPress login, registration and password screens in RAWGRAVEL style. */
body.login {
  --rga-paper: #f7f5ef;
  --rga-ink: #202726;
  --rga-muted: #596461;
  --rga-orange: #d36a35;
  background-color: var(--rga-paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(77, 84, 81, .12) 1px, transparent 1.35px),
    repeating-radial-gradient(ellipse at 84% 15%, transparent 0 33px, rgba(77, 84, 81, .055) 34px 35px);
  background-size: 14px 14px, 100% 100%;
  color: var(--rga-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.login #login {
  box-sizing: border-box;
  max-width: 460px;
  padding: clamp(42px, 8vh, 84px) 20px 40px;
  width: 100%;
}

body.login #login h1 a {
  background-image: var(--rga-login-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--rga-ink);
  display: block;
  font-size: 0;
  font-weight: 650;
  height: clamp(68px, 18vw, 98px);
  letter-spacing: -.07em;
  line-height: 1.15;
  margin: 0;
  overflow: visible;
  text-decoration: none;
  text-indent: 0;
  width: min(100%, 300px);
}

body.login #login h1 a:focus-visible { outline: 3px solid var(--rga-orange); outline-offset: 3px; }

body.login #login h1::after {
  color: var(--rga-muted);
  content: "Raus auf den Schotter. Rein in die Community.";
  display: block;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 11px 0 24px;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #rp,
body.login #passform {
  background: #fffdf9;
  border: 1px solid #dedbd2;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(34, 43, 40, .11);
  box-sizing: border-box;
  margin: 0;
  padding: clamp(22px, 5vw, 34px);
}

body.login #login form label {
  color: var(--rga-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

body.login #login form .input,
body.login #login form input[type="email"],
body.login #login form input[type="text"],
body.login #login form input[type="password"] {
  background: #fff;
  border: 1px solid #abb5b4;
  border-radius: 9px;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--rga-ink);
  font-size: 16px;
  min-height: 48px;
  padding: 10px 12px;
}

body.login #login form .input:focus,
body.login #login form input:focus-visible,
body.login #login a:focus-visible {
  border-color: var(--rga-orange);
  box-shadow: 0 0 0 3px rgba(211, 106, 53, .18);
  outline: none;
}

body.login #login form .button-primary {
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .13) 0 1px, transparent 1.5px),
    linear-gradient(145deg, #686f6b, #4d5451);
  background-size: 19px 17px, auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 0 rgba(22, 25, 22, .16);
  clip-path: polygon(5% 7%, 31% 2%, 72% 5%, 96% 1%, 100% 29%, 97% 75%, 91% 97%, 57% 94%, 25% 99%, 3% 91%, 0 62%, 2% 22%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  min-height: 46px;
  padding: 8px 22px;
  text-shadow: none;
  transition: background .2s ease, transform .2s ease;
}

body.login #login form .button-primary:hover,
body.login #login form .button-primary:focus-visible {
  background: linear-gradient(145deg, #df7841, #d36a35);
  color: #fff;
  transform: translateY(-2px);
}

body.login #login form .button-primary:focus-visible { outline: 3px solid rgba(211, 106, 53, .3); }
body.login #login form .forgetmenot { margin-block: 10px; }
body.login #login form .forgetmenot label { font-weight: 500; }
body.login #login form .submit { margin-top: 18px; }
body.login #login #nav,
body.login #login #backtoblog { margin: 0; padding: 14px 2px 0; }
body.login #login #nav a,
body.login #login #backtoblog a,
body.login #login form a { color: #a94e27; text-decoration: underline; text-underline-offset: 2px; }
body.login #login #nav a:hover,
body.login #login #backtoblog a:hover,
body.login #login form a:hover { color: #733818; }
body.login #login .message,
body.login #login #login_error {
  background: #fffdf9;
  border-left: 4px solid var(--rga-orange);
  border-radius: 0 9px 9px 0;
  box-shadow: 0 6px 18px rgba(34, 43, 40, .07);
  margin: 0 0 16px;
}
body.login #login #login_error { border-left-color: #a72e2e; }
body.login .rga-registration-notice {
  border-top: 1px solid #e5e0d7;
  color: var(--rga-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 22px 0 14px;
  padding-top: 16px;
}

body.login .privacy-policy-page-link a {
  color: var(--rga-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus-visible { color: var(--rga-orange); }
body.login .language-switcher select {
  border-color: #abb5b4;
  color: var(--rga-ink);
}
body.login .language-switcher select:focus-visible {
  border-color: var(--rga-orange);
  box-shadow: 0 0 0 3px rgba(211, 106, 53, .18);
  outline: none;
}
body.login .language-switcher .button {
  background: linear-gradient(145deg, #686f6b, #4d5451);
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 0 rgba(22, 25, 22, .16);
  clip-path: polygon(5% 7%, 31% 2%, 72% 5%, 96% 1%, 100% 29%, 97% 75%, 91% 97%, 57% 94%, 25% 99%, 3% 91%, 0 62%, 2% 22%);
  color: #fff;
  font-weight: 700;
  min-height: 40px;
  padding-inline: 16px;
}
body.login .language-switcher .button:hover,
body.login .language-switcher .button:focus-visible {
  background: linear-gradient(145deg, #df7841, #d36a35);
  color: #fff;
}
body.login .wp-pwd .button .dashicons { color: var(--rga-muted); }

@media (max-width: 480px) {
  body.login #login { padding-inline: 16px; }
  body.login #login h1::after { margin-bottom: 20px; }
}