/**
 * 微笑動漫 Child Theme — Footer 樣式
 * v1.5.0 (2026-07-19)
 *
 * 對應 footer.php
 * 變更：
 *  - v1.5.0 手機版頁腳精簡：欄目改 3 欄緊排、字級/間距縮小、社群圖示縮小、padding 收窄
 *  - v1.4.0 移除 .footer-cta-btn / .footer-aux；社群 hover 品牌色；圖示自動換行
 */

/* ─────────── Logo ─────────── */
/*
 * footer 的 logo 與 header 共用 .site-logo class，因此會吃到
 * style.css 裡 @media (min-width:901px) 的 header 專用偏移：
 *   margin-left: var(--logo-offset-x, 48px)
 *   transform: translateY( var(--logo-offset-y, 8px) )
 *
 * 那組偏移是為了讓 header 的 logo 避開漢堡選單、與搜尋列對齊，
 * 對 footer 沒有意義——結果是 footer logo 被往右推 48px、往下 8px，
 * 與下方的標語、社群圖示對不齊，看起來整塊是歪的。
 * 這裡特異性較高（.site-footer .footer-logo），可蓋掉該規則。
 */
.site-footer .footer-logo{
  margin-left:0 !important;
  transform:none !important;
  /* 強制覆蓋 .site-logo 全域的 height:64px，讓容器跟著內容自適應 */
  height: auto !important;
  align-items: center !important;
  display: flex !important;
}

.site-footer .footer-logo-img{
  /* 手機版縮小 logo 圖示，與文字高度匹配 */
  height: 28px !important;
  width: auto;
  vertical-align: middle;
  display: block;
  flex-shrink: 0;
}

/* 確保 logo-icon-box 垂直置中，不被 flex stretch；
   改 display:flex（非 inline-flex）避免行內 baseline 對齊問題 */
.site-footer .footer-logo .logo-icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center;
  flex-shrink: 0;
  line-height: 0; /* 消除 inline 行高殘影 */
}

/* footer 內的 logo-text：確保 background-clip:text 正常運作，
   若瀏覽器 render 失效時以白色字體作為降級保護，不顯示漸層色塊 */
