/**
 * 文章內文（前台與區塊編輯器共用，只需改這裡）
 *
 * 前台：一般樣式表，順序在 content.css 之後。
 * 編輯器：inc/setup.php 讀取本檔，把 `.entry-content` 換成編輯區、rem 換成 px 後載入，
 * 因此寫文章時看到的字級、行距、配色與前台相同。
 *
 * 撰寫規則：
 * - 選擇器以 `.entry-content`（或低權重的 `:where(.entry-content)`）開頭，或只用範本自己的 class（.yf-species 等）；
 *   不可依賴 body 上的頁面 class（.is-singular、.has-post-thumbnail…），編輯器沒有這些 class。
 * - 修改後在 tools/ 執行 `npm run compare:editor`，確認前台與編輯器一致。
 *
 * @package Yafun2027
 */

/* ==========================================================================
   內文基礎：字型、字級、行距（明確寫出，不依賴瀏覽器與全站預設）
   元素選擇器用 :where() 保持低權重，範本的 class 才能覆蓋
   ========================================================================== */

:where(.entry-content) p {
  padding: 0 0 1.5em;
}

:where(.entry-content) h1,
:where(.entry-content) h2,
:where(.entry-content) h3,
:where(.entry-content) h4,
:where(.entry-content) h5,
:where(.entry-content) h6 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

:where(.entry-content) h2 {
  font-size: 1.5em;
  line-height: 1.38;
}

:where(.entry-content) h3 {
  font-size: 1.17em;
  line-height: 1.38;
}

:where(.entry-content) h4 {
  font-size: 1em;
  line-height: inherit;
}

:where(.entry-content) ul,
:where(.entry-content) ol {
  margin: 0 0 1.5em 3em;
  padding: 0;
}

:where(.entry-content) em {
  font-style: italic;
}

/* ==========================================================================
   內文閱讀體驗
   ========================================================================== */

.entry-content {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--color-text);
  font-size: calc(1.8rem * var(--yf-fs, 1)); /* --yf-fs：右下角字級切換（tools.css） */
  line-height: 1.95;
  letter-spacing: 0.03em;
  text-wrap: pretty;
}

.entry-content p {
  margin-bottom: 1.6em;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 2em;
}

.entry-content h2 {
  padding-bottom: 0.4em;
  border-bottom: 1px solid #e4e0d4;
}

.entry-content a {
  color: var(--color-ocean);
  text-decoration: underline;
  text-decoration-color: rgba(47, 93, 124, 0.35);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}

.entry-content a:hover {
  text-decoration-color: currentcolor;
}

.entry-content img {
  border-radius: 4px;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  font-style: normal;
  font-size: 1.4rem;
  color: var(--color-muted);
  text-align: center;
}

/* 學名：在編輯器中以斜體 <em> 標示即可，或加上 class="sci-name" */
.sci-name {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0;
}

/* 引言：文楷字體 + 左側葉綠色條 */
blockquote::before,
blockquote::after {
  content: "";
}

blockquote {
  quotes: "" "";
  clear: both;
  position: relative;
  font-family: var(--font-kai);
  font-size: 1.1em;
  font-style: normal;
  line-height: 1.9;
  color: var(--color-ink);
  background: var(--color-paper);
  border-left: 3px solid var(--color-leaf);
  border-radius: 0 8px 8px 0;
  margin: 2em 0;
  padding: 1.2em 1.6em;
}

blockquote p {
  margin-bottom: 0.6em;
}

blockquote p:last-child {
  margin-bottom: 0;
  padding: 0;
}
/* ==========================================================================
   標題中的英文／學名：Cormorant Garamond 斜體 + 不同顏色
   ========================================================================== */

.yf-latin {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.12em; /* 西文字面比中文小，稍微放大讓視覺大小一致 */
  letter-spacing: 0.01em;
  color: var(--color-leaf);
}

/* ==========================================================================
   區塊樣式範本（patterns/）：物種介紹、觀察紀錄、照片並排、教學活動、小知識、系列開頭
   ========================================================================== */

.yf-species,
.yf-observation,
.yf-lesson {
  margin: 3em 0;
  padding: 2.4rem 0;
  border-top: 2px solid var(--color-leaf);
  border-bottom: 1px solid #e2ddcf;
}

.yf-species-name em {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--color-leaf);
}

.yf-species-table table,
.yf-observation-meta table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.yf-species-table th,
.yf-species-table td,
.yf-observation-meta th,
.yf-observation-meta td {
  padding: 0.6em 0.9em;
  border: 1px solid #e2ddcf;
  text-align: left;
  vertical-align: top;
}

.yf-species-table th,
.yf-observation-meta th {
  width: 7em;
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 700;
  white-space: nowrap;
}

.yf-observation-note {
  padding-left: 1em;
  border-left: 3px solid var(--color-sand);
  color: var(--color-muted);
}

.yf-photo-pair figcaption {
  text-align: center;
}

.yf-lesson-meta {
  display: inline-block;
  padding: 0.3em 1em;
  border-radius: 999px;
  background: var(--color-paper);
  font-size: 0.9em;
}

.yf-fun-fact {
  margin: 2.4em 0;
  padding: 1.6em 1.8em;
  border-left: 4px solid var(--color-leaf);
  border-radius: 0 8px 8px 0;
}

.yf-fun-fact-title {
  margin-bottom: 0.4em;
  font-family: var(--font-kai);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-leaf);
}

.yf-series-intro {
  font-family: var(--font-kai);
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .yf-species-table th,
  .yf-observation-meta th {
    width: auto;
  }

  /* 觀察紀錄的四欄表格在手機上改為兩欄一列 */
  .yf-observation-meta tr {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

/* 範本內的清單顯示項目符號與編號（活動步驟需要看得出順序） */
.yf-species ul,
.yf-lesson ul {
  padding-left: 1.4em;
  list-style: disc;
}

.yf-lesson ol {
  padding-left: 1.6em;
  list-style: decimal;
}

.yf-species li,
.yf-lesson li {
  margin-bottom: 0.3em;
}

/* 小知識框：標題與內文貼近（覆蓋區塊版面的預設間距與段落下方留白） */
.yf-fun-fact > * {
  margin-top: 0;
  margin-bottom: 0;
}

.yf-fun-fact > * + * {
  margin-top: 0.5em;
}


/* 版權與授權頁（patterns/license-page.php） */
.yf-license-lead {
  padding: 2rem 2.4rem;
  border-left: 4px solid var(--color-leaf);
  border-radius: 0 10px 10px 0;
  background: var(--color-paper);
  font-size: 1.15em;
  line-height: 1.9;
}

.yf-license-note {
  color: var(--color-muted);
  font-size: 0.92em;
}

.yf-license-contact {
  padding: 1.6rem 2rem;
  border: 1px dashed rgba(74, 124, 89, 0.4);
  border-radius: 10px;
  font-size: 1.1em;
}