/**
 * Rich prose — course / blog / landing descriptions (guides-quality typography)
 * Scope: .dm-rich-prose + known content containers
 */

html[data-theme="light"] {
  --dm-prose-bg: #ffffff;
  --dm-prose-surface: #fafafa;
  --dm-prose-text: #242424;
  --dm-prose-muted: #757575;
  --dm-prose-heading: var(--dm-purple, #9e12b1);
  --dm-prose-link: var(--dm-purple, #9e12b1);
  --dm-prose-link-hover: var(--dm-purple-deep, #7a0e8c);
  --dm-prose-border: #e6e6e6;
  --dm-prose-callout-bg: linear-gradient(135deg, rgba(158, 18, 177, 0.06) 0%, rgba(245, 245, 220, 0.65) 100%);
  --dm-prose-callout-border: rgba(158, 18, 177, 0.22);
  --dm-prose-highlight-bg: rgba(158, 18, 177, 0.08);
  --dm-prose-highlight-border: rgba(158, 18, 177, 0.2);
  --dm-prose-code-bg: #f6f8fa;
  --dm-prose-code-border: #e1e4e8;
  --dm-prose-code-text: #24292f;
  --dm-prose-inline-code-bg: rgba(27, 31, 35, 0.06);
  --dm-prose-font: "IRANSansWeb", "Tahoma", sans-serif;
  --dm-prose-mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  --dm-prose-body-size: 1.25rem;
  --dm-prose-body-lh: 3.5rem;
  --dm-prose-para-gap: 1.5em;
  --dm-prose-title-bar: rgba(43, 114, 206, 0.2);
}

html[data-theme="dark"] {
  --dm-prose-bg: transparent;
  --dm-prose-surface: var(--dm-bg-card, #23262d);
  --dm-prose-text: rgba(255, 255, 255, 0.9);
  --dm-prose-muted: rgba(255, 255, 255, 0.55);
  --dm-prose-heading: var(--dm-accent, #ffd700);
  --dm-prose-link: var(--dm-accent, #ffd700);
  --dm-prose-link-hover: #ffffff;
  --dm-prose-border: rgba(255, 255, 255, 0.12);
  --dm-prose-callout-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  --dm-prose-callout-border: rgba(255, 215, 0, 0.28);
  --dm-prose-highlight-bg: rgba(255, 215, 0, 0.12);
  --dm-prose-highlight-border: rgba(255, 215, 0, 0.28);
  --dm-prose-code-bg: #1b1b1b;
  --dm-prose-code-border: #3d3d3d;
  --dm-prose-code-text: #e6edf3;
  --dm-prose-inline-code-bg: rgba(240, 246, 252, 0.08);
  --dm-prose-font: "IRANSansWeb", "Tahoma", sans-serif;
  --dm-prose-mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  --dm-prose-body-size: 1.25drem;
  --dm-prose-body-lh: 3.5rem;
  --dm-prose-para-gap: 1.5em;
  --dm-prose-title-bar: rgba(255, 215, 0, 0.22);
}
.dm-rich-prose,
.introduction__Description,
.Blog__Right-Article-Description-Text,
.Blog__Right-Article-Items-Description {
  font-family: var(--dm-prose-font);
  font-size: var(--dm-prose-body-size);
  line-height: var(--dm-prose-body-lh);
  color: var(--dm-prose-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Course intro shell ── */
.coursePage__Description-Introduce {
  border-radius: 1rem;
  border: 1px solid var(--dm-prose-border);
  background: var(--dm-prose-surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .FullStack .coursePage__Description-Introduce,
html[data-theme="dark"] .coursePage .coursePage__Description-Introduce {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* ── Section titles — highlight bar (::after), no side bar (::before) ── */
.introduction .introduction__Title,
.introduction .introduction__Title.Section__Title,
.introduction .introduction__Title.Section__Title-Header,
.coursePage__Description-Introduce .introduction__Title,
.coursePage__Description-Introduce .introduction__Title.Section__Title,
.coursePage__Description-Introduce .introduction__Title.Section__Title-Header {
  display: block !important;
  position: relative;
  margin: 2.5rem 0 1rem;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  font-family: var(--dm-prose-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--dm-prose-heading) !important;
}

.introduction .introduction__Title:first-child,
.coursePage__Description-Introduce .introduction__Title:first-child {
  margin-top: 0;
  font-size: 2.2rem;
}

/* Vertical accent bar — hide on course intro titles */
.introduction .introduction__Title::before,
.introduction .Section__Title::before,
.coursePage__Description-Introduce .introduction__Title::before,
.coursePage__Description-Introduce .Section__Title::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Bottom highlight bar (legacy Section__Title-Header::after) */
.introduction .introduction__Title.Section__Title-Header::after,
.coursePage__Description-Introduce .introduction__Title.Section__Title-Header::after {
  content: "" !important;
  display: block !important;
  width: 100%;
  max-width: 25rem;
  background-color: var(--dm-prose-title-bar) !important;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  border: none !important;
  transform: none;
}

/* ── Paragraphs & lists ── */
.dm-rich-prose p,
.introduction__Description p,
.Blog__Right-Article-Description-Text p,
.Blog__Right-Article-Items-Description p {
  font-size: var(--dm-prose-body-size) !important;
  line-height: var(--dm-prose-body-lh) !important;
  margin: 0 0 var(--dm-prose-para-gap);
  text-align: start !important;
  letter-spacing: 0.01em;
  color: var(--dm-prose-text);
}

.dm-rich-prose p:empty,
.introduction__Description p:empty,
.Blog__Right-Article-Description-Text p:empty,
.Blog__Right-Article-Items-Description p:empty,
.dm-rich-prose div:empty,
.introduction__Description div:empty,
.Blog__Right-Article-Description-Text div:empty,
.Blog__Right-Article-Items-Description div:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: none !important;
}

/* CKEditor spacer blocks: background style but no real content */
.dm-rich-prose p[style*="background"]:empty,
.dm-rich-prose div[style*="background"]:empty,
.introduction__Description p[style*="background"]:empty,
.introduction__Description div[style*="background"]:empty,
.Blog__Right-Article-Description-Text p[style*="background"]:empty,
.Blog__Right-Article-Description-Text div[style*="background"]:empty,
.Blog__Right-Article-Items-Description p[style*="background"]:empty,
.Blog__Right-Article-Items-Description div[style*="background"]:empty {
  display: none !important;
}

.introduction__Description:empty,
.dm-rich-prose:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dm-rich-prose p:last-child,
.introduction__Description p:last-child,
.Blog__Right-Article-Description-Text p:last-child,
.Blog__Right-Article-Items-Description p:last-child {
  margin-bottom: 0;
}

.dm-rich-prose h2,
.introduction__Description h2,
.Blog__Right-Article-Description-Text h2,
.Blog__Right-Article-Items-Description h2 {
  font-family: var(--dm-prose-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
  padding: 0;
  border: none !important;
  border-bottom: none !important;
  color: var(--dm-prose-heading) !important;
}

.dm-rich-prose h2::before,
.introduction__Description h2::before {
  display: none !important;
}

.dm-rich-prose h3,
.introduction__Description h3,
.Blog__Right-Article-Description-Text h3,
.Blog__Right-Article-Items-Description h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 2rem 0 0.85rem;
  padding: 0;
  border: none !important;
  color: var(--dm-prose-heading) !important;
}

.dm-rich-prose h4,
.introduction__Description h4 {
  font-size: 1.55rem;
  font-weight: 600;
  margin: 1.75rem 0 0.65rem;
  color: var(--dm-prose-heading) !important;
}

.dm-rich-prose ul,
.dm-rich-prose ol,
.introduction__Description ul,
.introduction__Description ol,
.Blog__Right-Article-Description-Text ul,
.Blog__Right-Article-Description-Text ol,
.Blog__Right-Article-Items-Description ul,
.Blog__Right-Article-Items-Description ol {
  margin: 0 0 var(--dm-prose-para-gap);
  padding-inline-start: 2rem;
}

.dm-rich-prose li,
.introduction__Description li,
.Blog__Right-Article-Description-Text li,
.Blog__Right-Article-Items-Description li {
  font-size: var(--dm-prose-body-size);
  line-height: var(--dm-prose-body-lh);
  margin-bottom: 0.65rem;
  color: var(--dm-prose-text);
  text-align: start !important;
}

.dm-rich-prose li::marker {
  color: var(--dm-prose-muted);
}

.dm-rich-prose strong,
.introduction__Description strong,
.Blog__Right-Article-Description-Text strong,
.Blog__Right-Article-Items-Description strong {
  font-weight: 600;
  color: var(--dm-prose-text);
}

/* ── Links (override global yellow main a) ── */
.dm-rich-prose a,
.introduction__Description a,
.Blog__Right-Article-Description-Text a,
.Blog__Right-Article-Items-Description a {
  color: var(--dm-prose-link) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--dm-prose-link) 45%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.dm-rich-prose a:hover,
.introduction__Description a:hover,
.Blog__Right-Article-Description-Text a:hover,
.Blog__Right-Article-Items-Description a:hover {
  color: var(--dm-prose-link-hover) !important;
  text-decoration-color: currentColor;
}

/* ── Inline admin colors → theme palette ── */
html[data-theme="dark"] .dm-rich-prose .text-Purple,
html[data-theme="dark"] .introduction__Description .text-Purple,
html[data-theme="dark"] .Blog__Right-Article-Description-Text .text-Purple,
html[data-theme="dark"] .Blog__Right-Article-Items-Description .text-Purple,
html[data-theme="dark"] .dm-rich-prose [style*="#9e12b1"],
html[data-theme="dark"] .dm-rich-prose [style*="9e12b1"],
html[data-theme="dark"] .dm-rich-prose [style*="158, 18, 177"],
html[data-theme="dark"] .introduction__Description [style*="#9e12b1"],
html[data-theme="dark"] .introduction__Description [style*="9e12b1"],
html[data-theme="dark"] .introduction__Description [style*="158, 18, 177"],
html[data-theme="dark"] .Blog__Right-Article-Description-Text [style*="#9e12b1"],
html[data-theme="dark"] .Blog__Right-Article-Items-Description [style*="#9e12b1"] {
  color: var(--dm-prose-heading) !important;
}

html[data-theme="dark"] .dm-rich-prose [style*="color: red"],
html[data-theme="dark"] .dm-rich-prose [style*="color:red"],
html[data-theme="dark"] .dm-rich-prose [style*="#ff0000"],
html[data-theme="dark"] .dm-rich-prose [style*="#f00"],
html[data-theme="dark"] .introduction__Description [style*="color: red"],
html[data-theme="dark"] .introduction__Description [style*="color:red"],
html[data-theme="dark"] .Blog__Right-Article-Description-Text [style*="color: red"],
html[data-theme="dark"] .Blog__Right-Article-Items-Description [style*="color: red"] {
  color: #f87171 !important;
}

html[data-theme="light"] .dm-rich-prose [style*="color: red"],
html[data-theme="light"] .introduction__Description [style*="color: red"] {
  color: #c62828 !important;
}

/* ── Highlight / callout boxes (p/span only — avoid chat/layout div shells) ── */
.dm-rich-prose span[style*="background"]:not(:empty),
.dm-rich-prose p[style*="background"]:not(:empty),
.introduction__Description span[style*="background"]:not(:empty),
.introduction__Description p[style*="background"]:not(:empty),
.Blog__Right-Article-Description-Text span[style*="background"]:not(:empty),
.Blog__Right-Article-Description-Text p[style*="background"]:not(:empty),
.Blog__Right-Article-Items-Description span[style*="background"]:not(:empty),
.Blog__Right-Article-Items-Description p[style*="background"]:not(:empty) {
  background: var(--dm-prose-highlight-bg) !important;
  color: var(--dm-prose-text) !important;
  border: 1px solid var(--dm-prose-highlight-border) !important;
  border-radius: 8px !important;
  padding: 0.2em 0.55em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dm-rich-prose p[style*="background"]:not(:empty),
.introduction__Description p[style*="background"]:not(:empty),
.Blog__Right-Article-Description-Text p[style*="background"]:not(:empty),
.Blog__Right-Article-Items-Description p[style*="background"]:not(:empty) {
  display: block;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  background: var(--dm-prose-callout-bg) !important;
  border: 1px solid var(--dm-prose-callout-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .dm-rich-prose p[style*="background"],
html[data-theme="dark"] .introduction__Description p[style*="background"],
html[data-theme="dark"] .Blog__Right-Article-Description-Text p[style*="background"],
html[data-theme="dark"] .Blog__Right-Article-Items-Description p[style*="background"] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Pasted chat UI — strip callout chrome; PHP removes empty shells */
.dm-rich-prose [class*="ChatMessage"],
.introduction__Description [class*="ChatMessage"],
.Blog__Right-Article-Description-Text [class*="ChatMessage"],
.Blog__Right-Article-Items-Description [class*="ChatMessage"],
.dm-rich-prose [class*="Message_botMessageBubble"],
.introduction__Description [class*="Message_botMessageBubble"],
.Blog__Right-Article-Description-Text [class*="Message_botMessageBubble"],
.Blog__Right-Article-Items-Description [class*="Message_botMessageBubble"],
.dm-rich-prose [class*="Message_row"],
.introduction__Description [class*="Message_row"],
.Blog__Right-Article-Description-Text [class*="Message_row"],
.Blog__Right-Article-Items-Description [class*="Message_row"],
.dm-rich-prose [class*="ChatMessage_messageWrapper"],
.introduction__Description [class*="ChatMessage_messageWrapper"],
.Blog__Right-Article-Description-Text [class*="ChatMessage_messageWrapper"],
.Blog__Right-Article-Items-Description [class*="ChatMessage_messageWrapper"] {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.dm-rich-prose [class*="ChatMessage"]:empty,
.introduction__Description [class*="ChatMessage"]:empty,
.Blog__Right-Article-Description-Text [class*="ChatMessage"]:empty,
.Blog__Right-Article-Items-Description [class*="ChatMessage"]:empty,
.dm-rich-prose [class*="ChatMessage"]:has([class*="Message_botMessageBubble"]:empty),
.introduction__Description [class*="ChatMessage"]:has([class*="Message_botMessageBubble"]:empty),
.Blog__Right-Article-Description-Text [class*="ChatMessage"]:has([class*="Message_botMessageBubble"]:empty),
.Blog__Right-Article-Items-Description [class*="ChatMessage"]:has([class*="Message_botMessageBubble"]:empty) {
  display: none !important;
}

/* ── Code ── */
.dm-rich-prose :not(pre) > code,
.introduction__Description :not(pre) > code,
.Blog__Right-Article-Description-Text :not(pre) > code,
.Blog__Right-Article-Items-Description :not(pre) > code {
  font-family: var(--dm-prose-mono);
  font-size: 1.25rem;
  background: var(--dm-prose-inline-code-bg);
  color: var(--dm-prose-text);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--dm-prose-code-border);
  direction: ltr;
  unicode-bidi: isolate;
}

.dm-rich-prose pre,
.introduction__Description pre,
.Blog__Right-Article-Description-Text pre,
.Blog__Right-Article-Items-Description pre {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--dm-prose-code-bg) !important;
  border: 1px solid var(--dm-prose-code-border);
  border-radius: 8px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.dm-rich-prose pre code,
.introduction__Description pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--dm-prose-code-text) !important;
  font-family: var(--dm-prose-mono) !important;
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
}

/* Override legacy coursePage / FullStack dark rules */
html[data-theme="dark"] .coursePage .introduction .introduction__Title.Section__Title,
html[data-theme="dark"] .coursePage__Description-Introduce .introduction__Title,
html[data-theme="dark"] .FullStack .introduction .introduction__Title.Section__Title,
html[data-theme="dark"] .FullStack .introduction__Description h2,
html[data-theme="dark"] .FullStack .introduction__Description h3,
html[data-theme="dark"] .FullStack .introduction__Description h4,
html[data-theme="dark"] .coursePage .introduction__Description h2,
html[data-theme="dark"] .coursePage .introduction__Description h3 {
  color: #a5f3fc !important;
  border: none !important;
  border-bottom: none !important;
}

html[data-theme="dark"] .FullStack .coursePage__Description-Introduce,
html[data-theme="dark"] .coursePage .coursePage__Description-Introduce,
html[data-theme="dark"] .FullStack .introduction,
html[data-theme="dark"] .coursePage .introduction {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html[data-theme="dark"] .coursePage .introduction__Description,
html[data-theme="dark"] .coursePage .introduction__Description p,
html[data-theme="dark"] .coursePage .introduction__Description li,
html[data-theme="dark"] .FullStack .introduction__Description,
html[data-theme="dark"] .FullStack .introduction__Description p,
html[data-theme="dark"] .FullStack .introduction__Description li {
  color: var(--dm-prose-text) !important;
  line-height: var(--dm-prose-body-lh) !important;
}

html[data-theme="light"] .coursePage .introduction .introduction__Title.Section__Title {
  color: var(--dm-prose-heading) !important;
}

.dm-rich-prose blockquote,
.introduction__Description blockquote {
  margin: var(--dm-prose-para-gap) 0;
  padding-inline-start: 1.5rem;
  border: none;
  border-inline-start: 3px solid var(--dm-prose-border);
  color: var(--dm-prose-muted);
  font-style: normal;
  background: transparent;
}

.dm-rich-prose img,
.introduction__Description img,
.Blog__Right-Article-Description-Text img,
.Blog__Right-Article-Items-Description img {
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  display: block;
  border-radius: 8px;
}

.dm-rich-prose hr,
.introduction__Description hr {
  border: none;
  border-top: 1px solid var(--dm-prose-border);
  margin: 3rem 0;
}

/* ── Blog article shell ── */
html[data-theme="dark"] .Blog__Right-Article {
  background: var(--dm-bg-card) !important;
  border: 1px solid var(--dm-prose-border);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .Blog__Right-Article-MainTitle {
  color: #ffd700 !important;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.3;
  margin-bottom: 1rem;
}

html[data-theme="dark"] .Blog__Right-Article-Items-Head,
html[data-theme="dark"] .Blog__Right-Article-Description-Text.dm-rich-prose h1,
html[data-theme="dark"] .Blog__Right-Article-Description-Text.dm-rich-prose h2,
html[data-theme="dark"] .Blog__Right-Article-Description-Text.dm-rich-prose h3,
html[data-theme="dark"] .Blog__Right-Article-Description-Text.dm-rich-prose h4,
html[data-theme="dark"] .Blog__Right-Article-Items-Description.dm-rich-prose h1,
html[data-theme="dark"] .Blog__Right-Article-Items-Description.dm-rich-prose h2,
html[data-theme="dark"] .Blog__Right-Article-Items-Description.dm-rich-prose h3,
html[data-theme="dark"] .Blog__Right-Article-Items-Description.dm-rich-prose h4,
html[data-theme="dark"] .Blog__Right-Article-Description-Text .Section__Title-Header,
html[data-theme="dark"] .Blog__Right-Article-Items-Description .Section__Title-Header {
  color: #ffd700 !important;
  border: none !important;
  border-bottom: none !important;
}

html[data-theme="light"] .Blog__Right-Article-MainTitle {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.3;
}

html[data-theme="dark"] .Blog__Right-Article-Description,
html[data-theme="dark"] .Blog__Right-Article-Content {
  background: transparent !important;
}
