/* =============================================================================
   WikiChino – Custom paragraph styles
   Applied to both the CKEditor editing area and the published content view.
   ============================================================================= */

/* ── Base paragraph: Latin text (Arial, 12pt / 16px) ── */
.ck-content p,
.contents p {
  font-family: Arial, sans-serif;
  font-size: 16px;           /* 12pt */
  line-height: 24px;         /* exactly 18pt */
  margin-top: 8px;           /* 6pt before */
  margin-bottom: 8px;        /* 6pt after */
  text-align: justify;
  color: #000000 !important;
}

/* ── Chinese paragraphs (lang="zh-CN" / zh-TW): FangSong, 14pt / 17px ── */
.ck-content p[lang="zh-CN"],
.ck-content p[lang="zh-TW"],
.ck-content p[lang="zh"],
.contents p[lang="zh-CN"],
.contents p[lang="zh-TW"],
.contents p[lang="zh"] {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 17px;           /* 14pt */
  line-height: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
  text-align: justify;
  color: #000000 !important;
}

/* ── Mixed paragraphs: Chinese inline spans inherit FangSong ── */
.ck-content p [lang="zh-CN"],
.ck-content p [lang="zh-TW"],
.ck-content p [lang="zh"],
.contents p [lang="zh-CN"],
.contents p [lang="zh-TW"],
.contents p [lang="zh"] {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 17px;
}

/* ── Pinyin: italic ── */
.ck-content p .pinyin,
.contents p .pinyin,
.ck-content p em,
.contents p em {
  font-style: italic;
}

/* =============================================================================
   Headings – H1 (Chapter), H2 (Section), H3 (Subsection)
   ============================================================================= */

/* ── H1 – Chapter ── */
.ck-content h1,
.contents h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;           /* 18pt */
  font-weight: bold;
  line-height: 1.2;
  color: #000000 !important;
  margin-top: 0;
  margin-bottom: 0;
}

.ck-content h1[lang="zh-CN"],
.ck-content h1[lang="zh-TW"],
.ck-content h1[lang="zh"],
.contents h1[lang="zh-CN"],
.contents h1[lang="zh-TW"],
.contents h1[lang="zh"] {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 26px;           /* 20pt */
}

/* ── H2 – Section ── */
.ck-content h2,
.contents h2 {
  font-family: Arial, sans-serif;
  font-size: 20px;           /* 15pt */
  font-weight: bold;
  font-style: normal;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0;
  color: #000000 !important;
}

.ck-content h2[lang="zh-CN"],
.ck-content h2[lang="zh-TW"],
.ck-content h2[lang="zh"],
.contents h2[lang="zh-CN"],
.contents h2[lang="zh-TW"],
.contents h2[lang="zh"] {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 24px;           /* 18pt */
}

/* ── H3 – Subsection ── */
.ck-content h3,
.contents h3 {
  font-family: Arial, sans-serif;
  font-size: 18px;           /* 13.5pt */
  font-weight: bold;
  font-style: normal;
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 0;
  color: #000000 !important;
}

.ck-content h3[lang="zh-CN"],
.ck-content h3[lang="zh-TW"],
.ck-content h3[lang="zh"],
.contents h3[lang="zh-CN"],
.contents h3[lang="zh-TW"],
.contents h3[lang="zh"] {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 19px;           /* 14.5pt */
}

/* =============================================================================
   H4 – Ejemplos (Example blocks)
   Structure: h4 = Chinese bullet line, .ejemplo-pinyin = pinyin, .ejemplo-es = Spanish
   ============================================================================= */

/* ── Chinese line: FangSong, 14pt/17px, blue, indented bullet ── */
.ck-content h4,
.contents h4 {
  font-family: FangSong, '仿宋', 'STFangsong', 'FangSong_GB2312', serif;
  font-size: 17px;           /* 14pt */
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  color: #1E3A8A !important;
  text-align: left;
  margin-top: 8px;           /* 6pt before */
  margin-bottom: 0;
  max-width: 75ch;
  display: block;
  padding-left: 1.4em;       /* room for the bullet */
  margin-left: 2em;          /* List 1: 2em */
  position: relative;
}

.ck-content h4::before,
.contents h4::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #1E3A8A;
  font-size: 1.2em;
  line-height: 1.5;
}

/* Deeper nesting levels */
.ck-content ol h4,
.ck-content ul h4,
.contents ol h4,
.contents ul h4 {
  margin-left: 3em;          /* List 2: 3em */
}

.ck-content ol ol h4,
.ck-content ul ul h4,
.ck-content ol ul h4,
.ck-content ul ol h4,
.contents ol ol h4,
.contents ul ul h4 {
  margin-left: 4em;          /* List 3: 4em */
}

/* ── Pinyin line: Arial, 12pt/16px, italic, blue, no bullet ── */
.ck-content p.ejemplo-pinyin,
.contents p.ejemplo-pinyin {
  font-family: Arial, sans-serif;
  font-size: 16px;           /* 12pt */
  font-style: italic;
  font-weight: normal;
  line-height: 1.5;
  color: #1E3A8A !important;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2em;
  max-width: 75ch;
  list-style-type: none;
}

/* ── Spanish line: Arial, 12pt/16px, upright, emerald green, no bullet ── */
.ck-content p.ejemplo-es,
.contents p.ejemplo-es {
  font-family: Arial, sans-serif;
  font-size: 16px;           /* 12pt */
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  color: #047857 !important;
  text-align: left;
  margin-top: 0;
  margin-bottom: 8px;        /* 6pt after — closes the example block */
  margin-left: 2em;
  max-width: 75ch;
}

/* ── Grey shading on highlighted Chinese characters ── */
.ck-content h4 mark,
.contents h4 mark {
  background-color: #D3D3D3;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* Level badges in editor are rendered by the JS overlay (#wc-badge-overlay),
   positioned via getBoundingClientRect() — no CSS needed here. */