/* =============================================================================
   Employer login / sign-up in the CoreHRx Jobs look
   -----------------------------------------------------------------------------
   Loaded by smarty/templates/login.tpl and signup.tpl ONLY when the page is opened
   with ?from=job (the "Hiring? Post jobs with CoreHRx" link in the job footer); the
   body then carries .kx-auth-job. A normal /login/ or /signup/ never loads this file
   and keeps the admin theme. Presentation only: no id, field, script or flow changes.
   Every rule is scoped to .corehrx-login-page.kx-auth-job, one class more specific
   than the pages' own inline styles.
   ============================================================================= */

.corehrx-login-page.kx-auth-job {
  /* the pages' own tokens, switched to the job module's blue */
  --chx-accent: #1F6FC5;
  --chx-accent-dark: #185DA8;
  --chx-accent-soft: rgba(31, 111, 197, .14);
  --chx-bg: #F5F7FA;
  --chx-border: #E2E4E7;
  --chx-text: #0F2340;
  --chx-muted: #63778F;
  --kx-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --kx-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-family: var(--kx-body);
}
.corehrx-login-page.kx-auth-job,
.corehrx-login-page.kx-auth-job input,
.corehrx-login-page.kx-auth-job select,
.corehrx-login-page.kx-auth-job textarea,
.corehrx-login-page.kx-auth-job button { font-family: var(--kx-body); }

.corehrx-login-page.kx-auth-job h2,
.corehrx-login-page.kx-auth-job .login-container .right-panel .center-content .item-text {
  font-family: var(--kx-display);
  letter-spacing: -.03em;
}

/* left panel = the job landing page's blue band with its dot grid */
.corehrx-login-page.kx-auth-job .login-container .left-panel {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23ffffff' fill-opacity='0.16'/%3E%3C/svg%3E") repeat,
    radial-gradient(820px 440px at 88% -30%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(640px 440px at 4% 150%, rgba(125, 205, 255, .26), transparent 62%),
    linear-gradient(135deg, #2A7ED0 0%, #14508F 54%, #0C2E5C 100%);
}
.corehrx-login-page.kx-auth-job .login-container .left-panel::before { background: none; }
.corehrx-login-page.kx-auth-job .login-container .left-panel .phone-img { display: none; }
.corehrx-login-page.kx-auth-job .login-brand-badge i { color: #FFB78F; }
.corehrx-login-page.kx-auth-job .login-container .left-panel .back-image h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(6, 26, 54, .28);
}
.corehrx-login-page.kx-auth-job .login-container .left-panel .back-image h2 .kx-hl { color: #FFB78F; }
.corehrx-login-page.kx-auth-job .login-container .left-panel .back-image p { color: #C3D9F4; }
.corehrx-login-page.kx-auth-job .login-feature-list li { color: rgba(255, 255, 255, .92); }
.corehrx-login-page.kx-auth-job .login-feature-list li i {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .2);
}

/* right panel: the CoreHRx Jobs wordmark (as in the job header) and a way back */
.corehrx-login-page.kx-auth-job .kx-auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.corehrx-login-page.kx-auth-job .corehrx-signup-top { max-width: 640px; }
.corehrx-login-page.kx-auth-job .kx-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.corehrx-login-page.kx-auth-job .kx-auth-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #1F6FC5;
}
.corehrx-login-page.kx-auth-job .kx-auth-brand-mark img {
  display: block;
  width: 23px;
  height: auto;
  filter: brightness(0) invert(1);
}
.corehrx-login-page.kx-auth-job .kx-auth-brand-word {
  font: 800 23px/1 var(--kx-display);
  letter-spacing: -.03em;
  color: #0F2340;
  white-space: nowrap;
}
.corehrx-login-page.kx-auth-job .kx-auth-brand-word > span { font-weight: 600; color: #1A5FAA; }
.corehrx-login-page.kx-auth-job .kx-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #36506F;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.corehrx-login-page.kx-auth-job .kx-auth-back:hover { color: #1A5FAA; text-decoration: underline; }

/* buttons, links, focus rings: the orange that was hard-coded next to the tokens */
.corehrx-login-page.kx-auth-job .login-container .right-panel .center-content .continueBtn {
  background: #1F6FC5;
  border-color: #1F6FC5;
}
.corehrx-login-page.kx-auth-job .login-container .right-panel .center-content .continueBtn:hover { background: #185DA8; }
.corehrx-login-page.kx-auth-job .login-phone-wrap:focus-within { border-color: #1F6FC5; }
.corehrx-login-page.kx-auth-job .login-container .right-panel .center-content .terms a,
.corehrx-login-page.kx-auth-job .login-container .right-panel .center-content .login-input .changenubmer { color: #1A5FAA; }

@media screen and (max-width: 640px) {
  .corehrx-login-page.kx-auth-job .kx-auth-brand-word { font-size: 20px; }
  .corehrx-login-page.kx-auth-job .kx-auth-brand-mark { width: 30px; height: 30px; }
  .corehrx-login-page.kx-auth-job .kx-auth-back span { display: none; }
}