/* ===========================================================
   ArctonHill Capital 亞洲極禾資本 — 多主題可切換版
   骨架參照 addwii.com。色彩全面抽成 CSS 變數：
   :root            = 原版（機構深色：石墨黑 + 白 + 冷藍）
   [data-theme=a]   = 霧灰北歐（冷調淺色）
   [data-theme=b]   = 鼠尾草北歐（灰綠淺色）
   [data-theme=c]   = 砂米暖中性（米白暖色）
   切換器在右上角 4 顆按鈕，狀態存 localStorage。
   =========================================================== */

/* ---------- 預設主題（原版深色）所有可換膚變數 ---------- */
:root {
  /* 基礎品牌色（會被各主題覆寫） */
  --ah-white: #ffffff;
  --ah-ink: #231f20; /* 石墨黑（名片主色） */
  --ah-gray: #6b7280; /* 冷灰文字 */
  --ah-light: #f5f6f7; /* 淺灰底（bg-soft 用） */
  --ah-line: #e5e7eb; /* 分隔線 */
  --ah-line-dark: rgba(255, 255, 255, 0.12);
  --ah-blue: #3a5a78; /* 主點綴色 */
  --ah-blue-soft: #5b7d9c;

  --page-bg: #ffffff; /* 頁面底色 */

  /* 「重點深色區塊」背景（原版為深色漸層） */
  --hero-bg:
    radial-gradient(
      circle at 75% 30%,
      rgba(58, 90, 120, 0.35),
      transparent 55%
    ),
    linear-gradient(160deg, #16181d 0%, #1d2733 60%, #0f1115 100%);
  --carousel-bg: linear-gradient(150deg, #1d2733, #0f1115);
  --narrative-bg:
    radial-gradient(circle at 20% 50%, rgba(58, 90, 120, 0.3), transparent 50%),
    linear-gradient(135deg, #16181d, #1d2733);
  --footer-bg: #0f1115;

  /* 重點區塊上的文字 / 裝飾 */
  --deep-text: #ffffff;
  --deep-text-soft: rgba(255, 255, 255, 0.74);
  --deep-text-dim: rgba(255, 255, 255, 0.66);
  --deep-faint: rgba(255, 255, 255, 0.4);
  --deep-grid: rgba(255, 255, 255, 0.045); /* 藍圖格線 */
  --deep-ghost: rgba(255, 255, 255, 0.1); /* 輪播大字底 */
  --deep-accent: #5b7d9c;
  --deep-indicator: rgba(255, 255, 255, 0.35);
  --deep-indicator-active: #ffffff;

  /* Navbar */
  --nav-link: rgba(255, 255, 255, 0.82);
  --nav-brand-zh: #ffffff;
  --nav-brand-en: #5b7d9c;
  --nav-scrolled-bg: rgba(22, 24, 29, 0.96);
  --nav-menu-bg: rgba(22, 24, 29, 0.98);
  --nav-toggler: #ffffff;

  /* Logo SVG */
  --logo-fill: #ffffff;
  --logo-stroke: #3a5a78;

  /* 按鈕 — 實心（hero 主按鈕） */
  --btn-bg: #ffffff;
  --btn-fg: var(--ah-ink);
  --btn-bd: #ffffff;
  --btn-bg-h: transparent;
  --btn-fg-h: #ffffff;
  --btn-bd-h: #ffffff;
  /* 按鈕 — 外框 */
  --btno-bg: transparent;
  --btno-fg: #ffffff;
  --btno-bd: rgba(255, 255, 255, 0.5);
  --btno-bg-h: #ffffff;
  --btno-fg-h: var(--ah-ink);
  --btno-bd-h: #ffffff;

  /* 主題切換器 */
  --switcher-bg: rgba(255, 255, 255, 0.14);
  --switcher-border: rgba(255, 255, 255, 0.22);
  --switcher-fg: #ffffff;
  --switcher-shadow: rgba(0, 0, 0, 0.3);
}

/* ---------- 三個淺色主題的共用覆寫（只依賴 ink/accent） ---------- */
[data-theme="a"],
[data-theme="b"],
[data-theme="c"] {
  --ah-line-dark: rgba(0, 0, 0, 0.08);

  --deep-text: var(--ah-ink);
  --deep-indicator: rgba(0, 0, 0, 0.18);
  --deep-indicator-active: var(--ah-ink);

  --nav-link: var(--ah-ink);
  --nav-brand-zh: var(--ah-ink);
  --nav-toggler: var(--ah-ink);

  --logo-fill: var(--ah-ink);
  --logo-stroke: var(--ah-blue);

  /* 淺底上：實心按鈕用 accent 底白字；外框按鈕用 accent 線 */
  --btn-bg: var(--ah-blue);
  --btn-fg: #ffffff;
  --btn-bd: var(--ah-blue);
  --btn-bg-h: transparent;
  --btn-fg-h: var(--ah-blue);
  --btn-bd-h: var(--ah-blue);
  --btno-bg: transparent;
  --btno-fg: var(--ah-blue);
  --btno-bd: var(--ah-blue);
  --btno-bg-h: var(--ah-blue);
  --btno-fg-h: #ffffff;
  --btno-bd-h: var(--ah-blue);

  --switcher-bg: rgba(20, 22, 26, 0.05);
  --switcher-border: rgba(20, 22, 26, 0.1);
  --switcher-fg: var(--ah-ink);
  --switcher-shadow: rgba(20, 22, 26, 0.12);
}

/* ---------- 主題 A：霧灰北歐（冷調淺色） ---------- */
[data-theme="a"] {
  --ah-ink: #2e3338;
  --ah-gray: #7a828b;
  --ah-light: #eef2f6;
  --ah-line: #e6ebf0;
  --ah-blue: #5b7a99;
  --ah-blue-soft: #9db4c9;
  --page-bg: #ffffff;

  --hero-bg:
    radial-gradient(
      circle at 75% 30%,
      rgba(91, 122, 153, 0.12),
      transparent 55%
    ),
    linear-gradient(160deg, #f7f9fb 0%, #eef2f6 60%, #e8eef3 100%);
  --carousel-bg: linear-gradient(150deg, #eef2f6, #e3eaf1);
  --narrative-bg:
    radial-gradient(
      circle at 20% 50%,
      rgba(91, 122, 153, 0.14),
      transparent 50%
    ),
    linear-gradient(135deg, #f3f6f9, #e7eef4);
  --footer-bg: #eef1f5;

  --deep-text-soft: #4a5560;
  --deep-text-dim: #5f6a75;
  --deep-faint: #8b949d;
  --deep-grid: rgba(46, 51, 56, 0.05);
  --deep-ghost: rgba(91, 122, 153, 0.12);
  --deep-accent: #5b7a99;

  --nav-brand-en: #5b7a99;
  --nav-scrolled-bg: rgba(255, 255, 255, 0.9);
  --nav-menu-bg: rgba(255, 255, 255, 0.98);
}

/* ---------- 主題 B：鼠尾草北歐（灰綠淺色） ---------- */
[data-theme="b"] {
  --ah-ink: #33372f;
  --ah-gray: #757a6d;
  --ah-light: #eef1e9;
  --ah-line: #e3e6dc;
  --ah-blue: #6f7d6c; /* 「點綴」改鼠尾草綠 */
  --ah-blue-soft: #a7b6a3;
  --page-bg: #fbfbf9;

  --hero-bg:
    radial-gradient(
      circle at 75% 30%,
      rgba(124, 138, 122, 0.14),
      transparent 55%
    ),
    linear-gradient(160deg, #f4f6f0 0%, #eaeee4 60%, #e3e9dc 100%);
  --carousel-bg: linear-gradient(150deg, #edf0e8, #e2e8da);
  --narrative-bg:
    radial-gradient(
      circle at 20% 50%,
      rgba(124, 138, 122, 0.16),
      transparent 50%
    ),
    linear-gradient(135deg, #f0f3eb, #e5ebde);
  --footer-bg: #ecefe6;

  --deep-text-soft: #51564a;
  --deep-text-dim: #666b5c;
  --deep-faint: #8f9485;
  --deep-grid: rgba(51, 55, 47, 0.05);
  --deep-ghost: rgba(124, 138, 122, 0.14);
  --deep-accent: #6f7d6c;

  --nav-brand-en: #6f7d6c;
  --nav-scrolled-bg: rgba(251, 251, 249, 0.92);
  --nav-menu-bg: rgba(251, 251, 249, 0.98);
}

/* ---------- 主題 C：砂米暖中性（米白暖色） ---------- */
[data-theme="c"] {
  --ah-ink: #3a352f;
  --ah-gray: #837a6d;
  --ah-light: #f3ede3;
  --ah-line: #e9e0d3;
  --ah-blue: #9c8569; /* 「點綴」改陶土/燕麥 */
  --ah-blue-soft: #bda993;
  --page-bg: #faf7f2;

  --hero-bg:
    radial-gradient(
      circle at 75% 30%,
      rgba(156, 133, 105, 0.14),
      transparent 55%
    ),
    linear-gradient(160deg, #f8f2e9 0%, #f1e8da 60%, #ebe0cf 100%);
  --carousel-bg: linear-gradient(150deg, #f3ebde, #eadfce);
  --narrative-bg:
    radial-gradient(
      circle at 20% 50%,
      rgba(156, 133, 105, 0.16),
      transparent 50%
    ),
    linear-gradient(135deg, #f5efe4, #ebe0cf);
  --footer-bg: #f0e9dc;

  --deep-text-soft: #5b5347;
  --deep-text-dim: #6f6657;
  --deep-faint: #938976;
  --deep-grid: rgba(58, 53, 47, 0.05);
  --deep-ghost: rgba(156, 133, 105, 0.15);
  --deep-accent: #9c8569;

  --nav-brand-en: #9c8569;
  --nav-scrolled-bg: rgba(250, 247, 242, 0.92);
  --nav-menu-bg: rgba(250, 247, 242, 0.98);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans TC", "Open Sans", sans-serif;
  color: var(--ah-ink);
  background: var(--page-bg);
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.45s ease,
    color 0.45s ease;
}

h1,
h2,
h3,
h4,
h5,
.display-font {
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  letter-spacing: 0.02em;
}

.serif {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
}

.text-blue {
  color: var(--ah-blue);
}
.bg-ink {
  background: var(--ah-ink);
}
.bg-soft {
  background: var(--ah-light);
}

/* 區塊標題（置中，仿 addwii section heading 節奏） */
.section-eyebrow {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ah-blue);
  margin-bottom: 0.75rem;
}
.section-title {
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}
.section-rule {
  width: 56px;
  height: 2px;
  background: var(--ah-ink);
  margin: 0 auto 1.5rem;
}

/* ============ 主題切換器（右上角 4 顆） ============ */
.theme-switcher {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--switcher-bg);
  border: 1px solid var(--switcher-border);
  box-shadow: 0 6px 22px var(--switcher-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease;
}
.theme-switcher .ts-label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--switcher-fg);
  opacity: 0.7;
  margin-right: 2px;
}
.theme-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--dot, #999);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.theme-dot:hover {
  transform: scale(1.14);
}
.theme-dot.active {
  border-color: var(--switcher-fg);
  box-shadow: 0 0 0 2px var(--switcher-bg);
  transform: scale(1.06);
}
/* 各按鈕代表色（自我說明） */
.theme-dot[data-theme="default"] {
  --dot: #231f20;
}
.theme-dot[data-theme="a"] {
  --dot: #5b7a99;
}
.theme-dot[data-theme="b"] {
  --dot: #7c8a7a;
}
.theme-dot[data-theme="c"] {
  --dot: #b8a38c;
}

/* ============ Navbar ============ */
.navbar {
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease,
    padding 0.4s ease;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
@media (min-width: 992px) {
  /* 在桌機替右上角切換器預留空間，避免和選單壓在一起 */
  #navItems {
    padding-right: 130px;
  }
}
.navbar .nav-link {
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--nav-link) !important;
  margin: 0 0.65rem;
  position: relative;
  transition: color 0.4s ease;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--ah-blue-soft);
  transition: width 0.3s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
}
.nav-toggler-icon {
  color: var(--nav-toggler);
}

.navbar-brand .brand-zh {
  font-family: "Noto Serif TC", "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--nav-brand-zh);
  line-height: 1.1;
  transition: color 0.4s ease;
}
.navbar-brand .brand-en {
  font-family: "Montserrat", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  color: var(--nav-brand-en);
  text-transform: uppercase;
}

/* 捲動後變實底 */
.navbar.scrolled {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Logo SVG 換膚（三個 logo 都加 .themed-logo） */
.themed-logo path:first-of-type {
  fill: var(--logo-fill);
  transition: fill 0.4s ease;
}
.themed-logo path:last-of-type {
  stroke: var(--logo-stroke);
  transition: stroke 0.4s ease;
}

/* ============ Hero ============ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--deep-text);
  background: var(--hero-bg);
  overflow: hidden;
  transition:
    background 0.45s ease,
    color 0.45s ease;
}
/* blueprint 格線（呼應 Spec Kit 藍圖美學） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--deep-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--deep-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 80%);
}
.hero-inner {
  position: relative;
  z-index: 2;
}
.hero .logo-mark {
  width: 96px;
  height: auto;
  margin-bottom: 1.8rem;
}
.hero-zh {
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.hero-en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  color: var(--deep-text);
  line-height: 1.35;
  max-width: 760px;
  margin: 0.6rem auto 1.2rem;
}
.hero-sub {
  color: var(--deep-text-dim);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
}
.hero-tag {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--deep-accent);
  margin-bottom: 1.6rem;
}

/* ============ 按鈕（仿 addwii btn-myset：固定尺寸 + 微圓角 + hover 反色） ============ */
.btn-ah {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 190px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: all 0.4s ease;
  padding: 0 22px;
}
.btn-ah:hover {
  background: var(--btn-bg-h);
  color: var(--btn-fg-h);
  border-color: var(--btn-bd-h);
}
.btn-ah-outline {
  background: var(--btno-bg);
  color: var(--btno-fg);
  border: 1px solid var(--btno-bd);
}
.btn-ah-outline:hover {
  background: var(--btno-bg-h);
  color: var(--btno-fg-h);
  border-color: var(--btno-bd-h);
}
.btn-ah-dark {
  border-color: var(--ah-ink);
  background: var(--ah-ink);
  color: var(--page-bg);
}
.btn-ah-dark:hover {
  background: transparent;
  color: var(--ah-ink);
}

/* ============ 真善美卡片 ============ */
.value-card {
  background: var(--page-bg);
  border: 1px solid var(--ah-line);
  padding: 2.6rem 2rem;
  height: 100%;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s,
    background-color 0.45s ease;
  position: relative;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(22, 24, 29, 0.1);
  border-color: var(--ah-ink);
}
.value-card .vc-glyph {
  font-family: "Cormorant Garamond", "Noto Serif TC", serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--ah-ink);
  line-height: 1;
}
.value-card .vc-en {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--ah-blue);
  margin: 0.4rem 0 0.8rem;
}
.value-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

/* ============ 語源輪播（仿 addwii carousel-fade 疊圖） ============ */
.etymology-carousel .carousel-item {
  min-height: 460px;
  color: var(--deep-text);
  background: var(--carousel-bg);
  position: relative;
  transition:
    background 0.45s ease,
    color 0.45s ease;
}
.etymology-carousel .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--deep-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--deep-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}
.ety-big {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 600;
  color: var(--deep-ghost);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.05em;
  z-index: 1;
}
.ety-caption {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.ety-caption .ety-label {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--deep-accent);
  font-size: 0.75rem;
}
.ety-caption h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  font-weight: 600;
}
.etymology-carousel .carousel-indicators [data-bs-target] {
  width: 36px;
  height: 3px;
  border: none;
  background: var(--deep-indicator);
}
.etymology-carousel .carousel-indicators .active {
  background: var(--deep-indicator-active);
}

/* ============ 對標 / 標籤 ============ */
.tag-pill {
  display: inline-block;
  border: 1px solid var(--ah-line);
  border-radius: 2px;
  padding: 0.5rem 1.1rem;
  margin: 0.3rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ah-ink);
  transition: all 0.3s ease;
}
.tag-pill:hover {
  background: var(--ah-ink);
  color: var(--page-bg);
  border-color: var(--ah-ink);
}

.eval-table {
  width: 100%;
  border-collapse: collapse;
}
.eval-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ah-line);
  font-size: 0.98rem;
}
.eval-table td:last-child {
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--ah-blue);
}

