/**
 * Cassiopeia HTSprout - 共用元件樣式
 *
 * 包含：
 * - 按鈕系統
 * - Header（桌面版＋行動版）
 * - 麵包屑
 * - Page Header
 * - mod_articles
 * - Footer 多欄佈局
 * - horizon-nav 水平導航
 * - Offcanvas 側滑選單
 * - 分頁元件
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ============================================
   5. 按鈕系統擴充
   ============================================ */

/* 確保按鈕符合 WCAG 2.1 觸控目標大小 */
.btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--htsprout-radius-sm);
  transition: all var(--htsprout-transition-base);
}

/* HTSprout 主色按鈕 */
.btn-primary {
  background-color: var(--htsprout-primary);
  border-color: var(--htsprout-primary);
}

.btn-primary:hover {
  background-color: #0097a7;
  border-color: #0097a7;
}

/* HTSprout 次色按鈕 */
.btn-secondary {
  background-color: var(--htsprout-secondary);
  border-color: var(--htsprout-secondary);
}

.btn-secondary:hover {
  background-color: #0d1f35;
  border-color: #0d1f35;
}

/* 外框按鈕 */
.btn-outline {
  background-color: transparent;
  color: var(--htsprout-primary);
  border-color: var(--htsprout-primary);
}

.btn-outline:hover {
  background-color: var(--htsprout-primary);
  color: var(--htsprout-text-50);
}

.btn:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* ============================================
   Header: Logo 與選單同列佈局（基礎，行動版共用）
   ============================================ */
.container-header .container-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.container-header .navbar-brand {
  margin-inline-end: 0;
  flex-shrink: 0;
}


/* ============================================
   Topbar 佈局
   ============================================ */
.container-topbar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

@media (max-width: 991.98px) {
  .container-topbar {
    display: none;
  }
}

/* ============================================
   Header 桌面版完整樣式（desktop-first：預設值）
   ============================================ */

/* ── 0. Header 元素內距 ── */
header {
  padding: 20px 60px;
}

/* ── 1. Header 背景覆寫 ── */
.container-header {
  background: var(--header-bg, var(--htsprout-text-50));
  background-image: none;
  color: var(--htsprout-text-1000);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.container-header.header-animate {
  transition: background-color var(--htsprout-transition-base) ease;
}

/* ── 2. 全面覆寫父主題白色文字 ── */
.container-header .mod-menu {
  color: var(--htsprout-text-1000);
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
  color: var(--htsprout-text-1000);
}

.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span {
  color: var(--htsprout-text-1000);
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
  color: var(--htsprout-text-1000);
}

.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus,
.container-header .navbar-brand a:hover,
.container-header .navbar-brand a:focus {
  color: var(--htsprout-green-800);
}

.container-header .site-description {
  color: var(--htsprout-text-1000);
}

.container-header .mod-finder,
.container-header .mod-finder a:not(.jmodedit) {
  color: var(--htsprout-text-1000);
}

.container-header .mod-finder a:not(.jmodedit):hover,
.container-header .mod-finder a:not(.jmodedit):focus {
  color: var(--htsprout-green-800);
}

/* 移除父主題 active/hover 白色底線 */
.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before,
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before {
  background: transparent;
}

/* ── 3. Topbar 桌面版佈局 ── */
/* Topbar: 靠右對齊水平排列 */
.container-topbar {
  align-items: center;
  gap: 20px;
}

/* 覆寫父主題 .container-header nav { margin-top: .5em }（topbar 內的 nav） */
.container-topbar nav {
  margin-top: 0;
}

/* Topbar 輔助選單 (horizon-nav layout) */
.container-topbar .horizon-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin: 0;
}

.container-topbar .horizon-nav-col {
  margin: 0;
  padding: 0;
}

/* 重設 h4 預設樣式 */
.container-topbar .horizon-nav-col__title {
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  margin: 0;
  padding: 0;
}

.container-topbar .horizon-nav-col__title a {
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-1000);
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.container-topbar .horizon-nav-col__title a:hover {
  color: var(--htsprout-green-800);
  text-decoration: none;
}

.container-topbar .horizon-nav-col__title a:focus {
  color: var(--htsprout-text-1000);
}

/* Topbar 無障礙工具列 — 桌面版整合在 topbar 內 */
.container-topbar .accessibility-toolbar {
  order: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 分隔線：字體調整器左右各一 */
.container-topbar .accessibility-toolbar::before,
.container-topbar .accessibility-toolbar::after {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--htsprout-text-400);
  flex-shrink: 0;
}

.container-topbar .accessibility-toolbar .container-xxl {
  max-width: none;
  padding: 0;
}

/* Topbar 字體按鈕：圓形 32×32（覆寫 accessibility.css 預設） */
.container-topbar .font-size-btn {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: var(--htsprout-fs-14);
  font-weight: var(--htsprout-fw-regular);
  letter-spacing: -0.28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--htsprout-green-400);
  color: var(--htsprout-text-50);
}

.container-topbar .font-size-btn.active {
  background: var(--htsprout-green-400);
  color: var(--htsprout-text-50);
}

.container-topbar .font-size-btn:hover {
  background: var(--htsprout-green-600);
}

/* 展開狀態 */
.container-topbar .font-adjuster-group.is-expanded {
  gap: 4px;
}

.container-topbar .font-adjuster-group.is-expanded .font-size-btn:not(.active) {
  background: var(--htsprout-text-50);
  color: var(--htsprout-text-1000);
  border: 1px solid var(--htsprout-text-400);
}

