/* ==================================================
   Material for MkDocs 自訂樣式
   風格：黑白灰 (#333333) + 質感紅 (#d45c60)
   ================================================== */

/* ---------- 1. 字體導入 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

/* ---------- 2. 核心全域變數設定 ---------- */
:root {
  /* 黑白灰色系 (低飽和度) */
  --mb-black: #333333;
  --mb-dark-gray: #333333;   /* 主要文字與頂部導覽列 */
  --mb-mid-gray: #666666;
  --mb-light-gray: #999999;
  --mb-lighter-gray: #e0e0e0;
  --mb-bg: #fafafa;

  /* 主題強調色 (紅) */
  --mb-red: #b49a83;

  /* --- 覆寫 Material 內建變數 (消滅預設的紫色) --- */
  --md-primary-fg-color: var(--mb-dark-gray); /* 頂部標題列、主要按鈕背景 */
  --md-accent-fg-color: var(--mb-red);        /* 強調色 (例如 focus 狀態) */
  
  --md-default-bg-color: var(--mb-bg);
  --md-text-color: var(--mb-dark-gray);
  --md-text-font: "Inter", "Noto Sans TC", sans-serif;

  /* 超連結設定 */
  --md-typeset-a-color: var(--mb-red);

  /* 程式碼區塊 */
  --md-code-bg-color: #f5f5f5;
  --md-code-fg-color: var(--mb-dark-gray);
}

/* ---------- 3. 暗色模式 (Slate) 變數覆寫 ---------- */
[data-md-color-scheme="slate"] {
  --mb-black: #ffffff;
  --mb-dark-gray: #e0e0e0;
  --mb-mid-gray: #b0b0b0;
  --mb-light-gray: #808080;
  --mb-lighter-gray: #404040;
  --mb-bg: #1a1a1a;

  --md-primary-fg-color: #222222;
  --md-accent-fg-color: var(--mb-red);
  --md-default-bg-color: var(--mb-bg);
  --md-text-color: var(--mb-dark-gray);
  --md-code-bg-color: #2a2a2a;
  --md-code-fg-color: #e0e0e0;
}

/* ---------- 4. 基礎排版與佈局 (維持寬版) ---------- */
.md-grid {
  max-width: 75rem; /* 維持寬版設定 */
}

.md-typeset {
  font-size: 0.8rem !important;
  line-height: 2;
  letter-spacing: 0.02em;
}

/* ---------- 5. 標題設計 ---------- */
/* H1: 簡約底線 */
.md-typeset h1 {
  font-weight: 700;
  color: var(--mb-black);
  border-bottom: 1px solid var(--mb-black);
  padding-bottom: 0.5rem;
  margin: 1rem 0;
}

/* H2: 恢復原本的左側粗線 + 底部細線設計 */
.md-typeset h2 {
  font-family: var(--md-text-font);
  font-weight: 600;
  margin: 2.5rem 0 1.5rem;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 0.5rem solid var(--mb-black);
  border-bottom: 1px solid var(--mb-lighter-gray);
  color: var(--mb-dark-gray);
}

.md-typeset h3, 
.md-typeset h4 {
  font-weight: 600;
  color: var(--mb-dark-gray);
}

/* ---------- 6. 連結與互動 ---------- */
.md-typeset a {
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

/* ---------- 7. 程式碼與引用區塊 ---------- */
.md-typeset pre > code, 
.md-typeset code:not(pre code) {
  border: 1px solid var(--mb-lighter-gray);
  border-radius: 6px;
}

.md-typeset blockquote {
  border-left: 4px solid var(--mb-lighter-gray);
  color: var(--mb-light-gray);
  padding-left: 1rem;
  margin-left: 0;
  font-style: normal;
}

/* ---------- 8. 表格設計 (表頭置中) ---------- */
.md-typeset table th {
  text-align: center !important;         /* 表頭文字置中 */
  background-color: var(--mb-dark-gray); /* 深灰底色 */
  color: var(--mb-bg);                   /* 文字反白 */
  border: 1px solid var(--mb-lighter-gray);
}

.md-typeset table td {
  border: 1px solid var(--mb-lighter-gray);
}


.md-typeset .admonition, .md-typeset details {
    background-color: var(--md-admonition-bg-color);
    border: .075rem solid #448aff;
    border-radius: .2rem;
    box-shadow: var(--md-shadow-z1);
    color: var(--md-admonition-fg-color);
    display: flow-root;
    font-size: 0.8rem !important;
    margin: 1.5625em 0;
    padding: 0 .6rem;
    page-break-inside: avoid;
    transition: box-shadow 125ms;
}

/* ---------- 11. 手機版文字大小微調 ---------- */
@media screen and (max-width: 767px) {
  /* 放大主要內文 */
  .md-typeset {
    font-size: 1rem !important;  /* 預設約為 16px，可依喜好改為 18px */
    line-height: 2;            /* 字變大，行高也稍微拉開一點會更好讀 */
  }

  /* 稍微縮小標題，避免字體放大後標題在手機上折太多行 */
  .md-typeset h1 {
    font-size: 1.8rem;
  }
  
  .md-typeset h2 {
    font-size: 1.3rem;
  }
}