/* Careers: roles archive and the single role layout (facts, apply panel, need/get lists).
   Built 1 Oct 2026. Tokens only (var(--...)); loads only on careers views (inc/theme-enqueue.php).
   Lists share the services bullet: a green square with a purple keyline. */

/* Facts: a definition list, label over value, hairlines between rows. */
.ddc-sc.role-facts { display: flex; flex-direction: column; gap: var(--gap-10); }
.ddc-sc .role-facts__list { margin: 0; display: flex; flex-direction: column; }
.ddc-sc .role-facts__row {
  display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--gap-20);
  padding: var(--gap-10) 0; border-bottom: var(--hair) solid var(--line);
}
.ddc-sc .role-facts__row:first-child { border-top: var(--hair) solid var(--line); }
.ddc-sc .role-facts__row dt { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.ddc-sc .role-facts__row dd { margin: 0; color: var(--white); font-weight: 600; line-height: 1.5; }
.ddc-sc .role-facts__closed {
  margin: 0; padding: var(--gap-10) var(--gap-20); border-radius: var(--r-card);
  background: var(--paper); color: var(--white); font-weight: 600;
}

/* Apply: the same purple panel as the service CTA. */
.ddc-sc.role-apply {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-10);
  padding: var(--gap-40) var(--gap-20) var(--gap-20); border-radius: var(--r-card);
  background: var(--ddc-purple); color: var(--white);
}
.ddc-sc .role-apply__title { margin: 0; color: var(--white); }
.ddc-sc .role-apply__text { margin: 0 0 var(--gap-10); color: var(--ddc-purple-soft); }
.ddc-sc .role-apply__text a { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.ddc-sc .role-apply__text a:hover { color: var(--ddc-green); }

/* Need / get: two columns of brand bullets on wide screens. */
.ddc-sc.role-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-40); }
.ddc-sc .role-lists__col { display: flex; flex-direction: column; gap: var(--gap-20); min-width: 0; }
.ddc-sc .role-lists__col .h3 { margin: 0; }
.ddc-sc .role-lists__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ddc-sc .role-lists__list li {
  position: relative; padding: var(--gap-10) 0 var(--gap-10) calc(var(--gap-20) + var(--gap-10));
  border-bottom: var(--hair) solid var(--line); line-height: 1.5; color: var(--body);
}
.ddc-sc .role-lists__list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gap-10) + 0.75em - 6px);
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--ddc-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddc-purple) 70%, transparent);
}

@media (max-width: 767px) {
  .ddc-sc.role-lists { grid-template-columns: minmax(0, 1fr); }
  .ddc-sc .role-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--gap-4); }
}
@media (forced-colors: active) {
  .ddc-sc .role-lists__list li::before { background: CanvasText; box-shadow: none; }
}

/* Role image in the right column (shares the global class with services). */
img.service-media { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: var(--r-card); }
@media (max-width: 767px) { img.service-media { height: auto; aspect-ratio: 4 / 3; } }

/* Apply form (12 Oct 2026): the classic Pro Form widget in the role page's Apply card (#apply). forms.css
   already styles the controls, labels and messages for .elementor-form; this covers what is particular to
   this form: the anchor landing under the fixed nav, the upload field, the required mark, and the submit,
   which is the one button of rules.css R12 (that rule only reached the V4 form's submit). */
#apply { scroll-margin-top: calc(var(--nav-top, 0px) + var(--gap-20)); }
body.role-closed #apply { display: none; }
body .elementor .elementor-form .elementor-mark-required .elementor-field-label::after { color: var(--ddc-green); }
body .elementor .elementor-form .elementor-field-type-upload input[type="file"] { line-height: 1.4; cursor: pointer; }
body .elementor .elementor-form input[type="file"]::file-selector-button {
  margin-right: var(--gap-10); padding: var(--gap-6) var(--gap-20); border: 0; border-radius: var(--r-pill);
  background: var(--ddc-purple); color: var(--white); font: 500 var(--fs-small)/1 var(--font); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
body .elementor .elementor-form input[type="file"]:is(:hover, :focus-visible)::file-selector-button { background: var(--ddc-green-fill, #167A1C); }
body .elementor .elementor-form .elementor-field-type-html p { margin: 0; }
body .elementor .elementor-form .elementor-field-type-html a { color: var(--heading); text-decoration: underline; text-underline-offset: 0.2em; }
body .elementor .elementor-form .elementor-button {
  background-color: var(--ddc-purple); color: var(--white); border-color: var(--ddc-purple);
  min-height: var(--btn-h); padding-inline: var(--gap-20);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
body .elementor .elementor-form .elementor-button:is(:hover, :focus-visible) {
  background-color: var(--ddc-green-fill, #167A1C); color: var(--white); border-color: var(--ddc-green-fill, #167A1C);
}