/* =====================================================
   AaBore 安博力 — theme-route.css（2026-10-12 全站改版 v2「開店路線圖」）
   在 theme-2026.css 之後載入。概念：開店是一條一條路線、一站一站往前走。
   - 線色系統：六條路線色輪流用在卡片、統計、分區；不靠單一主色撐場
   - 文章小標＝車站（圓圈站點＋短線）；主視覺底部是路線；分區標題下是多色路線條
   - 底色只用白與冷灰，不用米白紙色、不用深色底
   ===================================================== */
:root {
    --l-red: #E3002C; --l-blue: #0070BD; --l-green: #008659;
    --l-orange: #F39800; --l-brown: #A86B2D; --l-purple: #8246AF;
    --route-bar: linear-gradient(90deg, var(--l-red) 0 20%, var(--l-blue) 20% 40%, var(--l-green) 40% 60%, var(--l-orange) 60% 80%, var(--l-purple) 80%);
}

/* ---------- 字與標題 ---------- */
h1, h2, .section-title, .article-wrap h1, .article-wrap h2, .blogger-hero__title, .industry-hero h1, .tool-hero__title, .service-hero h1 {
    font-family: var(--font-heading); font-weight: 900; letter-spacing: 0;
}
.section-title em, .blogger-hero__title em { color: var(--l-red); }
.section-eyebrow { color: var(--brand); font-weight: 700; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; }
.section-eyebrow::before { content: ''; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--l-blue); box-sizing: border-box; }
.section-header::after { width: 120px; height: 6px; border-radius: 6px; background: var(--route-bar); margin: 18px auto 0; }

/* ---------- 頁首 ---------- */
.site-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--c-gray-200); }
.nav-item.is-active > .nav-link::after { height: 5px; border-radius: 5px; background: var(--l-blue); }
.header-cta { background: var(--l-blue); border-radius: 999px; }
.header-cta:hover { background: #005A99; }

/* ---------- 按鈕：膠囊形 ---------- */
.btn, .cta-block__btn, .sidebar__btn, .cta-btn { border-radius: 999px !important; }
.btn--primary, .cta-block__btn--tool { background: var(--l-blue); border-color: var(--l-blue); color: #fff; }
.btn--primary:hover, .cta-block__btn--tool:hover { background: #005A99; color: #fff; }
.btn--outline { border: 2px solid var(--brand); color: var(--brand); }
.cta-btn--gold { background: var(--l-red); }

/* ---------- 主視覺：冷灰底，底部三條路線 ---------- */
:is(.blogger-hero, .service-hero, .industry-hero, .tool-hero, .about-hero, .contact-hero, .page-hero) {
    background:
        linear-gradient(var(--l-red), var(--l-red)) 0 calc(100% - 36px) / 34% 8px no-repeat,
        linear-gradient(var(--l-blue), var(--l-blue)) 0 calc(100% - 22px) / 52% 8px no-repeat,
        linear-gradient(var(--l-green), var(--l-green)) 0 calc(100% - 8px) / 22% 8px no-repeat,
        var(--bg) !important;
    border-bottom: 0;
}
.blogger-hero { padding-bottom: 96px; }
:is(.blogger-hero__badge, .industry-badge, .tool-hero__badge) {
    background: #fff !important; color: var(--brand) !important; border: 2px solid var(--l-green) !important; border-radius: 999px !important;
}
.blogger-hero__badge-dot { background: var(--l-red); }
.blogger-hero__stat { border: 0 !important; border-left: 6px solid var(--l-green) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 0 0 1px var(--c-gray-200); }
.blogger-hero__stat:nth-child(4n+2) { border-left-color: var(--l-blue) !important; }
.blogger-hero__stat:nth-child(4n+3) { border-left-color: var(--l-orange) !important; }
.blogger-hero__stat:nth-child(4n+4) { border-left-color: var(--l-purple) !important; }
.blogger-hero__card { border-top: 6px solid var(--l-blue) !important; }

/* ---------- 卡片：頂邊線色，依序換線 ---------- */
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .cta-block__card, .related-posts__card) {
    border: 1px solid var(--c-gray-200) !important; border-top: 6px solid var(--l-blue) !important;
    border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important;
}
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .related-posts__card):nth-child(6n+1) { border-top-color: var(--l-red) !important; }
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .related-posts__card):nth-child(6n+3) { border-top-color: var(--l-green) !important; }
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .related-posts__card):nth-child(6n+4) { border-top-color: var(--l-orange) !important; }
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .related-posts__card):nth-child(6n+5) { border-top-color: var(--l-brown) !important; }
:is(.industry-card, .hp-svc-card, .why-card, .tool-card, .knowledge__card, .lifecycle__card, .hp-report-card, .related-posts__card):nth-child(6n+6) { border-top-color: var(--l-purple) !important; }
:is(.industry-card, .hp-svc-card, .tool-card, .knowledge__card, .lifecycle__card, .related-posts__card):hover { box-shadow: var(--shadow-hover) !important; }
.sidebar__block { border-radius: var(--radius-md); }
.faq-item, .data-box { border-radius: var(--radius-md) !important; }

