/* ===== 多頁網站：在臨時網站 styles.css 之上的補充 =====
   styles.css 保留臨時網站原樣；這裡只加多頁版需要的部分：
   六組主導覽列、導覽路徑、同組分頁、內文排版及「內容更新中」。 */

/* ---- 主導覽列：六組 ---- */
.top-nav .nav-group-toggle > svg:first-child{width:1em!important;height:1em!important;flex:0 0 1em;margin-right:.25rem!important;vertical-align:0!important;position:relative;top:0}
/* 圓圈 info 圖示喺呢個 24x24 格入面實心面積細過其他圖示，睇落會細一截，加大少少睇齊。 */
.icon-info{width:1.2em!important;height:1.2em!important}
.top-nav .nav-group-toggle > svg.icon-info:first-child{width:1.2em!important;height:1.2em!important;flex-basis:1.2em}
.top-nav .nav-group.is-current > .nav-group-toggle{color:var(--primary);font-weight:700}
.top-nav .nav-links a[aria-current="page"]{color:var(--primary);background:#e8f7ee;font-weight:700}

@media (min-width:769px) and (max-width:1100px){
  .top-nav .nav-links{position:static;transform:none;margin-left:auto;gap:.1rem}
  .top-nav .nav-group-toggle > svg:first-child{display:none!important}
  .top-nav .nav-group-toggle{padding:.4rem .35rem}
  .nav-right{margin-left:.35rem}
}
@media (min-width:769px) and (max-width:900px){
  .top-nav .nav-logo span{display:none}
}

/* 手機：每組是一個可展開的標題，展開後才見子項目 */
@media (max-width:768px){
  .top-nav .nav-group-toggle{
    display:flex;width:100%;justify-content:flex-start;
    font-size:1.1rem;padding:.85rem 1.25rem;border-radius:0;
    border-bottom:1px solid var(--border)
  }
  .top-nav .nav-group-caret{margin-left:auto}
  .top-nav .nav-group-menu{display:none;background:#f6fbf8}
  .top-nav .nav-group.is-open .nav-group-menu{display:block}
  .top-nav .nav-group-menu a{padding-left:2.6rem;font-size:1rem}
}

/* ---- 分頁頂部：導覽路徑及同組分頁 ---- */
.page-main{padding-top:1.25rem;padding-bottom:2rem}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);margin:0 0 .75rem}
.breadcrumb a{color:var(--primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--text);font-weight:600}
.sub-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0 0 1.25rem}
.sub-nav a{
  display:inline-flex;align-items:center;min-height:36px;padding:.35rem .85rem;
  border:1px solid var(--border);border-radius:999px;background:var(--card);
  color:var(--text);text-decoration:none;font-size:.9rem;white-space:nowrap
}
.sub-nav a:hover{border-color:var(--primary);color:var(--primary)}
.sub-nav a[aria-current="page"]{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}

/* ---- 內文 ---- */
.prose{max-width:760px;margin:0 auto;line-height:1.85}
.prose h3.prose-title{
  display:flex;align-items:center;gap:.35em;
  margin:0 0 1rem;font-size:1.1rem;
  color:var(--primary);border-bottom:2px solid var(--border);padding-bottom:.5rem;
  text-align:left;
}
.prose h3.prose-title svg{width:1.15em;height:1.15em;flex-shrink:0}
.prose p{margin:0 0 1rem}
.prose h3{margin-top:1.75rem!important}
.prose h3:first-child{margin-top:0!important}
.prose-list{margin:0 0 1rem;padding-left:1.6rem}
.prose-list li{margin:0 0 .45rem;padding-left:.2rem}
.value-list{margin:0 0 1rem}
.value-list dt{font-weight:700;color:var(--primary);margin-top:.9rem}
.value-list dt:first-child{margin-top:0}
.value-list dd{margin:.2rem 0 0}
.value-list.numbered{display:grid;grid-template-columns:auto 1fr;column-gap:.5rem}
.value-list.numbered dt{margin-top:.75rem;color:var(--primary)}
.value-list.numbered dd{margin-top:.75rem}
.value-list.numbered dt:first-child,.value-list.numbered dt:first-child + dd{margin-top:0}
section .info-item + .value-list,section table + .info-item{margin-top:.25rem}

/* 講道重溫：只得一個連結 */
.links-3x2.single-link{grid-template-columns:minmax(0,320px)!important;justify-content:center}

/* ---- 內容更新中 ---- */
.content-pending{
  text-align:center;padding:2.5rem 1rem;color:var(--muted);font-weight:600;
  border:1px dashed var(--border);border-radius:12px;background:#f7fcf9
}

/* ---- 導覽列：捲動後加陰影 ---- */
.top-nav{transition:box-shadow .2s ease}
.top-nav.is-scrolled{box-shadow:0 4px 18px rgba(26,46,31,.08)}

