/*
 * The public Careers pages.
 *
 * Written in the same design language as the public Events pages
 * (web/assets/css/events.css): a soft background, generous white cards with a
 * large radius and a soft blue shadow.
 *
 * The variables are redeclared rather than imported, because events.css is only
 * loaded on event pages and a Careers page must not depend on it. Every class is
 * prefixed `cr-` for the same reason: the older public pages redefine generic
 * names like .card and .title inline, and anything unprefixed here would collide
 * with them and with Bootstrap.
 */

:root {
  --cr-primary: #0d6efd;
  --cr-accent: #1c9fd9;
  --cr-bg-soft: #f4fbff;
  --cr-text: #333;
  --cr-muted: #6b7280;
  --cr-line: #e8eef5;
  --cr-radius: 28px;
  --cr-radius-sm: 16px;
  --cr-shadow: 0 18px 40px rgba(13, 110, 253, 0.06);
  --cr-shadow-lift: 0 22px 48px rgba(13, 110, 253, 0.12);
}

.cr-page { background: var(--cr-bg-soft); padding: 40px 0 72px; color: var(--cr-text); }

.cr-wrapper { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.cr-wrapper--wide { max-width: 1120px; }

.cr-card {
  background: #fff;
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow);
  padding: 32px 34px;
  margin-bottom: 24px;
}
.cr-card--tight { padding: 20px 24px; }

/* ------------------------------------------------------------------ listing */

.cr-intro { margin-bottom: 28px; }
.cr-intro h1 { margin: 0 0 10px; }
.cr-intro p { color: var(--cr-muted); margin: 0; max-width: 62ch; }

.cr-role {
  display: block;
  background: #fff;
  border-radius: var(--cr-radius-sm);
  box-shadow: var(--cr-shadow);
  padding: 22px 26px;
  margin-bottom: 16px;
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.cr-role:hover { box-shadow: var(--cr-shadow-lift); transform: translateY(-2px); }

.cr-role h2 { font-size: 20px; margin: 0 0 6px; }
.cr-role h2 a { color: var(--cr-text); text-decoration: none; }
.cr-role h2 a:hover { color: var(--cr-primary); }

.cr-role-summary { color: var(--cr-muted); margin: 8px 0 0; }

/* The row of facts under a role title. */
.cr-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14px; color: var(--cr-muted); }
.cr-meta i { margin-right: 5px; }

/*
 * The deadline. Given its own colour when it is close, because "closes in three
 * days" is the single fact most likely to change what somebody does next.
 */
.cr-deadline { font-weight: 600; }
.cr-deadline--soon { color: #b45309; }

/* --------------------------------------------------------------- the advert */

.cr-title { margin: 0 0 8px; }
.cr-lead { font-size: 18px; color: var(--cr-muted); margin: 0 0 4px; }
.cr-muted { color: var(--cr-muted); }

.cr-facts { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 22px 0 0; }
.cr-fact-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-muted); }
.cr-fact-value { font-size: 16px; }

/* The description, straight out of the editor. Spacing only — the markup is
   whatever the allow-list in EditorHtml permits. */
.cr-prose { line-height: 1.7; }
.cr-prose h3, .cr-prose h4, .cr-prose h5 { margin: 26px 0 10px; }
.cr-prose p { margin: 0 0 14px; }
.cr-prose ul, .cr-prose ol { margin: 0 0 14px; padding-left: 22px; }
.cr-prose li { margin-bottom: 6px; }

/* ----------------------------------------------------------------- the form */

.cr-field { margin-bottom: 18px; }
.cr-label { display: block; font-weight: 600; margin-bottom: 6px; }

/*
 * Off-screen rather than display:none, so a bot that skips hidden fields still
 * fills it. The same trick the events honeypot uses.
 */
.cr-honeypot { position: absolute; left: -9999px; }

.cr-btn {
  background: var(--cr-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-weight: 600;
  cursor: pointer;
}
.cr-btn:hover { background: #0b5ed7; color: #fff; }
.cr-btn:disabled { opacity: .6; cursor: default; }

.cr-file-help { font-size: 13px; color: var(--cr-muted); margin-top: 6px; display: block; }

/* --------------------------------------------------------------- empty state */

.cr-empty { text-align: center; padding: 50px 20px; }
.cr-empty i { font-size: 44px; color: #d7e3ee; display: block; margin-bottom: 14px; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .cr-card { padding: 24px 20px; border-radius: var(--cr-radius-sm); }
  .cr-facts { gap: 14px 24px; }
  .cr-btn { width: 100%; }
}