/* =======================================================
   T-Tech KB 全站 CSS（最終乾淨版 / WP 可儲存）
   限制：不含 :has()、不含 color-mix()
   Scope：以 #kb-header 或 .kb-wrapper 作為 KB 範圍
   ======================================================= */


/* =======================================================
   0) KB Scope：UA 深淺色 + 基本文字
   ======================================================= */
body:has(#kb-header),
body:has(.kb-wrapper){
  color-scheme: light dark;
  background: Canvas;
  color: CanvasText;
}

/* 止血：避免主題把 KB 變淡 */
body:has(#kb-header) .kb-wrapper,
body:has(.kb-wrapper) .kb-wrapper{
  opacity: 1 !important;
  filter: none !important;
}

/* KB 字體（只限 KB） */
body:has(#kb-header) .kb-wrapper,
body:has(#kb-header) .kb-wrapper *,
body:has(.kb-wrapper) .kb-wrapper,
body:has(.kb-wrapper) .kb-wrapper *{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

/* KB 連結：系統 LinkText */
body:has(#kb-header) a,
body:has(.kb-wrapper) a{
  color: LinkText;
  -webkit-text-fill-color: LinkText;
}


/* =======================================================
   1) Header：搜尋表單對齊（select / input / button）
   ======================================================= */
#kb-header{ text-align:center; }
#kb-header p{ margin:0 !important; }
#kbSearchForm br{ display:none !important; }

#kbSearchForm{
  display: grid;
  justify-items: center;
  row-gap: 14px;
}

/* 下拉 */
#kbCategorySelect{
  width: min(520px, 86vw) !important;
  height: 44px !important;
  box-sizing: border-box !important;
  background: Field !important;
  color: FieldText !important;
  -webkit-text-fill-color: FieldText !important;
  border-color: rgba(255,255,255,0.18) !important; /* 深色也看得到邊 */
}

/* 關鍵字 */
#kbSearchInput{
  width: min(520px, 70vw) !important;
  height: 44px !important;
  box-sizing: border-box !important;
  background: Field !important;
  color: FieldText !important;
  -webkit-text-fill-color: FieldText !important;
  border-color: rgba(255,255,255,0.18) !important;
  vertical-align: middle !important;
}
#kbSearchInput::placeholder{
  color: GrayText !important;
  -webkit-text-fill-color: GrayText !important;
  opacity: 1 !important;
}

/* 搜尋按鈕（文字置中不跑掉） */
#kbSearchForm button,
#kbSearchForm input[type="submit"]{
  height: 44px !important;
  min-width: 88px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 44px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* 搜尋提示（淺色不要太淡） */
.kb-search-hint,
.kb-search-hint *{
  opacity: 1 !important;
  color: CanvasText !important;
  -webkit-text-fill-color: CanvasText !important;
  font-weight: 650;
}


/* =======================================================
   2) 灰底區塊（has-background / applicability）基礎背景
   （顏色控制交給深色特例與 dfdfdf 覆蓋）
   ======================================================= */
body:has(#kb-header) .kb-gray,
body:has(#kb-header) .kb-applicability,
body:has(#kb-header) p.has-background,
body:has(#kb-header) div.has-background,
body:has(.kb-wrapper) .kb-gray,
body:has(.kb-wrapper) .kb-applicability,
body:has(.kb-wrapper) p.has-background,
body:has(.kb-wrapper) div.has-background{
  background: #dfdfdf; /* 你文章實際也用 dfdfdf，統一 */
  opacity: 1 !important;
}


/* =======================================================
   3) 兩欄骨架（columns 寬度）
   備註：避免因模板不同造成 sidebar 被壓縮
   - 這裡用 .kb-wrapper 版心
   - Sidebar 本體也設 min-width 做保底
   ======================================================= */
:root{ --kb-wrap: 1280px; --kb-gap: 32px; --kb-sidebar-w: 280px; }

.kb-wrapper{
  max-width: var(--kb-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.kb-wrapper > .wp-block-columns{
  gap: var(--kb-gap) !important;
  align-items: flex-start;
}

.kb-wrapper > .wp-block-columns > .wp-block-column:first-child{
  flex: 0 0 var(--kb-sidebar-w) !important;
}

.kb-wrapper > .wp-block-columns > .wp-block-column:last-child{
  flex: 1 1 auto !important;
  min-width: 0;
}

@media (max-width: 900px){
  .kb-wrapper{ padding: 0 16px; }
  .kb-wrapper > .wp-block-columns{ gap: 0 !important; }
}


/* =======================================================
   4) Sidebar：品牌同層、產品退 3pt + ‧ + 換行對齊
   - 不用 :has()，用 ul.children 判定「產品層」
   - 清掉預設縮排避免層次疊加
   ======================================================= */

/* sidebar 本體字級固定，避免被模板縮小 */
#kb-sidebar-inner{
  min-width: 280px;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* 清掉 sidebar 內所有 ul/li 的預設縮排（避免層次疊加） */
#kb-sidebar-inner ul,
#kb-sidebar-inner li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* sidebar span 行內藍色干擾止血 */
#kb-sidebar-inner span{
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* sidebar 連結基礎 + hover */
#kb-sidebar-inner a{
  text-decoration: none;
  border-radius: 8px;
  padding: 2px 6px;
  display: inline-block;
}
#kb-sidebar-inner a:hover{
  background-color: rgba(43,111,255,0.16);
}
@media (prefers-color-scheme: dark){
  #kb-sidebar-inner a:hover{
    background-color: rgba(120,170,255,0.22);
  }
}

/* 產品層：ul.children 內連結 -> 加 3pt + 點點 + 換行對齊 */
#kb-sidebar-inner ul.children{
  margin: 0 !important;
  padding: 0 !important;
}

#kb-sidebar-inner ul.children a{
  margin-left: 4px;                 /* 3pt */
  display: flex !important;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
}

#kb-sidebar-inner ul.children a::before{
  content: "‧";
  flex: 0 0 6px;
  line-height: 1.6;
  opacity: 0.85;
  color: GrayText;
}


/* =======================================================
   5) 熱門文章：兩欄 + 移除「|」
   ======================================================= */
.kb-hot-section ul.wp-block-post-template{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 56px !important;
  row-gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 900px){
  .kb-hot-section ul.wp-block-post-template{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* 移除可能的 border-left / ::before */
body:has(#kb-header) .kb-hot-section .wp-block-post-title,
body:has(#kb-header) .kb-hot-section .wp-block-post-title a,
body:has(.kb-wrapper) .kb-hot-section .wp-block-post-title,
body:has(.kb-wrapper) .kb-hot-section .wp-block-post-title a{
  border-left: none !important;
  padding-left: 0 !important;
}
body:has(#kb-header) .kb-hot-section .wp-block-post-title::before,
body:has(#kb-header) .kb-hot-section .wp-block-post-title a::before,
body:has(.kb-wrapper) .kb-hot-section .wp-block-post-title::before,
body:has(.kb-wrapper) .kb-hot-section .wp-block-post-title a::before{
  content: none !important;
}


/* =======================================================
   6) 搜尋結果頁（結果 / 分頁）
   ======================================================= */
#kbSearchResults{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 18px;
  line-height: 1.8;
  color: CanvasText;
  -webkit-text-fill-color: CanvasText;
}
#kbSearchResults,
#kbSearchResults *{
  column-count: 1 !important;
  column-gap: 0 !important;
}

#kbSearchResults .kb-result-list{ list-style:none; padding:0; margin:0; }
#kbSearchResults .kb-result-item{ margin:0 0 22px 0; }

#kbSearchResults .kb-result-item > a{
  color: LinkText !important;
  -webkit-text-fill-color: LinkText !important;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}
#kbSearchResults .kb-result-item > a:hover{ text-decoration: underline; }

#kbSearchResults .kb-result-meta{
  margin-top: 6px;
  font-size: 15px;
  color: GrayText !important;
  -webkit-text-fill-color: GrayText !important;
}
#kbSearchResults .kb-result-excerpt{
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.65;
  color: CanvasText !important;
  -webkit-text-fill-color: CanvasText !important;
}

#kbPagination.kb-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:28px auto 0;
  width:100%;
  max-width:720px;
}
.kb-page-btn{
  display:inline-block;
  padding:6px 10px;
  border-radius:8px;
  color: LinkText !important;
  text-decoration:none;
  transition: background-color .2s ease;
}
.kb-page-btn:hover{ background: rgba(120,170,255,0.16); }
.kb-page-btn.active{ background: rgba(120,170,255,0.22); font-weight:800; }


/* =======================================================
   7) 搜尋載入動畫（只作用在 #kbSearchResults）
   - 去除 color-mix，改用固定色/rgba
   ======================================================= */
#kbSearchResults .kb-loading{ text-align:center; margin-top:40px; color: GrayText; }
#kbSearchResults .kb-loading p{ color: GrayText; }

#kbSearchResults .kb-scene{ position:relative; display:inline-block; width:180px; height:150px; }

#kbSearchResults .kb-book-base{
  position:absolute; bottom:15px; left:35px;
  width:90px; height:15px;
  background:#2a56b8;
  border-radius:3px;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  animation: kbBaseGrow 5s ease-in-out infinite alternate;
}
@keyframes kbBaseGrow{ 0%{width:40px;} 100%{width:90px;} }

#kbSearchResults .kb-blocks .block{
  width:40px; height:10px;
  background:#6ea8ff;
  border-radius:2px;
  position:absolute; bottom:25px; left:40px;
  opacity:0;
}
#kbSearchResults .b1{ animation: kbStackBlock 5s ease-in-out infinite; }
#kbSearchResults .b2{ animation: kbStackBlock 5s ease-in-out infinite 1s; }
#kbSearchResults .b3{ animation: kbStackBlock 5s ease-in-out infinite 2s; }
#kbSearchResults .b4{ animation: kbStackBlock 5s ease-in-out infinite 3s; }