.container-topbar .font-adjuster-group.is-expanded .font-size-btn:not(.active):hover {
  background: var(--htsprout-green-50);
}

/* Topbar 搜尋框 */
.container-topbar search {
  display: flex;
  align-items: center;
}

.container-topbar .mod-finder {
  display: flex;
  align-items: center;
  color: var(--htsprout-text-1000);
}

.container-topbar .mod-finder__search.input-group {
  width: 180px;
  height: 40px;
  border: 1px solid #c2c2c2;
  background: var(--htsprout-text-50);
  border-radius: var(--htsprout-radius-md);
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center;
}

.container-topbar .js-finder-search-query.form-control {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 12px;
  font-size: var(--htsprout-fs-14);
  color: var(--htsprout-text-1000);
  background: var(--htsprout-text-50);
}

.container-topbar .js-finder-search-query.form-control:focus {
  box-shadow: none;
  outline: none;
}

.container-topbar .js-finder-search-query.form-control::placeholder {
  font-size: var(--htsprout-fs-14);
  color: var(--htsprout-text-400);
}

/* 搜尋按鈕 */
.container-topbar .mod-finder__search .btn {
  background: transparent;
  border: none;
  padding: 0 12px;
  color: var(--htsprout-text-1000);
  display: flex;
  align-items: center;
}

.container-topbar .mod-finder__search .btn .icon-white {
  color: var(--htsprout-text-1000);
}

/* ── 4. Container-nav 桌面版佈局 ── */
.container-header .container-nav {
  gap: clamp(12px, calc(-100px + 12vw), 80px);
  padding-bottom: 0;
  flex-wrap: nowrap;
}

/* Logo */
.container-header .container-nav .navbar-brand {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-inline-end: 0;
  padding: 0;
  font-size: inherit;
}

.container-header .container-nav .navbar-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navbar 容器（包含 offcanvas） */
.container-header .container-nav .navbar {
  min-width: 0;
  padding: 0;
}

/* 桌面版 offcanvas 以 flex 方式顯示 */
@media (min-width: 992px) {
  .container-header .container-nav .navbar .offcanvas-body {
    padding: 0;
  }
}

/* 覆寫父主題 .container-header nav { margin-top: .5em } */
.container-header .container-nav nav {
  margin-top: 0;
}

/* 主選單 ul */
.container-header .metismenu.mod-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 覆寫父主題 .mod-menu > li + li { margin-left: 1.55em } */
.container-header .metismenu > .metismenu-item + .metismenu-item {
  margin-left: 0;
}

.container-header .metismenu > .metismenu-item {
  margin: 0;
  padding: 0;
}

/* 主選單項目 — <a> 連結 */
.container-header .metismenu > .metismenu-item > a {
  font-size: var(--htsprout-fs-18);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-1000);
  padding: 8px clamp(8px, calc(-10px + 2vw), 20px);
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--htsprout-transition-fast),
              color var(--htsprout-transition-fast);
}

/* 主選單項目 — <button> 展開按鈕（有子選單的項目） */
.container-header .metismenu > .metismenu-item > button.mm-toggler {
  font-size: var(--htsprout-fs-18);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-1000);
  padding: 8px clamp(8px, calc(-10px + 2vw), 20px);
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--htsprout-transition-fast),
              color var(--htsprout-transition-fast);
}

/* Hover（僅桌面版） */
@media (min-width: 992px) {
  .container-header .metismenu > .metismenu-item > a:hover,
  .container-header .metismenu > .metismenu-item > button.mm-toggler:hover {
    color: var(--htsprout-green-800);
  }
}

/* Active / Current 項目（僅桌面版） */
@media (min-width: 992px) {
  .container-header .metismenu > .metismenu-item.active > a,
  .container-header .metismenu > .metismenu-item.current > a,
  .container-header .metismenu > .metismenu-item.active > button.mm-toggler,
  .container-header .metismenu > .metismenu-item.current > button.mm-toggler {
    background-color: var(--htsprout-text-50);
    border-radius: 40px;
    color: var(--htsprout-green-800);
  }
}

/* Chevron icon (metismenu toggler arrow) — 覆寫父主題 CSS 三角形 */
.container-header .metismenu .mm-toggler::after {
  border: none;
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-inline-start: 4px;
  transition: transform 0.3s ease;
}

.container-header .metismenu .mm-toggler[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}


/* ── 5. 登入按鈕區域（.container-search） ── */
.container-header .container-nav .container-search {
  margin-inline-start: auto;
  margin-top: 0;
  flex-shrink: 0;
}

/* 登入按鈕（實際是 .horizon-nav-col__title > a） */
.container-header .container-search .horizon-nav {
  margin: 0;
}

.container-header .container-search .horizon-nav-col {
  margin: 0;
  padding: 0;
}

.container-header .container-search .horizon-nav-col__title {
  margin: 0;
  font-size: inherit;
}

.container-header .container-search .horizon-nav-col__title a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--htsprout-blue-800);
  color: var(--htsprout-text-50);
  border-radius: var(--htsprout-radius-btn);
  height: 40px;
  padding: 5px 12px;
  font-size: var(--htsprout-fs-14);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--htsprout-transition-fast);
}

.container-header .container-search .horizon-nav-col__title a:hover {
  background-color: var(--htsprout-blue-700);
  color: var(--htsprout-text-50);
}

