/**
 * Shared HTML styling: course page body (view) + TinyMCE editor iframe.
 * Selectors must stay aligned — TinyMCE uses body.mce-content-body inside the iframe.
 */
.course-page-body,
body.mce-content-body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #0f172a;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dark .course-page-body {
  color: #e2e8f0;
}

.course-page-body p,
body.mce-content-body p {
  margin: 0 0 1em;
}

.course-page-body p:last-child,
body.mce-content-body p:last-child {
  margin-bottom: 0;
}

.course-page-body h1,
body.mce-content-body h1 {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.67em 0 0.5em;
}

.course-page-body h2,
body.mce-content-body h2 {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.3;
  margin: 1em 0 0.5em;
}

.course-page-body h3,
body.mce-content-body h3 {
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.35;
  margin: 1em 0 0.5em;
}

.course-page-body h4,
.course-page-body h5,
.course-page-body h6,
body.mce-content-body h4,
body.mce-content-body h5,
body.mce-content-body h6 {
  font-size: 1em;
  font-weight: 700;
  margin: 1em 0 0.5em;
}

.course-page-body ul,
.course-page-body ol,
body.mce-content-body ul,
body.mce-content-body ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.course-page-body li,
body.mce-content-body li {
  margin: 0.25em 0;
}

.course-page-body blockquote,
body.mce-content-body blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

.dark .course-page-body blockquote {
  border-left-color: #64748b;
  background: #1e293b;
  color: #cbd5e1;
}

/* Inline / code — matches typical TinyMCE “Formats → Inline → Code” */
.course-page-body code,
body.mce-content-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.925em;
  background-color: #f1f5f9;
  color: #0f172a;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
}

.dark .course-page-body code {
  background-color: #334155;
  color: #f1f5f9;
  border-color: #475569;
}

.course-page-body pre,
body.mce-content-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 1em 0;
  line-height: 1.5;
}

.dark .course-page-body pre {
  background: #1e293b;
  border-color: #475569;
  color: #e2e8f0;
}

.course-page-body pre code,
body.mce-content-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Tables — respect author inline styles; provide sensible defaults */
.course-page-body table,
body.mce-content-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  box-sizing: border-box;
}

.course-page-body th,
.course-page-body td,
body.mce-content-body th,
body.mce-content-body td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  vertical-align: top;
}

.dark .course-page-body th,
.dark .course-page-body td {
  border-color: #64748b;
}

.course-page-body th,
body.mce-content-body th {
  font-weight: 600;
  background: #f1f5f9;
}

.dark .course-page-body th {
  background: #334155;
}

.course-page-body img,
body.mce-content-body img {
  max-width: 100%;
  height: auto;
}

.course-page-body a,
body.mce-content-body a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .course-page-body a {
  color: #60a5fa;
}

.course-page-body hr,
body.mce-content-body hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 1.5em 0;
}

.dark .course-page-body hr {
  border-top-color: #475569;
}