@keyframes kbStackBlock{
  0%{transform:translate(60px,-20px) rotate(20deg);opacity:0;}
  20%{opacity:1;}
  40%{transform:translate(0,0) rotate(0deg);opacity:1;}
  60%{transform:translate(0,-5px);opacity:1;}
  100%{opacity:1;}
}

#kbSearchResults .kb-runner{
  position:absolute; left:10px; bottom:30px;
  width:60px; height:110px;
  animation: kbMoveRunner 5s linear infinite;
}
@keyframes kbMoveRunner{
  0%{transform:translateX(0);}
  25%{transform:translateX(40px);}
  50%{transform:translateX(80px);}
  65%{transform:translateX(80px);}
  100%{transform:translateX(0);}
}

#kbSearchResults .head{
  width:24px; height:24px;
  background:#4a90e2;
  border-radius:5px;
  position:absolute; top:0; left:18px;
}
#kbSearchResults .body{
  width:12px; height:36px;
  background:#1e90ff;
  border-radius:5px;
  position:absolute; top:24px; left:24px;
}
#kbSearchResults .arm, #kbSearchResults .leg{
  width:8px; height:30px;
  background:#6ea8ff;
  position:absolute;
  border-radius:5px;
  transform-origin:top center;
}
#kbSearchResults .arm{ top:28px; animation: kbArmMove 0.6s ease-in-out infinite; }
#kbSearchResults .leg{ top:60px; animation: kbLegMove 0.6s ease-in-out infinite; }
#kbSearchResults .arm1{ left:10px; animation-delay:0s; }
#kbSearchResults .arm2{ left:36px; animation-delay:0.3s; }
#kbSearchResults .leg1{ left:16px; animation-delay:0s; }
#kbSearchResults .leg2{ left:28px; animation-delay:0.3s; }