/* ============================================
   Header 平板／手機版覆寫
   ============================================ */
@media (max-width: 991.98px) {
  /* header padding：四邊 20px */
  header {
    padding: 20px;
  }

  /* 覆寫父主題 template.css 對 ≤991.98px 強制 position: relative !important，
     恢復 sticky header 行為（僅在後台啟用時生效，由 index.php 條件加入 class） */
  .container-header.position-sticky {
    position: sticky !important;
    top: 0;
    z-index: 1020;
  }

  /* Logo 手機版尺寸 */
  .container-header .container-nav .navbar-brand {
    width: 64px;
    height: 64px;
  }

  /* container-search 靠右 */
  .container-header .container-nav .container-search {
    margin-inline-start: auto;
  }

  /* navbar 排在最右（漢堡按鈕在登入按鈕右側） */
  .container-header .container-nav > .navbar {
    order: 1;
  }

  /* container-nav gap：12px */
  .container-header .container-nav {
    gap: 12px;
  }

  /* 主選單：改為垂直 (offcanvas 內) */
  .container-header .metismenu.mod-list {
    flex-direction: column;
    gap: 0;
  }

  /* 漢堡選單按鈕 */
  .container-header .navbar-toggler {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--htsprout-blue-100);
    border-radius: var(--htsprout-radius-btn);
    background-color: transparent;
    color: var(--htsprout-text-1000);
    flex-shrink: 0;
    transition: border-color var(--htsprout-transition-fast),
                background-color var(--htsprout-transition-fast);
  }

  .container-header .navbar-toggler:hover {
    background-color: var(--htsprout-blue-50);
    border-color: var(--htsprout-blue-200);
  }

  .container-header .navbar-toggler:focus {
    outline: 3px solid var(--focus-color, var(--htsprout-blue-700));
    outline-offset: 2px;
    box-shadow: none;
  }

  .container-header .navbar-toggler .icon-menu {
    font-size: 1.5rem;
    color: var(--htsprout-text-1000);
  }
}

/* ============================================
   12. 麵包屑導航樣式
   ============================================ */

/* 麵包屑容器 */
.mod-breadcrumbs__wrapper {
  background: transparent;
  border-bottom: none;
}

.mod-breadcrumbs.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  list-style: none;
  background: transparent;
}

/* 首頁圖示 */
.breadcrumb-home-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* 分隔符 */
.mod-breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.breadcrumb-separator-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* 麵包屑項目 */
.mod-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mod-breadcrumbs__item::before {
  /* 移除 Bootstrap 預設的分隔符 */
  content: none !important;
  display: none !important;
}

.mod-breadcrumbs .breadcrumb-item+.breadcrumb-item {
  padding-left: 0;
}

/* 麵包屑連結 */
.mod-breadcrumbs__item a.pathway {
  display: inline-flex;
  align-items: center;

  color: var(--htsprout-secondary);
  text-decoration: none;
  transition: color var(--htsprout-transition-base);
}

.mod-breadcrumbs__item a.pathway:hover {
  color: var(--htsprout-primary);
  text-decoration: underline;
}

.mod-breadcrumbs__item a.pathway:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* 當前頁面（最後一項） */
.mod-breadcrumbs__item.active {
  color: var(--htsprout-green-500);
}

.mod-breadcrumbs__item.active [aria-current="page"] {
  font-weight: var(--htsprout-fw-medium);
}

/* 「您在這裡」文字 */
.mod-breadcrumbs__here {
  padding-right: var(--htsprout-spacing-xs);
  color: var(--htsprout-text-light);
  font-size: 0.875rem;
}

/* 響應式 */
@media (max-width: 768px) {
  .mod-breadcrumbs.breadcrumb {
    padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
    font-size: 0.875rem;
  }

  .breadcrumb-home-icon {
    width: 20px;
    height: 20px;
  }

  .breadcrumb-separator-icon {
    width: 16px;
    height: 16px;
  }

  .mod-breadcrumbs__separator {
    padding: 0;
  }
}

/* ============================================
   13. 頁面標題區 (Page Header) Grid Layout
   ============================================ */

/* Grid area 對應 */
.container-page-header {
  grid-area: page-header;
  overflow: hidden;
}

/* 左右欄佈局（有文章標題/圖片時啟用） */
.page-header-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--htsprout-spacing-md);
  width: 100%;
}