.site-footer .logo-text {
  background: linear-gradient(135deg, #ffffff 0%, #D8E8FF 45%, #A5C2F5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #ffffff; /* 降級：若 background-clip:text 失效則顯示白色 */
  font-size: 18px !important; /* 配合 28px 圖示的合適大小 */
  line-height: 1 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
  align-self: center; /* 確保文字在 flex 容器中垂直置中 */
}

/* ─────────── 5 欄佈局 ─────────── */
.site-footer .footer-top{
  display:grid;
  grid-template-columns:1.6fr repeat(4, 1fr);
  gap:36px 28px;
  padding:32px 0 24px;
}
@media (max-width:1024px){
  .site-footer .footer-top{
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
  }
  .site-footer .footer-brand{grid-column:1 / -1;}
}

/* ─────────── 社群圖示列 ─────────── */
/*
 * 固定每列 5 個。原本是 flex-wrap + max-width:380px，但實際每列擠得下
 * 幾個要看 brand 欄被 grid（1.6fr）分到多寬——約 310px 時每列只放 6 個，
 * 15 個圖示排成 6/6/3，最後一列落單看起來像沒對齊。
 * 改用固定欄數後 15 ÷ 5 = 3 列整齊，且不再受容器寬度變動影響。
 * 日後增減圖示時，數量若不是 5 的倍數要記得回來調這個值。
 */
.site-footer .social-links{
  display:grid;
  grid-template-columns:repeat(5, 36px);
  gap:10px;
  margin-top:18px;
  justify-content:start;
}
/*
 * 1024px 以下品牌區已橫跨整排（見上方 .footer-brand{grid-column:1/-1}），
 * 寬度足夠讓圖示自然排開，固定 5 欄反而會擠在左側、右邊空一大片。
 * 這段必須放在桌機版規則「之後」——同特異性下由後者勝出，寫在上面的
 * media query 會被下面的 grid 覆蓋掉。
 */
@media (max-width:1024px){
  .site-footer .social-links{
    display:flex;
    flex-wrap:wrap;
  }
}
.site-footer .footer-social-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  color:var(--text-muted, #aab0c4);
  font-size:15px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.site-footer .footer-social-btn:hover{
  transform:translateY(-2px);
  color:#fff;
}
.site-footer .footer-social-placeholder{
  opacity:.35;
  cursor:not-allowed;
}
.site-footer .footer-social-placeholder:hover{
  transform:none;
  color:var(--text-muted, #aab0c4);
}

/* 各平台品牌色 hover */
.site-footer .social-discord:hover       {background:#5865F2;}
.site-footer .social-facebook_page:hover,
.site-footer .social-facebook_group:hover,
.site-footer .social-facebook_user:hover {background:#1877F2;}
.site-footer .social-x_twitter:hover     {background:#000;}
.site-footer .social-instagram:hover     {background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.site-footer .social-youtube:hover       {background:#FF0000;}
.site-footer .social-threads:hover       {background:#000;}
.site-footer .social-line:hover          {background:#06C755;}
.site-footer .social-plurk:hover         {background:#FF574D;}
.site-footer .social-vocus:hover         {background:#16B8A4;}
.site-footer .social-reddit:hover        {background:#FF4500;}
.site-footer .social-linkedin:hover      {background:#0A66C2;}
.site-footer .social-linkgoods:hover     {background:#FF6B35;}
.site-footer .social-rss:hover           {background:#F26522;}

/* ═══════════════════════════════════════════
   手機版精簡（≤600px）：縮短頁腳長度
   ═══════════════════════════════════════════ */
@media (max-width:600px){

  /* 整體上下留白收窄 */
  .site-footer .footer-top{
    grid-template-columns:repeat(2, 1fr); /* 2欄：4 個 nav group 整齊排成 2×2 */
    gap:20px 14px;
    padding:10px 0 18px; /* 適度頂部留白，維持呼吸感 */
  }

  /* 品牌區橫跨整排、flex column 置中
     注意：.footer-logo 是 display:flex（block-level），
     text-align:center 對它無效；必須用 align-items:center 才能真正水平置中 */
  .site-footer .footer-brand{
    grid-column:1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer .footer-logo-img{ height:28px !important; }
  .site-footer .footer-tagline{
    font-size:12px;
    line-height:1.5;
    margin:8px 0 0;
    text-align: center;
  }

  /* 社群圖示置中、縮小、縮排
     小螢幕的品牌區橫跨整排（見上方 grid-column:1 / -1），寬度夠放更多，
     固定 5 欄會太窄；改回自動換行並置中，圖示尺寸同步縮到 32px。 */
  .site-footer .social-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    max-width:none;
    gap:8px;
    margin-top:12px;
  }
  .site-footer .footer-social-btn{
    width:32px;
    height:32px;
    font-size:13px;
  }

  /* 欄目標題與連結緊排、字級縮小 */
  .site-footer .footer-nav-group h5{
    font-size:13px;
    margin:0 0 8px;
  }
  .site-footer .footer-nav-group a{
    font-size:12px;
    line-height:1.9;   /* 行距縮小，連結更緊湊 */
  }

  /* 底部版權與資料來源字級縮小 */
  .site-footer .footer-bottom,
  .site-footer .footer-copy{
    font-size:11px;
    line-height:1.6;
    text-align:center;
  }
  .site-footer .footer-divider{
    margin:12px 0;
  }
}

/* 極窄機（≤380px）：欄目退回兩欄避免字被擠壓 */
@media (max-width:380px){
  .site-footer .footer-top{
    grid-template-columns:1fr 1fr;
  }
}

/* ── 桌面版切換（內嵌於法務連結列） ── */
/* 舊版的獨立按鈕區塊已移除，保留這組表示隱藏 */
.footer-view-mode-wrap {
  display: none;
}

/* 内嵌在 footer-legal 內的桌面版按鈕，樣式跟旁邊連結完全相同 */
.site-footer .footer-legal-desktop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-secondary, #C3C6CE);
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  transition: color .2s ease;
  line-height: inherit;
}
.site-footer .footer-legal-desktop-btn:hover {
  color: var(--accent-blue, #63a8ff);
}
.site-footer .footer-legal-desktop-btn i {
  font-size: 11px;
  opacity: 0.75;
}

/* 在一般電腦大螢幕自動隱藏此按鈕（除非手動強制切換至桌面版狀態） */
@media (min-width: 1025px) {
  html:not(.view-as-desktop) .footer-legal-desktop-btn,
  html:not(.view-as-desktop) .footer-legal-desktop-btn + .footer-legal-sep,
  html:not(.view-as-desktop) .footer-legal-sep:has(+ .footer-legal-desktop-btn) {
    display: none;
  }
}

/* ── 觸控裝置的桌面版「逃生鈕」 ──
 * 強制桌面版時 viewport 為 width=1280, initial-scale=0.3，整頁縮到三成，
 * 頁尾這顆 12px 的按鈕只剩約 3.6 實體像素、又埋在頁面最底部，
 * 而 .wx-bottom-nav 因為 max-width:768px 不再成立也一併消失，
 * 導致手機使用者切過去之後找不到路回來。
 *
 * 這裡把它改成固定在右下角的浮動按鈕並放大字級，×0.3 後仍有約 13px 可點面積。
 * 用 pointer:coarse 而非寬度斷點，是因為強制桌面版時 viewport 一律回報 1280，
 * 手機與真實桌機無法用寬度區分，只能靠指標精細度。
 */
@media (pointer: coarse) {
  html.view-as-desktop .footer-legal-desktop-btn {
    position: fixed;
    /* 置中而非靠右：右下角已有抽動漫骰子鈕，靠右會互相重疊 */
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 1000000;
    font-size: 44px;
    padding: 20px 30px;
    border-radius: 999px;
    background: rgba(10, 14, 24, .92);
    border: 2px solid rgba(255, 255, 255, .28);
    color: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
  }
  html.view-as-desktop .footer-legal-desktop-btn i {
    font-size: 40px;
    opacity: 1;
  }
  /* 浮動之後，原位置留下的分隔點會變成孤兒，一併隱藏 */
  html.view-as-desktop .footer-legal-desktop-btn + .footer-legal-sep,
  html.view-as-desktop .footer-legal-sep:has(+ .footer-legal-desktop-btn) {
    display: none;
  }
}


/* ─────────── 法務連結（版權列下方） ───────────
 * 從「關於」欄移下來，讓該欄從 7 項降到 5 項、四欄高度接近。
 * .footer-bottom 是 flex + space-between（左：檢視切換／右：版權），
 * 這裡用 flex-basis:100% 佔滿一整行換到下方，避免擠成三欄。
 */
/*
 * .footer-copy 是 <p>，從未被 reset 掉瀏覽器預設的 margin:1em 0。
 * 它在 .footer-bottom 這個 flex 容器裡，margin 會與 gap 疊加：
 * 12px(p margin) + 16px(gap) + 6px(自訂 margin) ≈ 34px，法務列因此
 * 離版權文字過遠、孤零零掉在右下角。間距統一交給 flex gap 控制。
 */
.site-footer .footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.site-footer .footer-copy{
  margin:0;
  flex: 1 1 auto;
}
.site-footer .footer-legal{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:12px;
  flex-shrink: 0;
}
/* 用 --text-secondary 而非 --text-muted：法務連結原本太淡幾乎看不清，
   而 muted 在深色底上只有 #7B8594／65% 白，對比不足 */
.site-footer .footer-legal a{
  color:var(--text-secondary, #C3C6CE);
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer .footer-legal a:hover{
  color:var(--accent-blue, #63a8ff);
}
.site-footer .footer-legal-sep{
  color:rgba(255,255,255,.25);
}

@media (max-width:768px){
  /* 小螢幕上下置中堆疊 */
  .site-footer .footer-bottom{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  .site-footer .footer-legal{
    justify-content:center;
    font-size:11px;
  }
}