/*  Quill Content Rendering Styles
    Include this on pages that display Quill editor content.
    Only contains the OUTPUT styles needed for rendering,
    NOT the full editor UI styles.
*/

/* ── Alignment ── */
.prose .ql-align-center { text-align: center; }
.prose .ql-align-right  { text-align: right; }
.prose .ql-align-justify { text-align: justify; }

/* ── Indent (8 levels) ── */
.prose .ql-indent-1 { padding-left: 3em; }
.prose .ql-indent-2 { padding-left: 6em; }
.prose .ql-indent-3 { padding-left: 9em; }
.prose .ql-indent-4 { padding-left: 12em; }
.prose .ql-indent-5 { padding-left: 15em; }
.prose .ql-indent-6 { padding-left: 18em; }
.prose .ql-indent-7 { padding-left: 21em; }
.prose .ql-indent-8 { padding-left: 24em; }

/* ── Font Size ── */
.prose .ql-size-small  { font-size: 0.75em; }
.prose .ql-size-large  { font-size: 1.5em; }
.prose .ql-size-huge   { font-size: 2.5em; }

/* ── Direction ── */
.prose .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* ── Font Family ── */
.prose .ql-font-serif     { font-family: Georgia, "Times New Roman", serif; }
.prose .ql-font-monospace { font-family: Monaco, "Courier New", monospace; }

/* ── Blockquote ── */
.prose blockquote {
  border-left: 4px solid var(--line, #ccc);
  margin: 1em 0;
  padding: 0.5em 1em;
  color: var(--muted2, #666);
  background: rgba(0,0,0,.02);
  border-radius: 0 8px 8px 0;
}

/* ── Code Block ── */
.prose pre.ql-syntax,
.prose .ql-code-block-container {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto;
  font-family: Monaco, "Courier New", monospace;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 1em 0;
}

/* ── Inline Code ── */
.prose code {
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: Monaco, "Courier New", monospace;
}
.prose pre code {
  background: none;
  padding: 0;
}

/* ── Lists ── */
.prose ol,
.prose ul {
  padding-left: 1.5em;
  margin: 0.8em 0;
}

.prose ol li,
.prose ul li {
  margin-bottom: 0.4em;
  line-height: 1.75;
}

.prose ol { list-style-type: decimal; }
.prose ul { list-style-type: disc; }

/* Nested list indents from Quill */
.prose li.ql-indent-1 { padding-left: 3em; }
.prose li.ql-indent-2 { padding-left: 6em; }
.prose li.ql-indent-3 { padding-left: 9em; }

/* ── Headings ── */
.prose h2 {
  font-size: 1.6em;
  font-weight: 800;
  margin: 1.4em 0 0.6em;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.3em;
  font-weight: 700;
  margin: 1.2em 0 0.5em;
  line-height: 1.35;
}

.prose h4 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 1em 0 0.4em;
}

/* ── Paragraphs ── */
.prose p {
  margin: 0.6em 0;
}

/* ── Images ── */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1em 0;
}

/* ── Links ── */
.prose a {
  color: var(--primary, #0d6efd);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  opacity: 0.8;
}

/* ── Tables ── */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.prose table td,
.prose table th {
  border: 1px solid var(--line, #ddd);
  padding: 8px 12px;
  text-align: left;
}

.prose table th {
  background: rgba(0,0,0,.04);
  font-weight: 700;
}

/* ── Videos ── */
.prose .ql-video,
.prose iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 10px;
  margin: 1em 0;
}

/* ── Horizontal Rule ── */
.prose hr {
  border: none;
  border-top: 1px solid var(--line, #ddd);
  margin: 1.5em 0;
}

/* ── Text Formatting ── */
.prose strong, .prose b { font-weight: 700; }
.prose em, .prose i { font-style: italic; }
.prose u { text-decoration: underline; }
.prose s { text-decoration: line-through; }
.prose sub { vertical-align: sub; font-size: 0.8em; }
.prose sup { vertical-align: super; font-size: 0.8em; }

/* ── Color (Quill inline styles handle this, but ensure visibility) ── */
.prose [style*="color:"] { /* Quill sets inline */ }
.prose [style*="background-color:"] { padding: 0 2px; border-radius: 2px; }