:root {
  --sdg-login-ivory: #fbf7ef;
  --sdg-login-paper: #fffdf8;
  --sdg-login-navy: #142846;
  --sdg-login-wine: #7b2538;
  --sdg-login-gold: #b99a5e;
  --sdg-login-muted: #6b665f;
  --sdg-login-line: rgba(20,40,70,.18);
}

body.login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(185,154,94,.18), transparent 28rem),
    linear-gradient(145deg, var(--sdg-login-ivory), #f2eadf);
  color: var(--sdg-login-navy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login #login { width: min(400px, calc(100% - 32px)); padding: clamp(56px, 10vh, 96px) 0 36px; }
body.login h1 a {
  width: 100%;
  height: 96px;
  margin-bottom: 24px;
  background-image: var(--sdg-login-logo, none);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
body.login h1 a::after {
  content: "Soli Deo Gloria";
  display: block;
  padding-top: 102px;
  color: var(--sdg-login-navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-indent: 0;
}
body.login form {
  margin-top: 42px;
  padding: 30px;
  border: 1px solid var(--sdg-login-line);
  border-radius: 22px;
  background: rgba(255,253,248,.94);
  box-shadow: 0 22px 60px rgba(20,40,70,.14);
}
body.login label { color: var(--sdg-login-navy); font-size: 13px; font-weight: 700; }
body.login .input,
body.login input[type="text"] {
  min-height: 48px;
  border: 1px solid rgba(20,40,70,.28);
  border-radius: 10px;
  background: #fff;
  color: #202124;
  font-size: 17px;
  box-shadow: none;
}
body.login .input:focus,
body.login input[type="text"]:focus,
body.login input[type="checkbox"]:focus,
body.login .button:focus {
  border-color: var(--sdg-login-wine);
  outline: 3px solid rgba(185,154,94,.42);
  outline-offset: 2px;
  box-shadow: none;
}
body.login input[type="checkbox"]:checked { border-color: var(--sdg-login-wine); background: var(--sdg-login-wine); }
body.login input[type="checkbox"]:checked::before { filter: brightness(0) invert(1); }
body.login .button-primary {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--sdg-login-wine);
  border-radius: 999px;
  background: var(--sdg-login-wine);
  font: 800 15px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-shadow: none;
  box-shadow: none;
}
body.login .button-primary:hover { border-color: #5f1d2b; background: #5f1d2b; }
body.login #loginform .submit { clear: both; display: flex; margin: 16px 0 0; padding: 0; }
body.login #loginform .submit .button-primary { float: none; width: 100%; }
body.login #nsl-custom-login-form-main { clear: both; width: 100%; margin: 12px 0 0 !important; }
body.login #nsl-custom-login-form-main .nsl-container,
body.login #nsl-custom-login-form-main .nsl-container-buttons,
body.login #nsl-custom-login-form-main a { box-sizing: border-box; width: 100%; max-width: none; margin: 0 !important; }
body.login #nsl-custom-login-form-main .nsl-container,
body.login #nsl-custom-login-form-main .nsl-container-buttons { display: block; padding: 0 !important; }
body.login #nsl-custom-login-form-main .nsl-container-login-layout-below { padding-top: 0 !important; }
body.login #nsl-custom-login-form-main .nsl-button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--sdg-login-navy);
  border-radius: 999px;
  box-shadow: none;
}
body.login #nsl-custom-login-form-main .nsl-button-svg-container { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); }
body.login #nsl-custom-login-form-main .nsl-button-label-container { box-sizing: border-box; display: block !important; width: 100%; min-width: 0; min-height: 46px; margin: 0 !important; padding: 0 44px; color: #202124; font: 500 16px/46px Roboto, Arial, sans-serif; text-align: center; white-space: nowrap; }
body.login #nsl-custom-login-form-main .nsl-button-label-container b { font: inherit; }
body.login #nsl-custom-login-form-main a[data-plugin="nsl"]:focus-visible { outline: none; }
body.login #nsl-custom-login-form-main a[data-plugin="nsl"]:focus-visible .nsl-button { outline: 3px solid rgba(185,154,94,.42); outline-offset: 3px; }
body.login #wfls-passkey-container { clear: both; margin: 12px 0 0 !important; }
body.login #wfls-passkey-submit {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--sdg-login-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--sdg-login-navy);
  font: 800 15px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: none;
}
body.login #wfls-passkey-submit:hover { background: #edf1f5; }
body.login #nav,
body.login #backtoblog { padding: 0 14px; text-align: center; }
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a { color: var(--sdg-login-muted); }
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover { color: var(--sdg-login-wine); }
body.login .message,
body.login .notice,
body.login #login_error { border-left-color: var(--sdg-login-wine); border-radius: 10px; background: var(--sdg-login-paper); }

@media (max-width: 480px) {
  body.login #login { padding-top: 36px; }
  body.login form { padding: 24px 20px; }
}