/* =============================================================================
   site-chrome.css — 全站共用頁首／桌機選單／手機選單／紅金頁尾（W1；D17／D35）
   - 來源：首頁 V10 已核定外觀（owner 2026-10-15；home-preview.css → static/css/pages/index.css P2-1 小節），
     逐字搬出提升為全站共用；只含 chrome（header／nav／overlay／footer／skip link／TOP 協調），
     不含 Hero、首頁各區塊與小幫手（那些留在 pages/index.css，只有首頁載入）。
   - 載入順序（base.html）：style.css → theme.css → components.css → layout-chrome.css → 本檔 → 頁面 CSS。
     本檔在 layout-chrome.css 之後＝重現首頁原本「index.css 後載入」的層疊（同權重後者勝）。
   - DOM：templates/_site_header.html、_site_mobile_nav.html、_site_footer.html（data-site-chrome 標記）。
   - 色值走 theme.css 色票（C1 色彩棘輪）；px 字級換 rem（A++ 放得大）；觸控目標 ≥44px。
   ============================================================================= */

/* — 頁首／桌機選單／手機選單（原 index.css「V10 首頁 chrome（P2-1）」；D17 起全站同一外觀） — */
/* — V10 首頁 chrome（P2-1）：home-preview.css L19／L21／L48／L4 紅色標記／L172／L174 — */
/* L19：拿掉 layout-chrome.css 給 header 的金線與陰影，導覽卡浮在頁面上（首頁浮在 hero 上；D17 起全站同此外觀）。
   導覽卡本身（L20 玻璃底／金框／陰影）＝style.css「Visual refinement layer」逐字同值且帶 !important，
   不重寫；寬高／圓角同 style.css .main-nav。 */
.main-header {
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* L21／L48：只在 ≥1024（全站漢堡斷點，H12）；V10 的 760 導覽斷點不移植。 */
@media (min-width: 1024px) {
    .nav-links-desktop {
        gap: 28px;
        padding: 10px 0 14px;
    }
    .nav-links-desktop li a {
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: .08em;
    }
}
/* L4（H12）：aria-current 全站輸出；紅色目前頁標記原只在首頁，D17 起全站一致（查目前頁標示）。 */
.nav-links-desktop [aria-current="page"] {
    color: var(--c-831a10);
}
/* P2-5：.nav-links-desktop 有 overflow-x:auto 安全閥（style.css）→ 往外畫的焦點框被裁（首項左緣、末項右緣不見）。
   改畫在連結框內（V10 金色；2px 內縮，3px 會貼到字）；D17 起全站。 */
.main-header .nav-links-desktop a:focus-visible {
    outline: 2px solid var(--gold-rich);
    outline-offset: -2px;
}
/* L172／L174：原版手機選單關閉鈕觸控 ≥44px；選單開著時 TOP 不浮在選單上。 */
.mobile-nav-overlay .overlay-close-btn {
    min-width: 44px;
    min-height: 44px;
}
/* W1 真瀏覽器實測（Chrome 390 鍵盤）：style.css 的 visibility 隨 0.4s 過場，開啟當下抽屜仍是 hidden →
   main.js 下一影格把焦點移進抽屜失敗（焦點留在漢堡鈕、Tab 走回背景頁）。開啟態 visibility 立即生效（0s），
   滑入仍是原 transform 過場；關閉時套回 style.css 基底的 visibility 0.4s（滑出動畫照樣可見）。 */
.mobile-nav-overlay.is-visible {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
}
/* P2-5：權重須高過 style.css 的 html.js .back-to-top-btn.is-visible（0,3,1）才會生效（原 menu-open 那條 0,2,1
   一直被蓋掉，手機選單只是靠 z 9999 遮住 TOP）→ 補 html …is-visible（0,3,2）。小幫手問答那條只在首頁 index.css。 */
body.menu-open .back-to-top-btn,
html body.menu-open .back-to-top-btn.is-visible {
    visibility: hidden;
    pointer-events: none;
}

/* — 頁尾的 V10 共用基礎（原 index.css :where(.temple-index, .home-footer) 的頁尾那一半） — */
:where(.home-footer) :is(button, input) { font: inherit; }
:where(.home-footer) :is(button, a) { -webkit-tap-highlight-color: transparent; }
:where(.home-footer) button { cursor: pointer; }
:where(.home-footer) button:disabled { cursor: default; opacity: .4; }
:where(.home-footer) [hidden] { display: none !important; }

/* — skip link 與 chrome 元素焦點框（原 index.css P2-2／P2-5 D2；D17 起全站有「跳至主要內容」） — */
.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 3000;
    background: var(--c-fffaf0);
    padding: 12px;
    color: var(--ink);              /* P2-5 D2：V10 a{color:inherit}＝墨色，不是 UA 藍 */
}
.skip-link:focus { top: 10px; }
/* P2-5 D2：skip link／logo／漢堡鈕／TOP 在 .temple-index 外，吃不到上方共用焦點框 → 補同一組 V10 值（皆不在 overflow 容器內）。
   手機選單（深木紋底）內的連結維持瀏覽器預設框：金色 --gold-rich 在深木紋上對比不足。 */
