/**
 * 奧哲雲樞 CN/AoZheChuanYun — 深色底 + 淺色卡片可讀性
 * 2026-07-14
 */

/* Hero / 淺綠區 — 必須用實色淺底，不能用半透明（否則疊在深色 body 上變暗） */
body.platform-dark-hub .hero-gradient,
body.platform-dark-hub .hero-grad,
body.azcy-hub .hero-grad,
body.azcy-hub .hero-gradient {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 48%, #ffffff 100%) !important;
  color: #1f2937;
  position: relative;
  z-index: 1;
}

/* 角色路徑頁：hero 下方 main 連貫白底 */
body.azcy-hub:has(.hero-grad) main,
body.azcy-hub:has(.hero-gradient) main {
  background: #ffffff;
  position: relative;
  z-index: 1;
}

body.platform-dark-hub .hero-grad .platform-breadcrumb,
body.platform-dark-hub .hero-grad .platform-breadcrumb--hero {
  background: transparent !important;
  border-bottom: none !important;
}

body.platform-dark-hub .hero-grad .platform-breadcrumb .text-gray-500,
body.platform-dark-hub .hero-grad .platform-breadcrumb a {
  color: #6b7280 !important;
}

body.platform-dark-hub .hero-grad .platform-breadcrumb .text-gray-800,
body.platform-dark-hub .hero-grad .platform-breadcrumb span.font-medium {
  color: #1f2937 !important;
}

body.platform-dark-hub .glow-text {
  color: #34d399 !important;
  text-shadow: 0 0 18px rgba(16, 185, 129, 0.35);
}

/* 淺色表面：統一深色字（修復白字疊白底） */
body.platform-dark-hub .card-tech,
body.platform-dark-hub .tech-card,
body.platform-dark-hub .jdy-card,
body.platform-dark-hub .bg-white,
body.platform-dark-hub .bg-gray-50,
body.platform-dark-hub [class*="bg-emerald-50"],
body.platform-dark-hub section[class*="from-gray-50"],
body.platform-dark-hub section[class*="to-gray-100"],
body.platform-dark-hub [class*="from-[#10B981]/10"] {
  color: #374151;
}

body.platform-dark-hub .card-tech h1,
body.platform-dark-hub .card-tech h2,
body.platform-dark-hub .card-tech h3,
body.platform-dark-hub .card-tech h4,
body.platform-dark-hub .card-tech h5,
body.platform-dark-hub .card-tech h6,
body.platform-dark-hub .bg-white h1,
body.platform-dark-hub .bg-white h2,
body.platform-dark-hub .bg-white h3,
body.platform-dark-hub .bg-white h4,
body.platform-dark-hub .hero-gradient h1,
body.platform-dark-hub .hero-gradient h2,
body.platform-dark-hub .hero-grad h1,
body.platform-dark-hub [class*="from-[#10B981]/10"] h4 {
  color: #111827;
}

body.platform-dark-hub .card-tech .text-gray-700,
body.platform-dark-hub .card-tech .text-gray-600,
body.platform-dark-hub .bg-white .text-gray-600,
body.platform-dark-hub .bg-white .text-gray-700 {
  color: #4b5563 !important;
}

