/*
 * ZUZOO — Cassiopeia user.css
 * 目的：讓 Joomla 內建 Cassiopeia 看起來接近現行 Helix Ultimate（preset1）的外觀，
 *      供 2026-10 的「換模板」測試用。色票與尺寸全部取自 Helix 實際渲染值。
 * 部署位置：media/templates/site/cassiopeia/css/user.css（Cassiopeia 官方 hook，載入順序在 template.min.css 之後）
 * 預覽：https://zuzoo.tw/?templateStyle=12（不影響訪客）
 */

/* ---------- 1. 色票（Helix preset1） ---------- */
:root {
  --cassiopeia-color-primary: #0345bf;
  --cassiopeia-color-link: #0345bf;
  --cassiopeia-color-hover: #044cd0;
  --link-color: #0345bf;
  --link-color-rgb: 3, 69, 191;
  --body-color: #252525;
  --zz-dark: #171717;          /* Helix 頁尾／bottom 底色 */
  --zz-dark-link: #a2a2a2;     /* Helix 頁尾連結色 */
  --zz-header-h: 60px;
  --zz-container: 1290px;      /* 內容最大寬，對齊 .site-grid 的 1320px 扣掉邊距 */
}

body { color: #252525; }

/* Helix 標題粗細是 500，Cassiopeia 是 700 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; }

/* ---------- 2. Header：白底、60px、logo 左／選單右（Helix 3-MinimalLayout） ---------- */
header.container-header {
  background: #fff;
  background-image: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, .1);
  color: #252525;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--zz-header-h);
  padding: 0 max(15px, calc((100% - var(--zz-container)) / 2));
}
header.container-header .grid-child {
  width: auto;
  max-width: none;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
}
header.container-header .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--zz-header-h);
  margin: 0;
  padding: 0;
}
/* 自訂 logo 的 <img> 沒有 class（只有 width/height 屬性），所以直接選 img */
header.container-header .navbar-brand img {
  height: 36px;
  width: auto;
  max-width: none;
}
header.container-header .container-nav { padding-bottom: 0; }
header.container-header nav,
header.container-header .container-nav nav {
  margin-top: 0;
  padding: 0;
}
header.container-header nav.navbar { justify-content: flex-end; }

/* 第一層選單項目：Arial 14px / 500，行高撐滿 60px（Helix .sp-megamenu-parent > li > a） */
header.container-header .metismenu.mod-menu .metismenu-item.level-1 {
  padding: 0 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--zz-header-h);
}
header.container-header .metismenu.mod-menu .metismenu-item > a,
header.container-header .metismenu.mod-menu .metismenu-item > span,
header.container-header .metismenu.mod-menu .metismenu-item > button.mm-toggler {
  color: #252525;
  text-decoration: none;
}
header.container-header .metismenu.mod-menu .metismenu-item > a:hover,
header.container-header .metismenu.mod-menu .metismenu-item > a:focus,
header.container-header .metismenu.mod-menu .metismenu-item.active > a,
header.container-header .metismenu.mod-menu .metismenu-item.active > span,
header.container-header .metismenu.mod-menu .metismenu-item:hover > button.mm-toggler,
header.container-header .metismenu.mod-menu .metismenu-item > button.mm-toggler:hover,
header.container-header .metismenu.mod-menu .metismenu-item > button.mm-toggler[aria-expanded="true"] {
  color: #0345bf;
  text-decoration: none;
}
/* 拿掉 Cassiopeia 的 hover 底線動畫 */
header.container-header .metismenu > li > a:after,
header.container-header .metismenu > li > button:before,
header.container-header .mod-menu > li:after { display: none; }

