/* ===================================================================
   Careers page (page-careers.html) — loaded by that page only.
   Built on the referral page's pieces (.ref-hero, .ref-title,
   .ref-steps, .ref-faq in custom.css §46) and the site's tokens.
   =================================================================== */
.careers-page { padding-block: 70px 90px; background: var(--surface); }
.careers-page .ref-hero__lead { font-size: 19px; line-height: 1.9; color: var(--ink-muted); margin: 10px 0 26px; }
.careers-page .ref-title { font-size: 28px; color: var(--ink); margin: 0 0 26px; text-align: center; }
.careers-page .ref-step h3 { font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.careers-page .ref-step p { margin: 0; color: var(--ink-muted); line-height: 1.75; }
.careers-page .ref-faq p { margin: 10px 0 0; color: var(--ink-muted); line-height: 1.8; }
.car-anchor { scroll-margin-top: 110px; }
.careers-page .car-lead { max-width: 760px; margin: -12px auto 28px; text-align: center; color: var(--ink-muted); line-height: 1.8; }

/* ---- hiring now (filled from includes/careers-open.json) ---- */
.car-open { margin: 0 auto 56px; max-width: 900px; }
.car-open__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.car-open__list button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--brand-gold); color: #1A1332; font-weight: 700; font-size: 15px;
}
.car-open__list button small { font-weight: 500; opacity: .75; }
.car-open__list button:hover { background: var(--brand-gold-hover); }

/* ---- why ---- */
.car-why {
  list-style: none; padding: 0; margin: 0 0 60px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.car-why__item { padding: 26px 22px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.careers-page .car-why__item h3 { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.careers-page .car-why__item p { margin: 0; color: var(--ink-muted); line-height: 1.75; font-size: 15px; }

/* ---- departments ---- */
.car-depts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 60px; }
.car-dept { padding: 26px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); }
.car-dept__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.car-dept__icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(102, 51, 153, .1); color: var(--theme-color1);
}
.car-dept__icon svg { width: 24px; height: 24px; }
.careers-page .car-dept__name { font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.careers-page .car-dept__desc { margin: 0; color: var(--ink-muted); line-height: 1.7; font-size: 15px; }
.car-roles { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.car-role {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: start;
  transition: border-color .15s, background-color .15s, color .15s;
}
.car-role:hover, .car-role:focus-visible { border-color: var(--theme-color1); color: var(--theme-color1); }
.car-role.is-open { border-color: var(--brand-gold); }
.car-role__badge { padding: 2px 8px; border-radius: 999px; background: var(--brand-gold); color: #1A1332; font-size: 11px; font-weight: 800; }

.car-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* ---- the form ---- */
.car-apply { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px 32px; align-items: start; margin-bottom: 60px; }
.car-apply > .ref-title { grid-column: 1 / -1; margin-bottom: 0; }
.car-form { padding: 30px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); }
.car-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.car-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }
.car-field__label { display: block; }
.car-field b, .car-file__label b { color: #C0392B; font-weight: 700; }
.car-field--wide { grid-column: 1 / -1; }
.car-field[hidden] { display: none; }
.car-field input, .car-field select, .car-field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 400;
}
.car-field textarea { min-height: 110px; resize: vertical; }
.car-field input:focus, .car-field select:focus, .car-field textarea:focus {
  outline: none; border-color: var(--theme-color1); box-shadow: 0 0 0 3px rgba(102, 51, 153, .15);
}
.car-field .is-invalid, .car-file__box.is-invalid { border-color: #C0392B; }
.car-file__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.car-file__label small { font-weight: 400; color: var(--ink-muted); }
.car-file__box {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: 14px; cursor: pointer; background: var(--surface);
}
.car-file__box:hover { border-color: var(--theme-color1); }
.car-file__box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.car-file__btn { flex: none; padding: 9px 16px; border-radius: 10px; background: var(--theme-color1); color: #fff; font-weight: 700; font-size: 14px; }
.car-file__name { color: var(--ink-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-file__box.has-file .car-file__name { color: var(--ink); font-weight: 600; }
.car-consent { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; font-size: 14px; color: var(--ink-muted); line-height: 1.7; cursor: pointer; }
.car-consent input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--theme-color1); }
.car-form__msg { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; font-weight: 600; line-height: 1.7; }
.car-form__msg.is-ok { background: rgba(39, 174, 96, .12); color: #1E8449; }
.car-form__msg.is-error { background: rgba(192, 57, 43, .1); color: #C0392B; }
.car-form__send { margin-top: 20px; width: 100%; }
.car-form__send[disabled] { opacity: .65; cursor: progress; }
.car-privacy { padding: 26px; border-radius: 20px; background: var(--theme-color2); position: sticky; top: 110px; }
.careers-page .car-privacy h3 { font-size: 19px; color: #fff; margin: 0 0 10px; }
.careers-page .car-privacy p { margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.85; font-size: 15px; }
.careers-page .car-privacy a { color: var(--brand-gold); }

@media (max-width: 1199.98px) {
  .car-why, .car-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 991.98px) {
  .car-depts, .car-apply { grid-template-columns: minmax(0, 1fr); }
  .car-privacy { position: static; }
}
@media (max-width: 575.98px) {
  .careers-page { padding-block: 50px 70px; }
  .car-why, .car-steps, .car-form__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .car-form, .car-dept { padding: 20px; }
  .careers-page .ref-title { font-size: 24px; }
}

html[data-theme="dark"] .car-dept__icon { background: rgba(180, 139, 224, .14); color: #B48BE0; }
html[data-theme="dark"] .car-role:hover, html[data-theme="dark"] .car-role:focus-visible { border-color: #B48BE0; color: #C9AAEA; }
html[data-theme="dark"] .car-privacy { background: var(--surface-2); border: 1px solid var(--line); }
html[data-theme="dark"] .car-file__btn { background: #7D4FB3; }
html[data-theme="dark"] .car-form__msg.is-ok { color: #6FD39A; }
html[data-theme="dark"] .car-form__msg.is-error, html[data-theme="dark"] .car-field b { color: #F08A7E; }