/* 實用資訊台 practicalinfodesk.hk —— 品牌层（Bootstrap 5.3 之上的薄薄一层）
   角度：常見問題 / 語調：親和直接 / 模板分組：Knowledge Hub 知識庫
   主色：天青藍 #0e7c9c + 暖橘黃 #e08a1e（問號、問題編號、標籤高亮）
        —— 与站 1 墨青綠 #0f6b5c、站 9 磚紅 #a8402d、站 3 石板藍 #3b4f6b、
           站 6 靛紫 #513a94、站 7 深森綠 #2e5339、站 11 梅紅 #8c2f4a 都不同
   字体：标题与正文同为无衬线（Noto Sans HK），但**問句層**（問題牆卡片、正文問句標題、
        FAQ 問題、目錄）统一走**襯線斜體**（Noto Serif HK italic）——一眼分得出「問」同「答」
        —— 第 7 套组合：站 1 sans/sans、站 9 serif/sans、站 3 sans/serif、站 6 serif/serif、
           站 7 serif/sans+等寬數字、站 11 sans/sans+serif 數據層、本站 sans/sans+serif 斜體問句層
   规则：能用 Bootstrap 类解决的一律不写自定义样式；这里只放
        ① 品牌变量覆盖 ② Bootstrap 没有的正文排版(prose) ③ 置頂搜索條与熱門問題牆专属组件 */

:root{
  --bs-primary:#0e7c9c;
  --bs-primary-rgb:14,124,156;
  --brand-dark:#0a5468;
  --brand-soft:#e7f4f8;
  --brand-accent:#e08a1e;
  --brand-accent-soft:#fdf3e3;

  --bs-link-color:#0e7c9c;
  --bs-link-color-rgb:14,124,156;
  --bs-link-hover-color:#0a5468;
  --bs-link-hover-color-rgb:10,84,104;

  --bs-body-color:#1f2a2e;
  --bs-body-color-rgb:31,42,46;
  --bs-secondary-color:rgba(31,42,46,.68);
  --bs-tertiary-color:rgba(31,42,46,.5);
  --bs-border-color:#dbe6ea;
  --bs-tertiary-bg:#f6fafb;
  --bs-border-radius:.6rem;
  --bs-border-radius-sm:.3rem;

  --bs-body-font-family:"Noto Sans HK","PingFang HK","Hiragino Sans CNS","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bs-body-font-size:1.02rem;
  --bs-body-line-height:1.9;
  --brand-serif:"Noto Serif HK","Source Han Serif HK","Songti TC","PMingLiU",Georgia,serif;
}

/* 標題無襯線；問句層一律襯線斜體 */
h1,h2,h3,h4,h5,h6{font-family:var(--bs-body-font-family);font-weight:700;letter-spacing:-.01em}
.q-text,.qw-q,.toc-list a,.article-body h2.is-q,.article-body h3.is-q{font-family:var(--brand-serif);font-style:italic}

