/* 引入主頁相同的字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;600;900&family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap');

:root {
  /* 定義主頁的 Matcha Zen 色系 */
  --matcha-deep: #2d4436;
  --matcha-mid: #3d5a47;
  --matcha: #4a6b54;
  --matcha-light: #6b8c73;
  --washi-cream: #faf7f0;
  --washi-white: #fffefb;
  --rouge: #c75b5b;
  --rouge-soft: #d4817f;
  --gold-accent: #d4a574;
  --text-zen: #2a352e;
  --text-soft: #5a6660;

  /* 覆寫 Material for MkDocs 預設變數 */
  --md-text-font: 'Noto Serif TC', serif;
  --md-code-font: 'Roboto Mono', monospace;
  
  --md-primary-fg-color: var(--matcha-deep); /* 頂部導覽列顏色 */
  --md-primary-bg-color: var(--washi-white);
  --md-accent-fg-color: var(--rouge); /* 連結與強調色 */
  
  --md-default-fg-color: var(--text-zen);
  --md-default-fg-color--light: var(--text-soft);
  --md-default-bg-color: transparent; /* 讓自訂背景透出來 */
}

/* 背景質感：仿造主頁的漸層與紋理 */
body[data-md-color-scheme="default"] {
  background: 
    radial-gradient(circle at 20% 80%, rgba(199,91,91,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(212,165,116,0.05) 0%, transparent 50%),
    linear-gradient(165deg, 
      #f5f2ea 0%, 
      #ece8dd 25%,
      #e3dfd2 50%,
      #d9d5c8 75%,
      #cfc9ba 100%
    );
  min-height: 100vh;
}

/* 為內容區塊加上和紙質感卡片效果 */
.md-content {
  background: var(--washi-white);
  padding: 2rem;
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(45,68,54,0.08),
    0 3px 12px rgba(45,68,54,0.05);
  margin-top: 20px;
  margin-bottom: 40px;
}

/* 標題樣式美化 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif TC', serif;
  color: var(--matcha-deep);
  font-weight: 700;
  letter-spacing: 0.02em;
}

h1 {
  font-size: 2.2rem;
  border-bottom: 2px solid rgba(74,107,84,0.15);
  padding-bottom: 0.5rem;
}

h2 {
  font-size: 1.6rem;
  color: var(--matcha);
}

h3 {
  font-size: 1.3rem;
  border-left: 4px solid var(--matcha-light);
  padding-left: 10px;
}

/* 側邊導覽列美化 */
.md-nav__link {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
}
.md-nav__link--active {
  color: var(--rouge) !important;
  font-weight: 700;
}

/* 頁首 header 透明度與模糊效果 (毛玻璃) */
.md-header {
  background: rgba(250,247,240,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(74,107,84,0.12);
  color: var(--matcha-deep);
  box-shadow: 0 1px 3px rgba(45,68,54,0.05);
}

/* 讓 Header 上的字變為深色 */
.md-header__button.md-logo,
.md-header-nav__button,
.md-header__title,
.md-tabs__link,
.md-header__button {
  color: var(--matcha-deep) !important;
}

/* 頂部導覽列搜尋框 */
.md-search__input {
  background-color: rgba(74,107,84,0.1) !important;
  color: var(--text-zen) !important;
}

/* =========================================
   Medium-Style Blog Design (Refined)
   ========================================= */

/* ----------------------------------
   1. Shared Layout & Reset
   ---------------------------------- */

/* Hide sidebar navigation on blog pages to focus on content */
.md-container:has(.md-post) .md-sidebar--primary,
.md-container:has(.md-post--excerpt) .md-sidebar--primary,
.md-container:has(.md-post) .md-sidebar--secondary, 
.md-container:has(.md-post--excerpt) .md-sidebar--secondary {
  display: none;
}

/* Center the content area */
.md-container:has(.md-post) .md-content,
.md-container:has(.md-post--excerpt) .md-content {
  margin: 0 auto;
  max-width: 900px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Adjust grid to fill space since sidebar is gone */
.md-container:has(.md-post) .md-grid,
.md-container:has(.md-post--excerpt) .md-grid {
  max-width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ----------------------------------
   2. Blog Index (List Page - Grid Style / 方格子風格)
   ---------------------------------- */

/* Container for the list of posts */
.md-post--excerpt {
  max-width: 900px;
  margin: 0 auto 3rem auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-areas: 
    "image"
    "meta"
    "title"
    "excerpt";
  gap: 0.5rem;
}

/* Desktop layout: Image on the left, Text on the right */
@media screen and (min-width: 768px) {
  .md-post--excerpt {
    grid-template-areas: 
      "image meta"
      "image title"
      "image excerpt";
    grid-template-columns: 280px 1fr;
    gap: 0 1.5rem; /* Margin right 1.5rem for image */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .md-post--excerpt:hover {
    transform: translateY(-5px);
  }
}

/* Post Title in List */
.md-post--excerpt h2 {
  grid-area: title;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-zen);
  border: none;
  padding: 0;
}

.md-post--excerpt h2 > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.md-post--excerpt h2 > a:hover {
  color: var(--matcha);
}

/* Post Meta (Date / Read time) in List */
.md-post--excerpt .md-post__meta {
  grid-area: meta;
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Post Excerpt (Preview Text) */
.md-post--excerpt p {
  grid-area: excerpt;
  font-family: 'Noto Serif TC', serif;
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
  
  /* Clamp text to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post Cover Image in List */
.md-post--excerpt img {
    grid-area: image;
    width: 100%;
    height: 135px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background-color: var(--washi-cream); /* Placeholder color if image fails to load or is transparent */
}

/* Handle missing images (if MkDocs structure allows, otherwise we rely on JS or backend. 
   Pure CSS fallback for broken images is tricky, but we can style the container if it's empty or hidden) 
   Assuming the img tag is always present if defined in front matter.
*/

@media screen and (min-width: 768px) {
  .md-post--excerpt img {
    height: 180px;
  }
}

/* ----------------------------------
   2.1 Featured Post (First Article)
   ---------------------------------- */
.md-post--excerpt:first-child {
  grid-template-areas: 
    "image"
    "meta"
    "title"
    "excerpt";
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.md-post--excerpt:first-child img {
  height: auto;
  aspect-ratio: 16/9;
  max-height: 400px;
  width: 100%;
}

.md-post--excerpt:first-child h2 {
  font-size: 2rem;
  margin-top: 0.5rem;
}

.md-post--excerpt:first-child p {
  -webkit-line-clamp: 2;
  font-size: 1.1rem;
}

/* Remove border from the last post */
.md-post--excerpt:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ----------------------------------
   3. Post Page (Article - Medium Style)
   ---------------------------------- */

/* Specific wrapper for single post content */
article.md-post {
  max-width: 800px;
  margin: 4rem auto;
  font-family: 'Noto Serif TC', serif;
}

/* H1 Title */
article.md-post h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-zen);
  line-height: 1.2;
  margin-bottom: 1rem;
  border: none;
  padding: 0;
}


/* Content Typography */
article.md-post .md-content__inner {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75;
  color: #2d2d2d;
}

article.md-post .md-content__inner p {
  margin-bottom: 1.5rem;
}



/* Separator */
article.md-post hr {
  margin: 3rem auto;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 50%;
}

/* Links inside article */
article.md-post a {
  color: var(--matcha);
  text-decoration: underline;
  text-decoration-color: rgba(74, 107, 84, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s;
}

article.md-post a:hover {
  color: var(--matcha-deep);
  text-decoration-color: var(--matcha);
  background-color: rgba(74, 107, 84, 0.05);
}

/* Hide header anchor links (cleaner look) */
article.md-post .headerlink {
  display: none;
}

/* Hide header anchor symbol (¶) in blog posts */
.md-post .headerlink,
.md-post h1:hover .headerlink,
.md-post h2:hover .headerlink,
.md-post h3:hover .headerlink,
.md-post h4:hover .headerlink,
.md-post h5:hover .headerlink,
.md-post h6:hover .headerlink {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Hide metadata labels (e.g. "Author:", "Date:") if they exist as separate elements or use content property tricks */
/* This depends on the theme structure, but generally: */
.md-post__meta label, 
.md-post__meta .md-meta__title {
    display: none;
}

/* Typography Optimizations */
article.md-post p {
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    color: var(--text-zen);
}

article.md-post h2 {
    font-size: 1.75rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    color: var(--matcha-deep); /* Darker for better contrast */
    font-weight: 700;
    letter-spacing: -0.01em;
}

article.md-post h3 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--matcha);
    font-weight: 600;
}

/* Blockquotes optimization */
article.md-post blockquote {
    border-left: 3px solid var(--matcha);
    margin: 2rem 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    color: var(--text-soft);
    font-style: italic;
    font-size: 1.1rem;
    background: rgba(74, 107, 84, 0.03); /* Subtle background */
    border-radius: 0 8px 8px 0;
}

/* Move author info (metadata) - We can't move DOM elements with CSS, but we can style the top one to be less obtrusive or hide it if there's a footer one. */
/* Assuming the request means to emphasize the bottom one or visually move it. */
/* Let's try to order if it's in a flex container, or just style the top one as minimal date only. */
/* For now, let's just make the top metadata very subtle. */
article.md-post .md-post__meta {
    font-size: 0.9rem;
    color: #888;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 3rem;
}

/* Hide top metadata completely if we want to move it to bottom */
/* But often users want date at top. Let's assume "Move author info" means the detailed bio. */
/* If the theme puts author bio at top, we hide it. */
.md-typeset .md-content__inner > .md-typeset__meta {
    display: none;
}

/* Ensure footer author info is prominent */
.md-post__footer {
    display: block;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Typography Optimizations - Continued */
/* Improve list spacing */
article.md-post ul, article.md-post ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

article.md-post li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Image handling in posts */
article.md-post img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
}


/* Back to Blog Button */
.md-post__back {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  color: var(--matcha);
  font-weight: 500;
  text-decoration: none;
}
.md-post__back:hover {
  color: var(--matcha-deep);
}

/* Social Icons (Footer) */
.footer-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-icon {
  width: 24px;
  height: 24px;
  color: #a0aab2;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
  color: var(--gold-accent);
  transform: translateY(-2px);
}


/* Blog 文章結尾 CTA */
.blog-post-cta {
  margin: 48px 0 32px;
  padding: 28px 32px;
  background: rgba(74, 107, 84, 0.06);
  border: 1px solid rgba(74, 107, 84, 0.15);
  border-radius: 16px;
  text-align: center;
}

.blog-post-cta p {
  font-size: 1rem;
  color: var(--matcha-deep);
  margin-bottom: 16px;
  font-weight: 500;
}

.blog-post-cta a {
  display: inline-block;
  padding: 10px 28px;
  background: var(--matcha-deep);
  color: var(--washi-cream) !important;
  border-radius: 24px;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.blog-post-cta a:hover {
  background: var(--matcha) !important;
}

/* Blog 列表頁分類標籤 */
.blog-category-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.blog-category-chip {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(74, 107, 84, 0.25);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-category-chip:hover,
.blog-category-chip.active {
  background: var(--matcha-deep);
  border-color: var(--matcha-deep);
  color: var(--washi-cream);
}
/* ================================================
   Blog 列表頁 — Medium 風格（v2）
   ================================================ */

/* 卡片外層：清除預設樣式，加上細分隔線與留白 */
article.md-post--excerpt {
  display: block;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding: 36px 0;
  margin: 0 !important;
  transition: opacity 0.2s ease;
}

article.md-post--excerpt:last-child {
  border-bottom: none;
}

article.md-post--excerpt:hover {
  opacity: 0.72;
}

/* Header：作者頭像 + meta 同一行 */
article.md-post--excerpt .md-post__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
  border: none;
}

/* 作者頭像：縮成 20px 小圓圈 */
article.md-post--excerpt .md-post__authors {
  margin: 0;
  padding: 0;
  line-height: 1;
}

article.md-post--excerpt .md-author {
  display: inline-flex;
}

article.md-post--excerpt .md-author img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  object-fit: cover;
}

/* Meta（日期、分類、閱讀時間）：統一小字灰色 */
article.md-post--excerpt .md-post__meta {
  margin: 0;
}

article.md-post--excerpt .md-meta__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

article.md-post--excerpt .md-meta__item {
  font-size: 0.78rem;
  color: #9e9e9e;
  font-weight: 400;
  line-height: 1;
}

/* meta 項目間用點分隔 */
article.md-post--excerpt .md-meta__item + .md-meta__item::before {
  content: "·";
  margin: 0 6px;
  color: #bdbdbd;
}

article.md-post--excerpt .md-meta__item time {
  font-size: 0.78rem;
  color: #9e9e9e;
}

article.md-post--excerpt .md-meta__link {
  font-size: 0.78rem;
  color: #9e9e9e;
  text-decoration: none;
}

article.md-post--excerpt .md-meta__link:hover {
  color: #2d4436;
  text-decoration: none;
}

/* Content 區塊 */
article.md-post--excerpt .md-post__content {
  padding: 0;
}

/* 標題：大字粗體，最多 2 行 */
article.md-post--excerpt .md-post__content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #191919;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

article.md-post--excerpt .md-post__content h2 a {
  color: inherit;
  text-decoration: none;
}

article.md-post--excerpt .md-post__content h2 a:hover {
  color: inherit;
  text-decoration: none;
}

/* 摘要：小字深灰，最多 2 行省略號 */
article.md-post--excerpt .md-post__content > p {
  font-size: 0.92rem;
  color: #6b6b6b;
  line-height: 1.65;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 「繼續閱讀」按鈕：改成低調小字連結風格 */
article.md-post--excerpt .md-post__action {
  margin: 0;
  padding: 0;
}

article.md-post--excerpt .md-post__action a {
  font-size: 0.8rem;
  color: #9e9e9e;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

article.md-post--excerpt .md-post__action a:hover {
  color: #2d4436;
}

article.md-post--excerpt .md-post__action a::after {
  content: " →";
}

/* ================================================
   行動版（≤ 768px）
   ================================================ */
@media (max-width: 768px) {
  article.md-post {
    margin: 2rem 1rem;
  }

  article.md-post--excerpt {
    padding: 24px 0;
  }

  article.md-post--excerpt .md-post__content h2 {
    font-size: 1.05rem;
  }

  article.md-post--excerpt .md-post__content > p {
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
  }
}