/* 卡片樣式（替代各頁 inline） */
body.platform-dark-hub .card-tech {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

body.platform-dark-hub .card-tech:hover {
  border-color: #10b981;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.15);
}

/* 深色 hub（無 hero 淺底區）：main 副標題改淺色 */
body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section > .text-center > .text-gray-700,
body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section > .text-center > .text-gray-600,
body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section > div > .text-center > .text-gray-700,
body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section > div > .text-center > .text-gray-600 {
  color: #cbd5e1 !important;
}

body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section:not([class*="from-gray"]) .text-gray-700:not(.card-tech *):not(.bg-white *):not(.hero-gradient *):not(.hero-grad *):not([class*="bg-emerald"] *) {
  color: #cbd5e1 !important;
}

body.platform-dark-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > section:not([class*="from-gray"]) .text-gray-600:not(.card-tech *):not(.bg-white *):not(.hero-gradient *):not(.hero-grad *) {
  color: #94a3b8 !important;
}

/* 有 hero 淺底區的角色頁 / index：main 白底用深色字 */
body.azcy-hub:has(.hero-grad) main h2.sec-title,
body.azcy-hub:has(.hero-gradient) main h2.sec-title,
body.azcy-hub:has(.hero-grad) main > .container > section > h2,
body.azcy-hub:has(.hero-gradient) main > .container > section > h2,
body.azcy-hub:has(.hero-grad) main section > h2:not(.card-tech h2),
body.azcy-hub:has(.hero-gradient) main section > h2:not(.card-tech h2) {
  color: #111827 !important;
}

body.azcy-hub:has(.hero-grad) main > .container > section > p.text-gray-500,
body.azcy-hub:has(.hero-gradient) main > .container > section > p.text-gray-500,
body.azcy-hub:has(.hero-grad) main section > p.text-sm.text-gray-500,
body.azcy-hub:has(.hero-gradient) main section > p.text-sm.text-gray-500,
body.azcy-hub:has(.hero-grad) main .text-gray-500:not(.card-tech *):not(.bg-white *):not(.hero-grad *),
body.azcy-hub:has(.hero-gradient) main .text-gray-500:not(.card-tech *):not(.bg-white *):not(.hero-gradient *) {
  color: #6b7280 !important;
}

body.azcy-hub:has(.hero-grad) main .text-gray-900:not(.card-tech *):not(.bg-white *):not(.hero-grad *):not(.hero-gradient *),
body.azcy-hub:has(.hero-gradient) main .text-gray-900:not(.card-tech *):not(.bg-white *):not(.hero-grad *):not(.hero-gradient *) {
  color: #111827 !important;
}

body.azcy-hub:has(.hero-grad) main .text-gray-600:not(.card-tech *):not(.bg-white *):not(.hero-grad *),
body.azcy-hub:has(.hero-gradient) main .text-gray-600:not(.card-tech *):not(.bg-white *):not(.hero-gradient *) {
  color: #4b5563 !important;
}

body.azcy-hub:has(.hero-grad) main .text-gray-700:not(.card-tech *):not(.bg-white *):not(.hero-grad *),
body.azcy-hub:has(.hero-gradient) main .text-gray-700:not(.card-tech *):not(.bg-white *):not(.hero-gradient *) {
  color: #374151 !important;
}

body.azcy-hub:has(.hero-grad) main .text-gray-800:not(.card-tech *):not(.bg-white *),
body.azcy-hub:has(.hero-gradient) main .text-gray-800:not(.card-tech *):not(.bg-white *) {
  color: #1f2937 !important;
}

/* 深色 hub（無 hero）：保留淺色標題 */
body.azcy-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main h2.sec-title,
body.azcy-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main > .container > section > h2,
body.azcy-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main section > h2:not(.card-tech h2) {
  color: #f1f5f9 !important;
}

body.azcy-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main .text-gray-900:not(.card-tech *):not(.bg-white *) {
  color: #f1f5f9 !important;
}

body.azcy-hub:not(:has(.hero-grad)):not(:has(.hero-gradient)) main .text-gray-600:not(.card-tech *):not(.bg-white *) {
  color: #cbd5e1 !important;
}

/* 卡片內保持深色字（提高優先順序） */
body.azcy-hub main .card-tech .text-gray-900,
body.azcy-hub main .card-tech h3.text-gray-900 {
  color: #111827 !important;
}

body.azcy-hub main .card-tech .text-gray-600,
body.azcy-hub main .card-tech .text-gray-700 {
  color: #4b5563 !important;
}

body.azcy-hub main .card-tech .text-xs.text-gray-600 {
  color: #6b7280 !important;
}

/* Hero 淺綠區保持深色字 */
body.azcy-hub .hero-grad .text-gray-900,
body.azcy-hub .hero-grad h1.text-gray-900 {
  color: #111827 !important;
}

body.azcy-hub .hero-grad .text-gray-600 {
  color: #4b5563 !important;
}

body.azcy-hub .hero-grad .text-gray-500 {
  color: #6b7280 !important;
}

body.azcy-hub .hero-grad .text-gray-800 {
  color: #1f2937 !important;
}

/* 角色路徑頁 main：淺綠 hero 下方內容區保持可讀 */
body.azcy-hub main {
  position: relative;
  z-index: 1;
}

/* 覆蓋 platform-common 在 hero 頁對白底的淺色字 */
body.azcy-hub:has(.hero-grad) main .text-gray-700:not(.card-tech *):not(.tech-card *):not(.bg-white *):not(.hero-grad *),
body.azcy-hub:has(.hero-gradient) main .text-gray-700:not(.card-tech *):not(.tech-card *):not(.bg-white *):not(.hero-gradient *) {
  color: #374151 !important;
}

body.azcy-hub:has(.hero-grad) main .text-gray-600:not(.card-tech *):not(.tech-card *):not(.bg-white *):not(.hero-grad *),
body.azcy-hub:has(.hero-gradient) main .text-gray-600:not(.card-tech *):not(.tech-card *):not(.bg-white *):not(.hero-gradient *) {
  color: #4b5563 !important;
}

body.azcy-hub:has(.hero-grad) main table tbody,
body.azcy-hub:has(.hero-gradient) main table tbody {
  color: #374151 !important;
}

/* 導航下「學完下一步」條：與 hero 區銜接 */
body.azcy-hub .platform-read-path.fec-step-bar {
  background: linear-gradient(90deg, #ecfdf5, #f0fdf4);
  border-bottom: 1px solid #a7f3d0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

body.azcy-hub .bg-white,
body.azcy-hub .card-tech {
  color: #374151;
}

body.azcy-hub .bg-white h2,
body.azcy-hub .bg-white h3,
body.azcy-hub .card-tech h3 {
  color: #111827;
}

@media (max-width: 640px) {
  body.platform-dark-hub .card-tech {
    padding: 1rem !important;
  }
}