/* ============================================================
   全球文明史门户网站 — themes.css
   六大文明主题变量 (通过 [data-civ] 选择器)
   ============================================================ */

/* ============================================================
   中国古代 — chinese
   ============================================================ */
[data-civ="chinese"] {
  --accent:        #9D2933;
  --accent-dark:   #6B1E22;
  --accent-light:  #C23E45;
  --tag-bg:        #F0E8D8;
  --tag-text:      #9D2933;
  --gradient-from: #9D2933;
  --gradient-to:   #C23E45;
  --shadow-colored: 0 4px 16px rgba(157, 41, 51, 0.15);
  --nav-active-color: #9D2933;
  --logo-bg:        #9D2933;
  --card-accent-bar: #9D2933;
  --link-hover:     #C23E45;
  --page-bg-image:  url('../../images/new/chinese.png');
}

/* ---- 中国古代 — 主题专属元素 ---- */
[data-civ="chinese"] .site-header__nav a.active,
[data-civ="chinese"] .site-header__nav a[aria-current="page"] {
  color: #9D2933;
  border-bottom-color: #9D2933;
}

[data-civ="chinese"] .site-header__logo-icon {
  background-color: #9D2933;
}

[data-civ="chinese"] .btn--primary {
  --btn-bg: #9D2933;
  --btn-bg-hover: #6B1E22;
}

[data-civ="chinese"] .sidebar-card__title::after {
  background-color: #9D2933;
}

[data-civ="chinese"] .pagination__item.active,
[data-civ="chinese"] .pagination__item--active {
  background-color: #9D2933;
  border-color: #9D2933;
}

[data-civ="chinese"] .breadcrumb__separator {
  color: #9D2933;
}

/* ============================================================
   古代欧洲 — europe
   ============================================================ */
[data-civ="europe"] {
  --accent:        #3D5A80;
  --accent-dark:   #2A4060;
  --accent-light:  #5A7DA8;
  --tag-bg:        #E8EEF5;
  --tag-text:      #3D5A80;
  --gradient-from: #3D5A80;
  --gradient-to:   #5A7DA8;
  --shadow-colored: 0 4px 16px rgba(61, 90, 128, 0.15);
  --nav-active-color: #3D5A80;
  --logo-bg:        #3D5A80;
  --card-accent-bar: #3D5A80;
  --link-hover:     #5A7DA8;
  --page-bg-image:  url('../../images/new/europe.png');
}

[data-civ="europe"] .site-header__nav a.active,
[data-civ="europe"] .site-header__nav a[aria-current="page"] {
  color: #3D5A80;
  border-bottom-color: #3D5A80;
}

[data-civ="europe"] .site-header__logo-icon {
  background-color: #3D5A80;
}

[data-civ="europe"] .btn--primary {
  --btn-bg: #3D5A80;
  --btn-bg-hover: #2A4060;
}

[data-civ="europe"] .sidebar-card__title::after {
  background-color: #3D5A80;
}

[data-civ="europe"] .pagination__item.active,
[data-civ="europe"] .pagination__item--active {
  background-color: #3D5A80;
  border-color: #3D5A80;
}

[data-civ="europe"] .breadcrumb__separator {
  color: #3D5A80;
}

/* ============================================================
   西亚北非 — westasia
   ============================================================ */
[data-civ="westasia"] {
  --accent:        #B8860B;
  --accent-dark:   #8A6508;
  --accent-light:  #D4A832;
  --tag-bg:        #F5EBD1;
  --tag-text:      #8A6508;
  --gradient-from: #B8860B;
  --gradient-to:   #D4A832;
  --shadow-colored: 0 4px 16px rgba(184, 134, 11, 0.15);
  --nav-active-color: #B8860B;
  --logo-bg:        #B8860B;
  --card-accent-bar: #B8860B;
  --link-hover:     #D4A832;
  --page-bg-image:  url('../../images/new/westasia.png');
}

[data-civ="westasia"] .site-header__nav a.active,
[data-civ="westasia"] .site-header__nav a[aria-current="page"] {
  color: #B8860B;
  border-bottom-color: #B8860B;
}

[data-civ="westasia"] .site-header__logo-icon {
  background-color: #B8860B;
}

[data-civ="westasia"] .btn--primary {
  --btn-bg: #B8860B;
  --btn-bg-hover: #8A6508;
}

[data-civ="westasia"] .sidebar-card__title::after {
  background-color: #B8860B;
}

[data-civ="westasia"] .pagination__item.active,
[data-civ="westasia"] .pagination__item--active {
  background-color: #B8860B;
  border-color: #B8860B;
}

[data-civ="westasia"] .breadcrumb__separator {
  color: #B8860B;
}

/* ============================================================
   近现代地缘 — modern
   ============================================================ */
