/* ============================================================
   ENTRY-CONTENT.CSS — Style Gutenberg thô cho Bài Kiến thức (Post gốc)
   Ecolux Lighting — Phase 2 (WordPress)
   ------------------------------------------------------------
   FILE MỚI (không có trong Phase 1) — bắt buộc theo brief vì Phase 1 KHÔNG
   có Gutenberg (article-detail.html là markup tay 100%). File này CHỈ bổ
   sung, KHÔNG sửa 6 file CSS Phase 1 (tokens/base/components/layout/products/
   pages.css) — dùng lại 100% design token từ tokens.css (màu/spacing/type
   scale) để bài viết luôn ĐÚNG BRAND dù content editor gõ khối Gutenberg nào.

   Áp dụng cho <div class="article-body entry-content"> ở single.php:
   - .article-body (pages.css) đã có sẵn style base cho h2/p/ul/ol/li — file
     này chỉ bổ sung PHẦN CÒN THIẾU (h3/h4, blockquote, table, code, hr, ảnh
     Gutenberg, link, nested list, columns…) và tăng cường an toàn chống vỡ
     layout (max-width, overflow-x auto cho bảng, ảnh không tràn).

   Chỉ enqueue ở single.php (is_singular('post')) — xem inc/enqueue.php.
   ============================================================ */

.entry-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── Heading — h2 đã có ở .article-body (pages.css), bổ sung h3/h4 ── */

.entry-content h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
  margin: var(--space-8) 0 var(--space-3) 0;
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.entry-content h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  line-height: var(--leading-snug);
  margin: var(--space-6) 0 var(--space-2) 0;
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Đoạn văn — line-height thoáng, KHÔNG cần lặp lại .article-body p ── */

.entry-content p:last-child {
  margin-bottom: 0;
}

/* ── Link trong nội dung ── */

.entry-content a:not(.btn) {
  color: var(--color-primary-active, var(--color-amber-600));
  text-decoration: underline;
  text-decoration-color: var(--color-amber-300);
  text-underline-offset: 2px;
  transition: color var(--transition-fast, 150ms ease);
}

/* DARK MODE — vá thêm (rà toàn bộ hex/primitive literal sau QA round 1).
   text-decoration-color hardcode amber-300 (vàng thuần) lệch tông "vàng
   đồng" bronze của dark mode — không phải lỗi tương phản (gạch chân dưới
   text, không phải văn bản chính), chỉ để nhất quán thương hiệu. */
:root[data-theme="dark"] .entry-content a:not(.btn) {
  text-decoration-color: var(--color-bronze-600);
}

.entry-content a:not(.btn):hover {
  color: var(--color-amber-700);
}

/* DARK MODE — vá thêm (rà "hardcode màu còn sót"). Màu hover ở trên đọc
   thẳng --color-amber-700 (primitive cố định, ~3.6:1 trên nền #0A0A0A —
   dưới ngưỡng AA 4.5:1). Dùng bronze-400 (bright hover state, 9.6:1). */
:root[data-theme="dark"] .entry-content a:not(.btn):hover {
  color: var(--color-bronze-400);
}

.entry-content a:not(.btn):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.entry-content strong,
.entry-content b {
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
}

/* ── Danh sách — .article-body ul/ol/li đã style cấp 1; bổ sung LỒNG NHAU ── */

.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ol,
.entry-content ol ul {
  margin: var(--space-2) 0 var(--space-2) 0;
  padding-left: var(--space-5);
}

.entry-content li > p {
  margin-bottom: var(--space-2);
}

/* ── Ảnh — Gutenberg core/image (<figure class="wp-block-image">) ── */

.entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

.entry-content .wp-block-image,
.entry-content figure {
  margin: var(--space-8) 0;
  max-width: 100%;
}

.entry-content .wp-block-image img,
.entry-content figure img {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.entry-content .wp-block-image.alignwide,
.entry-content .wp-block-image.alignfull {
  max-width: 100%;
}

.entry-content figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-align: center;
  padding: var(--space-2) var(--space-4) 0;
}