.skip-link:focus-visible,
.nav-logo:focus-visible,
.nav-toggle:focus-visible,
.back-to-top-btn:focus-visible {
    outline: 3px solid var(--gold-rich);
    outline-offset: 4px;
}

/* — 紅金頁尾（原 index.css「V10 首頁頁尾（P2-1）」；D17 起全站共用） — */
/* — V10 首頁頁尾（P2-1，區塊最後）：home-preview.css L8（margin-top）＋L80-L130 —
   DOM＝templates/_site_footer.html（原 _home_footer.html）。色值換 theme.css 首頁 V10 色票；px 字級換 rem。
   V10 的 color !important（L90 LINE、L96 社群、L104 連結）改以 .home-footer 前綴的高權重選擇器
   達成——P2-5 實測若仍被全域連結色蓋掉才恢復 !important。 */
.main-footer.home-footer {
    margin-top: 0;
    background: linear-gradient(115deg, var(--c-481b18), var(--c-351714));
    color: var(--c-f4e7cf);
    border-top: 2px solid var(--c-b99451);
    padding: 48px 0 26px;
    position: relative;
}
.home-footer-inner {
    width: min(1160px, calc(100% - 80px));
    margin: 0 auto;
}
.home-footer-main {
    display: grid;
    /* W1：V10 原為兩欄（聯絡｜社群，gap 80px）；加入「網站導覽」欄 → 三欄、欄距收為 56px */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
    padding-bottom: 34px;
}
.home-footer-brand {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}
.home-footer-brand h3 {
    color: var(--c-edcf89);
    font-size: 1.85rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .09em;
    margin: 0;
}
.home-footer-emblem {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex: none;
    opacity: .95;
}
.home-footer-details {
    margin: 0 0 22px;
    display: grid;
    gap: 10px;
    font-size: .9375rem;
    line-height: 1.8;
}
.home-footer-details > div {
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr);
    gap: 12px;
}
.home-footer-details dt {
    color: var(--c-cbb48c);
    font-size: .8125rem;
    line-height: 2.1;
    letter-spacing: .06em;
}
.home-footer-details dd {
    margin: 0;
    color: var(--c-f4e7cf);
}
/* L89-L90（Ruling H4）：金色 LINE 藥丸＝綠金規則第一個明文例外，只在首頁頁尾。仍是 _line_btn 元件，
   以高權重蓋 components.css .btn-line 的綠底／:hover／:focus-visible／:active（全站 .btn-line 不動）。 */
.home-footer .btn-line.home-footer-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--c-c39a55);
    border-radius: var(--radius-999);
    background: var(--c-f2d895);
    color: var(--c-54271b);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}
/* 觸控裝置點擊後 :hover 會殘留，而 .btn-line:hover 不在 hover media 內——先在外層蓋回金底，
   滑鼠裝置的亮金 hover 另在下方 hover media（L107）。 */
