/* Quill 產生的內容在前台的呈現
   Quill 用 class 表示對齊與縮排，前台沒有 Quill 樣式的話會全部失效。
   CKEditor 時代的 inline style 不受影響，兩種寫法可以並存。 */
.ql-align-center  { text-align: center; }
.ql-align-right   { text-align: right; }
.ql-align-justify { text-align: justify; }

.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; }
.ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; }
.ql-indent-8 { padding-left: 24em; }

.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }

.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  border-radius: 4px;
  padding: 10px 12px;
  overflow: auto;
  white-space: pre-wrap;
}

blockquote {
  border-left: 4px solid #ccc;
  margin: 12px 0;
  padding-left: 16px;
}

/* 文章內容排版：前台內容區塊與後台 Quill 編輯區共用同一組規則，
   兩邊都加 .rich-content，編輯時看到的就是前台顯示的樣子。
   數值對齊前台 bootstrap（body 16px／行高 1.5／段落下方 1rem）。 */
.rich-content {
  font-family: "Microsoft JhengHei", "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-word;
}
.rich-content p,
.rich-content ol,
.rich-content ul,
.rich-content pre,
.rich-content blockquote {
  margin-top: 0;
  margin-bottom: 1rem;
}
.rich-content ol,
.rich-content ul {
  padding-left: 40px;
}

/* 報名頁「報名需知」（公版注意事項／講座注意事項）：前台與後台編輯器共用
   粗體、深灰、行高 28px，段落之間不另外留白（編輯器每行是一個段落，前台舊資料是 <br> 換行，兩者看起來一致） */
.rich-content.rich-content-notice {
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  color: #4e4e4e;
}
.rich-content.rich-content-notice p,
.rich-content.rich-content-notice ol,
.rich-content.rich-content-notice ul {
  margin-bottom: 0;
}
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.rich-content h1 { font-size: 2.5rem; }
.rich-content h2 { font-size: 2rem; }
.rich-content h3 { font-size: 1.75rem; }
.rich-content h4 { font-size: 1.5rem; }
.rich-content h5 { font-size: 1.25rem; }
.rich-content h6 { font-size: 1rem; }
.rich-content a {
  color: #63605B;
  text-decoration: underline;
}
.rich-content img {
  max-width: 100%;
  height: auto;
}
/* 編輯器插入的 YouTube 影片（iframe.ql-video），寬度填滿、維持 16:9 */
.rich-content .ql-video {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  border: 0;
}
.rich-content .ql-video.ql-align-center {
  margin-left: auto;
  margin-right: auto;
}
.rich-content .ql-video.ql-align-right {
  margin-left: auto;
}