@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;
}
.navi-item ul li .dropdown-menu a {
 color: #212529!important;
}
nav.navbar:not(.tholos-navbar) a:hover {
  color: var(--brand-gold) !important;
}
.navi-item ul li .dropdown-menu 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;
}

/* ---------- Podcast 首頁區塊：有封面圖時關掉麥克風佔位符 ----------
   主題預設 .voice-row .audio-image::before 會畫一個麥克風圖示當佔位符，
   設計是「沒封面圖時顯示」。但有圖時它沒被蓋掉，會疊在封面上。
   用 :has(img) 選「內含封面圖的項目」，把佔位符關掉；沒圖的項目保留麥克風。
   放在主題 CSS（@layer）故用 !important 蓋過主題本身的 ::before 規則。 */
#index-podcast .voice-row .audio-image:has(img)::before {
  display: none !important;
  content: none !important;
}

/* ---------- Podcast 首頁區塊：縮圖固定 150×150 正方形 ----------
   主題只鎖寬(max-width:150px)配 min-height:150px，圖高度 auto，
   非正方形原圖或殘留舊樣式(120px)會變形成 120×150。
   直接鎖死正方形並用 object-fit:cover 置中裁切。 */
#index-podcast .voice-row .audio-image {
  width: 150px !important;
  height: 150px !important;
  min-height: 150px !important;
  overflow: hidden !important;
}
#index-podcast .voice-row .audio-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ============================================
   導覽列 Header：手機版（.mobile-menu）
   ---------------------------------------------
   PC 版導覽列是 nav.navbar，手機版是另一個完全獨立的元件 .mobile-menu
   （views/front/common/menu_mobile.php），上面那組深藍規則選不到它，
   所以手機版一直維持主題預設的「白底 + 綠色站名」，跟 PC 版撞色。

   主題斷點：≤992px 顯示 .mobile-menu（並隱藏 nav.navbar），
   ≥993px 則反過來（.mobile-menu 是 display:none;height:0）。
   因此下面改排版的規則必須包在 max-width:992px 裡，
   否則 display:flex !important 會在桌機蓋掉 display:none。
   （純顏色的規則不受此限，桌機本來就看不到這個元件。）
   ============================================ */
.mobile-menu {
  background-color: var(--brand-navy) !important;
  border-bottom: 1px solid var(--brand-navy-dark);
}

/* 站名文字（純文字 logo）與右側 icon（搜尋／會員／購物車，含購物車數字） */
.mobile-menu .mobile-logo .logo-text,
.mobile-menu .mobile-logo a,
.mobile-menu .mobile-btn a,
.mobile-menu .mobile-btn a span {
  color: #FFFFFF !important;
}

/* 漢堡選單三條線：主題預設接近黑色，在深藍底上看不清楚。
   （側邊抽屜打開時漢堡鈕仍在頂部深藍列上，白線依舊可讀，實測確認。） */
.mobile-menu .hamburger .line {
  background-color: #FFFFFF !important;
}

/* ---------- 手機版排版修正（只在手機斷點內生效） ----------
   主題原本用 float 排版：站名 float:left、右側 icon float:right。
   站名一長（「路老闆有限公司」1.5rem）就把 icon 擠到第二行，
   而頂列固定 67px 高且 overflow:hidden → 整排 icon 被裁掉、也點不到。
   改成 flex 單行排版：漢堡固定寬、站名彈性且過長以「…」截斷、
   icon 固定寬永遠留在同一行，三者垂直置中。
   注：本檔被包在 @layer 裡，優先權低於未分層的主題 CSS，
   所以「主題有設值的屬性」（float / padding / font-size）必須帶 !important，
   主題沒設的（flex / min-width / text-overflow）則不需要。 */
@media all and (max-width: 992px) {
  .mobile-menu.left-style {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .mobile-menu.left-style .hamburger {
    float: none !important;
    margin-top: 0 !important;
    flex: 0 0 auto;
  }
  .mobile-menu.left-style .mobile-logo {
    float: none !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .mobile-menu.left-style .mobile-logo .logo-text {
    display: block;
    font-size: 1.25rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-menu.left-style .mobile-btn {
    float: none !important;
    flex: 0 0 auto;
    white-space: nowrap;
    padding-right: 12px !important;
  }
}

/* 窄螢幕（360px 等 Android 常見寬度）：站名字級再降一階，
   讓「路老闆有限公司」七字完整顯示不被「…」截掉。 */
@media all and (max-width: 380px) {
  .mobile-menu.left-style .mobile-logo .logo-text {
    font-size: 1.1rem !important;
  }
}

}