@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Nunito+Sans:wght@400;500;600;700&display=swap');

:root {
  --linen:       #f4efe5;
  --linen-warm:  #ede6d8;
  --parchment:   #e8dfc8;
  --paper-bright:#fdfaf4;
  --espresso:    #1e1710;
  --ink:         #2d2318;
  --ink-70:      #5a4c3c;
  --ink-45:      #8c7a68;
  --ink-25:      #b8a896;
  --fig:         #6b3d52;
  --fig-glow:    rgba(107,61,82,.1);
  --fig-lt:      #c4a0b0;
  --fig-pale:    #f0e6eb;
  --border:      rgba(30,23,16,.1);
  --border-md:   rgba(30,23,16,.17);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* PAGE */
body.login {
  background: var(--linen) !important;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
}

body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .5;
}

/* LOGO AREA */
#login h1 a,
.login h1 a {
  background-image: url('https://sami-jackson.online/wp-content/uploads/2025/01/cropped-logo-SRJ-2.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  width: 140px !important;
  height: 60px !important;
  display: block !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
}
#login h1 a::after { display: none !important; }

/* FORM WRAPPER */
#login {
  padding: 0 !important;
  width: 100% !important;
  max-width: 380px !important;
  margin-top: 80px !important;
}

#loginform,
#lostpasswordform,
#registerform {
  background: var(--paper-bright) !important;
  border: 1px solid var(--border-md) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(30,23,16,.09) !important;
  padding: 28px 28px 24px !important;
  margin-top: 0 !important;
}

/* LABELS */
.login label {
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-70) !important;
}

/* INPUTS */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background: var(--linen) !important;
  border: 1.5px solid var(--border-md) !important;
  border-radius: 5px !important;
  color: var(--ink) !important;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: .9375rem !important;
  padding: 11px 13px !important;
  box-shadow: none !important;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease) !important;
  -webkit-appearance: none;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--fig-lt) !important;
  box-shadow: 0 0 0 3px var(--fig-glow) !important;
  outline: none !important;
  background: var(--paper-bright) !important;
}

/* SUBMIT BUTTON */
.login .button-primary,
.login input[type="submit"] {
  background: var(--espresso) !important;
  border: 1px solid transparent !important;
  border-radius: 100px !important;
  color: #fff !important;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  box-shadow: 0 2px 12px rgba(30,23,16,.18) !important;
  text-shadow: none !important;
  transition: all 200ms var(--ease) !important;
  cursor: pointer !important;
  height: auto !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
}
.login .button-primary:hover,
.login input[type="submit"]:hover {
  background: var(--fig) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(107,61,82,.28) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.login .button-primary:focus,
.login input[type="submit"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--fig-glow) !important;
}

/* REMEMBER ME */
.login .forgetmenot label {
  font-size: .8rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink-45) !important;
}
.login input[type="checkbox"] {
  accent-color: var(--fig);
}

/* LINKS BELOW FORM */
#nav,
#backtoblog {
  padding: 0 !important;
  text-align: center !important;
  margin-top: 12px !important;
}
#nav a,
#backtoblog a {
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: .82rem !important;
  color: var(--ink-45) !important;
  text-decoration: none !important;
  transition: color 200ms !important;
}
#nav a:hover,
#backtoblog a:hover {
  color: var(--fig) !important;
}

/* ERROR / INFO MESSAGES */
.login .message,
.login .error,
.login .success {
  border-radius: 8px !important;
  border-left: none !important;
  font-family: 'Nunito Sans', system-ui, sans-serif !important;
  font-size: .85rem !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
.login .message { background: var(--linen-warm) !important; color: var(--ink-70) !important; border: 1px solid var(--border-md) !important; }
.login .error   { background: #f9e6e6 !important; color: #8c3030 !important; border: 1px solid rgba(140,48,48,.2) !important; }
.login .success { background: #eefaee !important; color: #1a6e1a !important; border: 1px solid rgba(26,110,26,.2) !important; }

/* LOST PASSWORD LINK */
.login #nav .lost-your-password-link,
.login #nav a[href*="lostpassword"] {
  font-size: .8rem !important;
}

/* PRIVACY POLICY LINK */
.login .privacy-policy-page-link {
  text-align: center !important;
}
.login .privacy-policy-page-link a {
  color: var(--ink-25) !important;
  font-size: .75rem !important;
}

/* RESPONSIVE */
@media (max-width: 480px) {
  #loginform,
  #lostpasswordform { padding: 22px 20px 20px !important; border-radius: 12px !important; }
}