/*
 * Jeremy Cottingham's sign-in branding. The layout loads this only on
 * login.jeremycottingham.com, after the standard styles, so it overrides
 * colours, font and logo size without changing the page structure.
 * Navy and gold come from jeremycottingham.com and its gold logo.
 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
  --themecolor: #282757;
  --jc-navy: #282757;
  --jc-navy-deep: #1d1c40;
  --jc-gold: #e3c574;
  --jc-gold-dark: #896e20;
}

body,
body .btn,
body .form-control,
body h1,
body h2,
body h3,
body p,
body label {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

body h2 {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Plain navy in place of Racecar's gradient, which custom.css sets with !important. */
body .auth-overlay,
body.dark .auth-overlay {
  background-image: none !important;
  background-color: var(--jc-navy);
}

/*
 * jeremycottingham.com is a light site, so the form side stays light even when
 * the page template has switched to dark mode (its default).
 */
body,
body.dark {
  background-color: #ffffff;
  color: #4a4a5e;
}

body h2,
body.dark h2 {
  color: var(--jc-navy);
}

body p,
body.dark p,
body .form-check-label,
body.dark .form-check-label {
  color: #5c5c70;
}

body .form-control,
body.dark .form-control {
  background-color: #ffffff;
  color: var(--jc-navy);
  border: 1px solid #d4d4de;
  border-radius: 2px;
}

body .form-control::placeholder,
body.dark .form-control::placeholder {
  color: #8a8a9c;
}

body .form-check-input,
body.dark .form-check-input {
  background-color: #ffffff;
  border-color: #b4b4c4;
}

.auth-cover img.auth-logo {
  width: min(400px, 80%);
  height: auto;
}

.auth-logo.w-100 {
  max-width: 320px;
}

body .btn-primary,
body.dark .btn-primary {
  color: #ffffff !important;
  border-radius: 2px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(40, 39, 87, 0.18);
}

body .btn-primary:hover,
body .btn-primary:focus-visible,
body.dark .btn-primary:hover,
body.dark .btn-primary:focus-visible {
  background-color: var(--jc-navy-deep) !important;
  border-color: var(--jc-gold) !important;
  box-shadow: 0 0 0 0.15rem rgba(227, 197, 116, 0.45);
}

body .form-control:focus {
  border-color: var(--jc-navy);
  box-shadow: 0 0 0 0.2rem rgba(40, 39, 87, 0.2);
}

body.dark .form-control:focus {
  background-color: #ffffff;
  border-color: var(--jc-navy);
  box-shadow: 0 0 0 0.2rem rgba(40, 39, 87, 0.2);
}

body a,
body.dark a {
  color: var(--jc-navy);
}