@media (min-width: 768px) {
  .page-header-columns {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
}

/* 左欄：breadcrumbs + 標題 + meta */
.page-header__left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.page-header__left .page-header h1,
.page-header__left .page-header h2 {
  margin-bottom: 0;
  font-size: var(--htsprout-fs-56);
  line-height: 1.5;
  color: var(--htsprout-green-500);
}

/* 右欄：圖片 */
.page-header__right {
  min-width: 0;
}

.page-header__right .item-image {
  margin: 0;
  float: none;
}

.page-header__right .item-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   mod_articles 項目編號
   ============================================ */
.mod-articles-items {
  counter-reset: articles;
}

.mod-articles-items .mod-articles-link::before {
  counter-increment: articles;
  content: counter(articles) ". ";
}

/* mod_articles「最新消息」佈局：不顯示編號 */
.mod-articles-latest-news .mod-articles-link::before {
  counter-increment: none;
  content: none;
}

/* mod_articles「最新消息」閱讀全文連結 */
.mod-articles-latest-news .readmore a.btn {
  color: var(--htsprout-gray-light);
  text-decoration: none;
  transition: color var(--htsprout-transition-base);
}

.mod-articles-latest-news .readmore a.btn:hover,
.mod-articles-latest-news .readmore a.btn:focus {
  color: var(--htsprout-text-50);
  text-decoration: none;
}

.mod-articles-latest-news .readmore [class*="icon-chevron"] {
  display: none;
}

/* mod_articles「檔案下載」佈局：不顯示編號 */
.mod-articles-file-download .mod-articles-link::before {
  counter-increment: none;
  content: none;
}

/* mod_articles「檔案下載」閱讀全文連結 */
.mod-articles-file-download .readmore a.btn {
  color: var(--htsprout-gray-light);
  text-decoration: none;
  transition: color var(--htsprout-transition-base);
}

.mod-articles-file-download .readmore a.btn:hover,
.mod-articles-file-download .readmore a.btn:focus {
  color: var(--htsprout-text-50);
  text-decoration: none;
}

.mod-articles-file-download .readmore [class*="icon-chevron"] {
  display: none;
}

/* mod_articles「檔案下載」點擊下載按鈕 */
.mod-articles-download-btn {
  margin-top: 0.5rem;
}

.mod-articles-download-btn .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mod-articles-download-icon {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* mod_articles「最新消息」查看更多按鈕 */
.mod-articles-more {
  margin-top: var(--htsprout-spacing-md);
}

.mod-articles-more__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--htsprout-text-50);
  color: var(--htsprout-green-800);
  border: 1px solid var(--htsprout-green-200);
  border-radius: 5px;
  text-decoration: none;
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  transition: gap var(--htsprout-transition-fast),
              background-color var(--htsprout-transition-fast),
              color var(--htsprout-transition-fast);
}

.mod-articles-more__link:hover {
  background: var(--htsprout-text-50);
  color: var(--htsprout-green-700);
  text-decoration: none;
  gap: 12px;
}

.mod-articles-more__link:active {
  background: var(--htsprout-text-100);
  color: var(--htsprout-green-700);
  gap: 12px;
}

.mod-articles-more__link:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.mod-articles-more__link[aria-disabled="true"],
.mod-articles-more__link.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* 垂直分隔線 */
.mod-articles-more__divider {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--htsprout-green-200);
  flex-shrink: 0;
}

/* 箭頭圖示 */
.mod-articles-more__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ============================================
   Footer 多欄佈局
   ============================================ */

