/* ============================================================
 * blog.css — 部落格列表 + 詳細頁專屬樣式
 * 載入位置：pages/{locale}/blog/index.php 與 detail.php 內透過 section('styles') 引入
 * ============================================================ */

/* ---------- 詳細頁文章本體 prose 樣式 ----------
 * blog-detail body_html 是裸 HTML（admin 從 TinyMCE 編出來的標準 HTML）。
 * 由於 Tailwind CDN 預設沒 @tailwindcss/typography，這裡手刻 prose。 */
.article-body {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-family: 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif !important;
  color: #1c1c1c;
}

.article-body>*+* {
  margin-top: 1.25rem;
}

.article-body h2 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 2.5rem;
  letter-spacing: -0.01em;
  scroll-margin-top: 5rem;
  /* sticky header offset */
}

.article-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.75rem;
  color: #21a7f1;
}

.article-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 1.5rem;
}

.article-body p {
  line-height: 1.85;
}

.article-body strong {
  color: #1c1c1c;
  font-weight: 700;
}

.article-body a {
  color: #4ac7e9;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .15s;
}

.article-body a:hover {
  color: #1aa6d4;
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
}

.article-body ul>li {
  list-style: disc;
  margin-top: .5rem;
}

.article-body ol>li {
  list-style: decimal;
  margin-top: .5rem;
}

.article-body li>strong:first-child {
  color: #0d7ba8;
}

.article-body blockquote {
  border-left: 4px solid #57c3ea;
  padding: .5rem 0 .5rem 1.25rem;
  color: #4a5568;
  font-style: italic;
}

