/*
 * TF-1041 簡中新版 Footer 樣式（layout_version = 2）
 *
 * 來源：繁中 public/css/style.css 的 footer_v2 區段（第 14387-14513 行）
 * 抽成獨立檔案而非合併進 CN 的 style.css，避免影響舊版（layout_version = 1）全站版面。
 * 僅在 layout_version = 2 時由 layouts/head.blade.php 載入。
 */

.site-footer {
  background: #262626;
  color: #fff;
  padding: 64px;
  display: flex;
  justify-content: space-between;
  opacity: 1 !important;
  border-top: 0 !important;
  /* text-align: center; */
}

.site-footer ul {
  padding-left: 0 !important;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: space-between;
}

.footer-logo-wrap li {
  flex: 0;
  opacity: 1 !important;
}

/* 語系切換跟社群 icon 要並排、space-between 分兩側；
   .footer-logo-wrap 在 <=1200px 會變成 align-items:center，
   讓這個 li 縮到內容寬度，space-between 就沒有空間可以分配，
   這裡固定 width:100% 讓它在任何寬度下都能撐滿一整排 */
.footer-lang-social-row {
  width: 100%;
}

.footer-nav li {
  opacity: 1 !important;
}

.footer-nav a {
  color: #fff;
  font-size: 14px;  /* 原為 0.875rem。bootstrap.css 設 html{font-size:10px}，繁中以 style.css 的 html{font-size:16px} 蓋回，簡中無此規則，rem 會算成 8.75px，故改用絕對單位 */
  font-weight: 500;
  transition: color 0.2s;
  opacity: 1 !important;
}

.footer-nav a:hover {
  color: #84c100;
}

.footer-copyright {
  color: #fff;
  font-size: 14px;  /* 原為 0.875rem。bootstrap.css 設 html{font-size:10px}，繁中以 style.css 的 html{font-size:16px} 蓋回，簡中無此規則，rem 會算成 8.75px，故改用絕對單位 */
}

@media (max-width: 1200px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    padding: 40px 32px;
    gap: 32px;
    text-align: center;
  }

  .footer-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .footer-logo-wrap {
    align-items: center;
  }

  .social-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .footer-lang-social-row 桌機是靠 justify-content-between 讓語系切換／
     社群 icon 分兩側；v3 footer 目前這排只剩語系切換一個項目，single item
     配 space-between 會貼在最左邊，這裡在手機/平板寬度改成置中 */
  .footer-lang-social-row {
    justify-content: center;
  }

  .custom-subscribe-form {
    width: 100%;
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 32px;
    gap: 24px;
  }

  .site-footer ul {
    padding-left: 0 !important;
  }

  .footer-nav ul li {
    margin-right: 12px;
  }

  .footer-logo-wrap li {
    margin-bottom: 16px;
  }

  .footer-logo img {
    width: 80%;
  }
}

/* TF-1041 新增：備案號置中（簡中站專屬，繁中無此區塊） */
/* 備案號：位於中間欄下半（對應繁中的社群 icon 區） */
.site-footer .footer-beian {
  text-align: center;
}

.site-footer .footer-beian-line {
  text-align: center;
  line-height: 1.8;
}

.site-footer .footer-beian-line a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.site-footer .footer-beian-line a:hover {
  color: #84c100;
}


/* ===============================================================
   訂閱區「订阅最新市场专题」

   來源：繁中 public/css/style.css 第 15895-15933 行。
   先前抽 footer_v2 區段（14387-14513）時沒帶到這塊，
   因為訂閱區的樣式寫在另一處（Substack 電子報訂閱按鈕區段）。

   h2 原為 1.75rem。bootstrap.css 設 html{font-size:10px}，簡中未如繁中以 html{font-size:16px} 蓋回，改用絕對單位。
   =============================================================== */
.site-footer .footer-subscribe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.site-footer .footer-subscribe-wrap h2 {
  font-size: 28px;
  color: #fff;
  margin: 0;
}

.site-footer .custom-subscribe-form {
  margin: 24px 0;
  width: 360px;
}

.site-footer .subscribe-input-group {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.site-footer .subscribe-input {
  flex: 1;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  outline: none;
  color: #333;
}

.site-footer .subscribe-btn {
  background: #558032;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.site-footer .subscribe-btn:hover {
  background: #446628;
}

@media (max-width: 1200px) {
  .site-footer .custom-subscribe-form {
    width: 100%;
    max-width: 400px;
  }
}


/* ---------------------------------------------------------------
   三欄等距（TF-1041）

   繁中右欄含語系切換與社群 icon，本身有寬度，space-between 就排得勻；
   簡中依規劃拿掉那兩項後右欄變窄，中欄會被推離視覺中心。
   EN 版視覺上是等寬三欄，故此處直接讓三欄等分。

   中欄結構同繁中：上半訂閱表單、下半備案號（繁中是社群 icon），
   以 space-between 上下撐開。
   --------------------------------------------------------------- */
.site-footer > .footer-nav,
.site-footer > .footer-subscribe-wrap,
.site-footer > .footer-logo-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.site-footer > .footer-subscribe-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.site-footer > .footer-logo-wrap {
  align-items: flex-end;
  text-align: right;
}

/* logo：TF_logo_cn_w.svg 只有 viewBox、無 width/height，
   不給尺寸會被瀏覽器以預設值放大（同 header 手機 logo 的成因） */
.site-footer .footer-logo img {
  height: 40px;
  width: auto;
  max-width: 220px;
}

/* 窄螢幕：footer-v2.css 上方的 @media (max-width:1200px) 已把 .site-footer
   改為 flex-direction: column，此處把三欄的等分設定解除並一律置中 */
@media (max-width: 1200px) {

  .site-footer > .footer-nav,
  .site-footer > .footer-subscribe-wrap,
  .site-footer > .footer-logo-wrap {
    flex: none;
    width: 100%;
    align-items: center;
    text-align: center;
  }
}