/* =========================================================
   水氏慈善協會 — 全域行動裝置 RWD 修正層
   經由 functions.php enqueue，會晚於模板內聯 <style>，
   故可覆寫各頁的桌機優先樣式。
   ========================================================= */

/* 讓圖片不超出容器。
   重要：本檔沒有（也不能加）html / body 的 overflow-x:hidden。
   這兩者在 Chromium 上會隻作性地讓子元素的 position:sticky 失效
   （首頁 .story-sticky 的「漣漪」滾動敗事就是靠 sticky）。
   裝飾性外溢請在個別區塊自己 overflow:clip / hidden。 */
img, svg, video { max-width: 100%; height: auto; }

/* 反向抑製 front-page.php 虛實句 body { overflow-x: hidden }，
   避免這個規則打壞 .story-sticky 的 sticky 狀態（舊創 Chromium 聫結）。
   overflow:clip 不會形成滾動與 containing block，能同時達到。 */
body { overflow-x: clip !important; }

/* 漢堡按鈕（由 mobile.js 動態插入），桌機隱藏 */
.od-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.od-burger svg { display: block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.od-burger:hover { background: rgba(0, 0, 0, .05); }

/* 行動選單面板（由 mobile.js 動態插入） */
.od-mmenu {
  position: fixed;
  top: 72px;
  left: 0; right: 0;
  background: oklch(99.5% 0.006 72);
  border-bottom: 1px solid oklch(91% 0.009 72);
  box-shadow: 0 24px 48px -24px rgba(20, 30, 50, .14);
  padding: .75rem 1rem 1.25rem;
  z-index: 99;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  -webkit-overflow-scrolling: touch;
}
.od-mmenu[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.od-mmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.od-mmenu a {
  display: block;
  padding: .9rem 1rem;
  text-decoration: none;
  color: oklch(17% 0.022 240);
  font-size: 1rem;
  border-radius: 10px;
  transition: background .2s, color .2s;
  font-family: inherit;
  border: 0;
  background: transparent;
}
.od-mmenu a:hover,
.od-mmenu a:focus-visible {
  background: oklch(91% 0.009 72);
  color: oklch(17% 0.022 240);
  outline: 0;
}
.od-mmenu a.active {
  color: oklch(50% 0.19 228);
  font-weight: 600;
  background: oklch(50% 0.19 228 / .06);
}
.od-mmenu a.od-mmenu__cta {
  background: oklch(50% 0.19 228);
  color: #fff;
  text-align: center;
  margin-top: .625rem;
  border-radius: 100px;
  font-weight: 500;
}
.od-mmenu a.od-mmenu__cta:hover {
  background: oklch(44% 0.19 228);
  color: #fff;
}

/* 行動選單背景遮罩（由 mobile.js 動態插入） */
.od-mmask {
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(15, 25, 45, .35);
  backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.od-mmask[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

/* =========================================================
   ≤ 768px — 主要手機斷點
   ========================================================= */
@media (max-width: 768px) {
  /* 隱藏桌機 nav，顯示漢堡 */
  .nav .nav__links,
  .site-header .site-nav { display: none !important; }
  .nav .od-burger,
  .site-header .od-burger { display: inline-flex; }

  /* 緊湊 nav */
  .nav { padding: 0 1rem !important; height: 64px !important; }
  .site-header { padding: 0 1rem !important; height: 64px !important; }
  .nav__name-en, .site-logo__name-en { display: none !important; }
  .nav__logo-img, .site-logo__img { width: 34px !important; height: 34px !important; }
  .nav__name, .site-logo__name { font-size: 1rem !important; }

  /* 行動選單對應緊湊 nav 高度 */
  .od-mmenu { top: 64px; max-height: calc(100dvh - 64px); }
  .od-mmask { inset: 64px 0 0 0; }

  /* 已登入者 admin bar 偏移 */
  body.admin-bar .od-mmenu { top: calc(64px + 46px); max-height: calc(100dvh - 64px - 46px); }
  body.admin-bar .od-mmask { inset: calc(64px + 46px) 0 0 0; }

  /* 頁尾共用：直立排列、置中 */
  footer .footer__inner,
  .site-footer .site-footer__inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
  }
  footer .footer__links,
  .site-footer .site-footer__links {
    justify-content: center !important;
    gap: .75rem 1.25rem !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
  }

  /* single.php 上方部署提示橫幅 */
  .deploy-banner {
    font-size: .7rem;
    padding: .4rem .75rem;
    gap: .5rem;
  }
  .deploy-banner__label { padding: .15rem .5rem; font-size: .625rem; }
  .deploy-banner code { font-size: .7rem; }

  /* single.php site-header 偏移 (deploy banner 高度變動) */
  .site-header { top: 30px !important; }
}

/* =========================================================
   ≤ 540px — 超緊湊
   ========================================================= */
@media (max-width: 540px) {
  .nav { padding: 0 .875rem !important; }
  .site-header { padding: 0 .875rem !important; }
  .nav__name, .site-logo__name { font-size: .9375rem !important; }
  .nav__logo-img, .site-logo__img { width: 32px !important; height: 32px !important; }
}

/* 桌機顯示時行動選單 / 遮罩永遠不可見 */
@media (min-width: 769px) {
  .od-mmenu, .od-mmask { display: none !important; }
}

/* 尊重使用者減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .od-mmenu, .od-mmask, .od-burger svg { transition: none !important; }
}

/* =========================================================
   全站浮動「愛心捐款」水滴吉祥物
   身體藏在頁面右邊「牆后」，頭與手露出來跳跳招手
   - 桌機：右側垂直置中
   - 手機：右下角（拇指熱區）
   ========================================================= */
.sx-donate-wrap {
  position: fixed;
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
  z-index: 90;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}

.sx-donate {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* 水滴吉祥物本體：探頭/縮回動畫 */
.sx-donate__mascot {
  width: 110px;
  height: 128px;
  margin: 0;
  overflow: visible;
  filter: drop-shadow(0 6px 12px rgba(15, 85, 130, 0.25));
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;
  animation: sxPeek 12s ease-in-out infinite;
  will-change: transform;
}

/* 手臂樞紐：接到 viewBox 內肩膀點 */
/* === 手臂：麵條式摆動（動 path d） === */
.sx-mascot__arm-left path,
.sx-mascot__arm-right path {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transition: d .35s ease-out;
}
.sx-mascot__arm-left  path { animation-name: sxArmLeftWave; }
.sx-mascot__arm-right path { animation-name: sxArmRightWave; }

/* === 腳：左右橫跨步 === */
.sx-mascot__leg-left,
.sx-mascot__leg-right {
  transform-box: view-box;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transition: transform .35s ease-out;
}
.sx-mascot__leg-left  { transform-origin: 48px 130px; animation-name: sxWalkLeft; }
.sx-mascot__leg-right { transform-origin: 72px 130px; animation-name: sxWalkRight; }

/* 表情交替：同步探頭節奏（8s） */
.sx-face                { opacity: 0; }
.sx-face--happy   { opacity: 1; animation: sxFaceHappy   12s infinite; }
.sx-face--excited { animation: sxFaceExcited 12s infinite; }
.sx-face--panic   { animation: sxFacePanic   12s infinite; }

/* 探頭跳序與表情 keyframes 對齊
   0–8%   藏起來  | 8–18%  探出頭  | 18–38% 開心揮手
   38–44% 快闃入  | 44–50% 偷偷探  | 50–62% 又出來
   62–86% 興奮揮手 | 86–92% 心虛闃  | 92–100% 藏好 */
@keyframes sxFaceHappy {
  0%,    37%   { opacity: 1; }
  37.01%, 46%  { opacity: 0; }
  46.01%, 60%  { opacity: 1; }
  60.01%, 100% { opacity: 0; }
}
@keyframes sxFaceExcited {
  0%, 60%      { opacity: 0; }
  60.01%, 83%  { opacity: 1; }
  83.01%, 100% { opacity: 0; }
}
@keyframes sxFacePanic {
  0%, 37%      { opacity: 0; }
  37.01%, 46%  { opacity: 1; }
  46.01%, 83%  { opacity: 0; }
  83.01%, 100% { opacity: 1; }
}

/* === 手臂雙關節動畫：肩膀慢揮 + 手肘快快拍動、自然彎曲 === */
/* === 手臂麵條摆動：讓 path d 連續 morph，看起來像有關節的麵條 === */
/* ===========================================================================
   手臂　麵條揮動
   設計原則：
     1. 所有 keyframe 都保持強烈彎曲（控制點遠離直線）→ 看起來像麵條，不像棍子
     2. 揮手段（wave）與興奮段（excited）各自 hand-to-shoulder 距離組內成定，只變角度不變長度
     3. 轉換段（起身、收手）以「取出捶曲」見解取代「伸長」
     4. 蛻最藏狀態也保留彎曲，不是直棍下垂 */
@keyframes sxArmLeftWave {
  /* HIDDEN: 收在身側帶彎 */
  0%, 7%    { d: path("M 22 96 C 30 100 24 116 18 120"); }
  /* EMERGE: 彎起來往上探 */
  11%       { d: path("M 22 96 C 28 86 16 76 12 70"); }
  16%       { d: path("M 22 96 C 26 82 12 68 8 60"); }
  /* WAVE 揮手段：hand 在同一弧上左右携動，d 內都是 S 型彎曲 */
  20%       { d: path("M 22 96 C 28 84 12 72 8 56"); }   /* hand(8,56) d=42 */
  25%       { d: path("M 22 96 C 18 84 30 70 26 54"); }  /* hand(26,54) d=42 */
  30%       { d: path("M 22 96 C 28 84 12 72 8 56"); }
  35%       { d: path("M 22 96 C 18 84 30 70 26 54"); }
  /* 收手 */
  38%       { d: path("M 22 96 C 24 82 18 70 16 62"); }
  /* PANIC：亂甲，這裡故意變化 → 看起來是慌亂 */
  41%       { d: path("M 22 96 C 34 86 44 96 50 102"); }
  44%       { d: path("M 22 96 C 10 78 6 60 -2 48"); }
  47%       { d: path("M 22 96 C 28 82 14 70 10 60"); }
  /* RE-EMERGE wave */
  52%       { d: path("M 22 96 C 18 82 28 68 24 54"); }
  56%       { d: path("M 22 96 C 28 82 12 70 8 56"); }
  /* EXCITED 高揮：hand 在更高弧上携，同樣 S 型彎曲 */
  62%       { d: path("M 22 96 C 28 70 8 50 2 38"); }    /* hand(2,38) d=62 */
  68%       { d: path("M 22 96 C 16 70 30 50 22 36"); }  /* hand(22,36) d=60 */
  74%       { d: path("M 22 96 C 28 70 8 50 2 38"); }
  80%       { d: path("M 22 96 C 16 70 30 50 22 36"); }
  82%       { d: path("M 22 96 C 24 72 14 54 8 42"); }
  /* PANIC */
  86%       { d: path("M 22 96 C 34 90 46 94 52 98"); }
  90%       { d: path("M 22 96 C 10 78 4 60 -2 48"); }
  /* 收手回身側 */
  94%       { d: path("M 22 96 C 28 96 24 110 20 116"); }
  96%, 100% { d: path("M 22 96 C 30 100 24 116 18 120"); }
}
@keyframes sxArmRightWave {
  0%, 7%    { d: path("M 98 96 C 90 100 96 116 102 120"); }
  11%       { d: path("M 98 96 C 92 86 104 76 108 70"); }
  16%       { d: path("M 98 96 C 94 82 108 68 112 60"); }
  20%       { d: path("M 98 96 C 92 84 108 72 112 56"); }  /* hand(112,56) d=42 */
  25%       { d: path("M 98 96 C 102 84 90 70 94 54"); }   /* hand(94,54) d=42 */
  30%       { d: path("M 98 96 C 92 84 108 72 112 56"); }
  35%       { d: path("M 98 96 C 102 84 90 70 94 54"); }
  38%       { d: path("M 98 96 C 96 82 102 70 104 62"); }
  41%       { d: path("M 98 96 C 86 86 76 96 70 102"); }
  44%       { d: path("M 98 96 C 110 78 114 60 122 48"); }
  47%       { d: path("M 98 96 C 92 82 106 70 110 60"); }
  52%       { d: path("M 98 96 C 102 82 92 68 96 54"); }
  56%       { d: path("M 98 96 C 92 82 108 70 112 56"); }
  62%       { d: path("M 98 96 C 92 70 112 50 118 38"); }  /* hand(118,38) d=62 */
  68%       { d: path("M 98 96 C 104 70 90 50 98 36"); }   /* hand(98,36) d=60 */
  74%       { d: path("M 98 96 C 92 70 112 50 118 38"); }
  80%       { d: path("M 98 96 C 104 70 90 50 98 36"); }
  82%       { d: path("M 98 96 C 96 72 106 54 112 42"); }
  86%       { d: path("M 98 96 C 86 90 74 94 68 98"); }
  90%       { d: path("M 98 96 C 110 78 116 60 122 48"); }
  94%       { d: path("M 98 96 C 92 96 96 110 100 116"); }
  96%, 100% { d: path("M 98 96 C 90 100 96 116 102 120"); }
}/* === 走路橫跨步：抬足同時朝移動方向跨出去，另一腳下一拍接手 === */
@keyframes sxWalkLeft {
  0%, 7%    { transform: translate(0, 0); }
  /* 探出來（身體往左走）— 左腳抬起往左跨 */
  10%       { transform: translate(-4px, -3px); }
  14%       { transform: translate(0, 0); }
  /* 出來揮手（原地小踏步） */
  18%       { transform: translate(-2px, -2px); }
  22%       { transform: translate(1px, 0); }
  28%       { transform: translate(-2px, -2px); }
  32%       { transform: translate(1px, 0); }
  36%       { transform: translate(-2px, -2px); }
  /* panic 退上右－腳被拖去 */
  40%       { transform: translate(5px, -4px); }
  44%       { transform: translate(0, 0); }
  /* 再探出來－往左跨 */
  50%       { transform: translate(-4px, -3px); }
  54%       { transform: translate(0, 0); }
  58%       { transform: translate(-2px, -2px); }
  /* 興奮原地踏步 */
  62%       { transform: translate(1px, 0); }
  66%       { transform: translate(-3px, -3px); }
  70%       { transform: translate(1px, 0); }
  74%       { transform: translate(-3px, -3px); }
  78%       { transform: translate(1px, 0); }
  82%       { transform: translate(-3px, -3px); }
  /* panic 退上右 */
  86%       { transform: translate(5px, -4px); }
  90%       { transform: translate(0, 0); }
  96%, 100% { transform: translate(0, 0); }
}
@keyframes sxWalkRight {
  /* 反相：左腳抬時右腳踏，起作交替 */
  0%, 7%    { transform: translate(0, 0); }
  10%       { transform: translate(1px, 0); }
  14%       { transform: translate(-4px, -3px); }
  18%       { transform: translate(1px, 0); }
  22%       { transform: translate(-2px, -2px); }
  28%       { transform: translate(1px, 0); }
  32%       { transform: translate(-2px, -2px); }
  36%       { transform: translate(1px, 0); }
  40%       { transform: translate(0, 0); }
  44%       { transform: translate(5px, -4px); }
  50%       { transform: translate(1px, 0); }
  54%       { transform: translate(-4px, -3px); }
  58%       { transform: translate(1px, 0); }
  62%       { transform: translate(-3px, -3px); }
  66%       { transform: translate(1px, 0); }
  70%       { transform: translate(-3px, -3px); }
  74%       { transform: translate(1px, 0); }
  78%       { transform: translate(-3px, -3px); }
  82%       { transform: translate(1px, 0); }
  86%       { transform: translate(0, 0); }
  90%       { transform: translate(5px, -4px); }
  96%, 100% { transform: translate(0, 0); }
}

/* === Hover 跳舅：跳起來、興奮表情、雙手跳舅、雙腳彈跳 === */
@keyframes sxJumpDance {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(-2px) translateY(-10px); }
  50%      { transform: translateX(0) translateY(0); }
  75%      { transform: translateX(2px) translateY(-10px); }
}
@keyframes sxArmLeftDance {
  0%, 100% { d: path("M 22 96 C 14 70 -4 56 -8 38"); }
  25%      { d: path("M 22 96 C 28 70 6 54 8 38"); }
  50%      { d: path("M 22 96 C 14 70 -4 56 -8 38"); }
  75%      { d: path("M 22 96 C 28 70 6 54 8 38"); }
}
@keyframes sxArmRightDance {
  0%, 100% { d: path("M 98 96 C 106 70 124 56 128 38"); }
  25%      { d: path("M 98 96 C 92 70 114 54 112 38"); }
  50%      { d: path("M 98 96 C 106 70 124 56 128 38"); }
  75%      { d: path("M 98 96 C 92 70 114 54 112 38"); }
}
@keyframes sxLegDanceLeft {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -5px); }
}
@keyframes sxLegDanceRight {
  0%, 100% { transform: translate(0, -5px); }
  50%      { transform: translate(0, 0); }
}
/* === 探頭縮回主動畫：右側 peek，最多藏 2/3，1/3 永遠露出 === */
@keyframes sxPeek {
  0%, 7%       { transform: translateX(45%); }
  15%          { transform: translateX(22%); }
  20%, 37%     { transform: translateX(-4%); }
  41%, 46%     { transform: translateX(40%); }
  52%          { transform: translateX(28%); }
  58%          { transform: translateX(-6%); }
  62%, 83%     { transform: translateX(-2%); }
  87%, 92%     { transform: translateX(42%); }
  96%, 100%    { transform: translateX(45%); }
}

/* === 藥丸阻尼跟隨：~35% 幅度，永遠在畫面內 === */
@keyframes sxLabelBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* === 互動：hover 就永遠探出來，表情動作還動 === */
/* ==========================================================================
   Hover 跳舅狀態
   sprint 是由 JS 用 Web Animations API 驅動（mobile.js 內）
   這裡只定義「抵達 dance 狀態」的 keyframes 接手規則。
   ========================================================================== */
.sx-donate.is-dance-active .sx-donate__mascot {
  animation: sxJumpDance 0.7s ease-in-out infinite !important;
}
.sx-donate.is-dance-active .sx-mascot__arm-left  path {
  animation: sxArmLeftDance  0.7s ease-in-out infinite !important;
}
.sx-donate.is-dance-active .sx-mascot__arm-right path {
  animation: sxArmRightDance 0.7s ease-in-out infinite !important;
}
.sx-donate.is-dance-active .sx-mascot__leg-left {
  animation: sxLegDanceLeft  0.7s ease-in-out infinite !important;
}
.sx-donate.is-dance-active .sx-mascot__leg-right {
  animation: sxLegDanceRight 0.7s ease-in-out infinite !important;
}

/* 表情：hover 時只顯示興奮臉（opacity 不被 WAAPI 影響）*/
.sx-donate:hover .sx-face--happy,
.sx-donate:hover .sx-face--panic,
.sx-donate:focus-visible .sx-face--happy,
.sx-donate:focus-visible .sx-face--panic {
  animation: none !important;
  opacity: 0 !important;
}
.sx-donate:hover .sx-face--excited,
.sx-donate:focus-visible .sx-face--excited {
  animation: none !important;
  opacity: 1 !important;
}

/* 愛心捐款藥丸本體：CTA 主體，錦點在這裡 */
.sx-donate__label {
  display: inline-block;
  background: #ffffff;
  color: #1d7eb4;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 12px 26px;
  margin: 0;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow:
    0 14px 32px -6px rgba(15, 85, 130, 0.42),
    0 5px 12px rgba(0, 0, 0, 0.12);
  border: 1.5px solid rgba(95, 182, 224, 0.38);
  font-family: inherit;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  /* 錦點拄藥丸：不跟隨水滴橫移，只輕微上下呼吸 */
  animation: sxLabelBob 3.6s ease-in-out infinite;
  will-change: transform;
}
/* 藥丸視覺反轉 + 手感 scale */
.sx-donate:hover .sx-donate__label,
.sx-donate:focus-visible .sx-donate__label {
  background: #1d7eb4;
  color: #ffffff;
  transform: scale(1.06);
  animation-play-state: paused;
  box-shadow:
    0 18px 38px -8px rgba(15, 85, 130, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.14);
}
.sx-donate:focus-visible { outline: 0; }
.sx-donate:focus-visible .sx-donate__label {
  outline: 2px solid #1d7eb4;
  outline-offset: 3px;
}
.sx-donate:active .sx-donate__mascot {
  transform: translateX(0) scale(1.0);
  transition-duration: .12s;
}

/* 行動選單開啟時：滑出 */
body:has(.od-mmenu[data-open="true"]) .sx-donate-wrap {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(40px);
}

/* === 手機版（≤768px）：右下角 === */
@media (max-width: 768px) {
  .sx-donate-wrap {
    top: auto;
    right: 0;
    left: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .sx-donate__mascot { width: 88px; height: 102px; margin: 0; }
  .sx-donate__label  { font-size: .9375rem; padding: 10px 20px; margin: 0; letter-spacing: .06em; }
  body:has(.od-mmenu[data-open="true"]) .sx-donate-wrap {
    transform: translateX(40px);
  }
}

/* 尊重 reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sx-donate__mascot,
  .sx-donate__label,
  .sx-mascot__arm-left path,
  .sx-mascot__arm-right path,
  .sx-mascot__leg-left,
  .sx-mascot__leg-right,
  .sx-face--happy,
  .sx-face--excited,
  .sx-face--panic { animation: none !important; }
  .sx-donate__mascot,
  .sx-donate__label { transform: translateX(0) !important; }
  .sx-mascot__leg-left,
  .sx-mascot__leg-right { transform: translate(0, 0) !important; }
  .sx-face--excited,
  .sx-face--panic { opacity: 0 !important; }
  .sx-face--happy { opacity: 1 !important; }
  .sx-donate__label { transition: none !important; }
}