/* ---------- 重點摘要：路線藍邊條 ---------- */
.summary-box { background: #fff !important; border: 1px solid var(--c-gray-200) !important; border-left: 10px solid var(--l-blue) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-card) !important; }

/* ---------- 文章：小標是一站一站 ---------- */
.article-wrap h2 { border-top: 0; padding: 0 0 0 42px; margin-top: 2.8rem; position: relative; }
.article-wrap h2::before {
    content: ''; position: absolute; left: 4px; top: .12em; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 6px solid var(--l-blue); box-sizing: border-box;
}
.article-wrap h2::after { content: ''; position: absolute; left: 13px; top: calc(.12em + 24px); width: 6px; height: .55rem; background: var(--l-blue); border-radius: 0 0 3px 3px; }
.article-wrap h3 { color: var(--brand); }
.article-wrap table { border: 1px solid var(--c-gray-200); border-top: 1px solid var(--c-gray-200); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.article-wrap th { background: var(--brand); color: #fff; border-bottom: 0; }
.article-wrap tr:nth-child(even) td { background: #F7F9FC; }
.article-wrap .toc, .article-wrap nav[aria-label] { background: var(--bg) !important; border: 0 !important; border-left: 6px solid var(--l-orange) !important; border-radius: var(--radius-md) !important; }
.article-wrap a { color: var(--l-blue); text-decoration-color: rgba(0,112,189,.35); }
.article-wrap a:hover { color: var(--l-red); }

/* ---------- 照片佔位：地圖格線 ---------- */
.photo-slot {
    border: 0; border-radius: var(--radius-lg);
    background: repeating-linear-gradient(90deg, var(--c-gray-100) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, var(--c-gray-100) 0 1px, transparent 1px 40px), #F7F9FC;
}
.photo-slot::before { border: 2px solid var(--l-blue); border-radius: 999px; background: #fff; color: var(--brand); }

/* ---------- CTA 區、頁尾 ---------- */
.cta-block { background: var(--bg); border-top: 0; }
.site-footer { background: #0B4F86; border-top: 6px solid transparent; border-image: var(--route-bar) 1; }
.footer-links a, .footer-contact__item, .footer-legal, .footer-legal a { color: rgba(255,255,255,.86) !important; }
.footer-col__title { color: #fff !important; }
.footer-tagline, .footer-links__more a { color: #fff !important; }

/* ---------- 逐頁掃描後的對比修正（2026-10-12） ---------- */
/* 路線紅疊在深藍上對比不足：深藍區塊裡的重點色字改淺紅 */
:is([style*="background:var(--c-navy)"], [style*="background: var(--c-navy)"], [style*="background:var(--brand)"], [style*="background:#13294B"],
    [style*="background:var(--c-navy-dark)"], [style*="background:var(--brand-dark)"], .final-cta, .sidebar__block--line, .about-diff-card--featured)
    :is([style*="color:var(--c-gold)"], [style*="color: var(--c-gold)"], [style*="color:var(--gold)"], [style*="color:#E3002C"]) { color: var(--gold-lt) !important; }
.hp-case-card__badge { color: #fff; }
/* 重點色底的小徽章（推薦、在地首選、最新）原本是深色字，改白字 */
[style*="background:var(--c-gold)"]:is([style*="color:var(--c-navy)"], [style*="color: var(--c-navy)"], [style*="color:var(--brand)"], [style*="color:#13294B"]) { color: #fff !important; }
/* 頁面內嵌的淺灰字（#999）在白底上對比不足 */
[style*="color:#999"], [style*="color: #999"] { color: var(--c-gray-500) !important; }
:root { --c-gray-400: #6E7A8D; }
/* 同一個元素自己是深藍底＋重點色字 */
[style*="background:var(--c-navy)"]:is([style*="color:var(--c-gold)"], [style*="color: var(--c-gold)"]) { color: var(--gold-lt) !important; }
.related-card__tag--brand { color: #fff; }
/* 內嵌深底但主題已改成淺色的主視覺（page-hero）：重點色維持路線紅 */
:is(.page-hero, .service-hero, .about-hero, .contact-hero, .blogger-hero, .tool-hero, .industry-hero) :is([style*="color:var(--c-gold)"], [style*="color: var(--c-gold)"], [style*="color:var(--gold)"]) { color: var(--gold) !important; }
/* 內嵌綠色小標（#1D9E75）在淺綠底上對比不足，加深 */
[style*="color:#1D9E75"] { color: #0B7A57 !important; }
/* 產業頁方案徽章（重點色底）改白字；資料來源小字加深 */
.service-tag { color: #fff !important; }
.stats-source, .stats-source a { color: var(--c-gray-500) !important; }
.about-method__id { color: #fff; }
/* main.css 裡「深藍底＋重點色字」與「重點色底＋深藍字」的元件：路線紅與深藍對比不足，一律改白字 */
.tool-card__badge, .knowledge__pillar-tag, .knowledge__report-badge, .hp-report-hero__badge, .why-card__number, .sidebar__rank,
.pricing-card__badge, .industry-pricing__card-ribbon, .process-step__num, .article-meta__pillar, .svc-item__badge, .announcement-bar { color: #fff !important; }
.announcement-bar a { color: #fff !important; }
/* 小字綠、淺藍在淺底上對比不足：換成路線綠、路線藍 */
.knowledge__meta [style*="#27AE60"], [style*="color:#27AE60"], [style*="color:#27ae60"] { color: #008659 !important; }
[style*="color:#4A9AE5"], [style*="color:#4a9ae5"] { color: #0070BD !important; }
:root { --c-success: #008659; }
.before-after-card__label--after, .competition-low, .tool-result__grade-badge--excellent { color: #008659; }
.btn-gold, a.btn-gold { color: #fff !important; }
[style*="background:var(--c-gold)"] :is([style*="color:var(--c-navy)"], [style*="color: var(--c-navy)"]), [style*="background:var(--c-gold)"] > span:not([style*="color"]) { color: #fff !important; }
/* 產業頁主視覺下緣有往上疊的數字卡，路線改放右上角，避免從卡片縫隙露出 */
.industry-hero {
    background:
        linear-gradient(var(--l-red), var(--l-red)) 100% 28px / 22% 8px no-repeat,
        linear-gradient(var(--l-blue), var(--l-blue)) 100% 42px / 34% 8px no-repeat,
        linear-gradient(var(--l-green), var(--l-green)) 100% 56px / 14% 8px no-repeat,
        var(--bg) !important;
}
