/*
 * job-doc.css — the SINGLE source of truth for HTML career detail pages.
 *
 * Every /careers/<slug>.html is produced by scripts/normalize-career-doc.py,
 * which strips the per-export Google Docs styles + random class names and emits
 * clean semantic HTML (h2 / h3 / p / ul / li / strong / a.apply-btn) styled
 * only by this file. That is what keeps all HTML detail pages identical to each
 * other and aligned with the structured JobDetail.tsx pages.
 *
 * The page renders inside HtmlDetail.tsx's same-origin iframe, so it must load
 * its own font — the iframe does not inherit the parent document's styles.
 *
 * Fonts follow @1money/component-ui Typography (the design-system source of
 * truth): Headline uses Aeonik, Body/Title use Inter. Both are self-hosted from
 * /fonts/* exactly as the app loads them, because the iframe is a separate
 * document and inherits neither the parent's fonts nor its CSS variables.
 *
 * Canonical values mirror JobDetail.tsx:
 *   - section heading (h2)  = Headline lg  → Aeonik 32px / 108% / 500 / #131313
 *   - body / list text      = Inter 18px / 160% / #1a1a1a
 *   - sub-label (h3)        = Inter 18px / 160% / 700 / #131313
 */

@font-face {
  font-family: aeonik;
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Aeonik/Aeonik-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aeonik;
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Aeonik/Aeonik-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aeonik;
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/Aeonik/Aeonik-Bold.ttf') format('truetype');
  font-display: swap;
}

/* Inter — the same variable font next/font self-hosts for the app. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  src: url('/fonts/Inter/InterVariable.woff2') format('woff2');
  font-display: swap;
}

.job-doc {
  margin: 0;
  padding: 0;
  max-width: none;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 160%;
  font-weight: 400;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Section heading — matches JobDetail's Typography.Headline size="lg" (Aeonik). */
.job-doc h2 {
  margin: 44px 0 24px;
  font-family: aeonik, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 32px;
  line-height: 108%;
  font-weight: 500;
  color: #131313;
}
.job-doc > h2:first-child {
  margin-top: 0;
}

/* Sub-label inside a section (e.g. "Required:", "Preferred:"). Bold body color
   (#1a1a1a) — matches JobDetail's bold labels, NOT the darker heading color. */
.job-doc h3 {
  margin: 24px 0 8px;
  font-size: 18px;
  line-height: 160%;
  font-weight: 700;
  color: #1a1a1a;
}

.job-doc p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 160%;
  color: #1a1a1a;
}

.job-doc ul,
.job-doc ol {
  margin: 0 0 16px;
  padding-left: 27px;
  list-style: disc;
}
.job-doc ol {
  list-style: decimal;
}

.job-doc li {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 160%;
  color: #1a1a1a;
}
.job-doc li:last-child {
  margin-bottom: 0;
}

/* A list item that is itself a bold group lead, with its detail bullets nested
   underneath (e.g. "Transaction Monitoring & Screening"). */
.job-doc li.lead {
  list-style: none;
  margin-left: -27px;
  font-weight: 700;
  color: #1a1a1a;
}

.job-doc strong,
.job-doc b {
  font-weight: 700;
  color: #1a1a1a;
}

.job-doc a {
  color: #073387;
  text-decoration: underline;
}

/* The Apply call-to-action — matches the component-ui primary Button JobDetail
   renders: fixed 132×52, flex-centered, 12px radius, 16px/400 Inter on #073387. */
.job-doc a.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 52px;
  margin: 8px 0 0;
  border-radius: 12px;
  background: #073387;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

/* Equal-opportunity statement that closes every posting. */
.job-doc p.eeo {
  margin-top: 44px;
  font-size: 14px;
  line-height: 140%;
  color: #1a1a1a;
}