.btn-primary{--bs-btn-bg:#0e7c9c;--bs-btn-border-color:#0e7c9c;--bs-btn-hover-bg:#0a5468;--bs-btn-hover-border-color:#0a5468;--bs-btn-active-bg:#0a5468;--bs-btn-active-border-color:#0a5468}
.btn-outline-primary{--bs-btn-color:#0e7c9c;--bs-btn-border-color:#0e7c9c;--bs-btn-hover-bg:#0e7c9c;--bs-btn-hover-border-color:#0e7c9c;--bs-btn-active-bg:#0e7c9c;--bs-btn-active-border-color:#0e7c9c}
.bg-brand-dark{background-color:var(--brand-dark)!important}
.bg-brand-soft{background-color:var(--brand-soft)!important}
.text-accent{color:var(--brand-accent)!important}

/* 区块标题：橘黃問號前缀，跟站 1 竖杠、站 9 下划线、站 3 方块、站 6 § 号、站 11 双斜线都不同 */
.sec-title{font-size:1.3rem;font-weight:700;margin:0;display:flex;align-items:baseline;gap:.5rem}
.sec-title::before{content:"？";font-family:var(--brand-serif);font-size:1.15rem;color:var(--brand-accent);font-weight:700}

.thumb-16x9{background:var(--bs-tertiary-bg);overflow:hidden}
.thumb-16x9 img{width:100%;height:100%;object-fit:cover}

.navbar .nav-link{font-weight:600}
.navbar .nav-link.active{color:var(--bs-primary)!important;box-shadow:inset 0 -3px 0 var(--brand-accent)}

/* ③-1 SRCH：置頂搜索條（設定包站 5 專屬——搜索框喺導航之上） */
.desk-search{background:linear-gradient(180deg,var(--brand-soft) 0%,#fff 100%);border-bottom:1px solid var(--bs-border-color)}
.desk-brand-name{font-size:1.5rem;font-weight:800;color:var(--bs-primary);line-height:1.2}
.desk-brand-kicker{font-family:var(--brand-serif);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bs-tertiary-color)}
.desk-brand-tagline{font-family:var(--brand-serif);font-style:italic;font-size:.84rem;color:var(--bs-secondary-color);margin-top:.15rem}
.desk-search-form{display:flex;gap:.5rem}
.desk-search-form .form-control{border-color:var(--bs-primary);box-shadow:none}
.desk-search-form .form-control:focus{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(14,124,156,.15)}
.desk-search-form .btn{white-space:nowrap}

/* ③-2 招牌模組：熱門問題牆（問句卡片牆，置頂） */
.qw-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.qw-chip{font-size:.86rem;font-weight:600;padding:.28rem .8rem;border:1px solid var(--bs-border-color);background:#fff;color:var(--bs-secondary-color);border-radius:2rem;cursor:pointer}
.qw-chip:hover{border-color:var(--bs-primary);color:var(--bs-primary)}
.qw-chip.active{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.qw-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.7rem}
@media (min-width:576px){.qw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.qw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qw-card{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:.85rem .95rem;background:#fff;border:1px solid var(--bs-border-color);border-left:4px solid var(--bs-primary);text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.qw-card:hover{border-left-color:var(--brand-accent);box-shadow:0 .3rem .9rem rgba(10,84,104,.1);color:inherit;text-decoration:none}
.qw-q{font-size:1rem;font-weight:700;line-height:1.55;color:var(--bs-primary);display:flex;gap:.35rem}
.qw-q::before{content:"Q";font-family:var(--brand-serif);font-style:normal;font-weight:700;color:var(--brand-accent);flex-shrink:0}
.qw-a{font-size:.85rem;line-height:1.7;color:var(--bs-secondary-color);margin:0;display:flex;gap:.35rem}
.qw-a::before{content:"A";font-family:var(--brand-serif);font-weight:700;color:var(--bs-tertiary-color);flex-shrink:0}
.qw-meta{font-size:.72rem;color:var(--bs-tertiary-color);margin-top:auto;padding-top:.3rem}

/* 熱門查閱：编号行式清单 */
.hot-row{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .2rem;border-bottom:1px solid var(--bs-border-color);text-decoration:none;color:inherit}
.hot-row:hover{color:var(--bs-primary);text-decoration:none}
.hot-no{font-family:var(--brand-serif);font-variant-numeric:tabular-nums;font-size:1rem;font-weight:700;color:var(--brand-accent);min-width:1.8rem}
.hot-title{flex:1 1 auto;font-size:.96rem;line-height:1.5}
.hot-cat{font-size:.72rem;color:var(--bs-tertiary-color);white-space:nowrap}

/* 熱門標籤（普通站點有 /tag/ 頁，可以照連） */
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4rem}
.tag-cloud a{font-size:.86rem;padding:.24rem .7rem;border:1px solid var(--bs-border-color);border-radius:2rem;text-decoration:none;color:var(--bs-secondary-color);background:#fff}
.tag-cloud a:hover{border-color:var(--brand-accent);color:var(--brand-accent);background:var(--brand-accent-soft)}

/* 首頁 ABOUT 區塊 */
.about-list{list-style:none;padding:0;margin:0;font-size:.9rem;line-height:1.8;color:var(--bs-secondary-color)}
.about-list li{padding-left:1.2rem;position:relative;margin-bottom:.5rem}
.about-list li::before{content:"→";position:absolute;left:0;color:var(--brand-accent)}

/* 文章页：一句答（正文第一段就地高亮，唔另外複製一份） */
.article-body p.lead-answer{background:var(--brand-soft);border-left:4px solid var(--bs-primary);padding:.85rem 1rem;font-size:1.06rem;font-weight:600;line-height:1.8;margin-bottom:1.3rem;color:var(--bs-body-color)}
.ans-tag{display:inline-block;font-family:var(--brand-serif);font-size:.7rem;letter-spacing:.1em;color:#fff;background:var(--bs-primary);padding:.1rem .5rem;margin-bottom:.4rem}

/* 目錄 */
.toc-list a{text-decoration:none}

/* ② 正文排版：Bootstrap 不提供 prose，文章正文由 CMS 输出裸标签，这段必须自己写 */
.article-body{line-height:1.95}
.article-body h2{font-size:1.28rem;margin:2.1rem 0 .9rem;padding-left:.8rem;border-left:5px solid var(--bs-primary)}
.article-body h3{font-size:1.08rem;margin:1.6rem 0 .7rem;padding-left:.6rem;border-left:3px solid var(--brand-accent)}
/* 問句型標題（以問號結尾）走襯線斜體，同「答」拉開層次 */
.article-body h2.is-q,.article-body h3.is-q{color:var(--bs-primary)}
.article-body p{margin:0 0 1.1rem}
.article-body ul,.article-body ol{margin:0 0 1.1rem;padding-left:1.4rem}
.article-body li{margin-bottom:.45rem}
.article-body img{max-width:100%;height:auto;margin:.6rem 0}
.article-body blockquote{margin:1.2rem 0;padding:.8rem 1rem;background:var(--brand-accent-soft);border-left:4px solid var(--brand-accent)}
.article-body a{text-decoration:underline}
/* 【問答速覽表】係本站每篇嘅必備結構，畀足存在感 */
.article-body .table>thead th{background:var(--brand-soft);white-space:nowrap;font-weight:700}
.article-body .table td,.article-body .table th{vertical-align:middle}

.article-body h2[id],.article-body h3[id],[id^="sec-"]{scroll-margin-top:78px}