/* default 主題的「自家樣式」。
   版面、字體、RWD 一律交給 legacy-site.css（原站兩支 CSS 原樣合併），這裡只補
   原站沒有、屬於新後台自己的元件：預覽列、表單結果訊息、CMS 區塊（文章列表／圖說／
   一般文字圖片按鈕區塊）。
   規則：不得出現 body/html/img/a/p/h1-h3 等裸元素選擇器，避免覆蓋原站樣式而讓版面走樣。 */

/* 後台預覽列 */
/* 預覽條：搬來的原站版型 body 只有側欄那一欄的寬度（實測 319px），
   當成一般子元素放進去會被擠成直立一條字（2026-09-18 breast-b 後台預覽）。
   改成固定在視窗頂端，脫離原站的版面流；訪客看不到這個元素，前台輸出不受影響。 */
.preview-bar { background: #e0f5f5; color: #097d7e; text-align: center; padding: 6px; font-size: 13px; position: fixed; top: 0; left: 0; right: 0; width: auto; z-index: 99999; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.preview-bar a { text-decoration: underline; }

/* 表單送出結果 */
.form-result { padding: 11px 16px; margin: 0 auto 18px; max-width: 600px; border-radius: 2px; text-align: center; }
.form-result.ok { background: #e0f5f5; color: #097d7e; }
.form-result.err { background: #fbe9e7; color: #c62828; }
/* 送出後短暫強調（theme.js 加上 .form-result-flash 約 2.6 秒），讓提示更醒目 */
.form-result { transition: box-shadow .3s ease, transform .3s ease; }
.form-result-flash { box-shadow: 0 0 0 3px rgba(9,125,126,.35); transform: scale(1.02); }
.form-result.err.form-result-flash { box-shadow: 0 0 0 3px rgba(198,40,40,.35); }

/* 文章列表（post_list 區塊與 /blog 列表） */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-top: 24px; }
.post-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.post-card h2 { font-size: 20px; margin: 12px 0 4px; }
.post-card .post-date { font-size: 13px; color: #999; letter-spacing: 0.05em; margin: 0 0 8px; }
.pager { margin-top: 30px; display: flex; gap: 8px; }
.pager a, .pager .cur { padding: 7px 13px; color: #333; border: 1px solid rgba(0, 0, 0, .12); }
.pager .cur { background: #0cacae; color: #fff; border-color: #0cacae; }

/* 搬遷內容用的圖說（原站圖片下方說明文字） */
.img-caption { font-size: 13px; color: #888; text-align: center; margin-top: 8px; line-height: 1.6; }

/* CMS 原生區塊（後台新增的內容用，搬遷頁面用不到） */
.block { padding: 30px 0; }
.block .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.block-hero { background-size: cover; background-position: center; background-color: #f2f6f6; position: relative; }
.block-hero.has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
.hero-inner { position: relative; z-index: 1; padding: 90px 40px; text-align: center; color: #fff; }
.hero-inner h1 { font-size: 46px; font-weight: 300; letter-spacing: 0.05em; color: #fff; margin: 0 0 14px; }
.hero-sub { font-size: 19px; margin: 0 0 26px; }
.gallery-grid, .columns-grid { display: grid; gap: 18px; }
.gallery-grid img { width: 100%; object-fit: cover; }
.columns-grid .col { min-width: 0; }
.block-image img { margin: 0 auto; }
.block-button .wrap { text-align: center; }
.btn { display: inline-block; padding: 12px 28px; background: #0cacae; color: #fff; border-radius: 2px; letter-spacing: 0.05em; }
.btn:hover { background: #097d7e; }
.site-form { max-width: 560px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 5px; font-size: 14px; }
.form-field input, .form-field textarea { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 2px; font-size: 15px; font-family: inherit; }
.form-field textarea { min-height: 120px; }

/* spacer／counter／faq 區塊（2026-08-20 新增） */
.block-spacer { padding: 0; display: flex; align-items: center; }
.block-spacer .spacer-line { width: 100%; height: 1px; background: currentColor; opacity: .15; }
.counter-grid { display: grid; gap: 24px; text-align: center; }
.counter-number { font-size: 36px; font-weight: 600; color: #0cacae; line-height: 1.1; }
.counter-label { font-size: 14px; color: #767676; margin-top: 6px; }
.block-faq .faq-item { border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 16px 0; }
.block-faq .faq-item summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; }
.block-faq .faq-item summary::-webkit-details-marker { display: none; }
.block-faq .faq-item summary::after { content: '+'; float: right; font-weight: 400; color: #0cacae; }
.block-faq .faq-item[open] summary::after { content: '−'; }
.block-faq .faq-answer { margin-top: 12px; color: #555; line-height: 1.7; }

/* map／social／file 區塊（2026-08-20 新增） */
.block-map iframe { display: block; }
.block-social-icons { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.block-social-icons a { display: inline-flex; align-items: center; gap: 10px; color: #26303b; text-decoration: none; }
.block-social-icons .social-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: #0cacae; color: #fff;
    transition: transform .15s, box-shadow .15s;
}
.block-social-icons a:hover .social-badge { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.block-social-icons .social-label { font-size: 14px; font-weight: 600; }
.block-file .wrap { text-align: center; }
.file-download { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: #f2f6f6; color: #097d7e; border-radius: 2px; font-weight: 600; }
.file-download:hover { background: #e0f5f5; }

@media screen and (max-width: 767px) {
    .block .wrap { padding: 0 20px; }
    .gallery-grid, .columns-grid { grid-template-columns: 1fr !important; }
    .hero-inner h1 { font-size: 32px; }
    .counter-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 側欄改用 sticky（≥1025px 桌面側欄版型）。
   原站是 position:absolute 隨頁面捲走、或 theme.js 在「選單塞得進視窗」時加 .stuck
   變 position:fixed 鎖死視窗高 —— 後者在子選單展開、選單變長時，下面的項目看不到也捲不到。
   改成 sticky：側欄與主內容並排（body flex），捲動時黏在頂端，選單超過視窗高時
   側欄自身可捲動（overflow-y:auto）看到全部。只在桌面生效，≤1024px 的漢堡版型不動。
   注意：原站 的 html,body{height:100%} 會把 body 鎖成視窗高，使 sticky 沒有作用空間，
   故此處放開成 height:auto。 */
@media screen and (min-width: 1025px) {
    html, body.nav-position-sidebar { height: auto; min-height: 100%; }
    body.nav-position-sidebar { display: flex; align-items: flex-start; }
    body.nav-position-sidebar > .header {
        position: sticky; top: 0;
        flex: 0 0 260px; width: 260px;
        max-height: 100vh; min-height: 0;
        overflow-y: auto; overflow-x: hidden;
        scrollbar-width: none;   /* 隱藏側欄自身捲軸（原站沒有；仍可捲動） */
    }
    body.nav-position-sidebar > .header::-webkit-scrollbar { display: none; }
    /* 原站 .wrapper 有 padding-left:260px（配合它 absolute/fixed 的側欄＝不佔版面）。
       flex 版型下側欄「會」佔 260px，這個補償必須歸零，否則內容被推到 520px（雙重位移）。 */
    body.nav-position-sidebar > .wrapper { flex: 1 1 auto; min-width: 0; padding-left: 0; }
}