/* Project-wide Chinese typography guard.
   JavaScript groups the final six content graphemes into one unbreakable tail
   together; these wrapping rules improve the preceding line distribution. */
:where(h1, h2, h3, h4, h5, h6, [data-orphan-guard="balance"]) {
  text-wrap: balance;
}

:where(
  p,
  li,
  blockquote,
  figcaption,
  dt,
  dd,
  strong,
  .gateway-card-copy,
  .entry-helper-line,
  .accordion-answer,
  .accordion-answer > div,
  [data-slot="accordion-content"] > div,
  .body,
  .body-large,
  [data-orphan-guard="pretty"]
) {
  text-wrap: pretty;
}

[data-orphan-tail] {
  display: inline !important;
  white-space: nowrap !important;
}

[data-orphan-tail] :where(*) {
  display: inline !important;
  white-space: inherit !important;
}

@media (max-width: 640px) {
  body:is([data-page="company"], [data-page="careers"], [data-page="jobseeker"], [data-page="employer"]) .hero h1 {
    max-width: 100%;
    font-size: clamp(24px, 8.2vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap;
  }

  body[data-page] h2[data-orphan-guarded="true"] {
    font-size: clamp(20px, 6.6vw, 28px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
  }
}

@supports not (text-wrap: pretty) {
  :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dt, dd) {
    overflow-wrap: normal;
  }
}