.home-footer .btn-line.home-footer-line:hover,
.home-footer .btn-line.home-footer-line:focus-visible {
    background: var(--c-f2d895);
    color: var(--c-54271b);
    transform: none;
}
.home-footer .btn-line.home-footer-line .btn-line__icon {
    width: 21px;
    height: 21px;
    fill: currentColor;
    flex: none;
}
.home-footer-community {
    padding: 14px 0 0;   /* W1：三欄後右側不再留 52px（五個社群鈕才放得進一列） */
}
.home-footer-community h4 {
    margin: 0 0 20px;
    color: var(--c-edcf89);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .14em;
}
.home-footer-social {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.home-footer .home-footer-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 55px;
    min-height: 70px;
    color: var(--c-f4e7cf);
    text-decoration: none;
    font-size: .75rem;
    line-height: 1.5;
    transition: color .16s ease, transform .16s ease;
}
.home-footer-social-link img {
    display: block;
    width: auto;
    height: 28px;
    max-width: 32px;
    object-fit: contain;
    margin: 0;
}
.home-footer-utilities {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--c-c8a66445);
    padding: 22px 60px 0 0;
}
.home-footer-type {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-cbb48c);
}
.home-footer-type .font-scale-label {
    font-size: .8125rem;
    margin-right: 8px;
}
.home-footer-type .font-scale-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 5px 8px;
    border: 1px solid var(--c-b8935366);
    border-radius: var(--radius-8);
    background: transparent;
    color: var(--c-f4e7cf);
    font: inherit;
    font-size: .875rem;
    line-height: 1;
    transition: background-color .16s ease, transform .16s ease;
}
.home-footer-type .font-scale-btn[aria-pressed="true"] {
    background: var(--c-f2d895);
    color: var(--c-54271b);
    border-color: var(--c-f2d895);
}
.home-footer-links {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.home-footer .home-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-f4e7cf);
    font-size: .875rem;
    text-decoration: none;
    text-underline-offset: 5px;
}
.home-footer-credit {
    margin: 20px 0 0;
    font-size: .75rem;
    color: var(--c-cbb48c);
    line-height: 1.7;
}
.home-footer a:focus-visible,
.home-footer button:focus-visible {
    outline: 3px solid var(--c-f2d895);
    outline-offset: 5px;
}
.home-footer .btn-line.home-footer-line:active,
.home-footer-social-link:active,
.home-footer-type .font-scale-btn:active {
    transform: scale(.97);
}
@media (hover: hover) and (pointer: fine) {
    .home-footer .btn-line.home-footer-line:hover { background: var(--c-ffe8af); }
    .home-footer-social-link:hover { transform: translateY(-2px); }
    .home-footer .home-footer-links a:hover { text-decoration: underline; }
    .home-footer-type .font-scale-btn:hover { border-color: var(--c-f2d895); }
}
@media (max-width: 1000px) {
    .home-footer-main { column-gap: 40px; row-gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .home-footer-community { grid-column: 1 / -1; }
    .home-footer-brand { gap: 12px; }
    .home-footer-brand h3 { font-size: 1.55rem; }
    .home-footer-emblem { width: 48px; height: 48px; }
    .home-footer-social { gap: 12px; }
}
@media (max-width: 760px) {
    .main-footer.home-footer { padding: 32px 0 94px; }   /* 最後一行不被 TOP／小幫手蓋住（必留） */
    .home-footer-inner { width: calc(100% - 48px); }
    .home-footer-main { grid-template-columns: 1fr; row-gap: 30px; padding-bottom: 26px; }
    .home-footer-brand { justify-content: space-between; gap: 10px; margin-bottom: 18px; }
    .home-footer-brand h3 { font-size: 1.5rem; letter-spacing: .04em; }
    .home-footer-emblem { width: 48px; height: 48px; }
    .home-footer-details { font-size: .875rem; gap: 12px; margin-bottom: 20px; }
    .home-footer-details > div { grid-template-columns: 4.8em minmax(0, 1fr); gap: 8px; }
    .home-footer-details dt { font-size: .75rem; }
    .home-footer-community { padding: 0; }
    .home-footer-community h4 { font-size: .9375rem; margin-bottom: 18px; }
    .home-footer-social { justify-content: space-between; gap: 8px; }
    .home-footer .home-footer-social-link { min-width: 0; gap: 8px; font-size: .6875rem; min-height: 62px; }
    .home-footer-social-link img { height: 25px; max-width: 29px; }
    .home-footer-utilities { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 0 0; }
    .home-footer-type .font-scale-label { flex: 1; margin-right: 6px; }
    .home-footer-links { gap: 24px; justify-content: flex-start; }
    .home-footer .home-footer-links a { font-size: .8125rem; }
    .home-footer-credit { font-size: .6875rem; margin-top: 14px; max-width: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-footer a,
    .home-footer button {
        transition: none !important;
        transform: none !important;
    }
}

/* — 網站導覽（W1 D17 新增；ENTRYPOINT-REGISTER §1）：公告／行事曆／常見問題／關於／交通／委員護持／回饋等次級入口（線上求籤 2026-10-21 退役）。
   與「官方社群」同一組標題字級與 V10 色票；連結觸控 44px 高；目前頁（aria-current）加底線。 — */
.home-footer-sitemap {
    padding-top: 14px;
}
.home-footer-sitemap h4 {
    margin: 0 0 12px;
    color: var(--c-edcf89);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .14em;
}
.home-footer-sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: 28px;
}
.home-footer .home-footer-sitemap a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-f4e7cf);
    font-size: .9375rem;
    letter-spacing: .04em;
    text-decoration: none;
    text-underline-offset: 5px;
}
.home-footer .home-footer-sitemap a[aria-current="page"],
.home-footer .home-footer-links a[aria-current="page"] {
    color: var(--c-f2d895);
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .home-footer .home-footer-sitemap a:hover { text-decoration: underline; }
}
@media (max-width: 760px) {
    .home-footer-sitemap { padding-top: 0; }
    .home-footer-sitemap h4 { font-size: .9375rem; }
    .home-footer-sitemap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .home-footer .home-footer-sitemap a { font-size: .875rem; }
}

