/**
 * EDITOR CONTENT (WYSIWYG) — style cho output của the_content()
 *
 * Vì sao cần file này:
 * 1. import-assets/reset-css-js.php dequeue toàn bộ CSS core của block editor
 *    (wp-block-library, wp-block-library-theme, classic-theme-styles) và remove
 *    wp_enqueue_global_styles → mọi class do editor sinh ra (.has-vivid-red-color,
 *    .has-text-align-center, .has-large-font-size, .has-background…) KHÔNG có CSS.
 * 2. reset.css set `font: inherit` cho b/strong/em/i/u/s/mark/small/sub/sup/code
 *    → in đậm / in nghiêng trong CMS bị mất.
 * 3. reset.css set `list-style: none` cho ul/ol → list mất bullet/number.
 * 4. global.css set `a { display: block; color: inherit; text-decoration: none }`
 *    → link inline trong bài viết bị xuống dòng và mất màu.
 *
 * Scope: .section-content__body (blog detail) + .wysiwyg (dùng lại cho vùng
 * the_content() khác). Dùng :is() để giữ specificity = selector thường (0,1,x),
 * KHÔNG dùng :where() vì specificity 0 sẽ bị reset.css thắng.
 *
 * Palette dưới đây là default palette của WP core (theme không khai báo
 * theme.json / editor-color-palette) — thêm/sửa màu ở đây nếu sau này custom palette.
 */

/* ==========================================================================
   1. Inline formatting — in đậm, in nghiêng, gạch chân, highlight
   ========================================================================== */
:is(.section-content__body, .wysiwyg) strong,
:is(.section-content__body, .wysiwyg) b {
  font-weight: 700;
}

:is(.section-content__body, .wysiwyg) em,
:is(.section-content__body, .wysiwyg) i,
:is(.section-content__body, .wysiwyg) cite,
:is(.section-content__body, .wysiwyg) address {
  font-style: italic;
}

:is(.section-content__body, .wysiwyg) u {
  text-decoration: underline;
}

:is(.section-content__body, .wysiwyg) s,
:is(.section-content__body, .wysiwyg) strike,
:is(.section-content__body, .wysiwyg) del {
  text-decoration: line-through;
}

:is(.section-content__body, .wysiwyg) ins {
  text-decoration: underline;
}

/* Highlight: editor ghi inline style (color + background-color) hoặc class
   .has-*-color → mark chỉ cần bỏ nền vàng mặc định của browser */
:is(.section-content__body, .wysiwyg) mark {
  background-color: transparent;
  color: inherit;
}

:is(.section-content__body, .wysiwyg) small {
  font-size: 0.8125rem; /* 13px / 16 */
}

:is(.section-content__body, .wysiwyg) sub,
:is(.section-content__body, .wysiwyg) sup {
  font-size: 75%;
  line-height: 0;
}

:is(.section-content__body, .wysiwyg) code,
:is(.section-content__body, .wysiwyg) kbd,
:is(.section-content__body, .wysiwyg) samp,
:is(.section-content__body, .wysiwyg) tt {
  font-family: monospace, monospace;
  font-size: 0.875rem; /* 14px / 16 */
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  background-color: #f2f3f4;
}

/* ==========================================================================
   2. Link inline trong bài viết
   ========================================================================== */
:is(.section-content__body, .wysiwyg) a,
:is(.section-content__body, .wysiwyg) a:link,
:is(.section-content__body, .wysiwyg) a:visited {
  display: inline;
  width: auto;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
  transition: opacity 0.2s ease;
}

:is(.section-content__body, .wysiwyg) a:hover {
  opacity: 0.7;
}

