@layer theme-custom {
/* 蕭張宅 新樣式草稿：首頁歡迎區、分類入口、文章卡片 */

/* 歡迎區 */
section.index-editor .dd-welcome {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 20px 40px;
}
section.index-editor .dd-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 16px;
  border-radius: 999px;
  background: #e6f8fa;
  color: #00a3b3;
  font-size: 15px;
  letter-spacing: 0.12em;
}
section.index-editor .dd-title {
  margin: 0 0 18px;
  color: #00b8c9;
  font-weight: 700;
  letter-spacing: 0.04em;
}
section.index-editor .dd-lead {
  margin: 0 0 14px;
  color: #616161;
  font-size: 18px;
  line-height: 1.9;
}
section.index-editor .dd-slogan {
  margin: 0 0 24px;
  color: #009666;
  font-size: 18px;
  font-weight: 600;
}
section.index-editor .dd-btn {
  display: inline-block;
  padding: 11px 34px;
  border-radius: 999px;
  background: #00b8c9;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
section.index-editor .dd-btn:hover {
  background: #00a3b3;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 184, 201, 0.28);
}

/* 分類入口 */
section.index-editor .dd-cats {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}
section.index-editor .dd-cats-title {
  margin: 0 0 28px;
  text-align: center;
  color: #00b8c9;
  font-weight: 700;
}
section.index-editor .dd-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
section.index-editor .dd-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  border-radius: 16px;
  border: 1px solid #d9f1f4;
  background: #f4fbfc;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
section.index-editor .dd-cat:hover {
  transform: translateY(-4px);
  border-color: #00b8c9;
  box-shadow: 0 10px 22px rgba(0, 184, 201, 0.18);
}
section.index-editor .dd-cat-name {
  color: #00a3b3;
  font-size: 22px;
  font-weight: 700;
}
section.index-editor .dd-cat-desc {
  color: #757575;
  font-size: 15px;
  line-height: 1.7;
}

/* 平板與手機 */
@media (max-width: 991px) {
  section.index-editor .dd-cats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  section.index-editor .dd-welcome {
    padding: 36px 16px 28px;
  }
  section.index-editor .dd-lead,
  section.index-editor .dd-slogan {
    font-size: 16px;
    line-height: 1.85;
  }
  section.index-editor .dd-cats {
    padding: 16px 16px 36px;
  }
  section.index-editor .dd-cats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* 文章內頁：舒適閱讀 */
body.b_blog_detail .container img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
body.b_blog_detail .container p {
  line-height: 1.9;
}
body.b_blog_detail .container blockquote {
  border-left: 4px solid #00b8c9;
  background: #f4fbfc;
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
}

/* ===== 頁尾樣式（方案B：淺薄荷底，配合主視覺青藍色系） ===== */
div.content footer {
  background: #e6f8fa !important;
  border-top: 3px solid #00b8c9 !important;
  color: #616161 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
/* 欄標題：關於跩跩、聯絡我們 */
div.content footer h1,
div.content footer h2,
div.content footer h3,
div.content footer h4 {
  color: #008a99 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
}
/* 一般文字與連結 */
div.content footer p,
div.content footer li,
div.content footer span,
div.content footer a {
  color: #616161 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
div.content footer a {
  text-decoration: none;
  transition: color 0.2s ease;
}
div.content footer a:hover,
div.content footer a:focus {
  color: #008a99 !important;
  text-decoration: underline;
}
/* 版權宣告 */
div.content footer h5,
div.content footer h6,
div.content footer .copyright,
div.content footer .copyright a {
  color: #757575 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
div.content footer h5,
div.content footer .copyright {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #cdeef2;
}
/* 手機版 */
@media (max-width: 575px) {
  div.content footer {
    text-align: center;
    font-size: 15px !important;
  }
  div.content footer p,
  div.content footer li,
  div.content footer span,
  div.content footer a {
    font-size: 15px !important;
    line-height: 2 !important;
  }
  div.content footer h1,
  div.content footer h2,
  div.content footer h3,
  div.content footer h4 {
    font-size: 17px !important;
  }
  div.content footer h5,
  div.content footer h6 {
    font-size: 13px !important;
  }
}

/* ===== 頁尾修正（強化版）：清除主題原有的黃色底、提高文字對比 ===== */
footer,
body footer,
html body footer {
  background-color: #e6f8fa !important;
  background-image: none !important;
  border-top: 3px solid #00b8c9 !important;
  color: #424242 !important;
}
/* 頁尾內層容器一律透明，避免主題的黃色底蓋過去 */
footer *,
body footer *,
footer *::before,
footer *::after {
  background-color: transparent !important;
  background-image: none !important;
  text-shadow: none !important;
}
footer::before,
footer::after {
  background: none !important;
}
/* 文字顏色（深灰，與淺薄荷底對比足夠） */
footer *,
body footer * {
  color: #424242 !important;
}
/* 欄標題：深青色 */
footer h1, footer h2, footer h3, footer h4,
body footer h1, body footer h2, body footer h3, body footer h4 {
  color: #006f7c !important;
}
/* 連結 */
footer a,
body footer a {
  color: #00606b !important;
}
footer a:hover,
footer a:focus,
body footer a:hover,
body footer a:focus {
  color: #00b8c9 !important;
}
/* 版權宣告 */
footer h5, footer h6,
body footer h5, body footer h6 {
  color: #616161 !important;
}
/* 社群圖示、文字圖示使用深青色，避免在淺底上消失 */
footer i,
footer svg,
body footer i,
body footer svg {
  color: #00606b !important;
  fill: #00606b !important;
}

/* ===== 頁尾配色（最終版）：暖奶油底配深棕字，與整體網站暖調融合 ===== */
footer,
body footer,
html body footer {
  background-color: #fff6e0 !important;
  background-image: none !important;
  border-top: 3px solid #e8c98e !important;
  color: #4e3b2a !important;
}
footer *,
body footer * {
  color: #4e3b2a !important;
}
/* 欄標題 */
footer h1, footer h2, footer h3, footer h4,
body footer h1, body footer h2, body footer h3, body footer h4 {
  color: #6b4a2b !important;
}
/* 連結 */
footer a,
body footer a {
  color: #5a3e24 !important;
}
footer a:hover,
footer a:focus,
body footer a:hover,
body footer a:focus {
  color: #a0642a !important;
}
/* 版權宣告 */
footer h5, footer h6,
body footer h5, body footer h6 {
  color: #7a6247 !important;
}
div.content footer h5,
div.content footer .copyright {
  border-top: 1px solid #ebd9b4 !important;
}
/* 社群圖示 */
footer i,
footer svg,
body footer i,
body footer svg {
  color: #6b4a2b !important;
  fill: #6b4a2b !important;
}

/* ===== 頁首下拉選單（v2）：桌機滑過展開、青藍卡片風格 =====
   結構：li.dropdown > a + div.dropdown-menu > a.dropdown-item
   平台會把自訂 CSS 包進 @layer，優先權低於主題原樣式，
   所以關鍵屬性一律加 !important 才蓋得過主題。 */
@media (min-width: 992px) {
  li.dropdown {
    position: relative !important;
  }

  /* 面板預設狀態：保留在版面中但透明、不可點，用透明度與位移做動畫 */
  li.dropdown > .dropdown-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 168px !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #d9f1f4 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 22px rgba(0, 184, 201, 0.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
  }

  /* 滑過（或鍵盤聚焦、或被點開）時顯示 */
  li.dropdown:hover > .dropdown-menu,
  li.dropdown:focus-within > .dropdown-menu,
  li.dropdown > .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s !important;
  }

  /* 項目：16px、行高 1.9，與內文及頁尾一致 */
  li.dropdown > .dropdown-menu .dropdown-item {
    display: block !important;
    padding: 4px 16px !important;
    border-left: 3px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #616161 !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }

  /* 項目滑過：淺青底、文字轉青藍、左側青藍線 */
  li.dropdown > .dropdown-menu .dropdown-item:hover,
  li.dropdown > .dropdown-menu .dropdown-item:focus {
    background: #f4fbfc !important;
    color: #00a3b3 !important;
    border-left-color: #00b8c9 !important;
  }
}

/* 減少動態偏好：關閉位移，只保留淡入 */
@media (prefers-reduced-motion: reduce) {
  li.dropdown > .dropdown-menu {
    transform: none !important;
    transition: opacity 0.01s linear !important;
  }
}

/* ===== 頁尾修正（第三版）：移除分隔線與多餘色塊，並用較高優先權確保奶油底與深棕字生效 ===== */
html body div.content footer,
html body footer {
  background-color: #fff6e0 !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin-top: 0 !important;
  color: #4e3b2a !important;
}
/* 頁尾本身與內文之間不要出現裝飾線或色塊 */
html body div.content footer::before,
html body div.content footer::after,
html body footer::before,
html body footer::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* 內層所有元素：無底色、無邊線、無陰影，避免出現奇怪色塊 */
html body div.content footer *,
html body footer * {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-shadow: none !important;
  color: #4e3b2a !important;
}
html body div.content footer *::before,
html body div.content footer *::after,
html body footer *::before,
html body footer *::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* 分隔線元素一併隱藏 */
html body div.content footer hr,
html body footer hr {
  display: none !important;
}
/* 欄標題 */
html body div.content footer h1,
html body div.content footer h2,
html body div.content footer h3,
html body div.content footer h4,
html body footer h1,
html body footer h2,
html body footer h3,
html body footer h4 {
  color: #6b4a2b !important;
}
/* 連結 */
html body div.content footer a,
html body footer a {
  color: #5a3e24 !important;
}
html body div.content footer a:hover,
html body div.content footer a:focus,
html body footer a:hover,
html body footer a:focus {
  color: #a0642a !important;
}
/* 版權宣告 */
html body div.content footer h5,
html body div.content footer h6,
html body div.content footer .copyright,
html body div.content footer .copyright a,
html body footer h5,
html body footer h6 {
  color: #7a6247 !important;
}
/* 社群圖示 */
html body div.content footer i,
html body div.content footer svg,
html body footer i,
html body footer svg {
  color: #6b4a2b !important;
  fill: #6b4a2b !important;
}
}