/**
 * article.css — K2 文章頁排版（鏡像 src/tokens.js 的設計 token）
 *
 * 對應 K2 markup 結構：
 *   .itemContainer > .itemHeader (h2.itemTitle) + .itemBody (.itemContent)
 *
 * ⚠️ 與 src/tokens.js 手動同步。token 改動時兩處都要改。
 */

:root {
  /* === Color (= color in tokens.js) === */
  --tc-primary:        #1B2D58;
  --tc-primary-light1: #30559F;
  --tc-primary-light2: #4F7BBE;
  --tc-accent:         #5DC5C4;  /* secondary7 */
  --tc-text:           #2C2C2C;
  --tc-text-muted:     #707070;
  --tc-text-soft:      #4C5364;  /* secondary6 */
  --tc-badge-bg:       #E8EEFE;  /* secondary11 */
  --tc-divider:        #E0E0E0;  /* gray8 */

  /* === Article typography (新增, tokens.js 尚未含) === */
  --tc-font-family:        'Noto Sans TC', sans-serif;
  --tc-font-body:          17px;
  --tc-font-lead:          18.5px;   /* introtext / pretext */
  --tc-font-h2:            36px;
  --tc-font-h3:            22px;
  --tc-font-caption:       14px;
  --tc-line-height:        1.95;
  --tc-line-height-lead:   2;
  --tc-letter-spacing:     0.02em;

  /* === Layout === */
  --tc-article-max-width:  920px;
  --tc-article-pad-x:      20px;

  /* === Elevation (= elevation in tokens.js) === */
  --tc-elevation-3: 0px 4px 4px rgba(0, 0, 0, 0.13), 0px 0px 14px rgba(0, 0, 0, 0.13);
}

/* ────────────────────────────────────────────────
 *  Container
 * ────────────────────────────────────────────────*/
.itemContainer {
  max-width: var(--tc-article-max-width);
  margin: 0 auto;
  padding: 0 var(--tc-article-pad-x);
}

/* ────────────────────────────────────────────────
 *  Header — h2.itemTitle
 * ────────────────────────────────────────────────*/
.itemHeader h2.itemTitle {
  font-family: var(--tc-font-family);
  font-size: var(--tc-font-h2);
  font-weight: 700;
  color: var(--tc-primary);
  line-height: 1.3;
  margin: 32px 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--tc-badge-bg);
}

/* ────────────────────────────────────────────────
 *  Content — .itemContent
 * ────────────────────────────────────────────────*/
.itemContent {
  font-family: var(--tc-font-family);
  font-size: var(--tc-font-body);
  line-height: var(--tc-line-height);
  color: var(--tc-text);
  letter-spacing: var(--tc-letter-spacing);
}

.itemContent p { margin: 0 0 16px; }

/* 章節小標 — <strong> + 4px 左 border */
.itemContent strong {
  display: inline-block;
  font-size: 1.12em;
  font-weight: 700;
  color: var(--tc-primary);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 4px solid var(--tc-accent);
}

/* 內文連結 */
.itemContent a {
  color: var(--tc-primary-light1);
  text-decoration: underline;
}
.itemContent a:hover { color: var(--tc-primary); }

/* ────────────────────────────────────────────────
 *  Image caption — .img_caption (K2 圖片浮動)
 * ────────────────────────────────────────────────*/
.itemContent .img_caption { margin: 6px 16px 12px; }
.itemContent .img_caption.left  { margin-right: 20px; }
.itemContent .img_caption.right { margin-left: 20px; }
.itemContent .img_caption img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.itemContent .img_caption span {
  display: block;
  font-size: var(--tc-font-caption);
  color: var(--tc-text-muted);
  line-height: 1.5;
  margin-top: 6px;
  text-align: center;
}
.itemContent .item-hr {
  width: 40px;
  height: 2px;
  background: var(--tc-accent);
  margin: 8px auto 0;
}

/* ────────────────────────────────────────────────
 *  Tables — K2 article 內的 <table>
 *  使用語意標籤：<thead> / <th colspan="N"> / <th scope="row">
 * ────────────────────────────────────────────────*/
.itemContent .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 24px;
}
.itemContent table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tc-divider);
  background: #fff;
  font-size: var(--tc-font-body);
  margin: 16px 0 24px;
}
.itemContent .table-wrap > table { margin: 0; }

.itemContent table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  color: var(--tc-primary);
  padding: 0 0 8px;
}

.itemContent table th,
.itemContent table td {
  padding: 12px 16px;
  border: 1px solid var(--tc-divider);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

/* header row（<thead>，或 colspan 跨欄的 <th>） */
.itemContent table thead th,
.itemContent table th[colspan] {
  background: var(--tc-badge-bg);
  color: var(--tc-primary);
  font-weight: 700;
  font-size: 1.02em;
  letter-spacing: 0.03em;
}

/* row label（<th scope="row">）— 第一欄當「分類標籤」用 */
.itemContent table th[scope="row"] {
  background: var(--tc-badge-bg);
  color: var(--tc-primary);
  font-weight: 600;
  width: 25%;
  white-space: nowrap;
}

.itemContent table tbody tr:hover td,
.itemContent table tbody tr:hover th[scope="row"] {
  background: #FAFAFA;
}
.itemContent table tbody tr:hover th[scope="row"] {
  background: #DCE5F9;
}

/* ────────────────────────────────────────────────
 *  RWD
 * ────────────────────────────────────────────────*/
@media (max-width: 800px) {
  :root {
    --tc-font-body: 16px;
    --tc-font-lead: 17px;
    --tc-font-h2: 28px;
    --tc-line-height: 1.85;
  }
  .itemContent .img_caption {
    float: none !important;
    display: block;
    width: auto !important;
    max-width: min(100%, 360px);
    margin: 12px auto 20px !important;
  }
  .itemContent table { font-size: 14px; }
  .itemContent table th,
  .itemContent table td { padding: 8px 12px; }
  .itemContent table th[scope="row"] { width: auto; white-space: normal; }
}