/* ---- 多欄頁尾 ---- */
footer.site-footer{background:#e6f4ea;color:#2f4a3a;border-top:1px solid #cfe6d7;text-align:left;padding:3rem 0 1.5rem;font-size:.9rem;margin-top:0}
.site-footer a{color:#1f3a2b;text-decoration:none}
.site-footer a:hover{color:var(--primary);text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) 2.4fr;gap:2.5rem}
.footer-logo{display:flex;flex-direction:column;gap:.45rem;font-weight:700;color:#14532d!important;margin-bottom:1.1rem;letter-spacing:.02em}
.footer-logo:hover{text-decoration:none!important}
.footer-logo-name{display:inline-flex;align-items:center;gap:.5rem;font-size:1.15rem}
.footer-logo-name img{width:28px;height:28px;border-radius:50%;background:#fff;flex-shrink:0}
.footer-contact{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.45rem}
.footer-contact strong{display:block;font-size:.75rem;color:#5f7f6c;font-weight:600}
.footer-social{display:flex;gap:.5rem;margin:0 0 1rem}
.footer-social a,.footer-social button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #cfe6d7;cursor:pointer;padding:0}
.footer-social a:hover,.footer-social button:hover{background:#d4efdd}
.footer-social svg{width:20px!important;height:20px!important;margin:0!important;display:block;color:var(--primary)}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1.25rem}
.footer-col h3{font-size:.95rem;color:#14532d;margin:0 0 .6rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.footer-col a{color:#2f4a3a}
.footer-bottom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid #cfe6d7}
.footer-bottom p{margin:0}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 分頁頁首：相片背景 + 群組 + 頁名 ---- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:clamp(210px,26vw,300px);display:flex;align-items:flex-end;
  background-color:#12301f;background-position:center;background-size:cover;background-repeat:no-repeat
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(18,48,31,.92) 0%,rgba(18,48,31,.72) 45%,rgba(18,48,31,.25) 100%),
             linear-gradient(to top,rgba(18,48,31,.55),rgba(18,48,31,0) 55%)
}
.page-hero-inner{width:100%;padding-top:2rem;padding-bottom:3.4rem}
/* 標題區唔好留太多頂部空白：高度跟內容，只保留少量底圖位置 */
.page-hero{min-height:clamp(180px,17vw,230px)}
.page-hero-inner{padding-top:1.25rem}
.page-hero .breadcrumb{color:rgba(255,255,255,.75);margin-bottom:1rem}
.page-hero .breadcrumb a{color:#bff0d0}
.page-hero .breadcrumb [aria-current="page"]{color:#fff}
.page-hero-group{
  display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .4rem;
  font-size:.85rem;font-weight:700;letter-spacing:.12em;color:#9fe3b8
}
.page-hero-group svg{width:1.05em!important;height:1.05em!important;margin:0!important;vertical-align:0!important}
.page-hero-group svg.icon-info{width:1.25em!important;height:1.25em!important}
.page-hero h1{
  margin:0;font-family:'Noto Serif TC','Noto Sans TC',serif;font-weight:700;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);line-height:1.25;letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.25)
}

/* 同組分頁：浮在頁首底部 */
.page-hero + .page-main{padding-top:0}
.page-hero + .page-main > .sub-nav{
  position:relative;z-index:2;margin:-1.6rem auto 1.5rem;width:fit-content;max-width:100%;
  padding:.45rem;border-radius:999px;background:#fff;border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(18,48,31,.12);flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none
}
.page-hero + .page-main > .sub-nav::-webkit-scrollbar{display:none}
.page-hero + .page-main > .sub-nav a{border:0;background:transparent}
.page-hero + .page-main > .sub-nav a[aria-current="page"]{background:var(--primary)}
.page-hero + .page-main > section:first-child{margin-top:1.5rem}

/* 頁名已在頁首，第一段重複的標題就不再顯示 */
h2.dup-title{display:none}
.roster-heading:has(.dup-title){display:flex;justify-content:flex-end}
.roster-heading:has(.dup-title) .roster-expand-btn{position:static}

@media (max-width:560px){
  .page-hero::before{background:linear-gradient(to top,rgba(18,48,31,.95),rgba(18,48,31,.6))}
  .page-hero-inner{padding-bottom:3rem}
  .page-hero + .page-main > .sub-nav{margin-left:0;margin-right:0;border-radius:14px;justify-content:flex-start}
}

/* 手機（直向及橫向）：頁尾不顯示分頁連結及 App 下載按鈕，QR Code 及版權置中 */
@media (max-width:768px),(orientation:landscape) and (max-height:500px){
  .site-footer .footer-links{display:none}
  .site-footer .footer-grid{grid-template-columns:1fr}
  .site-footer .footer-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%}
  .site-footer .footer-bottom p{width:100%;text-align:center}
}

/* 地點分頁：名稱分段換行 */
.location-tab .nw{white-space:nowrap}
/* 四個地點分頁：號碼及名稱一律靠左，每欄嘅號碼上下對齊 */
.location-tab{justify-content:flex-start;padding-left:1rem}
@media (max-width:768px),(orientation:landscape) and (max-height:500px){
  .location-tab{padding-left:.75rem}
}

/* 同組分頁下拉選單：只在手機直向顯示，取代膠囊列 */
.sub-nav-dd{display:none}
@media (max-width:768px) and (orientation:portrait){
  .has-sub-nav-dd .page-hero + .page-main > .sub-nav{display:none}
  .has-sub-nav-dd .sub-nav-dd{display:block;position:relative;z-index:60;margin:-1.6rem 0 1.5rem}
  .sub-nav-dd-toggle{
    display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;
    padding:.6rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:#fff;
    box-shadow:0 10px 28px rgba(18,48,31,.12);font:inherit;font-size:1.05rem;font-weight:700;
    color:var(--primary);cursor:pointer;text-align:left
  }
  .sub-nav-dd-toggle svg{width:1.5em;height:1.5em;flex:0 0 1.5em;transition:transform .18s ease}
  .sub-nav-dd.is-open .sub-nav-dd-toggle{border-radius:14px 14px 0 0}
  .sub-nav-dd.is-open .sub-nav-dd-toggle svg{transform:rotate(180deg)}
  .sub-nav-dd-menu{
    list-style:none;margin:0;padding:.3rem;position:absolute;left:0;right:0;top:100%;
    background:#fff;border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;
    box-shadow:0 16px 30px rgba(18,48,31,.16)
  }
  .sub-nav-dd-menu a{
    display:block;padding:.8rem 1rem;border-radius:10px;color:var(--text);text-decoration:none;font-size:1rem
  }
  .sub-nav-dd-menu a:hover{background:#e8f7ee;color:var(--primary)}
  .sub-nav-dd-menu a[aria-current="page"]{background:#e8f7ee;color:var(--primary);font-weight:700}
}

/* ===== 頁尾圖示 ===== */
.footer-contact li{display:grid;grid-template-columns:34px 1fr;gap:.7rem;align-items:start}
.footer-contact .fc-icon{
  width:34px!important;height:34px!important;padding:8px;box-sizing:border-box;margin:0!important;
  border-radius:10px;background:none;color:var(--primary);vertical-align:0!important
}
.footer-col h3{display:flex;align-items:center;gap:.45rem}
.footer-col h3 svg{width:1.1em!important;height:1.1em!important;margin:0!important;vertical-align:0!important;color:var(--primary);flex:0 0 auto}
.footer-col h3 svg.icon-info{width:1.3em!important;height:1.3em!important}
/* 連結對齊標題文字（圖示之後），唔係對齊圖示 */
.footer-col ul{padding-left:calc(1.1 * .95rem + .45rem)}
.footer-col:has(svg.icon-info) ul{padding-left:calc(1.3 * .95rem + .45rem)}

/* ===== 分頁頁首：中性灰階濾鏡，取代綠色 ===== */
.page-hero{background:#14181c!important}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--page-hero-img) center/cover no-repeat;
  filter:grayscale(1) contrast(1.08) brightness(.9);
  transform-origin:center;
  animation:hero-settle 14s cubic-bezier(.2,.8,.2,1) both
}
@keyframes hero-settle{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.page-hero::before{
  background:linear-gradient(100deg,rgba(14,17,21,.9) 0%,rgba(14,17,21,.66) 45%,rgba(14,17,21,.22) 100%),
             linear-gradient(to top,rgba(14,17,21,.6),rgba(14,17,21,0) 55%)!important
}
.page-hero .breadcrumb{color:rgba(255,255,255,.62)}
.page-hero .breadcrumb a{color:rgba(255,255,255,.88)}
.page-hero .breadcrumb a:hover{color:#fff}
.page-hero-group{color:#d8c49a}
.page-hero h1::after{
  content:"";display:block;width:48px;height:3px;border-radius:3px;margin-top:.8rem;
  background:linear-gradient(90deg,#d8c49a,rgba(216,196,154,0))
}
@media (max-width:560px){
  .page-hero::before{background:linear-gradient(to top,rgba(14,17,21,.94),rgba(14,17,21,.55))!important}
}

/* ===== 轉場效果 ===== */
/* 換頁：支援的瀏覽器會淡出淡入，導覽列保持不動 */
@view-transition{navigation:auto}
.top-nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:no-preference){
  /* 分頁頁首文字逐行出現 */
  .page-hero .breadcrumb,.page-hero-group,.page-hero h1{animation:rise-in .8s cubic-bezier(.2,.8,.2,1) both}
  .page-hero-group{animation-delay:.08s}
  .page-hero h1{animation-delay:.16s}
  @keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* 捲到時淡入（主頁色帶及各分頁段落） */
  .js-reveal [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .js-reveal [data-reveal].is-visible{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .page-hero::after{animation:none}
}

/* ===== 導覽列動畫 ===== */
/* 電腦：下拉選單淡入並向下滑出；收起時淡出並向上收 */
@media (min-width:769px){
  .top-nav .nav-group-menu{
    display:block;opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,-10px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s
  }
  .top-nav .nav-group.is-open .nav-group-menu{
    display:block;opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0);
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s
  }
  /* 滑鼠由按鈕移到選單途中不會斷開 */
  .top-nav .nav-group-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
}

/* 手機：選單由左至右滑入；每組子選單向下展開、向上收起 */
@media (max-width:768px){
  .top-nav .nav-links{
    left:0;right:auto;width:min(86vw,360px);height:calc(100vh - 56px);height:calc(100dvh - 56px);max-height:none;
    border-right:1px solid var(--border);border-bottom:0;
    clip-path:none;opacity:1;transform:translateX(-102%);
    box-shadow:none;
    transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease,visibility 0s linear .42s
  }
  .top-nav .nav-links.open{
    /* 陰影遮暗頁面，但唔遮頂部導覽列（上邊切齊選單頂） */
    clip-path:inset(0 -100vmax -100vmax -100vmax);transform:translateX(0);
    box-shadow:0 0 0 100vmax rgba(14,17,21,.38),12px 0 30px rgba(0,0,0,.12);
    transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,visibility 0s
  }
  .top-nav .nav-group-menu{
    display:block;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .3s ease
  }
  .top-nav .nav-group.is-open .nav-group-menu{max-height:640px;opacity:1;transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease .05s}
  .top-nav .nav-group-menu li{transform:translateY(-6px);transition:transform .35s ease}
  .top-nav .nav-group.is-open .nav-group-menu li{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .top-nav .nav-links,.top-nav .nav-links.open,.top-nav .nav-group-menu,.top-nav .nav-group.is-open .nav-group-menu{transition:none!important}
}

/* ===== 分頁：頁尾上方置中的「返回首頁」 ===== */
.back-home{display:flex;justify-content:center;padding:1.5rem 0 1rem}
.back-home-btn{
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.65rem 1.6rem;border-radius:999px;
  background:#fff;border:1px solid var(--border);color:var(--primary);font-weight:700;text-decoration:none;
  box-shadow:0 10px 24px rgba(18,48,31,.1);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .25s ease,color .25s ease
}
.back-home-btn svg{width:1.2em;height:1.2em;flex:0 0 auto}
.back-home-btn:hover{background:var(--primary);color:#fff;transform:translateY(-3px);box-shadow:0 16px 30px rgba(27,169,78,.28)}

/* ===== 分頁頁首：淺色半透明層（取代深色） ===== */
.page-hero{color:#1a2e1f;background:#f3f5f4!important}
.page-hero::after{filter:none}
.page-hero::before{
  background:linear-gradient(100deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,.15) 75%,rgba(255,255,255,0) 100%),
             linear-gradient(to top,rgba(255,255,255,.45),rgba(255,255,255,0) 40%)!important
}
.page-hero h1{color:#15261c;text-shadow:none}
.page-hero .breadcrumb{color:#6b7a72}
.page-hero .breadcrumb a{color:#2f4a3b}
.page-hero .breadcrumb a:hover{color:var(--primary)}
.page-hero .breadcrumb [aria-current="page"]{color:#15261c}
.page-hero-group{color:#9a7a3a}
.page-hero h1::after{background:linear-gradient(90deg,#b8964f,rgba(184,150,79,0))}
@media (max-width:560px){
  .page-hero::before{background:linear-gradient(to top,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.2) 100%)!important}
}

/* ===== 分頁頁首：保留彩色相片，加強文字可讀性 =====
   文字所在的左邊加厚淺白漸層，右邊保留相片原色；文字加深並加柔和白色光暈，
   即使相片較亮或較雜亂也看得清楚。 */
.page-hero::before{
  background:linear-gradient(100deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 32%,rgba(255,255,255,.5) 58%,rgba(255,255,255,.1) 82%,rgba(255,255,255,0) 100%),
             linear-gradient(to top,rgba(240,249,255,.85),rgba(240,249,255,0) 38%)!important
}
.page-hero .breadcrumb{color:#3f4d45;font-weight:500}
.page-hero .breadcrumb a{color:#1f3a2c}
.page-hero .breadcrumb [aria-current="page"]{color:#0f1f16}
.page-hero-group{color:#76561a}
.page-hero h1{color:#0f1f16}
.page-hero .breadcrumb,.page-hero-group,.page-hero h1{
  text-shadow:0 0 1px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.95),0 0 22px rgba(255,255,255,.8)
}
@media (max-width:768px){
  .page-hero::before{
    background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.82) 60%,rgba(255,255,255,.55) 100%),
               linear-gradient(to top,rgba(240,249,255,.9),rgba(240,249,255,0) 45%)!important
  }
}

/* ===== 字型：繁體、簡體、英文都用思源（Noto） ===== */
body{font-family:'Noto Sans TC','Noto Sans SC',sans-serif}
.page-hero h1,.home-vision{font-family:'Noto Serif TC','Noto Serif SC',serif}

/* ---- 場地租用月曆：今日／月曆 切換 ---- */
.cal-modes{display:flex;justify-content:center;gap:.25rem;width:max-content;margin:0 auto 1rem;padding:.25rem;border-radius:999px;background:#e8f7ee;border:1px solid var(--border)}
.cal-mode{min-width:84px;min-height:40px;padding:.4rem 1.1rem;border:0;border-radius:999px;background:none;color:var(--primary);font:inherit;font-weight:700;cursor:pointer;transition:background .2s ease,color .2s ease}
.cal-mode:hover{background:#d4efdd}
.cal-mode.is-active{background:var(--primary);color:#fff}
.cal-mode:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cal-day-nav{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 0 .75rem}
.cal-day-nav[hidden]{display:none}
.cal-today-label{text-align:center;margin:0;min-width:13em;color:var(--muted);font-weight:600}
.cal-day-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--primary);cursor:pointer;transition:background .2s ease}
.cal-day-btn:hover{background:#e8f7ee}
.cal-day-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cal-day-btn svg{width:18px;height:18px}

/* ---- 惡劣天氣指引：颱風及暴雨合併為一張卡 ---- */
#weather-arrangements .weather-grid.is-single{grid-template-columns:1fr;max-width:760px;margin:0 auto}
#weather-arrangements .weather-andor{
  align-self:flex-start;display:flex;align-items:center;height:58px;padding:0 .4rem;
  font-weight:800;font-size:.9rem;color:var(--muted);white-space:nowrap
}
#weather-arrangements .weather-set{display:flex;align-items:flex-start;justify-content:center;gap:.7rem;flex-wrap:wrap}
@media(max-width:768px){#weather-arrangements .weather-andor{height:52px}}
@media(max-width:600px){
  #weather-arrangements .weather-signal-row{flex-direction:column;align-items:center;gap:.35rem}
  #weather-arrangements .weather-andor{align-self:center;height:auto;padding:.15rem .8rem;border-radius:999px;background:#eef3f0}
}


/* ---- 有放大檢視掣嘅標題：手機留返位畀個掣，標題唔會被迫斷行 ---- */
@media(max-width:560px){
  .roster-heading h2:not(.dup-title){padding-right:6.4rem}
}
/* 信號圖下面用天文台全名，字細啲、闊啲，自動分行 */
#weather-arrangements .weather-signal,#weather-arrangements .weather-signal.t8{width:86px}
#weather-arrangements .weather-signal span{display:block;font-size:.74rem;line-height:1.35}
@media(max-width:768px){#weather-arrangements .weather-signal,#weather-arrangements .weather-signal.t8{width:76px}}

/* ---- 網站 QR Code：全畫面顯示（覆蓋各頁 inline 樣式） ---- */
#qrOverlay{background:linear-gradient(180deg,#f0f9ff,#e6f4ea)!important}
#qrOverlay>div{background:none!important;padding:1.5rem!important;border-radius:0!important;max-width:none!important;box-shadow:none}
#qrOverlay>div>p{font-size:clamp(1.3rem,1rem + 1.5vw,2rem)!important;margin-bottom:1.5rem!important}
#qrOverlay img{width:min(78vw,62vh)!important;height:auto!important;aspect-ratio:1/1;border-radius:16px!important;background:#fff;box-shadow:0 20px 50px rgba(18,48,31,.15)}
#qrOverlay>div>a:last-child{font-size:clamp(1rem,.9rem + .5vw,1.25rem);margin-top:1.5rem!important;color:#1d6fd1!important}
#closeQr{color:#14532d!important;width:48px;height:48px;border-radius:50%!important}
#closeQr:hover{background:#d4efdd!important}
#weather-arrangements .weather-panel h3{border-bottom:0;padding-bottom:0}
/* 「以下信號生效期間，所有活動如常／取消：」永遠一行；窄手機自動縮細字 */
#weather-arrangements .weather-panel{container-type:inline-size}
#weather-arrangements .weather-result{white-space:nowrap;font-size:min(1rem,calc(100cqi / 18))}
/* 崇拜卡：聚會資料／講道訊息兩頁疊喺同一格，每 4 秒淡入淡出 */
.bcard-what.has-sermon{display:grid}
.bcard-what.has-sermon>.bcard-page{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-start;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.bcard-what.has-sermon>.bcard-page.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
.bcard-sermon{text-align:left}
.bcard-sermon p{margin:0}
.bcard-sermon-label{font-size:.85rem;font-weight:700;color:var(--muted,#5b6b62);letter-spacing:.08em}
.bcard-sermon-title{font-size:1.15rem;font-weight:800;margin:.15rem 0 .25rem!important;line-height:1.35}
.bcard-sat .bcard-sermon-title{color:#2b6cb0}
.bcard-sun .bcard-sermon-title{color:#1BA94E}
.bcard-sermon-line{font-size:.92rem;font-weight:600;line-height:1.5}
@media (prefers-reduced-motion:reduce){.bcard-what.has-sermon>.bcard-page{transition:none}}
/* 手機：講道訊息收細字，唔顯示「講員：」「經文：」字頭，減少斷行 */
@media (max-width:560px){
  .bcard-sermon-label{font-size:.72rem}
  .bcard-sermon-title{font-size:.95rem}
  .bcard-sermon-line{font-size:.8rem;line-height:1.4}
  .bcard-sermon-line .lab{display:none}
}
/* 聯絡我們：資料內容用粗體（標籤維持細字）；地圖相片下面地址粗體 */
.info-item>span,.info-item>a{font-weight:700}
.info-item>span b{font-weight:700}
.info-item>span:has(b){font-weight:400}
.location-tab-address{font-weight:700}
/* 頁尾聯絡資料：標籤一般字，資料粗體（同聯絡我們一致） */
.footer-contact strong{font-weight:400}
.footer-contact strong~span,.footer-contact strong~a{font-weight:700}
/* 九號信號名稱：電腦兩行（九號烈風或／暴風風力增強信號），手機三行（九號烈風或／暴風風力／增強信號） */
#weather-arrangements .weather-signal.t9{width:auto;min-width:86px}
#weather-arrangements .weather-signal.t9 .ln{display:block;white-space:nowrap}
#weather-arrangements .weather-signal.t9 .ln2>span{display:inline}
@media(max-width:768px){
  #weather-arrangements .weather-signal.t9{width:76px;min-width:0}
  #weather-arrangements .weather-signal.t9 .ln2>span{display:block}
}
/* 崇拜卡：唔顯示「粵語崇拜」；日子膠囊、聚會名稱、時間、地點及講道訊息置中 */
.bcard-top{justify-content:center}
.bcard-what{text-align:center}
.bcard-where{justify-content:center}
.bcard-what.has-sermon>.bcard-page{align-items:center}
.bcard-sermon{text-align:center}
/* 崇拜卡聚會名稱：周六藍、主日綠，粗體（崇拜時段另計） */
.bcard .bcard-what h4{color:var(--bc);font-weight:800}

/* ===== 崇拜時段顏色 =====
   即將開始／主日堂與堂之間：堂名、時間、「崇拜即將開始」（同講道題目）黃色，日期白色；PDF 圖示＋程序表文字白↔黃閃動放大。
   崇拜進行中：「崇拜進行中」、堂名同時間黃色，其他字、月曆同 PDF 圖示白色。 */
.bcard.bcard.is-worship-active .bcard-pdf{color:#fff!important}
.bcard.bcard.is-worship-active .bcard-pdf text{fill:#1a2e1f!important}
.bcard.bcard.is-worship-active .bcard-cal{color:#fff!important}
.bcard.bcard.is-worship-active:is(.worship-before,.worship-between) :is(.bcard-what h4,.bcard-time,.bcard-when-label,.bcard-sermon-title){color:#ffd54a!important}
.bcard.bcard.is-worship-active.worship-live :is(.bcard-when-label,.bcard-what h4,.bcard-time,.bcard-sermon-title){color:#ffd54a!important}
@keyframes bcard-pulse{0%,100%{transform:scale(1);color:#fff}50%{transform:scale(1.08);color:#ffd54a}}
/* 圖示同文字跟住外層顏色閃（唔變暗） */
.bcard.bcard.is-worship-active:is(.worship-before,.worship-between) .bcard-qr :is(.bcard-pdf,.bcard-get-label,.bcard-get-hint){color:inherit!important}
.bcard.is-worship-active:is(.worship-before,.worship-between) .bcard-qr{animation:bcard-pulse 1.4s ease-in-out infinite;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .bcard.is-worship-active .bcard-qr{animation:none!important}
}
/* 講員名：崇拜即將開始同崇拜進行中都用黃色 */
.bcard.bcard.is-worship-active .bcard-sermon-speaker{color:#ffd54a!important}
.bcard.bcard.is-worship-active .bcard-sermon-speaker .lab{color:#fff}
/* 崇拜頁時間表：只標示進行中／即將開始嗰一堂，堂名同時間黃色，後面加狀態字 */
.times-table tr[data-day].is-worship-active td,.times-table tr[data-day].is-worship-active td:first-child{color:#ffd54a!important}
.times-table tr[data-day].is-worship-active td:first-child::after{content:"即將開始";display:inline-block;margin-left:.5em;padding:.05em .55em;border-radius:999px;font-size:.75em;font-weight:700;background:rgba(255,255,255,.16);color:#fff;vertical-align:.1em}
.times-table tr[data-day].is-worship-active.worship-live td:first-child::after{content:"進行中";background:#ffd54a;color:#1a2e1f}
/* 聯絡我們：地址、港鐵、巴士嘅內容喺「：」後面換行 */
.contact-addr>div>strong{display:block}
.contact-addr>div+div{margin-top:.35rem}
.contact-transport b{display:block}
.contact-transport br{display:none}
.contact-transport b{margin-bottom:.35rem}

/* ===== 聯絡我們：右邊地點分頁及資料卡（簡潔版，電腦同手機一致） ===== */
.location-tabs{gap:.5rem}
.location-tabs .location-tab{
  justify-content:flex-start;gap:.55rem;padding:.55rem .75rem;min-height:3rem;
  border:1px solid #e1e8e4;border-radius:12px;background:#fff;color:#243b2e;
  font-size:.8rem;font-weight:700;box-shadow:none;transform:none;
  transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease
}
.location-tabs .location-tab:hover:not(.is-active){background:#f7faf8;border-color:color-mix(in srgb,var(--tab-accent) 40%,#e1e8e4)}
.location-tabs .location-tab.is-active{
  background:color-mix(in srgb,var(--tab-accent) 9%,#fff);
  border-color:var(--tab-accent);color:color-mix(in srgb,var(--tab-accent) 80%,#000);
  box-shadow:0 4px 14px color-mix(in srgb,var(--tab-accent) 18%,transparent);transform:none
}
.location-tabs .location-tab-num,
.location-tabs .location-tab.is-active .location-tab-num{
  width:22px;height:22px;background:var(--tab-accent);color:#fff;font-size:.72rem
}
.location-tab-panel{
  background:#fff;border:1px solid #e1e8e4;border-radius:16px;
  box-shadow:0 10px 28px rgba(28,55,40,.08)
}
.location-tab-photo{background:#eef1ef}
.location-tab-photo-media-trigger img{object-fit:cover!important}
.location-tab-photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,20,15,.28),transparent)
}
.location-tab-body{
  flex-direction:row;align-items:center;justify-content:space-between;text-align:left;
  gap:1rem;padding:.9rem 1.1rem
}
.location-tab-body .location-tab-title{flex-basis:100%}
.location-tab-body:has(.location-tab-title:not([hidden])){flex-wrap:wrap}
.location-tab-address{
  flex:1;min-width:0;display:flex;align-items:flex-start;gap:.45rem;
  font-size:.9rem;line-height:1.5;color:#1f3328
}
.location-tab-address::before{
  content:"";flex:none;width:1.05em;height:1.05em;margin-top:.2em;background:var(--card-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat
}
.location-tab-link{
  flex:none;background:#fff;color:var(--card-accent);border:1.5px solid var(--card-accent);
  box-shadow:none;padding:.45rem .9rem;font-size:.8rem;white-space:nowrap
}
.location-tab-link:hover,.location-tab-link:focus-visible{background:var(--card-accent);color:#fff;box-shadow:none}
/* 手機：相片固定比例，地址同掣上下排，掣佔滿全闊；資料區留兩行高度，轉地點時唔會跳 */
@media (max-width:980px){
  .location-tab-panel{flex:none!important}
  .location-tab-photo{flex:none!important;aspect-ratio:16/10;height:auto}
}
@media (max-width:560px){
  .location-tabs .location-tab{font-size:.74rem;padding:.5rem .6rem;min-height:2.8rem;gap:.45rem}
  .location-tabs .location-tab-num{width:20px;height:20px}
  .location-tab-body{flex-direction:column;align-items:stretch;gap:.7rem;padding:.85rem .95rem .95rem}
  .location-tab-address{font-size:.86rem;min-height:4.5em}
  .location-tab-link{justify-content:center;padding:.6rem 1rem;font-size:.85rem}
}
@media (min-width:981px){.location-tab-photo{flex:0 0 66%}}
/* 地點號碼：數字喺圓圈正中（上下左右）；手機四個圓圈一樣大 */
.location-tabs .location-tab-num{display:grid;place-items:center;line-height:1;padding:1px 0 0;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums}
@supports (text-box:trim-both cap alphabetic){
  .location-tabs .location-tab-num{padding:0;text-box:trim-both cap alphabetic}
}
@media (max-width:560px){
  .location-tabs .location-tab-num,.location-tabs .location-tab.is-active .location-tab-num{width:20px;height:20px}
}
/* 地址置中，撳地址就開 Google 地圖；唔顯示「開啟 Google 地圖」掣 */
.location-tab-panel .location-tab-link{display:none}
.location-tab-panel .location-tab-body{flex-direction:column;justify-content:center;align-items:center;text-align:center}
.location-tab-panel .location-tab-address{flex:none;justify-content:center;align-items:center;text-align:center;min-height:0}
.location-tab-address-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--card-accent) 45%,transparent);text-underline-offset:4px}
.location-tab-address-link::after{content:" ↗";color:var(--card-accent);font-weight:800}
.location-tab-address-link:hover,.location-tab-address-link:focus-visible{color:var(--card-accent);text-decoration-color:currentColor}
@media (max-width:560px){.location-tab-panel .location-tab-address{min-height:3em}}
.location-tab-panel .location-tab-address{display:block}
.location-tab-panel .location-tab-address::before{display:inline-block;vertical-align:-.15em;margin:0 .3em 0 0}
/* 頁尾聯絡資料：圖示喺右邊兩行字（標籤＋資料）嘅正中 */
.footer-contact li{align-items:center}
/* 頁尾各欄標題圖示向下移少少，同中文字視覺置中 */
.footer-col h3 svg{position:relative;top:.1em}
/* 東山閣／天山閣地址：兩行顯示，第二行唔斷開，窄畫面自動縮細字 */
.location-tab-body{container-type:inline-size}
.location-tab-address .nw{white-space:nowrap}
.location-tab-panel .location-tab-address{font-size:min(.9rem,calc((100cqi - 1.5em) / 22))}
/* 崇拜卡底部：日期同程序表向中間靠近 */
.bcard-foot{justify-content:space-evenly}
/* ===== 崇拜卡平時裝飾：頂部色帶、柔和漸層底色、右下角淡淡教堂水印 ===== */
.bcard{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--bc-soft) 0%,#fff 48%,#fff 100%);
  box-shadow:0 10px 26px color-mix(in srgb,var(--bc) 10%,transparent)}
.bcard>*{position:relative;z-index:1}
.bcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--bc),color-mix(in srgb,var(--bc) 45%,#fff))}
.bcard::after{content:"";position:absolute;right:-18px;bottom:-22px;width:150px;height:150px;z-index:0;pointer-events:none;
  background:var(--bc);opacity:.07;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12.22V9l-5-2.5V5h2V3h-2V1h-2v2H9v2h2v1.5L6 9v3.22L2 14v8h8v-3c0-1.1.9-2 2-2s2 .9 2 2v3h8v-8l-4-1.78zM12 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12.22V9l-5-2.5V5h2V3h-2V1h-2v2H9v2h2v1.5L6 9v3.22L2 14v8h8v-3c0-1.1.9-2 2-2s2 .9 2 2v3h8v-8l-4-1.78zM12 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
/* 崇拜時段深色卡：色帶轉淺、水印轉白色，照樣有層次 */
.bcard.is-worship-active::before{background:linear-gradient(90deg,#ffd54a,rgba(255,213,74,.3))}
.bcard.is-worship-active::after{background:#fff;opacity:.06}
@media (max-width:560px){.bcard::after{width:110px;height:110px;right:-14px;bottom:-16px}}
/* ===== 內頁內容卡裝飾（同主頁到訪教會地址卡一致）：頂部綠色色帶、淡綠漸層底、右下角淡淡教會水印 ===== */
body:not(.home) .page-main>section{
  position:relative;isolation:isolate;
  background:
    linear-gradient(90deg,var(--primary),#9fdcb6) top/100% 5px no-repeat,
    linear-gradient(160deg,#eaf7ef 0%,#fff 38%) ;
  border-color:#d3eadb;box-shadow:0 10px 26px rgba(27,169,78,.08)
}
body:not(.home) .page-main>section::after{
  content:"";position:absolute;right:14px;bottom:14px;width:130px;height:130px;z-index:-1;pointer-events:none;
  background:var(--primary);opacity:.05;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12.22V9l-5-2.5V5h2V3h-2V1h-2v2H9v2h2v1.5L6 9v3.22L2 14v8h8v-3c0-1.1.9-2 2-2s2 .9 2 2v3h8v-8l-4-1.78zM12 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 12.22V9l-5-2.5V5h2V3h-2V1h-2v2H9v2h2v1.5L6 9v3.22L2 14v8h8v-3c0-1.1.9-2 2-2s2 .9 2 2v3h8v-8l-4-1.78zM12 13.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E") center/contain no-repeat
}
@media (max-width:560px){body:not(.home) .page-main>section::after{width:90px;height:90px;right:10px;bottom:10px}}

/* ===== 藍色主題：崇拜聚會、團契小組、其他資訊各頁 =====
   頁面底色由淺綠漸變到淺藍；內容卡、標題、分頁掣同頁尾用藍色，唔再全部綠色。
   （崇拜卡同事奉人員表本身嘅周六藍／主日綠意思唔變） */
body.theme-blue{--tb:#1d6fd1;--tb-soft:#e3effb;--tb-line:#cfe0f1;
  background:linear-gradient(180deg,#eef8f2 0%,#eaf4fa 35%,#e4effb 100%) fixed}
body.theme-blue .page-main>section{
  background:linear-gradient(90deg,var(--tb),#9cc4f0) top/100% 5px no-repeat,linear-gradient(160deg,#e8f2fd 0%,#fff 38%);
  border-color:var(--tb-line);box-shadow:0 10px 26px rgba(29,111,209,.08)}
body.theme-blue .page-main>section::after{background:var(--tb)}
body.theme-blue .page-main>section>h2,
body.theme-blue .page-main>section>.roster-heading h2,
body.theme-blue .page-main>section h2:not(.bcard h2){color:var(--tb);border-bottom-color:var(--tb-line)}
body.theme-blue .page-hero + .page-main > .sub-nav a[aria-current="page"]{background:var(--tb)}
body.theme-blue .sub-nav-dd-toggle{color:var(--tb)}
body.theme-blue .sub-nav-dd-menu a:hover,body.theme-blue .sub-nav-dd-menu a[aria-current="page"]{background:var(--tb-soft);color:var(--tb)}
body.theme-blue footer.site-footer{background:#e3effb;border-top-color:var(--tb-line);color:#2b4058}
body.theme-blue .footer-col h3{color:#163e6b}
body.theme-blue .footer-col h3 svg,body.theme-blue .footer-contact .fc-icon{color:var(--tb)}
body.theme-blue .footer-col a{color:#2b4058}
body.theme-blue .footer-col a:hover{color:var(--tb)}
body.theme-blue .footer-logo-name{color:#163e6b}
body.theme-blue .footer-bottom{border-top-color:var(--tb-line)}
body.theme-blue .footer-social a{color:var(--tb)}
body.theme-blue .page-main>section h3[style*="var(--primary)"]{color:var(--tb)!important}
/* 內頁內容卡：電腦版最闊 1000px，置中 */
body:not(.home) .page-main>section{max-width:1000px;margin-left:auto;margin-right:auto}
body.theme-blue .footer-social :is(a,button){border-color:var(--tb-line)}
body.theme-blue .footer-social :is(a,button):hover{background:var(--tb-soft)}
body.theme-blue .footer-social svg{color:var(--tb)}
/* 頁尾頂部唔要分隔線（全站） */
footer.site-footer,body.theme-blue footer.site-footer{border-top:0}
/* 內頁底色同主頁一樣做漸變，最底同頁尾顏色一致，睇唔到分界：
   頁頂相片區係白色，所以由白色開始：綠色主題頁白 → 淺綠；藍色主題頁白 → 淺藍 */
body:not(.home){background:linear-gradient(180deg,#fff 0%,#fbfdfc 25%,#eff8f2 65%,#e6f4ea 100%)}
body.theme-blue{background:linear-gradient(180deg,#fff 0%,#fbfcfe 25%,#edf4fc 65%,#e3effb 100%)}
/* 頁尾透明，直接用返頁面漸變底色，同內容之間冇分界 */
body:not(.home) footer.site-footer{background:transparent}

/* ===== 同工及執事頁 ===== */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.st-card{background:#fff;border:1px solid #d3eadb;border-radius:14px;padding:1rem 1.1rem;box-shadow:0 6px 16px rgba(27,169,78,.06)}
.st-label{margin:0 0 .6rem;padding:0 0 .45rem;border-bottom:1px dashed #d3eadb;font-size:.85rem;font-weight:700;color:var(--primary);letter-spacing:.06em}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.st-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .45rem}
.st-name{font-weight:800;font-size:1.02rem;color:#15261c}
.st-role{font-size:.8rem;color:var(--muted,#5b6b62)}
.st-role:empty{display:none}
.st-role::before{content:"（"}.st-role::after{content:"）"}
.st-photo{margin:0 0 1.1rem}
.st-photo .gallery-trigger{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.st-photo img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 22px rgba(18,48,31,.12)}
.st-row{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;align-items:start;padding:.85rem 0;border-top:1px solid #e1ece5}
.st-row-label{margin:0;font-size:.88rem;font-weight:700;color:var(--primary);padding-top:.2rem}
.st-list-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.st-list-4 li{flex-direction:column;align-items:flex-start;gap:.05rem;background:#f6fbf8;border-radius:10px;padding:.55rem .7rem}
.st-list-4 .st-role::before,.st-list-4 .st-role::after{content:none}
@media (max-width:900px){
  .st-list-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .st-grid{grid-template-columns:1fr}
  .st-row{grid-template-columns:1fr;gap:.5rem}
}
/* 地點標籤前面嘅地點圖示 */
.info-item strong .info-pin{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.2em;color:var(--tb,var(--primary))}
.h2-sub{font-size:.72em;white-space:nowrap;font-weight:700}
/* 聯絡我們：地址（1、2 號）同前往方法，電腦左右兩欄，手機上下 */
.contact-where{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem;align-items:start;margin:0 0 1.25rem}
.contact-where .info-item{margin:0}
.contact-addr .visit-num{display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-right:.45em;vertical-align:.08em;border-radius:50%;background:var(--c);color:#fff;font-size:.8em;font-weight:800;line-height:1}
.contact-addr>div>strong{padding-left:1.52em}
@media (max-width:820px){.contact-where{grid-template-columns:1fr}}
/* 內頁標題：圖示同文字喺同一條中線（用 flex 置中，唔靠 vertical-align） */
.page-main section :is(h2,h3):has(>svg){display:flex;align-items:center;gap:.3em;flex-wrap:wrap}
.page-main section :is(h2,h3):has(>svg)>svg{margin:0!important;vertical-align:0!important;flex:none;position:static}
.page-main section :is(h2,h3)[style*="text-align:center"]:has(>svg){justify-content:center}
/* 崇拜卡堂名：改用無襯線粗體，確保明顯加粗 */
.bcard .bcard-what h4{font-family:'Noto Sans TC','Noto Sans SC',sans-serif;font-weight:900}
/* 聯絡我們地址：撳地址開 Google 地圖（1 藍、3 綠） */
.contact-addr .visit-addr-link{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(29,111,209,.45)}
.contact-addr .visit-addr-link::after{content:" ↗";color:#1d6fd1}
.contact-addr>div:nth-child(2) .visit-addr-link{text-decoration-color:rgba(27,169,78,.5)}
.contact-addr>div:nth-child(2) .visit-addr-link::after{color:#1BA94E}
.contact-addr .visit-addr-link:hover{color:#1d6fd1}
.contact-addr>div:nth-child(2) .visit-addr-link:hover{color:#1BA94E}
/* 手機：地址唔斷行，窄畫面自動縮細 */
.contact-addr{container-type:inline-size}
.contact-addr>div>strong{white-space:nowrap;font-size:min(1em,calc((100cqi - 1.6em) / 21))}
/* 藍色主題頁內容：淺綠底改淺藍（表頭、分隔線、天氣指引框、「及/或」膠囊等） */
body.theme-blue .page-main{--border:#cfe0f1}
body.theme-blue .page-main .times-table:not(.rota-table) th{background:#e3effb;color:#1d6fd1}
body.theme-blue #weather-arrangements .weather-panel{border-color:#cfe0f1;background:#fff}
@media(max-width:768px){body.theme-blue #weather-arrangements .weather-andor{background:#e8f1fb;color:#1d6fd1}}
body.theme-blue #weather-arrangements .weather-subtitle{border-top-color:#cfe0f1}
/* 前往方法：港鐵、巴士圖示；同左邊地址頂部對齊 */
.contact-transport .tr-ic{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.3em;color:#1d6fd1}
.contact-where .contact-transport>strong{margin-top:0}
.contact-where .contact-transport{padding-top:0}
@media (min-width:821px){.contact-where .contact-transport{margin-top:-1.45rem}}
.contact-transport br+.tr-ic{color:#1BA94E}

/* ===== 聯絡我們地圖：圖例、地點連動、分頁顏色 ===== */
.church-locations-map-note{padding:.6rem .75rem .55rem}
.map-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .5rem}
.map-legend-item{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem .28rem .3rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tab-accent) 45%,#fff);background:#fff;color:#243b2e;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.map-legend-item:hover{background:color-mix(in srgb,var(--tab-accent) 10%,#fff)}
.map-legend-item.is-active{background:var(--tab-accent);border-color:var(--tab-accent);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--tab-accent) 35%,transparent)}
.map-legend-num{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tab-accent);color:#fff;font-size:.7rem;font-weight:900;line-height:1}
.map-legend-item.is-active .map-legend-num{background:#fff;color:var(--tab-accent)}
.map-legend-hint{margin:.35rem 0 0;font-size:.74rem;color:var(--muted);text-align:center}
/* 地圖：揀中嘅地點放大，其他標記變淡 */
.church-locations-map .church-map-logo-marker-wrap{transition:opacity .3s ease}
.church-locations-map:has(.is-current-place) .church-map-logo-marker-wrap:not(.is-current-place){opacity:.5!important}
.church-locations-map .church-map-logo-marker-wrap.is-current-place{z-index:3}
.church-locations-map .church-map-logo-marker-wrap.is-current-place .church-map-logo-marker{transform:scale(1.15);transition:transform .3s ease}
/* 分頁：平時就用地點顏色做邊框；揀中實色底白字 */
.location-tabs .location-tab{border-color:color-mix(in srgb,var(--tab-accent) 45%,#fff)}
.location-tabs .location-tab.is-active{background:var(--tab-accent);border-color:var(--tab-accent);color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--tab-accent) 35%,transparent)}
.location-tabs .location-tab.is-active .location-tab-num{background:#fff;color:var(--tab-accent)}
/* 右邊資料卡頂部加地點顏色色帶，同分頁一對 */
.location-tab-panel{border-top:4px solid var(--card-accent)}
/* 手機（地圖同分頁上下排）：分頁就喺下面，唔使重複顯示圖例 */
@media (max-width:980px){.map-legend{display:none}.map-legend-hint{margin:0}}
body:not(.home) .page-main>section.no-mark::after{display:none}
/* 成人崇拜頁：外層內容卡改白色（頂部藍色色帶保留），入面崇拜卡設計不變，對比更柔和清楚 */
body[data-page="worship"] .page-main>section{
  background:linear-gradient(90deg,var(--tb),#9cc4f0) top/100% 5px no-repeat,#fff;
  box-shadow:0 8px 24px rgba(29,111,209,.06)}
/* 港鐵圖示用同 1 號圓點一樣嘅淺藍 */
.contact-transport .tr-ic{color:#4FA8EA}
.contact-transport br+.tr-ic{color:#1BA94E}
/* 有用連結：加入 Instagram，電腦一行顯示全部七格 */
@media (min-width:1000px){#links .links-3x2{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:.6rem!important}
  #links .links-3x2 a{padding:1rem .4rem!important}
  #links .links-3x2 a strong{font-size:.85rem!important;white-space:nowrap}}
/* 內頁頁頂：分類小標同大標題底線跟頁面主題色（綠頁綠、藍頁藍） */
.page-hero .page-hero-group{color:var(--primary)}
.page-hero h1::after{background:linear-gradient(90deg,var(--primary),rgba(27,169,78,0))}
body.theme-blue .page-hero .page-hero-group{color:#1d6fd1}
body.theme-blue .page-hero h1::after{background:linear-gradient(90deg,#1d6fd1,rgba(29,111,209,0))}
/* 有用連結卡：藍色主題頁用淺藍 */
body.theme-blue #links .links-3x2 a{background:#e8f1fb!important;color:#1d6fd1!important;border-color:#cfe0f1!important}
body.theme-blue #links .links-3x2 a:hover,body.theme-blue #links .links-3x2 a:focus-visible{background:#d9e8f9!important;color:#1d6fd1!important}
/* 藍色主題頁：返回頂部掣用藍色 */
body.theme-blue #backToTop{background:#1d6fd1}
body.theme-blue #backToTop::after{background:#163e6b}

/* ===== 淡紫主題：成人崇拜頁（同太湖閣聚會點一樣嘅紫色；崇拜卡周六藍／主日綠唔變） ===== */
body.theme-blue.theme-purple{--tb:#7b5bbd;--tb-soft:#efe9fa;--tb-line:#e0d6f3;
  background:linear-gradient(180deg,#fff 0%,#fcfbfe 25%,#f3eefb 65%,#ece5f8 100%)}
body.theme-purple .page-main{--border:#e0d6f3}
body[data-page="worship"].theme-purple .page-main>section{
  background:linear-gradient(90deg,#7b5bbd,#c3b1ea) top/100% 5px no-repeat,#fff;box-shadow:0 8px 24px rgba(123,91,189,.07)}
body.theme-purple .page-main .times-table:not(.rota-table) th{background:#efe9fa;color:#7b5bbd}
body.theme-purple .page-hero .page-hero-group{color:#7b5bbd}
body.theme-purple .page-hero h1::after{background:linear-gradient(90deg,#7b5bbd,rgba(123,91,189,0))}
body.theme-purple footer.site-footer{color:#3d2f5c}
body.theme-purple .footer-col h3,body.theme-purple .footer-logo-name{color:#4a3680}
body.theme-purple .footer-col a{color:#3d2f5c}
body.theme-purple #backToTop{background:#7b5bbd}
body.theme-purple #backToTop::after{background:#4a3680}
/* 淡紫主題：崇拜聚會其他頁嘅內容卡、表格等 */
body.theme-purple:not([data-page="worship"]) .page-main>section{
  background:linear-gradient(90deg,#7b5bbd,#c3b1ea) top/100% 5px no-repeat,linear-gradient(160deg,#f3eefb 0%,#fff 38%);
  border-color:#e0d6f3;box-shadow:0 10px 26px rgba(123,91,189,.08)}
body.theme-purple .page-main>section h3[style*="var(--primary)"]{color:#7b5bbd!important}
/* 頂部導覽「崇拜聚會」按鈕及下拉選單：所有頁面都用淡紫色 */
.top-nav .nav-group:has(a[href="worship.html"]).is-current > .nav-group-toggle{color:#7b5bbd}
.top-nav .nav-group:has(a[href="worship.html"]) > .nav-group-toggle:hover,.top-nav .nav-group:has(a[href="worship.html"]).is-open > .nav-group-toggle{background:#efe9fa;color:#7b5bbd}
.top-nav .nav-group:has(a[href="worship.html"]) .nav-group-menu{border-color:#e0d6f3}
.top-nav .nav-group:has(a[href="worship.html"]) .nav-group-menu a:hover,.top-nav .nav-group:has(a[href="worship.html"]) .nav-group-menu a[aria-current="page"]{background:#efe9fa;color:#7b5bbd}
@media (max-width:768px){.top-nav .nav-group:has(a[href="worship.html"]) .nav-group-menu{background:#f8f5fd}}
/* 淡紫主題：月曆切換掣及「返回首頁」 */
body.theme-purple .cal-modes{background:#efe9fa;border-color:#e0d6f3}
body.theme-purple .cal-mode{color:#7b5bbd}
body.theme-purple .cal-mode:hover{background:#e0d6f3}
body.theme-purple .cal-mode.is-active{background:#7b5bbd;color:#fff}
body.theme-purple .cal-mode:focus-visible{outline-color:#7b5bbd}
body.theme-purple .back-home-btn{border-color:#e0d6f3;color:#7b5bbd;box-shadow:0 10px 24px rgba(123,91,189,.12)}
body.theme-purple .back-home-btn:hover{background:#7b5bbd;color:#fff;box-shadow:0 16px 30px rgba(123,91,189,.28)}
/* 淡紫主題：滑鼠移上去嘅效果由綠改紫 */
body.theme-purple .sub-nav a:hover{border-color:#7b5bbd;color:#7b5bbd}
body.theme-purple .site-footer a:hover,body.theme-purple .page-hero .breadcrumb a:hover,body.theme-purple .info-item a:hover{color:#7b5bbd}
body.theme-purple .cal-day-btn:hover{background:#efe9fa}
body.theme-purple #rosterModal .modal-bar button:hover,body.theme-purple #closeQr:hover{background:#e0d6f3!important}
/* 淡紫主題：現時頁嘅子選單掣，滑鼠移上去保持白字 */
body.theme-purple .sub-nav a[aria-current="page"]:hover{color:#fff;border-color:#7b5bbd}
/* 淡紫主題：內文連結（按此、最新消息、程序表）同事奉人員表嘅掣 */
body.theme-purple .page-main a[style*="var(--primary)"]{color:#7b5bbd!important}
body.theme-purple .roster-expand-btn,body.theme-purple .roster-source-btn{background:#7b5bbd;border-color:#7b5bbd;color:#fff}
body.theme-purple .roster-expand-btn:hover,body.theme-purple .roster-source-btn:hover{background:#654aa0;border-color:#654aa0;color:#fff}

/* 頂部導覽「團契小組」「其他資訊」按鈕及下拉選單：所有頁面都用淡藍色 */
.top-nav .nav-group:has(a[href="fellowship.html"]).is-current > .nav-group-toggle,.top-nav .nav-group:has(a[href="notices.html"]).is-current > .nav-group-toggle{color:#1d6fd1}
.top-nav .nav-group:has(a[href="fellowship.html"]) > .nav-group-toggle:hover,.top-nav .nav-group:has(a[href="notices.html"]) > .nav-group-toggle:hover,.top-nav .nav-group:has(a[href="fellowship.html"]).is-open > .nav-group-toggle,.top-nav .nav-group:has(a[href="notices.html"]).is-open > .nav-group-toggle{background:#e3effb;color:#1d6fd1}
.top-nav .nav-group:has(a[href="fellowship.html"]) .nav-group-menu,.top-nav .nav-group:has(a[href="notices.html"]) .nav-group-menu{border-color:#cfe0f1}
.top-nav .nav-group:has(a[href="fellowship.html"]) .nav-group-menu a:hover,.top-nav .nav-group:has(a[href="notices.html"]) .nav-group-menu a:hover,.top-nav .nav-group:has(a[href="fellowship.html"]) .nav-group-menu a[aria-current="page"],.top-nav .nav-group:has(a[href="notices.html"]) .nav-group-menu a[aria-current="page"]{background:#e3effb;color:#1d6fd1}
@media (max-width:768px){.top-nav .nav-group:has(a[href="fellowship.html"]) .nav-group-menu,.top-nav .nav-group:has(a[href="notices.html"]) .nav-group-menu{background:#f4f8fe}}
/* 淡藍主題頁：滑鼠移上去嘅效果由綠改藍 */
body.theme-blue:not(.theme-purple) .sub-nav a:hover{border-color:#1d6fd1;color:#1d6fd1}
body.theme-blue:not(.theme-purple) .sub-nav a[aria-current="page"]:hover{color:#fff}
body.theme-blue:not(.theme-purple) .site-footer a:hover,body.theme-blue:not(.theme-purple) .page-hero .breadcrumb a:hover,body.theme-blue:not(.theme-purple) .info-item a:hover{color:#1d6fd1}
body.theme-blue:not(.theme-purple) .back-home-btn{border-color:#cfe0f1;color:#1d6fd1;box-shadow:0 10px 24px rgba(29,111,209,.12)}
body.theme-blue:not(.theme-purple) .back-home-btn:hover{background:#1d6fd1;color:#fff;box-shadow:0 16px 30px rgba(29,111,209,.28)}
body.theme-blue:not(.theme-purple) #closeQr:hover{background:#cfe0f1!important}
/* 手機選單：分組內嘅分隔線跟返組別顏色 */
@media (max-width:768px){
  .top-nav .nav-group:has(a[href="fellowship.html"]) .nav-group-menu a,.top-nav .nav-group:has(a[href="notices.html"]) .nav-group-menu a{border-color:#cfe0f1}
  .top-nav .nav-group:has(a[href="worship.html"]) .nav-group-menu a{border-color:#e0d6f3}
}
/* 手機選單掣（三條線）用黑色 */
.hamburger span{background:#1a1a1a}
/* 手機選單：最底嘅 YouTube、Facebook 圖示（電腦版唔顯示） */
.top-nav .nav-links .nav-social-item{display:none}
@media (max-width:768px){
  .top-nav .nav-links .nav-social-item{display:flex;gap:.9rem;padding:1rem 1.1rem}
  .top-nav .nav-links .nav-social-item a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:50%}
  .top-nav .nav-links .nav-social-item svg{width:24px;height:24px}
  .top-nav .nav-links .nav-social-yt{background:#fdecec;color:#e5484d}
  .top-nav .nav-links .nav-social-fb{background:#e7f0fd;color:#1877f2}
  .top-nav .nav-links .nav-social-yt:hover{background:#fbd9da;color:#e5484d}
  .top-nav .nav-links .nav-social-fb:hover{background:#d6e6fc;color:#1877f2}
}
@media (max-width:768px){
  .top-nav .nav-links .nav-social-qr{background:#e8f7ee;color:#1a1a1a}
  .top-nav .nav-links .nav-social-qr:hover{background:#d4efdd;color:#1a1a1a}
}
/* 換頁時導覽列完全唔郁：手機打開咗嘅選單抽出嚟獨立淡出，導覽列唔再跟住縮放或閃 */
@media (max-width:768px){.top-nav .nav-links{view-transition-name:nav-drawer}}
::view-transition-group(site-nav),::view-transition-new(site-nav){animation:none}
::view-transition-old(site-nav){display:none}
::view-transition-group(nav-drawer){animation:none}
::view-transition-old(nav-drawer){animation:vt-drawer-out .22s ease both}
::view-transition-new(nav-drawer){display:none}
@keyframes vt-drawer-out{to{opacity:0}}
/* 導覽列每組用返自己嘅顏色，唔跟身處頁面嘅主題：認識我們、部門事工、活動推介＝綠 */
.top-nav .nav-group.is-open > .nav-group-toggle{background:#e8f7ee;color:#1BA94E}
/* 導覽列「播道會太古城堂」用黑色 */
.top-nav .nav-logo{color:#111}
/* 崇拜卡講道訊息：三行排列，講題同講員放大 */
.bcard-what.has-sermon>.bcard-sermon{justify-content:center;gap:.2rem}
.bcard-sermon .bcard-sermon-title{font-size:1.35rem;margin:0 0 .15rem!important;line-height:1.3}
.bcard-sermon .bcard-sermon-speaker{font-size:1.08rem;font-weight:800}
.bcard-sermon .bcard-sermon-line:not(.bcard-sermon-speaker){font-size:.95rem;font-weight:600;color:var(--muted,#5b6b62)}
@media (max-width:560px){
  .bcard-sermon .bcard-sermon-title{font-size:1.1rem}
  .bcard-sermon .bcard-sermon-speaker{font-size:.9rem}
  .bcard-sermon .bcard-sermon-line:not(.bcard-sermon-speaker){font-size:.8rem}
  .bcard-sermon .bcard-sermon-line .lab{display:inline}
}
/* 導覽下拉選單同分頁掣：每項前面加圖示 */
.nav-ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em;margin-right:.45em}
.top-nav .nav-group-menu a{display:flex;align-items:center}
.top-nav .nav-links .nav-group-menu a svg.nav-ico{display:inline-block;width:1.1em!important;height:1.1em!important;flex:0 0 1.1em;margin-right:.5rem!important}
.sub-nav a{display:inline-flex;align-items:center}
.sub-nav a .nav-ico{margin-right:.35em}
.sub-nav-dd-toggle .nav-ico{display:none}
.sub-nav-dd-menu a{display:flex;align-items:center}
/* 惡劣天氣指引：三個細圖示一組 */
.nav-ico-multi{display:inline-flex;align-items:center;gap:1px;width:auto!important;height:auto;margin-right:.45em}
.nav-ico-multi svg{width:.95em!important;height:.95em!important;flex:none;margin:0!important;display:block}
.sub-nav a .nav-ico-multi{margin-right:.35em}
.nav-ico-slash{font-size:.8em;opacity:.6;margin:0 1px;line-height:1}