/* 城市導覽 cityscopeguide.hk —— 品牌层（Bootstrap 5.3 之上的薄薄一层）
   角度：地區本地 / 語調：在地貼近 / 主色：磚紅 + 靛藍 / 標題襯線體
   规则：能用 Bootstrap 类解决的一律不写自定义样式；这里只放
        ① 品牌变量覆盖 ② Bootstrap 没有的正文排版(prose) ③ 十八區入口专属组件 */

:root{
  --bs-primary:#a8402d;
  --bs-primary-rgb:168,64,45;
  --brand-dark:#7c2c1d;
  --brand-soft:#fbeae5;
  --brand-accent:#1f4e79;

  --bs-link-color:#a8402d;
  --bs-link-color-rgb:168,64,45;
  --bs-link-hover-color:#7c2c1d;
  --bs-link-hover-color-rgb:124,44,29;

  --bs-body-color:#231d1a;
  --bs-body-color-rgb:35,29,26;
  --bs-secondary-color:rgba(35,29,26,.68);
  --bs-tertiary-color:rgba(35,29,26,.5);
  --bs-border-color:#e6ded7;
  --bs-tertiary-bg:#fbf8f4;
  --bs-border-radius:.25rem;
  --bs-border-radius-sm:.25rem;

  --bs-body-font-family:"Noto Sans HK","PingFang HK","Hiragino Sans CNS","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bs-body-line-height:1.8;
  --brand-serif:"Noto Serif HK","Source Han Serif HK","Songti TC","PMingLiU","Times New Roman",serif;
}

body{background:var(--bs-body-bg)}
h1,h2,h3,.navbar-brand{font-family:var(--brand-serif)}

.btn-primary{--bs-btn-bg:#a8402d;--bs-btn-border-color:#a8402d;--bs-btn-hover-bg:#7c2c1d;--bs-btn-hover-border-color:#7c2c1d;--bs-btn-active-bg:#7c2c1d;--bs-btn-active-border-color:#7c2c1d}
.btn-outline-primary{--bs-btn-color:#a8402d;--bs-btn-border-color:#a8402d;--bs-btn-hover-bg:#a8402d;--bs-btn-hover-border-color:#a8402d;--bs-btn-active-bg:#a8402d;--bs-btn-active-border-color:#a8402d}
.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 的竖杠区分开 */
.sec-title{font-family:var(--brand-serif);font-size:1.3rem;margin:0;padding-bottom:.35rem;border-bottom:2px solid var(--bs-primary);display:inline-block}

.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(--bs-primary)}

/* ③ 十八區入口：区格按钮（Bootstrap 的 btn 撑不出「区名+英文+区内地点」三行，故自定义） */
.dcell{
  display:block;width:100%;text-align:left;padding:.55rem .7rem;line-height:1.35;
  border:1px solid var(--bs-border-color);background:#fff;border-radius:var(--bs-border-radius);
  color:inherit;text-decoration:none;transition:border-color .15s,background-color .15s;
}
.dcell,.dcell:hover,.dcell:focus{text-decoration:none}
.dcell:hover:not(:disabled){border-color:var(--bs-primary);background:var(--brand-soft)}
.dcell.active{border-color:var(--bs-primary);background:var(--bs-primary);color:#fff}
.dcell.active .dname,.dcell.active .den,.dcell.active .dcnt{color:#fff!important}
.dcell:disabled{opacity:.5;cursor:not-allowed}
.dcell .dname{font-family:var(--brand-serif);font-weight:700;font-size:.98rem;display:block}
.dcell .den{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bs-tertiary-color);display:block}
.dcell .dcnt{font-size:.72rem;color:var(--brand-accent)}

/* ② 正文排版：Bootstrap 不提供 prose，文章正文由 CMS 输出裸标签，这段必须自己写 */
.article-body{font-size:1.02rem;line-height:1.95}
.article-body h2{font-family:var(--brand-serif);font-size:1.35rem;margin:2rem 0 .9rem;padding-bottom:.3rem;border-bottom:1px solid var(--bs-border-color)}
.article-body h3{font-family:var(--brand-serif);font-size:1.14rem;margin:1.6rem 0 .7rem}
.article-body p{margin:0 0 1.05rem}
.article-body ul,.article-body ol{margin:0 0 1.05rem;padding-left:1.4rem}
.article-body li{margin-bottom:.4rem}
.article-body img{max-width:100%;height:auto;margin:.6rem 0}
.article-body blockquote{margin:1.2rem 0;padding:.8rem 1rem;background:var(--bs-tertiary-bg);border-left:4px solid var(--bs-primary)}
.article-body a{text-decoration:underline}
.article-body .table>thead th{background:var(--brand-soft);white-space:nowrap}
.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}