@keyframes kbArmMove{ 0%{transform:rotate(-25deg);} 50%{transform:rotate(35deg);} 100%{transform:rotate(-25deg);} }
@keyframes kbLegMove{ 0%{transform:rotate(25deg);} 50%{transform:rotate(-35deg);} 100%{transform:rotate(25deg);} }

#kbSearchResults .shadow{
  width:50px; height:10px;
  background:rgba(0,0,0,0.15);
  border-radius:50%;
  position:absolute; bottom:0; left:5px;
  animation: kbShadowPulse 0.6s ease-in-out infinite alternate;
}
@keyframes kbShadowPulse{ 0%{transform:scaleX(1);opacity:0.3;} 100%{transform:scaleX(1.4);opacity:0.15;} }

#kbSearchResults .thumb{
  position:absolute;
  width:10px; height:10px;
  background:#4a90e2;
  border-radius:2px;
  top:20px; left:45px;
  opacity:0;
  transform:rotate(-20deg);
  transform-origin:bottom left;
  animation: kbShowThumb 5s ease-in-out infinite;
}
@keyframes kbShowThumb{
  0%,60%{opacity:0;transform:rotate(-20deg) scale(0.5);}
  70%{opacity:1;transform:rotate(-10deg) scale(1);}
  85%{opacity:1;transform:rotate(10deg) scale(1.05);}
  100%{opacity:0;transform:rotate(-20deg) scale(0.5);}
}

