/* ==========================================================================
   Careers microsite inside the main site.
   --------------------------------------------------------------------------
   careers.css is the designers' handover, kept as delivered; this file holds what
   running it inside base_public.html needs. Load it before careers.css.
   ========================================================================== */

/* The main site styles bare elements (a, span, li { font-size: 1.4em }, p, h1-h6,
   Bootstrap's heading margins...). Put every property those rules touch back to
   the browser default inside the microsite, which is what careers.css was built
   against. .c-page :where(*) is one class of specificity: enough to beat the
   element rules, and careers.css's own class rules still win as they load later. */
.c-page { letter-spacing: normal; }
.c-page :where(*) {
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  color: revert;
  margin: revert;
  padding: revert;
  border: revert;
  min-width: revert;
  vertical-align: revert;
}
.c-page select option { color: var(--ink); }
/* The main site's script marks selects .noValue and greys them out. */
.c-page select.noValue { color: var(--ink); }

/* Reset bottom margin on navigation */
#navigation { margin-bottom: 0; }

/* The Talent Community button that replaced the job alert form (see the doc). */
.c-capture__actions { flex: 1.3 1 460px; display: flex; justify-content: flex-end; }

/* A job row lists each of the job's website categories as dot and label. */
.c-job__area { flex-wrap: wrap; }
.c-job__area-item { display: inline-flex; align-items: center; gap: 10px; }

/* A job list with no open roles. */
.c-joblist__empty { padding: 28px clamp(18px, 2.4vw, 30px); text-align: center; color: var(--ink); }
.c-joblist__empty p { margin: 0 0 12px; }
.c-list-head__sort { margin: 0; }