/**
 * 翼王智網 前台主題層（ewweb-theme.css）
 *
 * 色彩系統分兩層：
 *   1. **中性色階**（本檔定義，全部版型共用）——文字、框線、區塊底色。
 *      刻意採用「冷灰」（色相 210–215°），與各版型的主色同調。
 *      改版前這些值是從樣板繼承的暖褐（#4d4643 內文、#65534c 導覽、
 *      #f8f6f5 底色，色相 16–20°），與冷色系的主色並置時色調互相打架，
 *      整體顯得暗濁——這是「配色看起來奇怪」的直接原因。
 *   2. **主題色**（assets/themes/theme{N}.css）——主色、輔色、強調色。
 *      站台自訂色（ewWeb_config.ub1）再覆蓋主題色；清空自訂即回復版型預設。
 *
 * 全部色彩組合皆已驗算 WCAG 2.1 AA：
 *   一般文字 ≥4.5:1、大型文字與介面元件 ≥3:1。
 */

:root {
  /* ---------- 中性色階（冷調，全版型共用）---------- */
  --ew-ink:       #152a44;  /* 標題          於白底 14.5:1 */
  --ew-text:      #37475c;  /* 內文          於白底  9.5:1 */
  --ew-muted:     #64748b;  /* 次要文字      於白底  4.8:1 */
  --ew-border:    #e2e8f0;  /* 框線、分隔線 */
  --ew-bg:        #ffffff;  /* 頁面底色 */
  --ew-bg-soft:   #f6f9fc;  /* 區塊底色（極淺，帶藍調）*/

  /* ---------- 主題色（預設＝版型 1 晴空藍）---------- */
  --ew-primary:   #1565c0;  /* 品牌主色      白字於其上 5.8:1 */
  --ew-primary-hover: #0f5aa8;
  --ew-secondary: #0d7fd4;  /* 輔助色        白字於其上 4.2:1（僅用於大型元件）*/
  --ew-secondary-hover: #0b6cb4;
  --ew-accent:    #1668c4;  /* 強調／連結色  於白底 5.5:1 */
  --ew-accent-hover: #10508f;
  --ew-surface:   #f6f9fc;  /* 淺色區塊底 */
  --ew-footer-bg: #14314f;  /* 頁尾底色（比主色更深，作為版面收尾）*/
  --ew-footer-fg: #dce7f3;  /* 頁尾文字      於頁尾底 11.4:1 */
  --ew-radius:    10px;     /* 統一圓角 */
}

/* ---------- 全域文字與連結 ---------- */
a { color: var(--ew-accent); }
a:hover { color: var(--ew-accent-hover); }

/* ---------- Header 與主選單 ---------- */
#header .logo h1 a, #header .logo h1 a:hover { color: var(--ew-primary); }
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { color: var(--ew-accent); }
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { color: var(--ew-accent); }

/* 頂部聯絡列連結 */
#topbar a, #topbar a:hover { color: var(--ew-primary); }

