/* ============================================================
   排版優化 v5（穩定版）
   每段可單獨刪除
   ============================================================ */

/* 1. 內容寬度收斂並置中：1265px -> 1180px，左右留白 */
.newsx-container { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* 2. 內文字級 14px -> 16px */
body, .site-main, .site-main p, .wp-block-column p { font-size: 16px; line-height: 1.85; }

/* 3. 紅色標籤樣式 */
h2.wp-block-heading { margin: 0 0 14px; }
h2.wp-block-heading mark,
.wp-block-group h3 mark {
  display: inline-block;
  padding: 5px 16px;
  font-size: 1.2rem;
  line-height: 1.45;
  border-radius: 3px;
}

/* 4. 三欄頂端對齊：標籤盒一律 52px 高、下緣不留距；媒體統一 14px 上距 */
.wp-block-columns > .wp-block-column > h2.wp-block-heading { min-height: 52px; margin: 0 !important; }
.wp-block-columns > .wp-block-column > .wp-block-group { margin: 0 !important; padding-bottom: 14px !important; }
.wp-block-column figure,
.wp-block-column .ytfp-video-container { margin: 14px 0 0 !important; }

/* 5. 使命異象那排（辨識條件：第三欄是空的）：原本有 3 欄，第 3 欄是空的（364px），隱藏後由前兩欄填滿 */
.wp-block-columns:has(> .wp-block-column:nth-child(3):empty) > .wp-block-column:nth-child(3) { display: none; }
/* 注意：這三條一定要包在 media query 裡。
   若不加，手機上 32% 會把「使命異象宣」壓成 112px，一行只放 3 個字。
   平板以下交給主題預設的堆疊行為。 */
@media (min-width: 768px) {
  .wp-block-columns:has(> .wp-block-column:nth-child(3):empty) { gap: 56px; }
  .wp-block-columns:has(> .wp-block-column:nth-child(3):empty) > .wp-block-column:nth-child(1) { flex: 0 0 32% !important; }
  .wp-block-columns:has(> .wp-block-column:nth-child(3):empty) > .wp-block-column:nth-child(2) { flex: 1 1 auto !important; }
}

/* ============================================================
   6. 修正：使命異象那欄是巢狀 blockquote（外層 is-style-plain + 內層），
      兩層各有一條紅色 border-left，畫面上會看到兩條紅線。
      只保留外層，內層的邊框與內距歸零。
   ============================================================ */
.wp-block-quote .wp-block-quote {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 7. 分類卡片「1 Articles」改成中文（實際文字由 postprocess 替換） */
.category-count { letter-spacing: 0; }

/* ============================================================
   8. 三顆紅色標籤垂直對齊
      左欄是 <h2>、右兩欄是 <div class="wp-block-group"><h3>，
      行高不同導致左邊標籤比右邊低 6px。
      統一容器高度 52px 並置中，三顆就會落在同一條線。
   ============================================================ */
/* 只鎖定「含 mark 的紅色標籤群組」。
   若不加 :has(mark)，會誤套到「使命異象」的內容群組，
   把內層 blockquote 縮成內容寬度（手機上只剩 110px，一行 3 個字）。 */
.wp-block-columns > .wp-block-column > h2.wp-block-heading:has(mark),
.wp-block-columns > .wp-block-column > .wp-block-group:has(mark) {
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
}
/* 真正的兇手：包住 mark 的 <strong> 在左欄是 32px、右兩欄是 20px，
   mark 是 inline-block 會坐在文字基線上，父層字級越大基線越低。
   把 strong 的字級與行高歸零，標籤就不再受基線影響。 */
.wp-block-columns > .wp-block-column > h2.wp-block-heading strong,
.wp-block-columns > .wp-block-column > .wp-block-group strong {
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   9. 統一圖片圓角
      原本三種不一致：主視覺容器 12px、影片 6px、卡片 0px。
      全部統一為 12px（含 YouTube 看板與最新消息卡片）。
   ============================================================ */
.wp-block-image img,
.wp-block-image figure,
.yt-lite,
.newsx-grid-image,
.newsx-category-list img,
.newsx-grid-post img,
.site-main .newsx-flex > img {
  border-radius: 12px !important;
}
/* 有連結包住圖片時，圓角要裁在圖片上而不是容器 */
.wp-block-image figure,
.site-main .newsx-flex {
  overflow: hidden;
  border-radius: 12px;
}

/* ============================================================
   10. 隱藏卡片上的作者與日期（➥ admin ｜ 2025-12-04）
      全站共 14 處，都在「最新消息」「我們的事工」這類卡片列表上。
   ============================================================ */
.newsx-grid-post-meta { display: none !important; }

/* ============================================================
   內頁排版統一（body:not(.home)，首頁不受影響）
   ============================================================ */

/* 11. 段落間距一致 */
body:not(.home) .site-main p { margin: 0 0 1.1em !important; }
body:not(.home) .site-main p:last-child { margin-bottom: 0 !important; }

/* 12. 標題上下間距（排除內含 mark 的紅色標籤標題） */
body:not(.home) .site-main h2:not(:has(mark)) { margin: 36px 0 14px !important; line-height: 1.35; }
body:not(.home) .site-main h3:not(:has(mark)) { margin: 28px 0 10px !important; line-height: 1.4; }
/* 欄位內的標題被主題規則壓成 0，提高選擇器權重 */
body:not(.home) .site-main .wp-block-column h2:not(:has(mark)) { margin: 30px 0 12px !important; }
body:not(.home) .site-main .wp-block-column h3:not(:has(mark)) { margin: 24px 0 10px !important; }

/* 13. 引文：只保留最外一層紅線與縮排，內層全部歸零 */
body:not(.home) .site-main .wp-block-quote,
.site-main .wp-block-quote {
  padding-left: 16px !important;
  margin-left: 0 !important;
}
body:not(.home) .site-main .wp-block-quote .wp-block-group,
body:not(.home) .site-main .wp-block-quote .wp-block-quote,
body:not(.home) .site-main .wp-block-group .wp-block-group {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: 0 !important;
}

/* 14. 內文寬度收斂到 820px（避免出現 1100 這種過長行寬） */
body:not(.home) .site-main .wp-block-paragraph,
body:not(.home) .site-main .wp-block-quote { max-width: 820px; }
body:not(.home) .site-main .wp-block-quote .wp-block-paragraph { max-width: none; }

/* 15. 螢光筆統一（只作用在段落與清單，不動標題紅標籤） */
body:not(.home) .site-main p mark,
body:not(.home) .site-main li mark {
  background: rgba(207, 46, 46, .13) !important;
  color: inherit !important;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ============================================================
   16. 影片外框多出 300px 空白
      WordPress 的 .wp-embed-aspect-16-9 會用
      .wp-block-embed__wrapper::before { padding-top: 56.25% }
      幫 iframe 預留空間。我們的 yt-lite 是正常流向（不是絕對定位），
      所以同一塊高度被算了兩次：303 + 303 = 605px，
      影片下方就空出將近 300px。
      移除那個 ::before 即可。
   ============================================================ */
figure.wp-block-embed:has(.yt-lite) .wp-block-embed__wrapper::before,
.wp-block-embed:has(.yt-lite) .wp-block-embed__wrapper::before {
  content: none !important;
  display: none !important;
  padding-top: 0 !important;
}
figure.wp-block-embed:has(.yt-lite),
.wp-block-embed:has(.yt-lite) .wp-block-embed__wrapper {
  height: auto !important;
}
/* 同一區塊裡空白的 blockquote 會留下一條孤立的紅線 */
.site-main .wp-block-quote:not(:has(*)) { display: none !important; }

/* ============================================================
   17. 奉獻／聯絡單按鈕（手機）
      按鈕外掛設成膠囊型（border-radius ≈ 30px）但 padding: 0，
      手機上寬度只剩 108–128px、字級仍是 17px，
      文字因此被圓角切掉（「新莊真理堂線上／奉獻」）。
      調整：字級 14px、加上左右內距、高度自適應、圓角縮小。
   ============================================================ */
@media (max-width: 767px) {
  .btg-button {
    --font-size: 14px !important;
    font-size: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    border-radius: 22px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    box-sizing: border-box;
  }
  /* 讓兩顆按鈕在窄螢幕自動換行，而不是被擠壓 */
  .wp-block-group.is-nowrap:has(.btg-button) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ============================================================
   18. 字體堆疊（最關鍵的一項）
      實測：body 的 font-family 只有 "Oxygen"、標題只有
      "Encode Sans Condensed"，兩者都沒有任何後備字體。
      而 google fonts 的 woff2 每個只有 9–23KB —— 這種大小
      不可能容納中文字（一個中文字型子集至少 100KB+）。
      所以畫面上每個中文字都是「瀏覽器預設字體」在撐，
      Windows 可能拿到細明體、macOS 拿到 PingFang、Android
      拿到 Noto，三種裝置三種長相。
      解法：補上明確的繁體中文字體堆疊。
   ============================================================ */
:root {
  --font-sans: "Oxygen", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
               "微軟正黑體", "Heiti TC", sans-serif;
  --font-display: "Encode Sans Condensed", var(--font-sans);
}

body, .site, .site-main, .newsx-site-header, .newsx-site-footer,
button, input, select, textarea {
  font-family: var(--font-sans) !important;
}

h1, h2, h3, h4, h5, h6, .wp-block-heading {
  font-family: var(--font-display) !important;
  /* 微軟正黑體只有 400 / 700 兩種字重，600 會用演算法假粗，
     筆畫會糊。統一用 700。 */
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .015em;
}

/* 中文內文：字距放寬一點、顏色加深。
   原本 #67737E（4.85:1）只是勉強過 AA，
   改成 #3F4A54（9.0:1）在教會網站這種中高齡讀者比例高的地方差很多。 */
body { color: #3F4A54; letter-spacing: .01em; }
.site-main p, .site-main li { letter-spacing: .01em; }

/* 標題下方留白要大於上方，讀者才知道它屬於下面那一段 */
body:not(.home) .site-main h2:not(:has(mark)) { margin-top: 44px !important; }
body:not(.home) .site-main h3:not(:has(mark)) { margin-top: 32px !important; }

/* 瀏覽器原生的選取色與焦點框跟著品牌色走 */
::selection { background: rgba(207, 46, 46, .18); color: #1a1a1a; }
a:focus-visible, button:focus-visible,
input:focus-visible, .btg-button:focus-visible {
  outline: 2px solid #cf2e2e;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   19. 頁尾兩顆表單按鈕
      實測：「➥奉獻回報」「新人聯絡單」是 <body> 的直接子元素，
      排在頁尾之後、座標 (0, 869) —— 貼齊畫面左下角、零邊距，
      看起來像漏掉的元件。給它們該有的邊距與陰影。
   ============================================================ */
body > .btg-button {
  margin: 14px 8px 18px 0;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
body > .btg-button:first-of-type { margin-left: 16px; }

/* ============================================================
   20. 卡片壓圖文字
       實測問題：主題把「連結」改成主題色後，
       最新消息卡片壓在照片上的標題跟著變色（棕色主題變成鏽紅字
       壓深色照片，對比 1.9），完全看不清楚。
       照片本身亮度不一，光靠白字也不穩，所以補一層底部漸層遮罩。
   ============================================================ */
.newsx-grid-media { position: relative; }

.newsx-grid-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  background: linear-gradient(to top,
    rgba(14, 12, 10, .88) 0%,
    rgba(14, 12, 10, .62) 38%,
    rgba(14, 12, 10, .18) 72%,
    rgba(14, 12, 10, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 文字層要壓在遮罩之上 */
.newsx-grid-over-media { z-index: 2; }

.newsx-grid-over-media a,
.newsx-grid-over-media .newsx-entry-title,
.newsx-grid-over-media h2,
.newsx-grid-over-media h3,
.newsx-grid-over-media .newsx-grid-excerpt,
.newsx-grid-over-media .newsx-grid-excerpt p,
.newsx-grid-over-media .newsx-post-categories a {
  color: #fff !important;
}

/* 卡片裡的分類晶片：白字必須配深底，否則白字會消失 */
.newsx-grid-over-media .newsx-post-categories a[class*="newsx-cat-"] {
  background-color: rgba(20, 16, 12, .72) !important;
  color: #fff !important;
}

/* ============================================================
   21. 首頁聖誕活動廣告（使命異象那一排的第三欄）
       原本那欄是空的，塞一張 2026 聖誕季活動橫幅。
       圖片本身有圓角，這裡只加陰影與 hover 抬升。
   ============================================================ */
.sjtlc-xmas-ad {
  display: block;
  line-height: 0;
  border-radius: 12px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1),
              box-shadow .25s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}
.sjtlc-xmas-ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.sjtlc-xmas-ad:hover,
.sjtlc-xmas-ad:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
}
@media (max-width: 767px) {
  .sjtlc-xmas-ad { box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
}