@layer theme-custom {
/* ============================================
   aten.vip 全站配色樣式
   Compassio 品牌色系：深藍為主，沉穩專業
   ============================================ */

:root {
  --brand-navy: #1E3A5F;
  --brand-navy-dark: #142943;
  --brand-navy-light: #2C4F7C;
  --brand-gold: #E8A53A;
  --brand-gold-dark: #C98A22;
  --brand-red: #C54B3C;
  --text-body: #2A2E35;
  --text-muted: #6B7280;
  --bg-page: #F7F8FA;
  --bg-card: #FFFFFF;
  --border-soft: #E5E7EB;
}

/* ---------- 導覽列 Header ---------- */
/* nav.navbar 本身其實是置中的固定寬度容器（例如 1140px），不是滿版。
   用 box-shadow 撐出視覺上的滿版背景，不影響版面本身的寬度/排版。
   :not(.tholos-navbar)：討論區（tholos）導覽列沿用同樣的 .navbar class，
   但它是白底自成一格的元件，不該被站方深藍配色連帶套進去，故排除。 */
nav.navbar:not(.tholos-navbar) {
  background-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 100vmax var(--brand-navy) !important;
  clip-path: inset(0 -100vmax);
  border-bottom: 1px solid var(--brand-navy-dark);
}

/* 修正：導覽列裡的 register/login/購物車那排（.navi-item 第一排）原本有自己的
   綠色背景（theme 預設 rgb(85,124,42)），蓋掉外層 nav 的深藍，造成上下兩截撞色。
   這裡直接把三排 .navi-item 統一改深藍，讓整條導覽列顏色一致。 */
nav.navbar:not(.tholos-navbar) .navi-item {
  background-color: var(--brand-navy) !important;
}

nav.navbar:not(.tholos-navbar) a,
nav.navbar:not(.tholos-navbar) .navbar-brand {
  color: #FFFFFF !important;
}

nav.navbar:not(.tholos-navbar) a:hover {
  color: var(--brand-gold) !important;
}

/* ---------- 頁尾 Footer ---------- */
footer {
  background-color: var(--brand-navy-dark) !important;
  color: #D7DEE8 !important;
}

footer a {
  color: #D7DEE8 !important;
}

footer a:hover {
  color: var(--brand-gold) !important;
}

/* ---------- 內文連結 ---------- */
#pjax-container a {
  color: var(--brand-navy);
}

#pjax-container a:hover {
  color: var(--brand-gold-dark);
}

/* ---------- 標題文字 ---------- */
#pjax-container h1,
#pjax-container h2,
#pjax-container h3 {
  color: var(--brand-navy);
}

/* ---------- 按鈕：主要動作（報名／購買／訂閱） ---------- */
.btn-primary,
button[type="submit"],
input[type="submit"] {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-navy-dark) !important;
  font-weight: 600;
}

.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--brand-gold-dark) !important;
  border-color: var(--brand-gold-dark) !important;
}

/* ---------- 按鈕：次要動作 ---------- */
.btn-secondary,
.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: var(--brand-navy) !important;
  color: #FFFFFF !important;
}

/* ---------- 整體背景與內文字色 ---------- */
#pjax-container {
  background-color: var(--bg-page);
  color: var(--text-body);
}

/* ---------- 卡片（活動／課程列表） ---------- */
body.b_event_list .card,
body.b_course_list .card,
body.b_product_list .card,
body.b_blog_list .card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

/* ---------- 價格 / 標籤重點色（點綴用暗紅，克制使用） ---------- */
body.b_course_intro .price,
body.b_course_detail .price,
body.b_product_detail .price {
  color: var(--brand-red) !important;
  font-weight: 700;
}

/* 活動倒數 / 限量標籤 */
.badge-urgent,
.tag-limited {
  background-color: var(--brand-red) !important;
  color: #FFFFFF !important;
}

/* ---------- 表單焦點色 ---------- */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px rgba(232, 165, 58, 0.25) !important;
}

}