/* ---------- 按鈕 ---------- */
.btn { border-radius: var(--ew-radius); }
.btn-primary { background-color: var(--ew-primary); border-color: var(--ew-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ew-primary-hover); border-color: var(--ew-primary-hover); }
.btn-outline-primary { color: var(--ew-primary); border-color: var(--ew-primary); }
.btn-outline-primary:hover { background-color: var(--ew-primary); border-color: var(--ew-primary); color: #fff; }
.btn-success, .btn-get-started { background-color: var(--ew-secondary); border-color: var(--ew-secondary); }
.btn-success:hover { background-color: var(--ew-secondary-hover); border-color: var(--ew-secondary-hover); }

/* ---------- 快捷列（橫幅下方） ---------- */
.ew-quicklinks { background-color: var(--ew-primary); color: #ffffff; }
.ew-quicklinks a { color: #ffffff; }
.ew-quicklinks a:hover { color: #ffd9a8; }

/* ---------- 輪播（Hero） ---------- */
#hero .carousel-container .carousel-content,
#hero .carousel-container { border-radius: var(--ew-radius); }
#hero h2 { text-shadow: 0 2px 8px rgba(0,0,0,.45); }

/* ---------- 內容區塊與卡片 ---------- */
.card { border-radius: var(--ew-radius); border-color: #e3e8ee; }
.card:hover { box-shadow: 0 6px 18px rgba(29,53,87,.08); }
.inner-page h2, .inner-page h3, #containermain h2, #containermain h3 { color: var(--ew-primary); }
.list-group-item a { color: var(--ew-accent); }

/* 頁面建構區塊 */
.page-builder-content h2, .page-builder-content h3 { color: var(--ew-primary); }
.pb-announcement .list-group-item { border-color: #edf1f5; }

/* ---------- 網站導覽（頁尾上方） ---------- */
#NavigateAll { background-color: var(--ew-surface) !important; }
#NavigateAll a { color: var(--ew-accent); }
#NavigateAll a:hover { color: var(--ew-accent-hover); }

/* ---------- 頁尾 ---------- */
.ew-footer { background-color: var(--ew-footer-bg) !important; color: var(--ew-footer-fg); }
.ew-footer a { color: #ffd9a8; }
.ew-footer a:hover { color: #ffffff; }

/* 內文區塊中的連結需有顏色以外的視覺區別（WCAG 1.4.1）：加底線 */
.alert a, .page-builder-content p a, .entry-content a { text-decoration: underline; }

/* ---------- 焦點可見性（無障礙）：全站一致的 focus 樣式 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ew-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 表單（表單設計模組前台） ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--ew-secondary);
  box-shadow: 0 0 0 .25rem rgba(43,103,119,.15);
}

/* ---------- 響應式微調 ---------- */
@media (max-width: 768px) {
  #hero h2 { font-size: 1.6rem; }
  .carousel-container .carousel-content { padding: 12px; }
}

/* ======================================================================
 * 版面結構變體（homeType → body.ew-layout-{N}）
 * layout-1 = 預設（橫向選單），不需額外規則
 * ==================================================================== */

/* ---------- layout-2：左側功能表（桌機） ---------- */
@media (min-width: 992px) {
  body.ew-layout-2 { padding-left: 260px; overflow-x: hidden; /* 內容區位移後 100vw 元素會些微超寬 */ }
  body.ew-layout-2 #header {
    position: fixed; left: 0; top: 0; bottom: 0; width: 260px; height: auto;
    background: var(--ew-primary); z-index: 1030; overflow-y: auto;
    padding: 16px 0;
  }
  body.ew-layout-2 #header .container { flex-direction: column; align-items: stretch; }
  body.ew-layout-2 #header .logo { padding: 0 16px 12px; border-bottom: 1px solid rgba(255,255,255,.15); }
  body.ew-layout-2 #header .logo h1 a { color: #fff; font-size: 1.2rem; }
  body.ew-layout-2 .navbar { width: 100%; }
  body.ew-layout-2 .navbar > ul { flex-direction: column; align-items: stretch; width: 100%; }
  body.ew-layout-2 .navbar > ul > li { width: 100%; }
  body.ew-layout-2 .navbar a { color: #e9eef5; padding: 10px 16px; width: 100%; }
  body.ew-layout-2 .navbar a:hover, body.ew-layout-2 .navbar .active { color: #ffd9a8; }
  /* 子選單改為往右浮出 */
  body.ew-layout-2 .navbar .dropdown ul { left: 100%; top: 0; }
  /* 頂部聯絡列跟著內容區 */
  body.ew-layout-2 #topbar { margin-left: 0; }
}

/* ---------- layout-3：精簡置頂（隱藏頂部聯絡列，選單貼頂） ---------- */
body.ew-layout-3 #topbar { display: none !important; /* topbar 帶 .d-flex(!important)，需同權重覆蓋 */ }
body.ew-layout-3 #header { top: 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* ---------- layout-4：置中窄版（雜誌風：主內容收窄置中，適合閱讀型網站） ---------- */
body.ew-layout-4 #hero,
body.ew-layout-4 .ew-quicklinks,
body.ew-layout-4 section.inner-page .container,
body.ew-layout-4 .page-builder-content,
body.ew-layout-4 #NavigateAll .row { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
body.ew-layout-4 #hero { border-radius: 0 0 var(--ew-radius) var(--ew-radius); overflow: hidden; }
body.ew-layout-4 { background-color: var(--ew-surface); }
body.ew-layout-4 section.inner-page, body.ew-layout-4 .page-builder-content { background: #fff; }

/* ---------- layout-5：商務簡潔（隱藏橫幅輪播與快捷列，內頁導向） ---------- */
body.ew-layout-5 #hero { display: none !important; }
body.ew-layout-5 .ew-quicklinks { display: none !important; }
body.ew-layout-5 #main, body.ew-layout-5 .page-builder-content { padding-top: 24px; }

/* ---------- layout-6：滿版寬幅（內容區撐滿視窗，儀表板/資料型網站） ---------- */
body.ew-layout-6 section.inner-page .container,
body.ew-layout-6 .page-builder-content.container,
body.ew-layout-6 #containermain { max-width: 100% !important; width: 100%; padding-left: 32px; padding-right: 32px; }

/* ---------- layout-7：右側功能表（layout-2 鏡像） ---------- */
@media (min-width: 992px) {
  body.ew-layout-7 { padding-right: 260px; overflow-x: hidden; }
  body.ew-layout-7 #header {
    position: fixed; right: 0; left: auto; top: 0; bottom: 0; width: 260px; height: auto;
    background: var(--ew-primary); z-index: 1030; overflow-y: auto;
    padding: 16px 0;
  }
  body.ew-layout-7 #header .container { flex-direction: column; align-items: stretch; }
  body.ew-layout-7 #header .logo { padding: 0 16px 12px; border-bottom: 1px solid rgba(255,255,255,.15); }
  body.ew-layout-7 #header .logo h1 a { color: #fff; font-size: 1.2rem; }
  body.ew-layout-7 .navbar { width: 100%; }
  body.ew-layout-7 .navbar > ul { flex-direction: column; align-items: stretch; width: 100%; }
  body.ew-layout-7 .navbar > ul > li { width: 100%; }
  body.ew-layout-7 .navbar a { color: #e9eef5; padding: 10px 16px; width: 100%; }
  body.ew-layout-7 .navbar a:hover, body.ew-layout-7 .navbar .active { color: #ffd9a8; }
  /* 子選單改為往左浮出 */
  body.ew-layout-7 .navbar .dropdown ul { right: 100%; left: auto; top: 0; }
}

/* ---------- layout-8：品牌置中頁首（Logo 置中於上、選單置中於下，形象官網） ---------- */
@media (min-width: 992px) {
  body.ew-layout-8 #header { height: auto; padding: 14px 0 0; }
  body.ew-layout-8 #header .container { flex-direction: column; align-items: center; gap: 6px; }
  body.ew-layout-8 #header .logo h1 { font-size: 1.9rem; }
  body.ew-layout-8 .navbar > ul { justify-content: center; }
  /* header 變高，位移錨點捲動與內容起點由瀏覽器自動處理（header 非 fixed 模式時）；
     此模板 header 為 fixed，需將內容上緣往下推 */
  body.ew-layout-8 #main, body.ew-layout-8 #hero { margin-top: 46px; }
}

/* ===========================================================================
 * 視覺調整（2026-08-30）
 * 目標：明亮、清新、舒服、專業。以下每一項都是實際看畫面後找出的問題。
 * =========================================================================== */

/* ---------- 首頁橫幅：原本三層變暗，整個首屏過於沉重 ----------
 * 橫幅圖的漸層已改亮，且兩端對白字的對比度都驗算達標（≥4.65:1），
 * 這層覆蓋只需要處理極端情況（客戶換上淺色照片時），因此由 .25 降到 .18。 */
#hero .carousel-item::before {
    background: rgba(10, 25, 47, .18);
}

/* ---------- 頁面建構「連結清單」區塊 ----------
 * 原本直接用 btn-outline-primary，畫面上是三個只有細框線的空框，
 * 看起來像沒做完的按鈕。改為卡片式：白底、柔和陰影、左側色條，
 * 滑過時色條變寬並浮起，讓它讀起來是「可點的功能入口」而不是「表單按鈕」。 */
.block-links .btn-outline-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 16px 18px 16px 26px;
    background: var(--ew-bg, #fff);
    border: 1px solid var(--ew-border, #e2e8f0);
    border-radius: var(--ew-radius, 10px);
    color: var(--ew-ink, #152a44);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 42, 68, .06);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

/* 左側色條：用 ::before 畫，不動 HTML 結構 */
.block-links .btn-outline-primary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ew-primary, #1565c0);
    transition: width .2s ease, top .2s ease, bottom .2s ease;
}

.block-links .btn-outline-primary:hover,
.block-links .btn-outline-primary:focus-visible {
    background: var(--ew-bg, #fff);
    border-color: var(--ew-primary, #1565c0);
    color: var(--ew-primary, #1565c0);
    box-shadow: 0 6px 18px rgba(15, 42, 68, .10);
    transform: translateY(-2px);
}

.block-links .btn-outline-primary:hover::before,
.block-links .btn-outline-primary:focus-visible::before {
    width: 6px;
    top: 0;
    bottom: 0;
}

/* ---------- 頁尾網站導覽 ----------
 * 原本 .row.m-5 加 col-md-2 固定六欄：某一欄有十個子項、其他欄幾乎是空的，
 * 於是留下一大片空白，看起來像版面壞掉。
 * 改用多欄流式排版（CSS columns），各分類依內容長度自然分佈。 */
#NavigateAll {
    background: var(--ew-bg-soft, #f6f9fc) !important;
    padding: 40px 0 32px !important;
    border-top: 1px solid var(--ew-border, #e2e8f0);
}

/* 分組數量隨客戶的選單結構而異（可能 2 組也可能 8 組），
 * 用 CSS columns 會在「分組少、其中一組特別長」時把右側整片留白。
 * 改用 auto-fit 網格：有幾組就分幾欄，各欄等寬並填滿容器。 */
#NavigateAll .row {
    margin: 0 auto !important;
    max-width: 1200px;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 36px;
    align-items: start;
    padding: 0 20px;
}

#NavigateAll .nav-group {
    width: 100%;
    margin-bottom: 20px;
}

#NavigateAll .nav-group p {
    margin-bottom: 8px;
}

#NavigateAll .nav-group p b {
    display: block;
    padding-bottom: 7px;
    font-size: .95rem;
    color: var(--ew-ink, #152a44);
    border-bottom: 2px solid var(--ew-primary, #1565c0);
}

#NavigateAll .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#NavigateAll .nav-list .nav-list {   /* 第三層以下縮排 */
    padding-left: 14px;
}

#NavigateAll .nav-list li {
    padding: 3px 0;
    font-size: .9rem;
    line-height: 1.55;
}

#NavigateAll a {
    color: var(--ew-text, #37475c) !important;
    text-decoration: none;
}

#NavigateAll a:hover {
    color: var(--ew-primary, #1565c0) !important;
    text-decoration: underline;
}

@media (max-width: 575px) {
    #NavigateAll .row { grid-template-columns: 1fr; }
}

/* ---------- 內容區塊的節奏 ----------
 * 主要內容與頁尾之間原本沒有喘息空間，區塊之間也擠在一起。 */
.page-builder-content {
    padding-bottom: 8px;
}

.page-builder-content .page-block + .page-block {
    margin-top: 28px;
}

.page-builder-content h2 {
    color: var(--ew-ink, #152a44);
    font-weight: 700;
}

.page-builder-content .lead {
    color: var(--ew-text, #37475c);
    font-size: 1.05rem;
    line-height: 1.85;
}


/* ---------- 首頁橫幅高度 ----------
 * 原本固定 630px，在 1000px 高的視窗會吃掉整個首屏的六成，
 * 中間卻只有兩行字，顯得空曠。改為隨視窗高度伸縮並設上下限：
 * 小螢幕不會擠壓內容，大螢幕也不會空出一大片。 */
#hero,
#hero .carousel-item,
#hero .h100 {
    height: clamp(340px, 46vh, 480px);
}

@media (max-width: 991px) {
    #hero,
    #hero .carousel-item,
    #hero .h100 {
        height: clamp(260px, 38vh, 360px);
    }
}

/* ---------- 頁尾 ----------
 * 原本用 .row.m-5（四邊各 3rem 邊距），內容整片偏左又留下大量空白。
 * 改為置中的容器，並讓聯絡資訊與版權在視覺上分層。 */
.ew-footer {
    padding: 36px 0 24px !important;
}

.ew-footer .row {
    margin: 0 auto !important;
    max-width: 1100px;
    padding: 0 20px;
}

.ew-footer a {
    color: var(--ew-footer-fg, #dce7f3);
}

.ew-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 版權列與上方聯絡資訊之間拉出一條淡分隔線 */
.ew-footer .ew-copyright {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .875rem;
    opacity: .9;
}

/* ---------- 頁尾版面修正 ----------
 * 原本的結構是「一個空的 .row（早期按鈕被註解後留下的空殼）」
 * 加上「col-md-8 offset-md-1」，於是聯絡資訊整片偏左、上方還多一段空白。 */

.ew-footer .row {
    justify-content: center;
}

/* 聯絡資訊置中呈現 */
.ew-footer-contact {
    text-align: center;
}

/* 聯絡資訊：圖示與文字垂直對齊，行距放鬆 */
.ew-footer p {
    margin-bottom: 0;
    line-height: 2.1;
}

.ew-footer p img {
    vertical-align: -6px;
    margin-right: 6px;
    opacity: .85;
}

.ew-footer .copyright {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .875rem;
    opacity: .9;
}

/* 無障礙標章欄：客戶未設定標章時是空的，不佔版面 */
.ew-footer .col-md-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}