/*
 * 前端共用小工具樣式（全主題共用，對應 cms-widgets.js）：
 *   1) 返回置頂鈕 .cms-backtop（三種樣式：circle／square／minimal，左右可選）
 *   2) 單篇文章分享列 .cms-share（品牌色圓鈕＋複製連結）
 *   3) 複製成功提示 .cms-toast
 * 顏色吃站台主色 var(--accent)，沒設就用中性深藍當保底，跟各主題調性都不打架。
 * 只用一般 CSS（無巢狀、無自訂屬性以外的新語法），配合舊瀏覽器相容方針。
 */

/* ---------- 返回置頂鈕 ---------- */
.cms-backtop {
    position: fixed;
    z-index: 940;                       /* 低於社群懸浮球(社群球通常更高)，高於一般內容 */
    bottom: 22px;
    right: 22px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: var(--accent, #04194B);
    -webkit-appearance: none;
    appearance: none;
    /* 進場：預設隱藏，捲動超過門檻才由 JS 加 .is-on 顯示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s, box-shadow .2s ease, background-color .2s ease;
    box-shadow: 0 6px 18px rgba(4, 25, 75, .22);
    /* 行動裝置底部安全區（瀏海機底列） */
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
.cms-backtop.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cms-backtop:hover {
    box-shadow: 0 10px 24px rgba(4, 25, 75, .30);
    transform: translateY(-2px);
}
.cms-backtop:active { transform: translateY(0); }
.cms-backtop:focus-visible {
    outline: 3px solid rgba(4, 25, 75, .35);
    outline-offset: 2px;
}
.cms-backtop svg { width: 22px; height: 22px; display: block; pointer-events: none; }

/* 位置：靠左 */
.cms-backtop.cms-backtop--left { right: auto; left: 22px; }

/* 若同頁有社群懸浮球（右下角），把置頂鈕往上疊一層，避免互相蓋住 */
.cms-backtop.cms-backtop--stacked { bottom: 84px; }

/* 樣式：方形（圓角方塊） */
.cms-backtop--square { border-radius: 14px; }
/* 樣式：圓形（預設） */
.cms-backtop--circle { border-radius: 50%; }
/* 樣式：簡約（淺底描邊、不搶眼；文字/箭頭用主色） */
.cms-backtop--minimal {
    border-radius: 50%;
    color: var(--accent, #04194B);
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    border: 1px solid rgba(4, 25, 75, .14);
}
.cms-backtop--minimal:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

@media (max-width: 600px) {
    .cms-backtop { width: 44px; height: 44px; bottom: 16px; right: 16px; }
    .cms-backtop.cms-backtop--left { left: 16px; }
    .cms-backtop.cms-backtop--stacked { bottom: 72px; }
    .cms-backtop svg { width: 20px; height: 20px; }
}

/* ---------- 文章分享列 ---------- */
.cms-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 6px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(127, 127, 127, .18);
}
.cms-share__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--theme-ink, #3a4048);
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cms-share__label svg { width: 15px; height: 15px; opacity: .7; }
.cms-share__list { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-share__btn {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    background: #6b7280;                 /* 各平台由 modifier 蓋掉 */
    -webkit-appearance: none;
    appearance: none;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.cms-share__btn:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, .18); filter: saturate(1.08); }
.cms-share__btn:active { transform: translateY(0); }
.cms-share__btn:focus-visible { outline: 3px solid rgba(0, 0, 0, .25); outline-offset: 2px; }
.cms-share__btn svg { width: 16px; height: 16px; display: block; pointer-events: none; }

.cms-share__btn--facebook { background: #1877F2; }
.cms-share__btn--line     { background: #06C755; }
.cms-share__btn--x        { background: #000; }
.cms-share__btn--copy     { background: var(--accent, #04194B); }

/* 複製鈕的「已複製」小勾在按鈕上覆蓋淡入 */
.cms-share__btn--copy .cms-share__done {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.cms-share__btn--copy.is-done .cms-share__done { opacity: 1; transform: scale(1); }
.cms-share__btn--copy.is-done .cms-share__icon { opacity: 0; }

@media (max-width: 600px) {
    /* 手機的觸控目標至少 44px（Apple HIG 44pt／Material 48dp／WCAG 2.5.8 AA 24px）。
       原本 34px 低於下限，手指容易按錯隔壁那顆（2026-09-22 體檢找到）。 */
    .cms-share { gap: 10px; margin-top: 22px; }
    .cms-share__btn { width: 44px; height: 44px; }
    .cms-share__btn svg { width: 19px; height: 19px; }
}

/* ---------- 複製成功浮動提示 ---------- */
.cms-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(10px);
    z-index: 960;
    background: rgba(17, 24, 39, .94);
    color: #fff;
    font-size: 13.5px;
    line-height: 1;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
    white-space: nowrap;
    margin-bottom: env(safe-area-inset-bottom, 0px);
}
.cms-toast.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* 尊重「減少動態」偏好：關掉位移與淡入的過場，只保留顯示/隱藏 */
@media (prefers-reduced-motion: reduce) {
    .cms-backtop, .cms-backtop:hover, .cms-backtop:active,
    .cms-share__btn, .cms-share__btn:hover, .cms-share__btn:active,
    .cms-toast { transition: opacity .01s linear; transform: none !important; }
    .cms-backtop.is-on { transform: none; }
    .cms-toast.is-on { transform: translateX(-50%); }
}

/* 網站設定選了社群圖示樣式：按鈕外框交給 .cms-si（Services/SocialIcons），這裡只保留排列 */
.cms-share--si .cms-share__btn { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; color: inherit; }
.cms-share--si .cms-share__btn:hover { transform: none; box-shadow: none; filter: none; }
.cms-share--si .cms-share__btn.is-done .cms-si { opacity: .5; }