/* =========================================================================
 * Careers Apply - the role description block
 *
 * Its own file because careers-apply.css is owned by www-data and not
 * writable by this account; loaded straight after it, so these are plain
 * overrides at equal specificity winning on source order.
 *
 * .a3-apply__role-description prints the Job Opening's editor content. That
 * content only became real when the four live roles were imported - until then
 * every job had an empty body and this block never rendered, so two gaps in
 * the original sheet had never shown:
 *
 *   1. global.css:88 resets every ul/ol to list-style:none, so the bullets
 *      were invisible and the responsibilities read as loose lines.
 *   2. No h2 rule, so each section heading fell back to global.css's display
 *      size (var(--h2)) and rendered larger than the page's own title.
 * ========================================================================= */

.a3-apply__role-description ul,
.a3-apply__role-description ol {
  padding-left: 22px;
  list-style: disc;
}

.a3-apply__role-description ol {
  list-style: decimal;
}

.a3-apply__role-description li {
  margin-bottom: 8px;
}

.a3-apply__role-description li:last-child {
  margin-bottom: 0;
}

.a3-apply__role-description h2 {
  margin: 24px 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #18181b;
}

.a3-apply__role-description h3 {
  margin: 20px 0 10px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #18181b;
}

.a3-apply__role-description > :first-child {
  margin-top: 0;
}

@media (max-width: 767px) {

  .a3-apply__role-description h2 {
    margin: 20px 0 10px;
    font-size: 18px;
  }
}