.footer {
  position: relative;
  margin-top: 0;
  padding: 92px 60px 0;
  background: var(--htsprout-green-700, #195E7B);
}

.footer .grid-child {
  padding: 0;
  align-items: stretch;
  max-width: 1593px;
}

@media (max-width: 1439.98px) {
  .footer .grid-child {
    max-width: 1195px;
  }
}
@media (max-width: 991.98px) {
  .footer {
    padding: 60px 60px 0;
  }
}

@media (max-width: 767.98px) {
  .footer {
    padding: 60px 35px 0;
  }
}

/* 回到頁首按鈕：覆寫 Cassiopeia 的 fixed 定位，改為 footer 內靜態顯示 */
/* 使用 .footer a 提高權重，覆蓋父主題 .footer a:not(.btn){color:currentColor} */
.footer a.back-to-top-link {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 50%;
  right: unset;
  bottom: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 32px 16px;
  opacity: 1;
  border: none;
  border-radius: 90px;
  color: var(--htsprout-green-500, #437f95);
  background-color: var(--htsprout-text-50, #fff);
  box-shadow: 0px 11px 34px rgba(13, 88, 102, 0.5);
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-semibold);
  line-height: 1.4;
  letter-spacing: -0.32px;
  text-decoration: none;
  min-height: 135px;
  margin: 0 auto;
  transform: translate(-50%, -46px);
  aspect-ratio: 1;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.footer a.back-to-top-link:hover,
.footer a.back-to-top-link:focus {
  background-color: var(--htsprout-green-500, #437f95);
  color: var(--htsprout-text-50, #fff);
  box-shadow: 0px 11px 34px rgba(13, 88, 102, 0.7);
}

/* 回到頁首按鈕：圖示外圈容器 */
.back-to-top-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--htsprout-green-500, #437f95);
  border-radius: 50%;
}

.back-to-top-icon {
  width: 24px;
  height: 24px;
}

.back-to-top-link:hover .back-to-top-icon-wrapper,
.back-to-top-link:focus .back-to-top-icon-wrapper {
  border-color: var(--htsprout-text-50, #fff);
}

.back-to-top-link:hover .back-to-top-icon path,
.back-to-top-link:focus .back-to-top-icon path {
  stroke: var(--htsprout-text-50, #fff);
}

/* footer-top 區塊 */
.container-footer-top {
  border-bottom: none;
}

.container-footer-top img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* footer 主區域雙欄 */
.container-footer-main {
  padding: 32px 0;
}

.footer-columns {
  display: flex;
  gap: 20px;
}

.footer-col-left {
  flex: 0 0 336px;
  width: 336px;
}

.footer-col-right {
  flex: 1;
  padding: 16px 0   ;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.footer-left h3 {
  font-size: var(--htsprout-fs-40);
  font-weight: var(--htsprout-fw-bold);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-50);
  margin: 0;
}

.mod-custom-social-links .mod-custom-content {
  margin-bottom: 36px;
}

.mod-custom-social-links .mod-custom-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--htsprout-fs-14);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-50);
  white-space: nowrap;
}

/* 社群連結 (mod_custom social-links layout) */
.social-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--htsprout-text-50, #fff);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--htsprout-transition-base, 0.3s);
}

.social-links-link:hover {
  background-color: var(--htsprout-text-50, #fff);
}

.social-links-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter var(--htsprout-transition-base, 0.3s);
}

.social-links-link:hover .social-links-icon {
  filter: none;
}

/* copyright 列 */
.container-copyright {
  background: var(--htsprout-green-700, #195E7B);
  color: var(--htsprout-text-50);
  padding: 0 60px 85px;
}

@media (max-width: 991.98px) {
  .container-copyright {
    padding: 0 60px 80px;
  }
}

@media (max-width: 767.98px) {
  .container-copyright {
    padding: 0 35px 60px;
  }
}

.container-copyright a {
  color: currentColor;
}

.container-copyright a:hover,
.container-copyright a:focus {
  color: var(--gray-200);
}

.copyright-columns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 0;
  gap: 42px;
  border-top: 1px solid var(--Primary_green-400, #6CA0AF);
  max-width: 1593px;
}

.copyright-col-left {
  flex-shrink: 0;
}

.copyright-col-right {
  display: flex;
  flex-direction: row;
  gap: 2.625rem;
  flex-shrink: 0;
  text-align: end;
}
.copyright-columns nav {
  display: flex;
  align-items: center;
}
.copyright-columns nav .horizon-nav {
  gap: 2.625rem;
}

@media (max-width: 767.98px) {
  .copyright-columns nav .horizon-nav {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.copyright-columns .horizon-nav-col__title {
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  color: var(--htsprout-text-50);
  margin: 0;
}

/* 手機版：堆疊排列 */
@media (max-width: 991.98px) {
  .footer-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-col-left {
    flex: 1 1 auto;
    width: 100%;
  }
}
@media (max-width: 1139.98px) {
  .copyright-columns {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .copyright-col-right {
    flex-direction: column;
    text-align: left;
    gap: 0.75rem;
  }
}

/* Footer 導航多欄佈局 (mod_menu footer-columns 模板) */
.horizon-nav {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.horizon-nav-col {
  flex: auto;
}

.horizon-nav-col__title {
  font-size: var(--htsprout-fs-20);
  font-weight: var(--htsprout-fw-medium);
  margin-bottom: 11px;
  color: var(--htsprout-text-50);
}

.horizon-nav-col__title a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.horizon-nav-col__title a:hover {
  text-decoration: underline;
}

.horizon-nav-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.horizon-nav-col__list li {
  margin-bottom: 0.375rem;
}

.horizon-nav-col__list a {
  color: var(--htsprout-text-50);
  text-decoration: none;
  transition: color var(--htsprout-transition-base, 0.3s);
}

.horizon-nav-col__list a:hover {
  color: var(--htsprout-text-50);
  text-decoration: underline;
}

.horizon-nav-col__list a:focus {
  outline: 3px solid var(--focus-color, #0d6efd);
  outline-offset: 2px;
}

/* Footer 頁尾選單項目間距及位置修正 */
.footer .footer-col-right nav {
  width: fit-content;
  margin: 0 auto;
}

.footer .container-footer-main .horizon-nav-col {
  flex: none;
  width: 95px;
}

@media (max-width: 991.98px) {
  .footer .container-footer-main .horizon-nav-col {
    width: 92px;
  }
}

@media (max-width: 767.98px) {
  .footer .container-footer-main .horizon-nav-col {
    width: auto;
  }
}

/* Footer 選單 menu_image 圖示支援 */
.horizon-nav-col__title a,
.horizon-nav-col__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px：圖示與文字間距 */
}

.horizon-nav-col img {
  width: 1rem;  /* 16px */
  height: 1rem; /* 16px */
  object-fit: contain;
  flex-shrink: 0;
}

/* 手機版：欄位堆疊 */
@media (max-width: 991.98px) {
  .horizon-nav {
    flex-wrap: wrap;
  }
}

/* ============================================
   Offcanvas 行動版側滑選單
   ============================================ */

/* Offcanvas Header */
.offcanvas-header {
  border-bottom: 1px solid var(--htsprout-border);
}

.offcanvas-title {
  font-weight: 600;
  color: var(--htsprout-secondary);
}

.offcanvas .btn-close:focus {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* offcanvas 模組區塊 */
.offcanvas-modules--top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 0;
}

/* offcanvas 內的 nav：全寬獨佔一行 */
.offcanvas-modules--top > nav {
  width: 100%;
}

/* offcanvas 內的工具列：flex 佈局 + 右側分隔線 */
.offcanvas-modules--top .accessibility-toolbar {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 分隔線：右側（工具列與搜尋列之間） */
.offcanvas-modules--top .accessibility-toolbar::after {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background-color: var(--htsprout-text-400);
  flex-shrink: 0;
}

/* 隱藏左側分隔線 */
.offcanvas-modules--top .accessibility-toolbar::before {
  display: none;
}

.offcanvas-modules--top .accessibility-toolbar .container-xxl {
  max-width: none;
  padding: 0;
}

/* offcanvas 字體按鈕：圓形 32×32 */
.offcanvas-modules--top .font-size-btn {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: var(--htsprout-fs-14);
  font-weight: var(--htsprout-fw-regular);
  letter-spacing: -0.28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--htsprout-green-400);
  color: var(--htsprout-text-50);
}

.offcanvas-modules--top .font-size-btn.active {
  background: var(--htsprout-green-400);
  color: var(--htsprout-text-50);
}

.offcanvas-modules--top .font-size-btn:hover {
  background: var(--htsprout-green-600);
}

/* 展開狀態 */
.offcanvas-modules--top .font-adjuster-group.is-expanded {
  gap: 4px;
}

.offcanvas-modules--top .font-adjuster-group.is-expanded .font-size-btn:not(.active) {
  background: transparent;
  color: var(--htsprout-text-1000);
  border: 1px solid var(--htsprout-text-400);
}

.offcanvas-modules--top .font-adjuster-group.is-expanded .font-size-btn:not(.active):hover {
  background: var(--htsprout-green-50);
}

/* offcanvas 搜尋元素 */
.offcanvas-modules--top search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.offcanvas-modules--top .mod-finder {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  color: var(--htsprout-text-1000);
  background: var(--htsprout-text-50);
}

.offcanvas-modules--top .mod-finder__search.input-group {
  height: 40px;
  border: 1px solid #c2c2c2;
  border-radius: var(--htsprout-radius-md);
  overflow: hidden;
  flex-wrap: nowrap;
  align-items: center;
}

.offcanvas-modules--top .js-finder-search-query.form-control {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 12px;
  font-size: var(--htsprout-fs-14);
  color: var(--htsprout-text-1000);
  background: var(--htsprout-text-50);
}

.offcanvas-modules--top .js-finder-search-query.form-control:focus {
  box-shadow: none;
  outline: none;
}

.offcanvas-modules--top .js-finder-search-query.form-control::placeholder {
  font-size: var(--htsprout-fs-14);
  color: var(--htsprout-text-400);
}

.offcanvas-modules--top .mod-finder__search .btn {
  background: transparent;
  border: none;
  padding: 0 12px;
  color: var(--htsprout-text-1000);
  display: flex;
  align-items: center;
}

.offcanvas-modules--top .mod-finder__search .btn .icon-white {
  color: var(--htsprout-text-1000);
}

.offcanvas-modules--top .mod-finder__search.input-group .awesomplete input {
  background: transparent;
}

/* offcanvas 內的搜尋 fallback：填滿剩餘空間，允許縮小 */
.offcanvas-modules--top .mod-search {
  min-width: 0;
}

.offcanvas .awesomplete {
  flex: 1;
}

.offcanvas .awesomplete > input {
  max-width: 100%;
}

.offcanvas-modules--bottom {
  padding: 0;
  text-align: right;
}

.offcanvas .horizon-nav-col__title {
  margin-bottom: 0;
}

/* offcanvas 底部「會員登入」按鈕樣式，對齊 Figma 設計稿與桌面版 */
.offcanvas-modules--bottom .horizon-nav-col__title a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--htsprout-blue-800);
  color: var(--htsprout-text-50);
  border-radius: var(--htsprout-radius-btn);
  height: 40px;
  padding: 5px 12px;
  font-size: var(--htsprout-fs-14);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--htsprout-transition-fast);
}

.offcanvas-modules--bottom .horizon-nav-col__title a:hover {
  background-color: var(--htsprout-blue-700);
  color: var(--htsprout-text-50);
}

.offcanvas-modules--top > nav,
.offcanvas-modules--bottom > nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

/* offcanvas 內的 nav 連結字級 */
.offcanvas-modules--top > nav a,
.offcanvas-modules--bottom > nav a {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 20px;
  font-size: 1rem;
  font-weight: var(--htsprout-fw-regular);
  line-height: 1.5;
  text-decoration: none;
}

/* offcanvas 內所有 nav 連結文字顏色 */
.offcanvas nav a {
  color: var(--htsprout-text-1000);
  text-decoration: none;
}

.offcanvas nav a:hover {
  color: var(--htsprout-green-800);
  text-decoration: none;
}

/* 桌面版：offcanvas-lg 內聯時移除面板樣式 */
@media (min-width: 992px) {
  .offcanvas-lg .offcanvas-body {
    padding: 0;
  }
}

/* 無障礙：高對比模式 */
@media (prefers-contrast: high) {
  .offcanvas {
    border-width: 3px;
  }
}

/* 無障礙：減少動畫 */
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none !important;
  }
}

/* ============================================
   Offcanvas 行動版 Accordion 選單
   覆寫 Cassiopeia 的 dropdown 定位為垂直展開
   僅影響 <992px（offcanvas 面板模式）
   ============================================ */
@media (max-width: 991.98px) {

  /* --- 1. 基礎：覆寫 dropdown 定位 --- */
  .offcanvas-body .metismenu.mod-menu .mm-collapse {
    position: relative;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    background-color: transparent;
    border: none;
    padding: 0;
  }

  /* --- 2. 選單項目：全寬 accordion 行 --- */
  .offcanvas-body .metismenu.mod-menu .metismenu-item {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .offcanvas-body .metismenu.mod-menu > .metismenu-item {
    border-bottom: 1px solid var(--htsprout-text-200);
  }

  .offcanvas-body .metismenu.mod-menu > .metismenu-item:last-child {
    border-bottom: none;
  }

  /* 連結 / heading 按鈕：佔滿左側空間，文字靠左 */
  .offcanvas-body .metismenu.mod-menu .metismenu-item > a,
  .offcanvas-body .metismenu.mod-menu .metismenu-item > button.mm-toggler-nolink {
    flex: 1;
    padding: 8px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    color: var(--htsprout-text-1000);
    line-height: 1.5;
    text-decoration: none;
    font-size: var(--htsprout-fs-24);
    font-weight: var(--htsprout-fw-medium);
  }

  .offcanvas-body .metismenu.mod-menu .metismenu-item > a:hover,
  .offcanvas-body .metismenu.mod-menu .metismenu-item > a:focus,
  .offcanvas-body .metismenu.mod-menu .metismenu-item > button.mm-toggler-nolink:hover,
  .offcanvas-body .metismenu.mod-menu .metismenu-item > button.mm-toggler-nolink:focus {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
  }

  /* --- 3. Toggler 按鈕：右側 chevron 區塊 --- */
  .offcanvas-body .metismenu.mod-menu button.mm-toggler {
    width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }

  .offcanvas-body .metismenu.mod-menu button.mm-toggler:hover {
    background-color: transparent;
  }

  .offcanvas-body .metismenu.mod-menu button.mm-toggler:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: -3px;
  }

  /* 覆寫 Cassiopeia 預設的 CSS 三角形 → chevron */
  .offcanvas-body .metismenu.mod-menu button.mm-toggler::after {
    border: none;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    margin-inline-start: 0;
    transition: transform 0.3s ease;
  }

  .offcanvas-body .metismenu.mod-menu button.mm-toggler[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  /* --- 4. 子選單展開區域背景 --- */
  .offcanvas-body .metismenu.mod-menu .mm-collapse.mm-show,
  .offcanvas-body .metismenu.mod-menu .mm-collapse.mm-collapsing {
    width: 100%;
  }

  .offcanvas-body .metismenu.mod-menu .mm-collapse.mm-show {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* --- 5. 子層縮排 --- */
  .offcanvas-body .metismenu.mod-menu .mm-collapse > .metismenu-item > a {
    padding: 0 20px;
    font-size: var(--htsprout-fs-18);
    font-weight: var(--htsprout-fw-regular);
    color: var(--htsprout-text-1000);
    line-height: 1.5;
    text-indent: 4.25rem;
  }

  /* 第三層 */
  .offcanvas-body .metismenu.mod-menu .mm-collapse .mm-collapse > .metismenu-item > a {
    padding: 0 20px;
    font-size: var(--htsprout-fs-18);
    color: var(--htsprout-text-1000);
    line-height: 1.5;
    text-indent: 5.5rem;
  }

  /* 子層項目分隔線 */
  .offcanvas-body .metismenu.mod-menu .mm-collapse > .metismenu-item {
    border-bottom: 1px solid var(--htsprout-text-200);
  }

  .offcanvas-body .metismenu.mod-menu .mm-collapse > .metismenu-item:last-child {
    border-bottom: none;
  }

  /* --- 6. 當前/活躍項目高亮 --- */
  .offcanvas-body .metismenu.mod-menu .metismenu-item.active > a,
  .offcanvas-body .metismenu.mod-menu .metismenu-item.current > a {
    color: var(--htsprout-green-800);
    font-weight: 600;
  }

  /* --- 7. 展開/收合動畫 --- */
  .offcanvas-body .metismenu.mod-menu .mm-collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }
}

/* Offcanvas accordion：減少動畫 */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-body .metismenu.mod-menu .mm-collapsing,
  .offcanvas-body .metismenu.mod-menu button.mm-toggler::after {
    transition: none;
  }
}

/* --- 修正：offcanvas 面板頂部縫隙 ---
   Bootstrap 預設 background-clip: padding-box 可能導致背景
   在邊緣出現亞像素渲染間隙，露出下方 header 深藍色背景。
   覆寫為 border-box 確保背景完全填滿元素邊界。
   同時固定 font-size 為基礎值，隔離 body font-size 變更的 reflow 影響。
   header/工具列的 --font-size-scale 重設為 1，防止 UI 外框放大。
   選單文字仍可縮放（--font-size-scale 從 body 正常繼承到 .metismenu）。
   --------------------------------------------------- */
@media (max-width: 991.98px) {
  .offcanvas.offcanvas-end {
    border-left: none;
  }

  /* 毛玻璃效果（Fallback：不支援 backdrop-filter 的瀏覽器） */
  .offcanvas {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.1);
  }

  /* 毛玻璃效果（支援 backdrop-filter 的瀏覽器） */
  @supports (backdrop-filter: blur(1px)) {
    .offcanvas {
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
    }
  }

  /* 遮罩層透明化，視覺遮蔽由毛玻璃效果本身取代 */
  .offcanvas-backdrop {
    background-color: transparent;
  }

  /* offcanvas body 佈局：flex column 排列各區塊，間距由子元素 margin-bottom 控制 */
  .offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 50px 20px;
  }

  .offcanvas .offcanvas-body > .offcanvas-modules--top {
    margin-bottom: 13px;
  }

  .offcanvas .offcanvas-body > nav {
    margin-bottom: 13px;
  }

  .offcanvas .offcanvas-body > .offcanvas-modules--bottom {
    margin-bottom: 0;
    padding: 0 20px;
  }

  /* 主選單容器 padding */
  .offcanvas-body .metismenu.mod-menu {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .offcanvas .horizon-nav {
    gap: 12px;
  }
}

/* 手機版（< 768px）：offcanvas 區塊間距加大 */
@media (max-width: 768px) {
  .offcanvas .offcanvas-body > .offcanvas-modules--top,
  .offcanvas .offcanvas-body > nav {
    margin-bottom: 40px;
  }
}

.offcanvas {
  font-size: var(--font-size-base, 16px);
}

.offcanvas .offcanvas-header,
.offcanvas .offcanvas-modules--top {
  --font-size-scale: 1;
}

/* ============================================
   子分類篩選器（公用元件）
   ============================================ */

.eb-category-filter,
.subcategory-filter {
  overflow-x: auto;
  margin-bottom: 10px;
  padding: 5px 20px 0;         /* 上方 5px 給 focus outline 空間 */
  position: relative;
  z-index: 3;                   /* 高於波浪裝飾 ::before 的 z-index: 1 */
}

.eb-category-filter .btn-group,
.subcategory-filter .btn-group {
  gap: 12px;
  margin-bottom: 10px;
}

/* 基礎樣式 — 特異性 (0,3,0) */
.eb-category-filter .btn-group .btn,
.subcategory-filter .btn-group .btn {
  border: none;
  padding: 8px 16px;
  min-height: auto;
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  background: var(--htsprout-blue-100);
  color: var(--htsprout-text-1000);
  white-space: nowrap;
  text-align: center;
  transition: background-color var(--htsprout-transition-base), color var(--htsprout-transition-base);
}

/* 圓角覆寫 — 特異性 (0,4,0)，打贏 Bootstrap btn-group 的圓角清除規則 */
.eb-category-filter .btn-group .btn[class],
.subcategory-filter .btn-group .btn[class] {
  border-radius: var(--htsprout-radius-md);
}

.eb-category-filter .btn-group .btn:hover,
.subcategory-filter .btn-group .btn:hover {
  background: var(--htsprout-blue-200);
  color: var(--htsprout-text-1000);
}

.eb-category-filter .btn-group .btn.active,
.subcategory-filter .btn-group .btn.active {
  background: var(--htsprout-blue-500);
  color: var(--htsprout-text-50);
  font-weight: var(--htsprout-fw-medium);
}

/* ============================================
   FAQ Accordion 手機版（≤ 768px）
   ============================================ */
@media (max-width: 768px) {
  /* 容器 — 維持 row + wrap，覆蓋 news.css 的通用 flex-direction: column */
  .news-layout-accordion .news-item--accordion {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 20px;
    padding: 20px;
  }

  .news-layout-accordion .news-item--accordion.news-item--expanded {
    gap: 20px 16px;
  }

  /* header-row — 確保 badge + title 同行不換行 */
  .news-layout-accordion .news-item__header-row {
    gap: 16px;
  }

  /* 標題 — flex: 1 0 0 讓標題填滿剩餘空間、自動換行 */
  .news-layout-accordion .news-item__header-row .news-item__title {
    flex: 1 0 0;
    font-size: var(--htsprout-fs-18);
    font-weight: var(--htsprout-fw-medium);
    line-height: var(--htsprout-lh-150);
    color: var(--htsprout-text-1000);
  }

  /* 分類 badge */
  .news-layout-accordion .news-item__category {
    padding: 10px 12px;
    border-radius: 50px;
    font-size: var(--htsprout-fs-14);
    font-weight: var(--htsprout-fw-regular);
    line-height: calc(20 / 14);
  }

  /* Chevron toggle */
  .news-layout-accordion .news-item__toggle {
    width: 24px;
    height: 24px;
    align-self: flex-start;
  }

  /* 展開面板文字 */
  .news-layout-accordion .news-item__panel {
    font-size: var(--htsprout-fs-16);
    font-weight: var(--htsprout-fw-regular);
    line-height: var(--htsprout-lh-150);
    color: var(--htsprout-text-1000);
  }
}

/* ============================================
   FAQ Accordion 平板版（769px – 991.98px）
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* 容器 — 水平間距加大為 40px（Figma w768 設計稿） */
  .news-layout-accordion.news-list {
    padding: 0 40px;
  }

  /* 篩選器 — 同步水平間距 */
  .eb-category-filter,
  .subcategory-filter {
    padding: 5px 40px 0;
  }
}