.article-body img {
  border-radius: 1rem;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

.article-body section {
  scroll-margin-top: 5rem;
}

/* not-prose：admin 內嵌的「不要套 prose 樣式」區塊（例如 TOC、Continue Reading box、Author box）*/
.article-body .not-prose {
  line-height: normal;
}

.article-body .not-prose>*+* {
  margin-top: 0;
}

.article-body .not-prose h3 {
  margin-top: 0;
  color: inherit;
}

/* 取消 .article-body img 對 not-prose 內 img 的覆寫，讓 Tailwind w-full/h-full/object-cover 正常生效 */
.article-body .not-prose img {
  border-radius: 0;
  margin: 0;
  max-width: none;
  height: 100%;
  width: 100%;
}

.article-body .not-prose ol>li,
.article-body .not-prose ul>li {
  list-style: none;
  margin-top: 0;
}

.article-body .not-prose a {
  text-decoration: none;
}

/* ---------- 文章內 Table of Contents：<div class="tocclass">  ----------
 * admin 在 TinyMCE 內手動加 class="tocclass"。預期內部結構（不強制階層）：
 *   <p><a href="#x">主章節</a></p>
 *   <ul><li><a href="#y">子章節</a></li>...</ul>
 * 重複多組。主章節 counter 編號 1./2./3.；子章節縮排 bullet。
 * HTML 結構內 inline style（color/font-size 等）由 .tocclass 規則覆寫忽略。 */

.article-body .tocclass {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 2rem 2.5rem 2.25rem;
  margin: 2.5rem 0;
  font-family: 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
}

/* 上方 chip："TABLE OF CONTENTS" + 延伸橫線 — column-span: all 跨欄 in-flow */
.article-body .tocclass::before {
  content: 'TABLE OF CONTENTS';
  display: block;
  column-span: all;
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #0d4a7a;
  padding-bottom: 0.9rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid #d6dadf;
}

/* admin 可選用 <h2>目錄</h2> 或 <h3>目錄</h3> 放 .tocclass 第一個位置加大標
 * 沒加也 OK（只有 chip 視覺也完整）。加了就自動跨欄、覆寫 .article-body h2/h3 全域樣式 */
.article-body .tocclass>h1,
.article-body .tocclass>h2,
.article-body .tocclass>h3 {
  column-span: all;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #1c1c1c;
  margin: 0 0 1.25rem;
  scroll-margin-top: 0;
}

/* 兩欄 layout（>=720px）。每組 p + 它後面的 ul/ol 不分開 */
@media (min-width: 720px) {
  .article-body .tocclass {
    column-count: 2;
    column-gap: 3rem;
  }

  .article-body .tocclass>p {
    break-after: avoid;
  }

  .article-body .tocclass>ul,
  .article-body .tocclass>ol {
    break-before: avoid;
    break-inside: avoid;
  }
}

/* 主章節：<p><a>...</a></p> 純條列，無編號 */
.article-body .tocclass>p {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* a tag：預設無底線，hover 才顯示 */
.article-body .tocclass a,
.article-body .tocclass a span {
  color: #0f4c75 !important;
  font-size: inherit !important;
  font-weight: 400;
  text-decoration: none;
  transition: color .15s;
}

.article-body .tocclass a:hover,
.article-body .tocclass a:hover span {
  color: #4ac7e9 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 子章節：<ul><li> 或 <ol><li>，強制移除瀏覽器內建 disc/decimal、移除左框線 */
.article-body .tocclass ul,
.article-body .tocclass ol {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0.25rem 0 0.75rem 2rem;
  padding-left: 0.5rem;
  counter-reset: none;
}

.article-body .tocclass li,
.article-body .tocclass ul>li,
.article-body .tocclass ol>li {
  position: relative;
  margin: 0.4rem 0;
  padding-left: 1rem;
  font-size: 0.92rem;
  list-style: none !important;
  list-style-type: none !important;
  color: inherit !important;
}

/* 完全消滅 marker（modern browsers 支援 ::marker pseudo） */
.article-body .tocclass li::marker,
.article-body .tocclass ul>li::marker,
.article-body .tocclass ol>li::marker {
  content: '' !important;
  display: none !important;
}

.article-body .tocclass ul>li::before,
.article-body .tocclass ol>li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #4ac7e9;
}

/* ---------- 共用 utility ---------- */
.scroll-mt {
  scroll-margin-top: 5rem;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* search 結果高亮 */
mark.js-hl {
  background: #fff3a8;
  color: #0d7ba8;
  padding: 0 .15em;
  border-radius: .2em;
  font-weight: 700;
}

/* ============================================================
 * sidebar 分類列表（blog list / detail 共用）
 * 用 .kpn-sidebar-cats 命名空間 + !important 隔離 admin body_html
 * 可能 leak 的 ul/li/a 樣式。admin body 不會出現這 class，CSS 蓋不到。
 * ============================================================ */

.kpn-sidebar-cats {
  background: #fff !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
}

.kpn-sidebar-cats__title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #0d7ba8 !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  background: transparent !important;
}

.kpn-sidebar-cats__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  background: transparent !important;
}

.kpn-sidebar-cats__list--child {
  margin: 0.5rem 0 0 0.75rem !important;
  /* 子分類左縮排：1.25rem - 8px = 0.75rem */
}

.kpn-sidebar-cats__item {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  font-size: 0.875rem !important;
  background: transparent !important;
  list-style: none !important;
}

.kpn-sidebar-cats__list--child>.kpn-sidebar-cats__item {
  margin: 0 0 0.375rem !important;
}

.kpn-sidebar-cats__bullet {
  flex-shrink: 0 !important;
  font-weight: bold !important;
  line-height: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.kpn-sidebar-cats__bullet--parent {
  color: #0d7ba8 !important;
}

.kpn-sidebar-cats__bullet--child {
  color: #57c3ea !important;
}

.kpn-sidebar-cats__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.kpn-sidebar-cats__link {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color .15s !important;
}

.kpn-sidebar-cats__link--parent {
  color: #1c1c1c !important;
  font-weight: 600 !important;
}

.kpn-sidebar-cats__link--child {
  color: #475569 !important;
  font-weight: 400 !important;
}

.kpn-sidebar-cats__link:hover {
  color: #0d7ba8 !important;
}

.kpn-sidebar-cats__link.is-active {
  color: #0d7ba8 !important;
  font-weight: 600 !important;
}

.kpn-sidebar-cats__count {
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  background: transparent !important;
  margin-left: 0.25rem !important;
}