/* ============ Narrative 橫幅 ============ */
.narrative {
  background: var(--narrative-bg);
  color: var(--deep-text);
  transition:
    background 0.45s ease,
    color 0.45s ease;
}
.narrative .nar-en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.45;
}

/* ============ Footer / 聯絡 ============ */
.footer {
  background: var(--footer-bg);
  color: var(--deep-text-soft);
  transition:
    background 0.45s ease,
    color 0.45s ease;
}
.footer a {
  color: var(--deep-text-soft);
  text-decoration: none;
  transition: color 0.3s;
}
.footer a:hover {
  color: var(--deep-text);
}
.footer .ft-name {
  font-family: "Noto Serif TC", serif;
  font-size: 1.5rem;
  color: var(--deep-text);
  letter-spacing: 0.12em;
}
.footer .ft-title {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--ah-blue-soft);
}
.footer .ft-icon {
  width: 34px;
  text-align: center;
  color: var(--ah-blue-soft);
  margin-right: 0.5rem;
}
.footer-bottom {
  border-top: 1px solid var(--ah-line-dark);
  font-size: 0.8rem;
  color: var(--deep-faint);
}

/* ============ 通用間距（仿 addwii py-5 節奏） ============ */
.section {
  padding: 6rem 0;
}
@media (max-width: 768px) {
  .section {
    padding: 4rem 0;
  }
  .navbar .nav-link {
    margin: 0.2rem 0;
  }
  .navbar-collapse {
    background: var(--nav-menu-bg);
    padding: 1rem 1.2rem;
    border-radius: 4px;
    margin-top: 0.6rem;
  }
  /* 手機把切換器移到右下角，避免壓到漢堡選單 */
  .theme-switcher {
    top: auto;
    bottom: 16px;
    right: 16px;
  }
}