/* ==========================================================================
   theme.css — Dark Mode + Responsive 增強層 (v4)
   修復 Logo 容器特定性 + 補完 explore-card 系列
   ========================================================================== */

:root {
  --c-bg:           #ffffff;
  --c-surface:      #f5f5f7;
  --c-surface-2:    #fafafa;
  --c-text:         #1d1d1f;
  --c-text-2:       #424245;
  --c-text-3:       #86868b;
  --c-accent:       #5f8a6b;
  --c-accent-2:     #0066cc;
  --c-border:       rgba(0, 0, 0, 0.08);

  --c-tint-orange:  #fff5f0;
  --c-tint-green:   #f0f9ec;
  --c-tint-cream:   #fdf8f0;
  --c-tint-blue:    #eef3f9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:           #000000;
    --c-surface:      #1c1c1e;
    --c-surface-2:    #2c2c2e;
    --c-text:         #f5f5f7;
    --c-text-2:       #d6d6d6;
    --c-text-3:       #a1a1a6;
    --c-accent:       #8fc09c;
    --c-accent-2:     #4d9eff;
    --c-border:       rgba(255, 255, 255, 0.12);

    --c-tint-orange:  #2d231f;
    --c-tint-green:   #1f2a23;
    --c-tint-cream:   #2a2520;
    --c-tint-blue:    #1f242c;
  }

  html, body {
    background: var(--c-bg) !important;
    color: var(--c-text) !important;
    color-scheme: dark;
  }

  /* ────────────────────────────────────────────
     【1】Logo 容器特殊保護（必須最先放，且讓漸層規則 :not 排除）
     ──────────────────────────────────────────── */
  *:has(> img[src*="logo"]),
  *:has(> img[alt*="Logo"]),
  *:has(> img[alt*="logo"]) {
    background: linear-gradient(135deg, #e8e8ed 0%, #d8d8de 100%) !important;
  }

  /* ────────────────────────────────────────────
     【1】Inline 純 hex 覆寫
     注意：排除 .btn-secondary / .apply-cta-secondary —— 這兩類按鈕雖然 inline 寫了 #ffffff，
     但它們在 dark mode 應由各自 class 規則接手（預設透明、hover 反白），不該被通用底色規則拉去黑色
     ──────────────────────────────────────────── */
  [style*="background: #ffffff"]:not(:has(img[src*="logo"])):not(.btn-secondary):not(.apply-cta-secondary),
  [style*="background:#ffffff"]:not(:has(img[src*="logo"])):not(.btn-secondary):not(.apply-cta-secondary),
  [style*="background-color: #ffffff"]:not(:has(img[src*="logo"])):not(.btn-secondary):not(.apply-cta-secondary),
  [style*="background-color:#ffffff"]:not(:has(img[src*="logo"])):not(.btn-secondary):not(.apply-cta-secondary) {
    background: var(--c-bg) !important;
    background-color: var(--c-bg) !important;
  }
  [style*="background: #f5f5f7"], [style*="background:#f5f5f7"] {
    background: var(--c-surface) !important;
  }
  [style*="background: #fafafa"], [style*="background:#fafafa"] {
    background: var(--c-surface-2) !important;
  }
  [style*="color: #1d1d1f"], [style*="color:#1d1d1f"] { color: var(--c-text) !important; }
  [style*="color: #424245"], [style*="color:#424245"] { color: var(--c-text-2) !important; }
  [style*="color: #86868b"], [style*="color:#86868b"],
  [style*="color: #6e6e73"], [style*="color:#6e6e73"] { color: var(--c-text-3) !important; }
  [style*="color: #5f8a6b"], [style*="color:#5f8a6b"] { color: var(--c-accent) !important; }

  [style*="background: #fff5f0"]:not(:has(img[src*="logo"])) { background: var(--c-tint-orange) !important; }
  [style*="background: #f0f9ec"]:not(:has(img[src*="logo"])) { background: var(--c-tint-green) !important; }
  [style*="background: #fdf8f0"]:not(:has(img[src*="logo"])) { background: var(--c-tint-cream) !important; }
  [style*="background: #eef3f9"]:not(:has(img[src*="logo"])) { background: var(--c-tint-blue) !important; }

  [style*="background: #1d1d1f"][style*="color: #ffffff"] {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
  }

  [style*="border: 1px solid #1d1d1f"] { border-color: var(--c-text) !important; }
  [style*="border: 1px solid #d2d2d7"],
  [style*="border-bottom: 1px solid #d2d2d7"],
  [style*="border-top: 1px solid #d2d2d7"] {
    border-color: var(--c-border) !important;
  }

  /* hr 分隔線在 dark mode 需要比一般卡片邊框更明顯一些，提高對比 */
  hr[style*="border-top: 1px solid #d2d2d7"],
  hr[style*="border:0"][style*="d2d2d7"],
  .divider hr {
    border-top-color: rgba(255, 255, 255, 0.22) !important;
  }

  /* ────────────────────────────────────────────
     【3】Inline linear-gradient 統一深化
     使用 :not(:has(img[src*="logo"])) 排除 Logo 容器
     ──────────────────────────────────────────── */
  [style*="linear-gradient"][style*="#fff5f0"]:not(:has(img[src*="logo"])),
  [style*="linear-gradient"][style*="#fdf8f0"]:not(:has(img[src*="logo"])),
  [style*="linear-gradient"][style*="#f0f9ec"]:not(:has(img[src*="logo"])),
  [style*="linear-gradient"][style*="#eef3f9"]:not(:has(img[src*="logo"])),
  [style*="linear-gradient"][style*="#e0f0fa"]:not(:has(img[src*="logo"])),
  [style*="linear-gradient"][style*="#fce4ec"]:not(:has(img[src*="logo"])) {
    background: linear-gradient(135deg, #221a1a 0%, #1a2520 50%, #1a1f28 100%) !important;
  }

  /* avatar / icon 飽和色漸層提亮 */
  [style*="linear-gradient"][style*="#9cbfa0"][style*="#5f8a6b"] {
    background: linear-gradient(135deg, #a6c5aa 0%, #6c9978 100%) !important;
  }
  [style*="linear-gradient"][style*="#c8d8a0"] {
    background: linear-gradient(135deg, #b6c98e 0%, #88a76a 100%) !important;
  }

  img[src*="hero"] { filter: brightness(0.85) contrast(1.02); }

  /* ────────────────────────────────────────────
     【4】story-styles.css class 覆寫
     ──────────────────────────────────────────── */
  .story-headline, .story-meta-name, .story-chapter-title,
  .story-paragraph, .pull-quote-text, .story-cta h2,
  .more-card-title, .navbar-brand { color: var(--c-text) !important; }

  .story-lede, .story-cta p, .more-card-tag,
  .stat-label { color: var(--c-text-2) !important; }

  .story-meta-role, .story-chapter-eyebrow,
  .pull-quote-attr { color: var(--c-text-3) !important; }

  .breadcrumb, .story-eyebrow,
  .stat-number { color: var(--c-accent) !important; }

  .stats-section { background: var(--c-surface) !important; }
  .stat-card { background: var(--c-surface-2) !important; }
  .more-stories { border-top-color: var(--c-border) !important; }
  .pull-quote { border-left-color: var(--c-accent) !important; }

  .btn-primary {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
    border-color: var(--c-text) !important;
  }
  .btn-primary:hover {
    background: var(--c-text-2) !important;
    border-color: var(--c-text-2) !important;
  }
  .btn-secondary {
    background: transparent !important;
    color: var(--c-text) !important;
    border-color: var(--c-text) !important;
  }
  .btn-secondary:hover {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
  }
  .more-card-btn { color: var(--c-text) !important; border-color: var(--c-text) !important; }
  .more-card-btn:hover, .more-card-btn:active {
    background: var(--c-text) !important; color: var(--c-bg) !important;
  }
  .carousel-btn { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
  .carousel-btn:hover:not(:disabled) {
    background: var(--c-text) !important; color: var(--c-bg) !important;
  }

  /* 首頁 explore 區的左右箭頭（同樣是 carousel 控制按鈕） */
  .explore-btn { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
  .explore-btn:hover:not(:disabled) {
    background: var(--c-text) !important; color: var(--c-bg) !important;
  }

  /* ────────────────────────────────────────────
     【5】success-stories.html / learn-more.html / 主頁 內嵌 class 覆寫
     ──────────────────────────────────────────── */
  .hero-title, .stories-h2, .featured-title, .cta-h2, .h2,
  .lede p, .apply-h3, .req-card-h3,
  .journey-card-title, .event-title,
  .story-card-title, .explore-card-title { color: var(--c-text) !important; }

  .hero-sub, .featured-desc, .cta-p, .desc, .story-card-tag,
  .journey-card-desc, .event-desc, .req-list li,
  .explore-card-desc { color: var(--c-text-2) !important; }

  .hero-eyebrow, .featured-tag, .stories-eyebrow, .eyebrow,
  .journey-card-num, .journey-card-tagline,
  .event-subtitle, .req-card-tag, .apply-p,
  .journey-meta, .event-meta { color: var(--c-text-3) !important; }

  .journey-meta b, .event-meta b { color: var(--c-text) !important; }

  /* journey / event / req / explore 卡片底色 */
  .journey-card, .event-card, .req-card,
  .explore-card { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }

  .journey-card.featured {
    background: linear-gradient(135deg, #221a1a 0%, #1a2520 50%, #1a1f28 100%) !important;
    border-color: var(--c-accent) !important;
    box-shadow: 0 8px 24px rgba(143,192,156,0.18) !important;
  }
  .journey-card.featured .journey-card-num { color: var(--c-accent) !important; }

  .journey-meta, .event-meta { border-top-color: var(--c-border) !important; }
  .req-list li { border-bottom-color: var(--c-border) !important; }
  .divider hr { border-top-color: var(--c-border) !important; }

  .events-section, .cta-section { background: var(--c-surface) !important; }

  .event-month { background: var(--c-text) !important; color: var(--c-bg) !important; }
  .event-card.alc .event-month { background: var(--c-accent) !important; color: var(--c-bg) !important; }

  .journey-card-link, .explore-card-link { color: var(--c-accent-2) !important; }
  .req-list li::before { background-color: var(--c-accent) !important; }

  .pull-quote-wrap {
    background: linear-gradient(135deg, #221a1a 0%, #1a2520 50%, #1a1f28 100%) !important;
  }

  /* 由內嵌 <style> 規則定義漸層的卡片（非 inline style，需 class 覆寫） */
  .featured-card {
    background: linear-gradient(135deg, #221a1a 0%, #1a2520 50%, #1a1f28 100%) !important;
  }
  .apply-icon {
    background: linear-gradient(135deg, #2d231f 0%, #1f2a23 100%) !important;
  }

  .pill-btn {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
    border-color: var(--c-text) !important;
  }
  .pill-btn:hover { background: var(--c-text-2) !important; border-color: var(--c-text-2) !important; }
  .pill-btn.outline {
    background: transparent !important;
    color: var(--c-text) !important;
    border-color: var(--c-text) !important;
  }
  .pill-btn.outline:hover {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
  }

  .story-card-btn { color: var(--c-text) !important; border-color: var(--c-text) !important; }
  .story-card-btn:hover, .story-card-btn:active {
    background: var(--c-text) !important; color: var(--c-bg) !important;
  }

  footer[style*="background: #f5f5f7"] { background: var(--c-surface) !important; }
  .footer-link { color: var(--c-text) !important; }

  /* ────────────────────────────────────────────
     【6】首頁「申請計畫」區段 dark mode
     ──────────────────────────────────────────── */
  .apply-h2, .apply-card-title, .apply-step-title { color: var(--c-text) !important; }
  .apply-sub, .apply-card-desc { color: var(--c-text-2) !important; }
  .apply-meta, .apply-step-desc, .apply-footnote { color: var(--c-text-3) !important; }
  .apply-eyebrow, .apply-card-tag, .apply-step-num { color: var(--c-accent) !important; }

  .apply-step-card {
    background: var(--c-surface-2) !important;
    border-color: var(--c-border) !important;
  }
  /* 邊框色 #e5e5e7 一般淡化 */
  [style*="border: 1px solid #e5e5e7"] { border-color: var(--c-border) !important; }

  /* 主 CTA 按鈕在 dark mode 反白 */
  .apply-cta-primary {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
    border-color: var(--c-text) !important;
  }
  .apply-cta-primary:hover {
    background: var(--c-text-2) !important;
    border-color: var(--c-text-2) !important;
  }
  .apply-cta-secondary {
    background: transparent !important;
    color: var(--c-text) !important;
    border-color: var(--c-text) !important;
  }
  .apply-cta-secondary:hover {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
  }

  /* 底部輔助連結與 email */
  .apply-footnote a { color: var(--c-accent) !important; }
}


/* ==========================================================================
   申請計畫區段：響應式佈局與互動 (light + dark 共用)
   ========================================================================== */

/* hero 卡寬螢幕用兩欄，窄螢幕保持單欄 */
@media (min-width: 760px) {
  .apply-hero-card { grid-template-columns: 1.2fr 1fr !important; }
}

/* 兩顆主 CTA 按鈕 hover：light 模式對齊全站 .btn-primary / .btn-secondary 行為
   (dark 模式的 hover 已由 @media (prefers-color-scheme: dark) 區段內的規則接手) */
.apply-cta-btn {
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
@media (prefers-color-scheme: light) {
  .apply-cta-primary:hover {
    background: #424245 !important;
    border-color: #424245 !important;
  }
  .apply-cta-secondary:hover {
    background: #1d1d1f !important;
    color: #ffffff !important;
  }
}

/* 步驟卡保持靜態：不加 hover 動畫 */

/* Email 連結的 hover 底線由 page-transitions.css 統一處理；
   › 符號使用 .sym class（page-transitions.css 既有設計）排除底線繼承 */

/* 一般文字連結（非 email）在 apply-footnote 內 hover/active 時加底線 */
.apply-footnote a:not(.apply-mail):hover,
.apply-footnote a:not(.apply-mail):active {
  text-decoration: underline !important;
}

/* 手機適配：申請卡片內距收緊 */
@media (max-width: 480px) {
  .apply-hero-card {
    padding: 28px 20px !important;
    border-radius: 18px !important;
  }
  .apply-visual {
    font-size: 96px !important;
    max-width: 180px !important;
  }
}


/* ==========================================================================
   Responsive 響應式
   ========================================================================== */

img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  h1 { font-size: clamp(28px, 5vw, 48px) !important; }
  h2 { font-size: clamp(24px, 4vw, 36px) !important; }
  [style*="padding: 80px"]  { padding: 56px 24px !important; }
  [style*="padding: 100px"] { padding: 64px 24px !important; }
  [style*="padding: 120px"] { padding: 72px 24px !important; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(18px, 4.5vw, 22px) !important; }

  [style*="padding: 80px"],
  [style*="padding: 100px"],
  [style*="padding: 120px"] { padding: 40px 16px !important; }
  [style*="padding: 60px"]  { padding: 32px 16px !important; }
  [style*="padding: 40px"]  { padding: 24px 16px !important; }

  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }

  nav, [class*="navbar"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
  }
  nav a, [class*="navbar"] a { margin: 0 6px !important; }

  [style*="border-radius: 24px"] { border-radius: 16px !important; }
  img[src*="hero"] { max-height: 50vh !important; }
  footer { text-align: center; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  [style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  a[class*="btn"], button {
    font-size: 14px !important;
    padding: 10px 18px !important;
  }
  nav { gap: 4px !important; }
}

/* scroll-behavior: smooth 不在這裡設 — 讓 page-transitions.js 自訂的緩動曲線負責同頁錨點，
   page-transitions.css 已將 html 的 scroll-behavior 設為 auto，避免雙重平滑造成卡頓 */


/* ==========================================================================
   📱 手機／平板 Navbar — 漢堡選單（≤ 900px）
   改成全螢幕抽屜，解決 7 個連結在小螢幕塞不下的問題
   ========================================================================== */

/* 漢堡按鈕：桌面隱藏、手機顯示 */
.navbar-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
  z-index: 10001;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.navbar-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  margin: 5px 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              opacity .2s ease;
  will-change: transform, opacity;
}

@media (max-width: 900px) {

  /* === 漢堡按鈕顯示 === */
  .navbar-hamburger { display: block; }

  /* === 開啟狀態：☰ 動畫變成 × === */
  .navbar.is-open .navbar-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .navbar.is-open .navbar-hamburger span:nth-child(2) {
    opacity: 0;
  }
  .navbar.is-open .navbar-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* === 連結列：預設滑出螢幕外，開啟時滑入 === */
  .navbar-links {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    /* 用 dvh 解決 iOS Safari 網址列伸縮造成的高度錯亂 */
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-height: calc(100dvh - 64px);
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 32px 24px !important;
    gap: 8px !important;
    background: #1d1d1f;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 10000;
  }
  .navbar.is-open .navbar-links {
    transform: translateX(0);
  }

  /* === 連結樣式：大觸控區、清晰字級 === */
  .navbar-links a {
    font-size: 18px !important;
    padding: 16px 4px !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    display: block !important;
  }
  .navbar-links a:hover,
  .navbar-links a.active {
    opacity: 1 !important;
    font-weight: 600 !important;
    transform: none !important;
    text-shadow: none !important;
  }
  .navbar-links a:last-child {
    border-bottom: none;
  }

  /* === 申請計畫按鈕（CTA）：保持膠囊形狀，但大一點 === */
  .navbar-links .navbar-cta {
    margin-top: 16px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    text-align: center !important;
    border-radius: 980px !important;
    border-bottom: none !important;
    width: fit-content !important;
  }

  /* === 鎖定背景捲動 === */
  body.nav-open {
    overflow: hidden;
  }
}

/* 小手機微調（≤ 480px） */
@media (max-width: 480px) {
  .navbar-links a {
    font-size: 17px !important;
    padding: 14px 4px !important;
  }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   🎯 圓形 Carousel 按鈕：箭頭對比修正
   原本 color: #fff 在 #d8d8d8 背景上對比度太低，手機上箭頭幾乎消失
   ========================================================================== */

.carousel-btn,
.explore-btn {
  color: #1d1d1f !important;  /* 深色箭頭 → 淺灰底上清楚可見 */
}
.carousel-btn:hover:not(:disabled),
.explore-btn:hover:not(:disabled) {
  background: #1d1d1f !important;
  color: #fff !important;     /* hover 時反相：深底白箭頭 */
}

/* Dark mode：反過來的邏輯 */
@media (prefers-color-scheme: dark) {
  .carousel-btn,
  .explore-btn {
    color: #f5f5f7 !important;  /* 淺色箭頭 → 深灰底上清楚 */
  }
  .carousel-btn:hover:not(:disabled),
  .explore-btn:hover:not(:disabled) {
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
  }
}