/* ============================================================
   中醫生理病理學 — Claude/Anthropic 風格主題
   warm cream · walnut · terracotta · Iansui
   ============================================================ */


/* ===== 0. 品牌字體（Iansui 芫荽 — 繁體中文 humanist face） === */
@font-face {
  font-family: "Iansui";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Iansui-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Iansui";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Iansui-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Iansui";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Iansui-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Iansui";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Iansui-Regular.ttf") format("truetype");
}


/* ===== 1. 自訂色票（淺色模式） ============================= */
[data-md-color-scheme="default"] {
  /* 背景層 */
  --md-default-bg-color:           #FAF7F0;
  --md-default-bg-color--light:    #F4F1EA;
  --md-default-bg-color--lighter:  #F0EBE0;
  --md-default-bg-color--lightest: #E8E2D6;

  /* 文字層（暖色深炭） */
  --md-default-fg-color:           #2C2926;
  --md-default-fg-color--light:    #4A4540;
  --md-default-fg-color--lighter:  #7A746E;
  --md-default-fg-color--lightest: #BDB6AC;

  /* 主色（核桃褐，header／footer 用） */
  --md-primary-fg-color:           #5C3A2E;
  --md-primary-fg-color--light:    #7A4F40;
  --md-primary-fg-color--dark:     #3D2620;
  --md-primary-bg-color:           #FAF7F0;
  --md-primary-bg-color--light:    rgba(250, 247, 240, 0.7);

  /* 強調色（赤陶） */
  --md-accent-fg-color:                #B85C3F;
  --md-accent-fg-color--transparent:   rgba(184, 92, 63, 0.10);
  --md-accent-bg-color:                #FAF7F0;
  --md-accent-bg-color--light:         rgba(184, 92, 63, 0.05);

  /* code */
  --md-code-bg-color:              #EDE6D8;
  --md-code-fg-color:              #5C3A2E;

  /* link */
  --md-typeset-a-color:            #B85C3F;

  /* table border 微調 */
  --md-typeset-table-color:        var(--md-default-fg-color--lightest);
}


/* ===== 2. 自訂色票（深色模式） ============================= */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #1F1B17;
  --md-default-bg-color--light:    #2A2521;
  --md-default-bg-color--lighter:  #2D2823;
  --md-default-bg-color--lightest: #3A332C;

  --md-default-fg-color:           #E8E2D6;
  --md-default-fg-color--light:    #C8C2B8;
  --md-default-fg-color--lighter:  #989288;
  --md-default-fg-color--lightest: #5C5650;

  --md-primary-fg-color:           #C8997F;
  --md-primary-fg-color--light:    #E0B898;
  --md-primary-fg-color--dark:     #A07B68;
  --md-primary-bg-color:           #1F1B17;
  --md-primary-bg-color--light:    rgba(31, 27, 23, 0.7);

  --md-accent-fg-color:                #D88062;
  --md-accent-fg-color--transparent:   rgba(216, 128, 98, 0.18);
  --md-accent-bg-color:                #1F1B17;
  --md-accent-bg-color--light:         rgba(216, 128, 98, 0.10);

  --md-code-bg-color:              #2A2521;
  --md-code-fg-color:              #E0B898;

  --md-typeset-a-color:            #D88062;

  --md-typeset-table-color:        var(--md-default-fg-color--lightest);
}


/* ===== 3. 文字節奏 ========================================== */
.md-typeset {
  font-feature-settings: "kern", "liga", "palt";
  line-height: 1.85;
  letter-spacing: 0.01em;
  font-size: 0.78rem;
}

@media screen and (min-width: 76.25em) {
  .md-typeset {
    font-size: 0.8rem;
  }
}

/* 限制文字欄寬，提升閱讀舒適度 */
.md-content__inner {
  max-width: 52rem;
  margin: 0 auto;
}

/* 段落 */
.md-typeset p {
  margin: 0.9em 0;
}


/* ===== 4. 標題層級 ========================================== */
.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 1.85em;
  margin-top: 0.3em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.4em;
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  letter-spacing: 0;
  color: var(--md-default-fg-color);
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.15em;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  color: var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--md-primary-fg-color--light);
}

.md-typeset h4 {
  font-weight: 500;
  font-size: 1.02em;
  margin-top: 1.4em;
  color: var(--md-default-fg-color--light);
}


/* ===== 5. 引文塊（《內經》原文） ============================ */
.md-typeset blockquote {
  border-left: 3px solid var(--md-accent-fg-color);
  background: var(--md-default-bg-color--light);
  padding: 0.85em 1.3em;
  margin: 1.2em 0;
  color: var(--md-default-fg-color);
  border-radius: 0 4px 4px 0;
  font-feature-settings: "kern", "liga", "palt";
}

.md-typeset blockquote p {
  margin: 0.45em 0;
}

.md-typeset blockquote p:first-child {
  margin-top: 0;
}

.md-typeset blockquote p:last-child {
  margin-bottom: 0;
}


/* ===== 6. 表格 ============================================== */
.md-typeset table:not([class]) {
  border: none;
  border-collapse: collapse;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.92em;
  margin: 1.4em 0;
  background: transparent;
  box-shadow: none;
}

.md-typeset table:not([class]) thead {
  background: var(--md-default-bg-color--lighter);
}

.md-typeset table:not([class]) th {
  font-weight: 600;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  border-bottom: 2px solid var(--md-default-fg-color--lighter);
  padding: 0.75em 1em;
  text-align: left;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.75em 1em;
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 0.15s ease;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--md-accent-bg-color--light);
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}


/* ===== 7. Grid Cards ======================================= */
.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  padding: 1.4em 1.6em;
  background: var(--md-default-bg-color--light);
  transition: all 0.2s ease;
  box-shadow: none;
}