/* Link bọc ảnh / figure thì không underline, không inline */
:is(.section-content__body, .wysiwyg) a:has(> img),
:is(.section-content__body, .wysiwyg) figure a {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
   3. List — reset.css xoá marker nên phải khai báo lại
   ========================================================================== */
:is(.section-content__body, .wysiwyg) ul,
:is(.section-content__body, .wysiwyg) ol {
  margin-top: 1rem;
  margin-bottom: 0;
  padding-left: 1.5rem;
  font-family: "Averta Std CY", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #1d262d;
  line-height: 1.5;
  letter-spacing: -0.01rem;
}

:is(.section-content__body, .wysiwyg) ul {
  list-style: disc outside;
}

:is(.section-content__body, .wysiwyg) ol {
  list-style: decimal outside;
}

:is(.section-content__body, .wysiwyg) li {
  list-style: inherit;
}

:is(.section-content__body, .wysiwyg) li + li {
  margin-top: 0.5rem;
}

/* List lồng nhau */
:is(.section-content__body, .wysiwyg) li > ul,
:is(.section-content__body, .wysiwyg) li > ol {
  margin-top: 0.5rem;
}

:is(.section-content__body, .wysiwyg) ul ul {
  list-style-type: circle;
}

:is(.section-content__body, .wysiwyg) ul ul ul {
  list-style-type: square;
}

/* Block "List" của editor có thể bật bỏ marker */
:is(.section-content__body, .wysiwyg) .wp-block-list.is-style-none {
  list-style: none;
  padding-left: 0;
}

/* EZ-TOC: phòng trường hợp plugin chèn mục lục nằm trong content
   (regex bóc TOC ở index.php không match) → không áp list style bài viết */
:is(.section-content__body, .wysiwyg)
  :is(#ez-toc-container, .ez-toc-container, .ez-toc-widget-container)
  :is(ul, ol, li) {
  list-style: none;
  padding-left: 0;
}

/* ==========================================================================
   4. Alignment class (.has-text-align-*) — ghi đè text-align: justify của p
   ========================================================================== */
:is(.section-content__body, .wysiwyg) .has-text-align-left {
  text-align: left;
}

:is(.section-content__body, .wysiwyg) .has-text-align-center {
  text-align: center;
}

:is(.section-content__body, .wysiwyg) .has-text-align-right {
  text-align: right;
}

:is(.section-content__body, .wysiwyg) .has-text-align-justify {
  text-align: justify;
}

/* ==========================================================================
   5. Màu chữ / màu nền preset (WP core default palette)
      Specificity (0,2,0) > .section-content__body p (0,1,1) nên thắng màu
      mặc định của section mà không cần !important.
      Màu custom (color picker) đi bằng inline style → luôn thắng.
   ========================================================================== */
:is(.section-content__body, .wysiwyg) .has-black-color {
  color: #000000;
}
:is(.section-content__body, .wysiwyg) .has-cyan-bluish-gray-color {
  color: #abb8c3;
}
:is(.section-content__body, .wysiwyg) .has-white-color {
  color: #ffffff;
}
:is(.section-content__body, .wysiwyg) .has-pale-pink-color {
  color: #f78da7;
}
:is(.section-content__body, .wysiwyg) .has-vivid-red-color {
  color: #cf2e2e;
}
:is(.section-content__body, .wysiwyg) .has-luminous-vivid-orange-color {
  color: #ff6900;
}
:is(.section-content__body, .wysiwyg) .has-luminous-vivid-amber-color {
  color: #fcb900;
}
:is(.section-content__body, .wysiwyg) .has-light-green-cyan-color {
  color: #7bdcb5;
}
:is(.section-content__body, .wysiwyg) .has-vivid-green-cyan-color {
  color: #00d084;
}
:is(.section-content__body, .wysiwyg) .has-pale-cyan-blue-color {
  color: #8ed1fc;
}
:is(.section-content__body, .wysiwyg) .has-vivid-cyan-blue-color {
  color: #0693e3;
}
:is(.section-content__body, .wysiwyg) .has-vivid-purple-color {
  color: #9b51e0;
}

:is(.section-content__body, .wysiwyg) .has-black-background-color {
  background-color: #000000;
}
:is(.section-content__body, .wysiwyg) .has-cyan-bluish-gray-background-color {
  background-color: #abb8c3;
}
:is(.section-content__body, .wysiwyg) .has-white-background-color {
  background-color: #ffffff;
}
:is(.section-content__body, .wysiwyg) .has-pale-pink-background-color {
  background-color: #f78da7;
}
:is(.section-content__body, .wysiwyg) .has-vivid-red-background-color {
  background-color: #cf2e2e;
}
:is(.section-content__body, .wysiwyg)
  .has-luminous-vivid-orange-background-color {
  background-color: #ff6900;
}
:is(.section-content__body, .wysiwyg)
  .has-luminous-vivid-amber-background-color {
  background-color: #fcb900;
}
:is(.section-content__body, .wysiwyg) .has-light-green-cyan-background-color {
  background-color: #7bdcb5;
}
:is(.section-content__body, .wysiwyg) .has-vivid-green-cyan-background-color {
  background-color: #00d084;
}
:is(.section-content__body, .wysiwyg) .has-pale-cyan-blue-background-color {
  background-color: #8ed1fc;
}
:is(.section-content__body, .wysiwyg) .has-vivid-cyan-blue-background-color {
  background-color: #0693e3;
}
:is(.section-content__body, .wysiwyg) .has-vivid-purple-background-color {
  background-color: #9b51e0;
}

/* Paragraph có nền thì cần padding cho dễ đọc (giống core block CSS) */
:is(.section-content__body, .wysiwyg) p.has-background {
  padding: 1.25rem 2.375rem;
}

/* ==========================================================================
   6. Font-size preset (.has-*-font-size)
   ========================================================================== */
:is(.section-content__body, .wysiwyg) .has-small-font-size {
  font-size: 0.8125rem; /* 13px / 16 */
}
:is(.section-content__body, .wysiwyg) .has-medium-font-size {
  font-size: 1.25rem; /* 20px / 16 */
}
:is(.section-content__body, .wysiwyg) .has-large-font-size {
  font-size: 2.25rem; /* 36px / 16 */
  line-height: 1.3;
}
:is(.section-content__body, .wysiwyg) .has-x-large-font-size {
  font-size: 2.625rem; /* 42px / 16 */
  line-height: 1.2;
}

/* ==========================================================================
   7. Quote
   ========================================================================== */
:is(.section-content__body, .wysiwyg) blockquote,
:is(.section-content__body, .wysiwyg) .wp-block-quote {
  margin-top: 1.5rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 0.25rem solid #1d262d;
  font-style: italic;
}

:is(.section-content__body, .wysiwyg) blockquote p {
  text-align: left;
}

:is(.section-content__body, .wysiwyg) blockquote cite,
:is(.section-content__body, .wysiwyg) .wp-block-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  color: #757575;
}

/* ==========================================================================
   8. Table
   ========================================================================== */
:is(.section-content__body, .wysiwyg) .wp-block-table {
  margin-top: 1.5rem;
  margin-bottom: 0;
  overflow-x: auto;
}

:is(.section-content__body, .wysiwyg) table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Averta Std CY", sans-serif;
  font-size: 1rem;
  color: #1d262d;
  line-height: 1.5;
}