/* 下拉選單（Helix .sp-dropdown：白底、240px、陰影 0 3px 5px） */
header.container-header .metismenu.mod-menu .mm-collapse {
  min-width: 240px;
  padding: 12px 0;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  border-radius: 0;
}
header.container-header .metismenu.mod-menu .mm-collapse .metismenu-item {
  padding: 8px 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
header.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a { color: #252525; }
header.container-header .metismenu.mod-menu .mm-collapse .metismenu-item > a:hover,
header.container-header .metismenu.mod-menu .mm-collapse .metismenu-item.active > a { color: #0345bf; }
/* 桌機滑過就展開（Helix 的行為）；metismenu 本身是點擊展開，兩者並存 */
@media (min-width: 992px) {
  header.container-header .metismenu.mod-menu .metismenu-item.level-1.parent:hover > .mm-collapse { display: block; }
}

/* 手機版：漢堡鈕藍色無框，展開的選單面板貼在 header 下方、滿版白底 */
header.container-header .navbar-toggler {
  color: #0345bf;
  border: 0;
  padding: .25rem .5rem;
  font-size: 20px;
  line-height: 1;
}
header.container-header .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
  /* Bootstrap 的 .navbar 是 position:relative，會讓下面的 absolute 面板只有漢堡鈕那麼寬；
     改成 static 之後面板以 header（Cassiopeia 設了 position:relative!important）為基準，才會滿版 */
  header.container-header nav.navbar { position: static; }
  header.container-header .navbar-collapse {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 6px 8px rgba(0, 0, 0, .12);
    padding: 8px 15px 16px;
  }
  header.container-header .metismenu.mod-menu { flex-direction: column; }
  header.container-header .metismenu.mod-menu .metismenu-item.level-1 {
    line-height: 44px;
    padding: 0 5px;
  }
  /* 父項目是 display:flex（文字＋箭頭鈕），子選單必須佔滿一整行才會排到下方，否則會擠在右邊 */
  header.container-header .metismenu.mod-menu .mm-collapse {
    position: static;
    flex-basis: 100%;
    width: 100%;
    box-shadow: none;
    padding: 0 0 0 15px;
    min-width: 0;
  }
}

/* ---------- 3. Bottom（Helix #sp-bottom：#171717 深底、白字 14px、標題 18px 粗體） ---------- */
.site-grid > .container-bottom-a {
  grid-column: full-start / full-end;
  max-width: none;
  background: var(--zz-dark);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 40px;
  padding: 60px max(15px, calc((100% - var(--zz-container)) / 2)) 60px;
  column-gap: 30px;
  align-items: flex-start;
}
.container-bottom-a > .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  margin: 0;
  padding: 0;
}
.container-bottom-a > .card > .card-header {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  margin: 0 0 30px;
}
.container-bottom-a > .card > .card-body { padding: 0; }
.container-bottom-a a:not(.btn) { color: var(--zz-dark-link); text-decoration: none; }
.container-bottom-a a:not(.btn):hover,
.container-bottom-a a:not(.btn):focus { color: #fff; }
/* Helix 的欄寬：col-lg-3 / col-lg-3 / col-lg-6 */
@media (min-width: 992px) {
  .container-bottom-a > .card:nth-child(1),
  .container-bottom-a > .card:nth-child(2) { flex: 0 0 calc(25% - 22px); }
  .container-bottom-a > .card:nth-child(3) { flex: 0 0 calc(50% - 15px); }
}
@media (max-width: 991.98px) {
  .site-grid > .container-bottom-a { flex-direction: column; padding-top: 40px; padding-bottom: 30px; }
  .container-bottom-a > .card { flex: 1 1 auto; margin-bottom: 30px; }
}

/* ---------- 4. 回到頂部（Helix .sp-scroll-up：36px 圓形半透明灰） ---------- */
.back-to-top-link {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(100, 100, 100, .4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 20px;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background: rgba(100, 100, 100, .7);
  color: #fff;
  border: 0;
}

/* ---------- 5. 文章全文圖片：不要浮動，整寬放在內文最上方（Helix 文章版面的做法） ----------
   Joomla 核心文章版面會依「文章 → 選項 → 全文圖片浮動」輸出 <figure class="left item-image">，
   Cassiopeia 再 float:left，結果 59 篇有全文圖的商品頁文字被擠到右邊、.alert 底色橫跨圖片。
   在後台把 com_content 的「全文圖片浮動」改成「無」也可以，改了之後這段就用不到。 */
.com-content-article .item-image.left,
.com-content-article .item-image.right,
.com-content-article .item-image.none {
  float: none;
  display: block;
  width: 100%;
  margin: 0 0 1.5rem;
}
.com-content-article .item-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- 6. 連結與 Bootstrap 元件回到 Helix 時期的樣子（＝原版 Bootstrap 5.2 色票） ----------
   Cassiopeia 自己編譯的 Bootstrap 改了主題色（primary 深藍 #010156、success #448344、info 灰藍）、
   圓角（.25rem）與按鈕內距（.6rem 1rem）；Helix 用的是原版 Bootstrap，只把 primary／連結換成 #0345bf。
   變數名稱沒有 bs- 前綴是 Cassiopeia 編譯時的設定，照它的名字覆寫即可。 */
:root, [data-bs-theme=light] {
  --border-radius: .375rem;                    /* alert / card / badge / 表單 共用 */
  --link-hover-color: #044cd0;
  --primary: #0345bf;  --primary-rgb: 3, 69, 191;
  --success: #198754;  --success-rgb: 25, 135, 84;
  --warning: #ffc107;  --warning-rgb: 255, 193, 7;
  --info-text-emphasis: #055160;    --info-bg-subtle: #cff4fc;    --info-border-subtle: #b6effb;
  --success-text-emphasis: #0f5132; --success-bg-subtle: #d1e7dd; --success-border-subtle: #badbcc;
}

/* 連結：Helix 全站無底線，hover 也沒有，只換色。
   Cassiopeia 另有 a:not([class]){text-decoration:underline}（特異性 0,1,1），
   內文裡沒有 class 的連結都會中，所以要用同樣的選擇器再蓋一次。 */
a, a:hover, a:focus, a:active,
a:not([class]), a:not([class]):hover, a:not([class]):focus { text-decoration: none; }
a:hover, a:focus { color: #044cd0; }

/* 按鈕：Bootstrap 預設尺寸；primary 用 Helix 的 #0345bf（hover #044cd0 也是 Helix 的值） */
.btn {
  --btn-padding-x: .75rem;
  --btn-padding-y: .375rem;
  --btn-border-radius: .375rem;
  --btn-box-shadow: none;
}
.btn-lg, .btn-group-lg > .btn {
  --btn-padding-x: 1rem;
  --btn-padding-y: .5rem;
  --btn-font-size: 1.25rem;
  --btn-border-radius: .5rem;
}
.btn-sm, .btn-group-sm > .btn {
  --btn-padding-x: .5rem;
  --btn-padding-y: .25rem;
  --btn-font-size: .875rem;
  --btn-border-radius: .25rem;
}
.btn-primary {
  --btn-bg: #0345bf;            --btn-border-color: #0345bf;
  --btn-hover-bg: #044cd0;      --btn-hover-border-color: #044cd0;
  --btn-active-bg: #033aa3;     --btn-active-border-color: #033aa3;
  --btn-disabled-bg: #0345bf;   --btn-disabled-border-color: #0345bf;
  --btn-focus-shadow-rgb: 41, 97, 201;
}
.btn-outline-primary {
  --btn-color: #0345bf;         --btn-border-color: #0345bf;
  --btn-hover-bg: #0345bf;      --btn-hover-border-color: #0345bf;
  --btn-active-bg: #0345bf;     --btn-active-border-color: #0345bf;
  --btn-disabled-color: #0345bf; --btn-disabled-border-color: #0345bf;
}
.btn-success {
  --btn-bg: #198754;            --btn-border-color: #198754;
  --btn-hover-bg: #157347;      --btn-hover-border-color: #146c43;
  --btn-active-bg: #146c43;     --btn-active-border-color: #13653f;
  --btn-disabled-bg: #198754;   --btn-disabled-border-color: #198754;
  --btn-focus-shadow-rgb: 60, 153, 110;
}
.text-bg-warning { color: #000 !important; }

/* 表格：透明底、文字跟內文同色（Cassiopeia 預設白底黑字） */
.table {
  --table-bg: transparent;
  --table-color: #252525;
  --table-striped-color: #252525;
  --table-border-color: #dee2e6;
}

/* ---------- 7. 從 Helix 的 custom.css 搬過來的內容層規則（內文 HTML 直接用到的 class） ----------
   原檔 templates/shaper_helixultimate/css/custom.css 第 4–6 節；第 1–3 節是 Helix 選單箭頭，不需要。 */
/* YouTube 影片響應式容器（38 篇文章） */
.video-responsive {
  max-width: 560px;
  aspect-ratio: 16 / 9;
}
.video-responsive iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 575px) {
  .video-responsive { max-width: 100%; }
}
/* 教學文章圖片限寬 */
.img-tutorial {
  max-width: 360px;
  width: 100%;
  height: auto;
}
/* 文章章節目錄 */
.article-toc {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 24px;
  max-width: 480px;
}
.article-toc h3 { margin: 0 0 8px; font-size: 1rem; }
.article-toc ol { margin: 0; padding-left: 20px; }
.article-toc li { margin-bottom: 4px; }
.article-toc a { text-decoration: none; }
.article-toc a:hover { text-decoration: underline; }

/* ---------- 8. 字體：跟 Helix 完全一樣 ----------
   實測差異只有兩處：
   1. Helix 的 body 有 -webkit-font-smoothing:antialiased（macOS 上字會細一點、乾淨一點），Cassiopeia 沒設（auto，看起來略粗）。
   2. 字型堆疊順序：Helix 用 Bootstrap 原版 system-ui 開頭，Cassiopeia 用 -apple-system 開頭；
      Mac 上兩者都是 San Francisco／PingFang，Windows 都是 Segoe UI，但 Linux 的 Noto Sans 順位不同。照 Helix 的排。 */
:root {
  --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --body-font-family: var(--font-sans-serif);
  --heading-font-family: var(--font-sans-serif);   /* Cassiopeia 的標題另外走這個變數 */
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans-serif); }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
}
/* 文章標題：Helix 固定 2.25rem（36px），Cassiopeia 用 calc 在大螢幕會到 40px */
.com-content-article h1 { font-size: 2.25rem; }

/* ---------- 9. 分類頁（Category Blog）的文章卡片：照 Helix 的 article-list 版面 ----------
   Helix：每篇一張卡（1px #f5f5f5 邊框、3px 圓角、20px 內距、圖片滿版貼頂、圓角只在上方），
   標題 22px/500 深色不是藍色、下方留 20px，「閱讀全文」是 14px 的純文字連結。
   Cassiopeia 核心版面：標題 30px 藍色、圖片 float:left、「閱讀全文」是 btn-secondary 按鈕加箭頭。 */
.com-content-category-blog__items.blog-items { gap: 30px; }
.com-content-category-blog__item.blog-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  padding: 20px;
}
.com-content-category-blog__item .item-image {
  float: none;
  display: block;
  width: calc(100% + 40px);
  margin: -20px -20px 20px;
}
.com-content-category-blog__item .item-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px 3px 0 0;
}
.com-content-category-blog__item .page-header h2,
.com-content-category-blog__item .item-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 20px;
}
.com-content-category-blog__item .page-header h2 a,
.com-content-category-blog__item .item-title a { color: #252525; }
.com-content-category-blog__item .page-header h2 a:hover,
.com-content-category-blog__item .page-header h2 a:focus,
.com-content-category-blog__item .item-title a:hover { color: #0345bf; }
/* 「閱讀全文」：拿掉按鈕外觀與箭頭，變回 14px 文字連結 */
.com-content-category-blog__item .btn-secondary {
  --btn-bg: transparent;
  --btn-border-color: transparent;
  --btn-color: #252525;
  --btn-hover-bg: transparent;
  --btn-hover-border-color: transparent;
  --btn-hover-color: #0345bf;
  --btn-active-bg: transparent;
  --btn-active-color: #0345bf;
  --btn-active-border-color: transparent;
  --btn-padding-x: 0;
  --btn-padding-y: 0;
  --btn-font-size: 14px;
  box-shadow: none;
}
.com-content-category-blog__item .btn-secondary .icon-chevron-right { display: none; }

/* ---------- 10. 其他細節 ---------- */
/* Helix 內容區外距 10px */
.site-grid > .container-component { padding: 10px 0; }
/* 麵包屑：Helix 版面沒有顯示，先淡化（真的不要就在後台停用模組 17） */
.mod-breadcrumbs { font-size: 13px; }