.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li:hover,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.md-typeset .grid.cards .twemoji {
  color: var(--md-accent-fg-color);
}


/* ===== 8. 行內代碼／反引號 ================================== */
.md-typeset code {
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  font-size: 0.9em;
  font-feature-settings: "calt", "liga";
}


/* ===== 9. 連結 ============================================== */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--md-typeset-a-color);
  transition: all 0.15s ease;
}

.md-typeset a:hover {
  border-bottom-style: solid;
  color: var(--md-accent-fg-color);
}

/* 不要影響卡片內標題型連結與 nav 連結 */
.md-typeset .grid.cards a,
.md-nav a,
.md-tabs a,
.md-typeset .headerlink {
  border-bottom: none;
}


/* ===== 10. Permalink ⚓ 收斂 ================================ */
.md-typeset .headerlink {
  color: var(--md-default-fg-color--lightest);
  margin-left: 0.4em;
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink {
  opacity: 0.5;
}

.md-typeset h1:hover .headerlink:hover,
.md-typeset h2:hover .headerlink:hover,
.md-typeset h3:hover .headerlink:hover,
.md-typeset h4:hover .headerlink:hover {
  opacity: 1;
}


/* ===== 11. Header (top bar) ================================= */
.md-header {
  background-color: var(--md-primary-fg-color);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.md-header__topic:first-child {
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ===== 12. 上方 tabs（主分類） ============================== */
.md-tabs {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.md-tabs__link {
  font-weight: 500;
  opacity: 0.85;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}


/* ===== 13. 搜尋框 =========================================== */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.13);
  border-radius: 4px;
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.18);
}


/* ===== 14. 側邊欄導航 ======================================= */
.md-nav__title {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--md-accent-fg-color);
  font-weight: 500;
}


/* ===== 15. Admonition（提示框） ============================= */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 4px;
  border-left-width: 3px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  font-size: 0.95em;
  background: var(--md-default-bg-color--light);
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  background: transparent;
  padding-left: 2.5em;
}

/* 「延伸」note 框：用赤陶色 */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--md-accent-fg-color);
  background: var(--md-accent-bg-color--light);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--md-accent-fg-color);
}


/* ===== 16. 水平分隔線 ======================================= */
.md-typeset hr {
  border: none;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  margin: 2.5em auto;
  max-width: 60%;
  opacity: 0.7;
}


/* ===== 17. 列表 ============================================= */
.md-typeset ul,
.md-typeset ol {
  margin-left: 0.4em;
}

.md-typeset li {
  margin: 0.35em 0;
}

.md-typeset ul > li > p:first-child,
.md-typeset ol > li > p:first-child {
  margin-top: 0;
}


/* ===== 18. Footer =========================================== */
.md-footer {
  background-color: var(--md-primary-fg-color--dark);
}

.md-footer-meta {
  background-color: rgba(0, 0, 0, 0.15);
}


/* ===== 19. 中文字體（品牌：Iansui ＋ 系統 fallback） ========== */
body,
.md-typeset {
  font-family:
    "Iansui",
    "Noto Serif TC",
    "Noto Serif CJK TC",
    "Source Han Serif TC",
    "Source Han Serif",
    "Songti TC",
    "Songti SC",
    "STSong",
    "宋體",
    "新細明體",
    serif;
}

/* 標題仍用 brand serif，給予「古籍題簽」之質感 */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family:
    "Iansui",
    "Noto Serif TC",
    "Noto Serif CJK TC",
    "Source Han Serif TC",
    "Songti TC",
    serif;
}

/* Header / 導航 / Tabs 也使用品牌字 */
.md-header,
.md-tabs,
.md-nav {
  font-family:
    "Iansui",
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    "Heiti TC",
    sans-serif;
}


/* ===== 20. 首頁特殊處理 ===================================== */
[data-md-page-type="index"] .md-content__inner > h1:first-child,
.md-typeset:has(> h1:first-child) > h1:first-child {
  /* 大標可較大、稍居中 */
}


/* ===== 21. 列印優化 ========================================= */
@media print {
  .md-typeset blockquote {
    border-left: 1.5pt solid #999;
    background: transparent;
    color: #000;
  }
  .md-typeset {
    color: #000;
  }
  .md-content__inner {
    max-width: 100%;
  }
}


/* ===== 22. 細節：標籤式行內代碼之間距 ======================= */
.md-typeset code + code {
  margin-left: 0.25em;
}


/* ===== 23. 標籤索引頁與標籤元素 ============================= */

/* 標籤頁的自動產生標籤列表 */
.md-typeset .md-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 1em 0 1.5em;
}

/* 個別標籤 chip */
.md-tag,
.md-typeset .md-tag {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.15s ease;
}

.md-tag:hover,
.md-typeset .md-tag:hover {
  background: var(--md-accent-fg-color--transparent);
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
  transform: translateY(-1px);
}

/* 主題頁頁首之標籤群（front matter tags 自動展示） */
.md-content__inner > nav.md-tags + h1,
.md-typeset .md-tags + h1 {
  margin-top: 1em;
}

/* 標籤索引頁中按標籤分組之列表 */
.md-typeset .tagged-pages {
  list-style: none;
  padding-left: 0;
  margin: 0.5em 0 1.5em;
}

.md-typeset .tagged-pages li {
  margin: 0.3em 0;
  padding-left: 1em;
  border-left: 2px solid var(--md-default-fg-color--lightest);
}

.md-typeset .tagged-pages li:hover {
  border-left-color: var(--md-accent-fg-color);
}


/* ===== 24. 滾動條（Webkit） ================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--md-default-bg-color--lighter);
}

::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--lightest);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-accent-fg-color);
}