/*
 * Guideline content typography.
 *
 * Contract: pcg_documentation/typography-spec.md (shared with pcg_mobile).
 * Closed HTML vocabulary: h2 h3 p ul ol li strong em br a
 *
 * `.guideline-body` styles rich-text guideline bodies (Action Text output);
 * `trix-content` gets the same rules so authoring WYSIWYG matches the reader.
 * The standalone classes (`.guideline-title`, `.guideline-section-title`,
 * `.guideline-item`, `.guideline-meta`) expose the same scale to structured
 * renderers (procedures, step previews) without imposing layout or color.
 *
 * Colors come from the ems theme variables — no hardcoded content colors.
 */

/* -- Standalone scale classes (typography only; no margins, no colors) -- */

.guideline-title {
  font-family: "Saira Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  line-height: 1.2;
}

.guideline-section-title {
  font-family: "Saira Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3125rem; /* 21px */
  font-weight: 600;
  line-height: 1.25;
}

.guideline-item {
  font-family: "Saira", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.45;
}

.guideline-meta {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* -- Rich text body component -- */

.guideline-body,
.trix-content {
  font-family: "Saira", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--ems-text);
  max-width: 72ch;
  margin-inline: auto;
}

.guideline-body h2,
.trix-content h1,
.trix-content h2 {
  font-family: "Saira Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3125rem; /* 21px */
  font-weight: 600;
  line-height: 1.25;
  margin: 32px 0 12px;
}

.guideline-body h3,
.trix-content h3 {
  font-family: "Saira Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  line-height: 1.3;
  margin: 20px 0 8px;
}

.guideline-body > :first-child,
.trix-content > :first-child {
  margin-top: 0;
}

.guideline-body p,
.trix-content p {
  margin: 0 0 12px;
}

.guideline-body p:last-child,
.trix-content p:last-child {
  margin-bottom: 0;
}

.guideline-body ul,
.guideline-body ol,
.trix-content ul,
.trix-content ol {
  margin: 0 0 12px;
  padding-left: 1rem; /* 16px indent per nesting level */
  line-height: 1.45;
  list-style-position: outside;
}

.guideline-body li,
.trix-content li {
  line-height: 1.45;
}

.guideline-body li + li,
.trix-content li + li {
  margin-top: 4px;
}

.guideline-body li > ul,
.guideline-body li > ol,
.trix-content li > ul,
.trix-content li > ol {
  margin: 4px 0 0;
}

/* Unordered markers: • then ◦ then ▪ */
.guideline-body ul,
.trix-content ul {
  list-style-type: disc;
}

.guideline-body ul ul,
.trix-content ul ul {
  list-style-type: circle;
}

.guideline-body ul ul ul,
.trix-content ul ul ul {
  list-style-type: square;
}

/* Ordered markers: decimal, lower-alpha, lower-roman */
.guideline-body ol,
.trix-content ol {
  list-style-type: decimal;
}

.guideline-body ol ol,
.trix-content ol ol {
  list-style-type: lower-alpha;
}

.guideline-body ol ol ol,
.trix-content ol ol ol {
  list-style-type: lower-roman;
}

.guideline-body strong,
.trix-content strong {
  font-weight: 600;
}

.guideline-body em,
.trix-content em {
  font-style: italic;
}

.guideline-body a,
.trix-content a {
  font-weight: 500;
  color: var(--ems-primary);
  text-decoration: none;
}

.guideline-body a:hover,
.trix-content a:hover {
  text-decoration: underline;
}