/*
 * Typography for CMS-authored rich content (product descriptions, blog
 * posts, generic pages) — TinyMCE's plain HTML output dropped into a
 * ".rich-content" wrapper. The theme's own CSS only styles specific
 * component classes (.rs-section-title, etc.) — plain <h2>/<p>/<ul> tags
 * inside imported content otherwise fall back to unstyled browser
 * defaults, so this file gives them a look consistent with the rest of
 * the theme (same font, same accent color) at sizes appropriate for
 * in-article headings rather than the theme's oversized hero titles.
 */
.rich-content {
  font-family: var(--rs-ff-body);
  color: var(--rs-text-primary);
  font-size: 17px;
  line-height: 1.8;
}

.rich-content > *:first-child {
  margin-top: 0;
}

.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  font-family: var(--rs-ff-title);
  color: var(--rs-title-primary);
  font-weight: var(--rs-fw-bold);
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 16px;
}

.rich-content h2 {
  font-size: 30px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rs-theme-light-blue);
}

.rich-content h3 {
  font-size: 23px;
}

.rich-content h4 {
  font-size: 19px;
}

.rich-content p {
  font-size: 17px;
  font-family: var(--rs-ff-p);
  color: var(--rs-text-primary);
  margin-bottom: 20px;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 24px 0;
  padding-left: 22px;
}

.rich-content ul {
  list-style: disc;
}

.rich-content ol {
  list-style: decimal;
}

.rich-content li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.rich-content li > ul,
.rich-content li > ol {
  margin-top: 10px;
  margin-bottom: 0;
}

.rich-content strong,
.rich-content b {
  color: var(--rs-title-primary);
  font-weight: var(--rs-fw-sbold);
}

.rich-content a {
  color: var(--rs-theme-light-blue);
  text-decoration: underline;
}

.rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}

.rich-content blockquote {
  border-left: 3px solid var(--rs-theme-light-blue);
  padding: 10px 20px;
  margin: 20px 0;
  color: var(--rs-title-primary);
  font-style: italic;
}

.rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.rich-content table td,
.rich-content table th {
  border: 1px solid var(--rs-border-primary);
  padding: 10px 14px;
  text-align: left;
}

/* FAQ accordions (<details>/<summary>) used on product, blog, and
   content pages — plain elements otherwise render with no visual card. */
.faq-item {
  background: var(--rs-white);
  border: 1px solid var(--rs-border-primary);
  border-radius: 8px;
  padding: 18px 20px;
}

.faq-item summary {
  font-family: var(--rs-ff-title);
  color: var(--rs-title-primary);
}

.faq-item summary::marker {
  color: var(--rs-theme-light-blue);
}

.faq-item p {
  color: var(--rs-text-primary);
  margin: 10px 0 0 0;
}