[data-civ="modern"] {
  --accent:        #34546D;
  --accent-dark:   #233A4D;
  --accent-light:  #507A8E;
  --tag-bg:        #E8EDEF;
  --tag-text:      #34546D;
  --gradient-from: #34546D;
  --gradient-to:   #507A8E;
  --shadow-colored: 0 4px 16px rgba(52, 84, 109, 0.15);
  --nav-active-color: #34546D;
  --logo-bg:        #34546D;
  --card-accent-bar: #34546D;
  --link-hover:     #507A8E;
  --page-bg-image:  url('../../images/new/modern.png');
}

[data-civ="modern"] .site-header__nav a.active,
[data-civ="modern"] .site-header__nav a[aria-current="page"] {
  color: #34546D;
  border-bottom-color: #34546D;
}

[data-civ="modern"] .site-header__logo-icon {
  background-color: #34546D;
}

[data-civ="modern"] .btn--primary {
  --btn-bg: #34546D;
  --btn-bg-hover: #233A4D;
}

[data-civ="modern"] .sidebar-card__title::after {
  background-color: #34546D;
}

[data-civ="modern"] .pagination__item.active,
[data-civ="modern"] .pagination__item--active {
  background-color: #34546D;
  border-color: #34546D;
}

[data-civ="modern"] .breadcrumb__separator {
  color: #34546D;
}

/* ============================================================
   古代日本 — japan
   ============================================================ */
[data-civ="japan"] {
  --accent:        #2D5F4E;
  --accent-dark:   #1F4538;
  --accent-light:  #4A8A6E;
  --tag-bg:        #E5EDE8;
  --tag-text:      #2D5F4E;
  --gradient-from: #2D5F4E;
  --gradient-to:   #4A8A6E;
  --shadow-colored: 0 4px 16px rgba(45, 95, 78, 0.15);
  --nav-active-color: #2D5F4E;
  --logo-bg:        #2D5F4E;
  --card-accent-bar: #2D5F4E;
  --link-hover:     #4A8A6E;
  --page-bg-image:  url('../../images/new/japan.png');
}

[data-civ="japan"] .site-header__nav a.active,
[data-civ="japan"] .site-header__nav a[aria-current="page"] {
  color: #2D5F4E;
  border-bottom-color: #2D5F4E;
}

[data-civ="japan"] .site-header__logo-icon {
  background-color: #2D5F4E;
}

[data-civ="japan"] .btn--primary {
  --btn-bg: #2D5F4E;
  --btn-bg-hover: #1F4538;
}

[data-civ="japan"] .sidebar-card__title::after {
  background-color: #2D5F4E;
}

[data-civ="japan"] .pagination__item.active,
[data-civ="japan"] .pagination__item--active {
  background-color: #2D5F4E;
  border-color: #2D5F4E;
}

[data-civ="japan"] .breadcrumb__separator {
  color: #2D5F4E;
}

/* ============================================================
   古代印度 — india
   ============================================================ */
[data-civ="india"] {
  --accent:        #C77A20;
  --accent-dark:   #9A5E18;
  --accent-light:  #E09A4A;
  --tag-bg:        #F5E8D5;
  --tag-text:      #C77A20;
  --gradient-from: #C77A20;
  --gradient-to:   #E09A4A;
  --shadow-colored: 0 4px 16px rgba(199, 122, 32, 0.15);
  --nav-active-color: #C77A20;
  --logo-bg:        #C77A20;
  --card-accent-bar: #C77A20;
  --link-hover:     #E09A4A;
  --page-bg-image:  url('../../images/new/india.png');
}

[data-civ="india"] .site-header__nav a.active,
[data-civ="india"] .site-header__nav a[aria-current="page"] {
  color: #C77A20;
  border-bottom-color: #C77A20;
}

[data-civ="india"] .site-header__logo-icon {
  background-color: #C77A20;
}

[data-civ="india"] .btn--primary {
  --btn-bg: #C77A20;
  --btn-bg-hover: #9A5E18;
}

[data-civ="india"] .sidebar-card__title::after {
  background-color: #C77A20;
}

[data-civ="india"] .pagination__item.active,
[data-civ="india"] .pagination__item--active {
  background-color: #C77A20;
  border-color: #C77A20;
}

[data-civ="india"] .breadcrumb__separator {
  color: #C77A20;
}

/* ============================================================
   渐变色背景 (通用于所有主题)
   ============================================================ */
.gradient-bg {
  background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
}

.gradient-bg-horizontal {
  background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
}

/* ============================================================
   主题过渡动画 (主题切换时平滑过渡)
   ============================================================ */
body,
.site-header__logo-icon,
.btn--primary,
.sidebar-card__title::after,
.pagination__item.active,
.pagination__item--active,
.tag,
a {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}