/* Ảnh căn trái/phải Gutenberg — vẫn giới hạn để KHÔNG vỡ layout trên mobile. */
@media (min-width: 640px) {
  .entry-content .alignleft {
    float: left;
    margin: var(--space-1) var(--space-6) var(--space-4) 0;
    max-width: 50%;
  }
  .entry-content .alignright {
    float: right;
    margin: var(--space-1) 0 var(--space-4) var(--space-6);
    max-width: 50%;
  }
}
.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* ── Blockquote / Pullquote (core/quote, core/pullquote) ── */

.entry-content blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-subtle);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--color-text-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  font-style: italic;
}

.entry-content blockquote p:last-of-type {
  margin-bottom: 0;
}

.entry-content blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.entry-content .wp-block-pullquote {
  margin: var(--space-10) 0;
  padding: var(--space-6);
  text-align: center;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.entry-content .wp-block-pullquote blockquote {
  margin: 0;
  border-left: 0;
  background: transparent;
  padding: 0;
}

/* ── Bảng — CHỐNG VỠ MOBILE: bọc cuộn ngang, không cho tràn trang ── */

.entry-content .wp-block-table,
.entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-8) 0;
}

.entry-content table {
  border-collapse: collapse;
  min-width: 480px; /* Giữ đọc được — phần dư sẽ cuộn ngang thay vì bóp chữ. */
  font-size: var(--text-sm);
}

.entry-content .wp-block-table table {
  margin: 0; /* Tránh margin đôi khi table nằm trong figure.wp-block-table */
}

.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
  color: var(--color-text);
}

.entry-content th {
  background: var(--color-bg-subtle);
  color: var(--color-text-heading);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.entry-content tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}

/* DARK MODE (§4.2) — zebra dựa vào --color-bg/--color-bg-subtle gần như
   không phân biệt được trên near-black; border cần đậm hơn để làm nhiệm vụ
   phân dòng chính thay vì chỉ dựa vào chênh lệch màu nền. */
:root[data-theme="dark"] .entry-content td,
:root[data-theme="dark"] .entry-content th {
  border-color: var(--color-border);
}

/* ── Code / Preformatted (core/code, core/preformatted) ── */

.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-muted);
  color: var(--color-text-heading);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.entry-content pre {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-gray-900);
  color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 100%;
}

.entry-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* DARK MODE — vá "leak" (Ref: dark-theme-spec.md §2.4, §4.3).
   .entry-content pre dùng thẳng --color-gray-900/--color-gray-100 (primitive
   cố định) thay vì semantic alias. Ở dark mode, gray-900 (#111827) gần như
   TRÙNG MÀU với --color-bg mới (#0A0A0A) — khối code sẽ biến mất vào nền
   nếu không vá riêng. Đây là lỗi nghiêm trọng nhất nếu bỏ sót. */
:root[data-theme="dark"] .entry-content pre {
  background: var(--color-dark-surface-raised);
  color: var(--color-dark-text);
}

/* ── HR / Separator (core/separator) ── */

.entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-10) 0;
}

.entry-content .wp-block-separator.is-style-wide {
  border-top-width: 1px;
}

.entry-content .wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
  line-height: 1;
  height: auto;
  margin: var(--space-10) 0;
}

.entry-content .wp-block-separator.is-style-dots::before {
  content: '\00b7 \00b7 \00b7';
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
}

/* ── Columns / Buttons / Gallery (core/columns, core/buttons, core/gallery) ──
   Giới hạn an toàn — nếu team dùng các khối này, KHÔNG được vỡ ở mobile. */

.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.entry-content .wp-block-column {
  flex: 1 1 260px;
  min-width: 0;
}

.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--button-py) var(--button-px);
  background: var(--color-primary);
  color: var(--color-primary-on);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.entry-content .wp-block-button__link:hover {
  background: var(--color-primary-hover);
}

.entry-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-8) 0;
}

.entry-content .wp-block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Embed (core/embed — video/iframe) — KHÔNG cho tràn ngang ── */

.entry-content .wp-block-embed {
  margin: var(--space-8) 0;
  max-width: 100%;
}

.entry-content .wp-block-embed iframe,
.entry-content iframe {
  max-width: 100%;
}

.entry-content .wp-block-embed__wrapper {
  position: relative;
  overflow: hidden;
}