@layer theme-custom {
/* ===========================================================
   忘形晚站 — 主色與層次
   主色 #01A8AB 取自主題原本的頁尾底色與課程卡標題，
   與《順勢溝通》書封的青綠 (#009E9D) 幾乎同色。
   原本全站只有頁尾和課程標題用到它，這份把它帶進版面其他地方。
   要整份停用：把下面全部註解掉即可，不影響主題原始設定。
   =========================================================== */

:root {
  --ws-accent: #01A8AB;
  --ws-accent-bright: #2ED3D0;
  --ws-ink: #F2F2F2;
}

/* --- 1. 區塊標題 ---
   原本文字和內文同一個灰 (#AFAFAF)，外框也是灰的，整塊糊在一起。
   改成：文字拉亮加粗，主題原本就有的細外框染成主色並加重。 */
.page-title h2.title {
  color: var(--ws-ink) !important;
  font-weight: 700 !important;
  font-size: 27px !important;
  letter-spacing: 1px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(1, 168, 171, 0.9) !important;
  padding: 14px 32px !important;
}

/* --- 2. 首頁介紹區塊的大標也拉亮 --- */
section.index-editor h1 {
  color: var(--ws-ink) !important;
}

/* --- 3. 線框按鈕（READ MORE 等）改用主色 --- */
a.btn-sideline {
  color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  transition: background-color .18s, color .18s;
}

a.btn-sideline:hover,
a.btn-sideline:focus {
  background-color: var(--ws-accent) !important;
  color: #FFFFFF !important;
}

/* --- 4. 首頁區塊深淺交錯，讓版面有段落感 --- */
/* :has() 限定只作用在有介紹區塊的首頁，不影響內頁 */
main:has(section.index-editor) > section:nth-of-type(odd) {
  background-color: #0C0C0C !important;
}

main:has(section.index-editor) > section:nth-of-type(even) {
  background-color: #141414 !important;
}

main:has(section.index-editor) > section.index-editor {
  background-color: #0C0C0C !important;
}

/* --- 5. 課程卡標題 hover 回饋 --- */
h3.middle-title {
  transition: color .18s;
}

a:hover h3.middle-title {
  color: var(--ws-accent-bright) !important;
}

/* --- 6. 導覽列 hover --- */
nav.navbar a:hover {
  color: var(--ws-accent-bright) !important;
}

/* --- 7. 手機版：介紹區塊四顆按鈕改成整排，避免擠成一團 --- */
@media (max-width: 767px) {
  section.index-editor h1 {
    font-size: 32px !important;
  }

  section.index-editor .col-md-6 {
    text-align: center !important;
  }

  section.index-editor .col-md-6 > div > a {
    display: block !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
    padding: 14px 20px !important;
  }

  section.index-editor p,
  section.index-editor h1 {
    text-align: center !important;
  }

  .page-title h2.title {
    font-size: 22px !important;
    padding: 12px 18px !important;
  }
}
}