#kbSearchResults .spark{
  position:absolute;
  width:6px; height:6px;
  background:#9ec5ff;
  border-radius:50%;
  opacity:0;
}
#kbSearchResults .s1{ top:10px; left:60px; animation: kbSparkle 5s ease-in-out infinite 0.2s; }
#kbSearchResults .s2{ top:5px; left:50px; animation: kbSparkle 5s ease-in-out infinite 0.4s; }
#kbSearchResults .s3{ top:12px; left:70px; animation: kbSparkle 5s ease-in-out infinite 0.6s; }

@keyframes kbSparkle{
  0%,60%{opacity:0;transform:scale(0.2);}
  70%{opacity:1;transform:translateY(-10px) scale(1);}
  85%{opacity:1;transform:translateY(-18px) scale(1.2);}
  100%{opacity:0;transform:translateY(-25px) scale(0);}
}


/* =======================================================
   8) Footer：深色底連結對比
   ======================================================= */
#kb-footer{ color: rgba(255,255,255,0.88); }
#kb-footer a{
  color: rgba(255,255,255,0.92);
  -webkit-text-fill-color: rgba(255,255,255,0.92);
  text-decoration: none;
}
#kb-footer a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.55);
}


/* =======================================================
   9) 深色模式：正文止血（把內文拉回可讀白字）
   ======================================================= */
@media (prefers-color-scheme: dark){
  body:has(#kb-header) .wp-block-post-content,
  body:has(#kb-header) .wp-block-post-content *:not(a),
  body:has(.kb-wrapper) .wp-block-post-content,
  body:has(.kb-wrapper) .wp-block-post-content *:not(a){
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    opacity: 1 !important;
  }

  body:has(#kb-header) .wp-block-post-content a,
  body:has(.kb-wrapper) .wp-block-post-content a{
    color: LinkText !important;
    -webkit-text-fill-color: LinkText !important;
  }
}

/* =======================================================
   10) 深色模式：把 dfdfdf 灰底（本文適用於以下產品）救回黑字
   （你已驗證有效的最終版，只留這一條）
   ======================================================= */
@media (prefers-color-scheme: dark){

  body:has(#kb-header) .wp-block-post-content div[style*="background-color:#dfdfdf"],
  body:has(#kb-header) .wp-block-post-content div[style*="background-color: #dfdfdf"],
  body:has(.kb-wrapper) .wp-block-post-content div[style*="background-color:#dfdfdf"],
  body:has(.kb-wrapper) .wp-block-post-content div[style*="background-color: #dfdfdf"]{
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }

  body:has(#kb-header) .wp-block-post-content div[style*="background-color:#dfdfdf"] *,
  body:has(#kb-header) .wp-block-post-content div[style*="background-color: #dfdfdf"] *,
  body:has(.kb-wrapper) .wp-block-post-content div[style*="background-color:#dfdfdf"] *,
  body:has(.kb-wrapper) .wp-block-post-content div[style*="background-color: #dfdfdf"] *{
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }
}
/* =======================================================
   KB Header：搜尋區外框與按鈕主色一致化（覆蓋 inline）
   ======================================================= */

/* 1) 定義 KB 主色（可自行換色碼） */
:root{
  --kb-accent: #1f4ea8;        /* 淺色主色 */
}
@media (prefers-color-scheme: dark){
  :root{
    --kb-accent: #3a6cff;      /* 深色主色 */
  }
}

/* 2) 下拉 / 輸入框：外框一律用主色 */
#kbCategorySelect,
#kbSearchInput{
  border: 2px solid var(--kb-accent) !important;
}

/* 3) 按鈕：外框同色，底色同系（你要純色或漸層二選一） */

/* 3A) 純色版（最一致、最穩） */
#kbSearchBtn,
#kbSearchForm button,
#kbSearchForm input[type="submit"]{
  border: 2px solid var(--kb-accent) !important;
  background: var(--kb-accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 如果你堅持漸層，把上面 background 那行改成下面這行（擇一保留） */
/*
#kbSearchBtn,
#kbSearchForm button,
#kbSearchForm input[type="submit"]{
  border: 2px solid var(--kb-accent) !important;
  background: linear-gradient(90deg, var(--kb-accent), #00d4ff) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
*/