/* 手機選單（深木紋底）的目前頁：金字已是 !important（layout-chrome.css），以底線標示，不改顏色 */
.overlay-nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

/* — 頁尾 × cookie 同意橫幅（原 index.css；頁尾規則隨頁尾搬來。--home-cookie-banner-h 由首頁 index.js 量測寫入，
   其他頁沒有量測時用 96px 保底） — */
/* 浮動元素協調（實作包 §4「TOP／浮動角色」、補充規格 §3.7；工程補，真瀏覽器 390 實測）：cookie 同意橫幅開著時，
   TOP（style.css 上移到 bottom 170px）與小幫手（首頁 index.css H6 段上移到 bottom 220px、圖高約 76px）會停在頁尾右下的
   字級 A／A+／A++ 上，橫幅不關就一直按不到。橫幅期間首頁頁尾底部留白高過小幫手頂緣（220＋76＋14）：捲到底時
   頁尾按鈕都在浮動元素之上；橫幅關閉（body 類由 main.js 卸下）即回到 94px。≥768 TOP／小幫手不落在頁尾內容上（實測）。 */
@media (max-width: 767px) {
    body.cookie-banner-open .main-footer.home-footer { padding-bottom: calc(310px + env(safe-area-inset-bottom, 0px)); }
}
/* 審查 2：≥768 橫幅（實測 1440 約 78px、768 約 85px，A++ 會換行變高）蓋住頁尾版權列與字級鈕 →
   橫幅期間底部留白＝橫幅實際高度（index.js 以 ResizeObserver 寫入 --home-cookie-banner-h；無 JS 時橫幅本來就不出現，
   96px 只是保底）＋24px；下限 170px＝橫幅期間上移的 TOP（style.css bottom 110px＋高 48px）頂緣＋12px——
   768／1024 實測只加橫幅高時 TOP 改壓在「委員護持 ↗」與版權列上。 */
@media (min-width: 768px) {
    body.cookie-banner-open .main-footer.home-footer { padding-bottom: max(calc(var(--home-cookie-banner-h, 96px) + 24px), 170px); }
}