/*
 * Makes the CKEditor5 chrome match dashboard typography/tokens and behave in
 * both LTR and RTL. Loaded only on pages that render a CKEditor5Widget.
 */
.dsh-ckeditor-wrap .ck.ck-editor { font-family: var(--dsh-font-sans, inherit); }
.dsh-ckeditor-wrap .ck.ck-editor__main > .ck-editor__editable {
  min-height: 260px;
  max-height: 560px;
  overflow-y: auto;
  font-size: var(--dsh-fs-body, .9375rem);
  border-radius: 0 0 var(--dsh-radius-md, 8px) var(--dsh-radius-md, 8px);
}
.dsh-ckeditor-wrap .ck.ck-toolbar {
  border-radius: var(--dsh-radius-md, 8px) var(--dsh-radius-md, 8px) 0 0;
  flex-wrap: wrap;
}
.dsh-ckeditor-wrap .ck.ck-editor__editable.ck-focused {
  box-shadow: var(--dsh-focus-ring, 0 0 0 3px rgba(79,70,229,.25)) !important;
  border-color: var(--dsh-primary, #4f46e5) !important;
}
.dsh-ckeditor-wrap.is-invalid .ck.ck-editor__editable {
  border-color: var(--dsh-danger, #dc2626) !important;
}
.dsh-ckeditor-wrap[dir="rtl"] .ck-content { text-align: right; }
.dsh-ckeditor-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; border: 1px dashed var(--dsh-border, #e5e7eb);
  border-radius: var(--dsh-radius-md, 8px); color: var(--dsh-text-muted, #6b7280);
  font-size: var(--dsh-fs-help, .8125rem);
}

/* Public-site rendered content (blog_detail.html, book_detail.html) reuses
   the same rhythm. Falls back through the dashboard tokens (--dsh-*) then
   the public design-system tokens (--ds-*) since this stylesheet is loaded
   on both, and only one token set is ever actually defined on a given page. */
.dsh-prose {
  font-size: 1.05rem; line-height: 1.8;
  color: #000;
}
.dsh-prose p { margin-block-end: 1.1em; color:#000}
.dsh-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.dsh-prose h2, .dsh-prose h3 {
  margin-top: 1.5em; color: #000;
}
.dsh-prose table { max-width: 100%; display: block; overflow-x: auto; }
.dsh-prose a { color: var(--dsh-primary, var(--ds-primary-text, inherit)); }

/* Dashboard (dark admin) and public dark-theme both fall back to the
   light/cream text tokens instead of the hardcoded light-mode black above. */
[data-bs-theme="dark"] .dsh-prose,
[data-bs-theme="dark"] .dsh-prose h2,
[data-bs-theme="dark"] .dsh-prose h3,
[data-theme="dark"] .dsh-prose,
[data-theme="dark"] .dsh-prose h2,
[data-theme="dark"] .dsh-prose h3 {
  color: var(--dsh-text, var(--ds-text, inherit));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dsh-prose,
  :root:not([data-theme="light"]) .dsh-prose h2,
  :root:not([data-theme="light"]) .dsh-prose h3 {
    color: var(--dsh-text, var(--ds-text, inherit));
  }
}