/* ============================================
   分頁元件
   ============================================ */

/* --- 分頁列表 --- */
.com-content-category-news__navigation .pagination {
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

/* --- 所有頁碼／導航按鈕共用 --- */
.com-content-category-news__navigation .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--htsprout-fs-16);
  font-weight: 400;
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-800);
  border-radius: 30px;
  transition: background 0.2s, color 0.2s;
}

/* --- Hover 狀態 --- */
.com-content-category-news__navigation .page-link:hover {
  background: var(--htsprout-text-100);
  color: var(--htsprout-text-800);
}

/* --- Active 頁碼 --- */
.com-content-category-news__navigation .page-item.active .page-link {
  background: var(--htsprout-blue-800);
  color: var(--htsprout-text-50);
  border-radius: 8px;
  border: none;
}

/* --- Disabled 狀態 --- */
.com-content-category-news__navigation .page-item.disabled .page-link {
  background: transparent;
  color: var(--htsprout-text-400);
  opacity: 0.5;
  border: none;
}

/* --- 導航箭頭按鈕 --- */
.com-content-category-news__navigation .page-item:first-child .page-link,
.com-content-category-news__navigation .page-item:nth-child(2) .page-link,
.com-content-category-news__navigation .page-item:nth-last-child(2) .page-link,
.com-content-category-news__navigation .page-item:last-child .page-link {
  border-radius: 3px;
}