:is(.section-content__body, .wysiwyg) th,
:is(.section-content__body, .wysiwyg) td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border, #e5e5e5);
  text-align: left;
  vertical-align: top;
}

:is(.section-content__body, .wysiwyg) th {
  font-weight: 700;
  background-color: #f2f3f4;
}

:is(.section-content__body, .wysiwyg) table figcaption,
:is(.section-content__body, .wysiwyg) .wp-block-table figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: italic;
  color: #757575;
  text-align: center;
}

/* ==========================================================================
   9. Separator / preformatted / code block
   ========================================================================== */
:is(.section-content__body, .wysiwyg) hr,
:is(.section-content__body, .wysiwyg) .wp-block-separator {
  height: 1px;
  margin-top: 1.5rem;
  margin-bottom: 0;
  border: 0;
  background-color: var(--color-border, #e5e5e5);
}

:is(.section-content__body, .wysiwyg) pre,
:is(.section-content__body, .wysiwyg) .wp-block-preformatted,
:is(.section-content__body, .wysiwyg) .wp-block-code {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: #f2f3f4;
  font-family: monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
}

:is(.section-content__body, .wysiwyg) pre code,
:is(.section-content__body, .wysiwyg) .wp-block-code code {
  padding: 0;
  background-color: transparent;
}

/* ==========================================================================
   10. Embed (YouTube, Vimeo…) — padding-top trick, KHÔNG dùng aspect-ratio
   ========================================================================== */
:is(.section-content__body, .wysiwyg) .wp-block-embed {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

:is(.section-content__body, .wysiwyg) .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

:is(.section-content__body, .wysiwyg) .wp-block-embed__wrapper iframe,
:is(.section-content__body, .wysiwyg) .wp-block-embed__wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   11. Mobile
   ========================================================================== */
@media screen and (max-width: 639.98px) {
  :is(.section-content__body, .wysiwyg) ul,
  :is(.section-content__body, .wysiwyg) ol,
  :is(.section-content__body, .wysiwyg) table {
    font-size: 0.875rem;
  }

  :is(.section-content__body, .wysiwyg) .has-large-font-size {
    font-size: 1.5rem;
  }

  :is(.section-content__body, .wysiwyg) .has-x-large-font-size {
    font-size: 1.75rem;
  }

  :is(.section-content__body, .wysiwyg) p.has-background {
    padding: 1rem 1.25rem;
  }
}