﻿/* ============================================================
   FILE: homepage-harmony.css
   首页色彩统一 — 减少颜色杂乱，提升协调感
   Project: Gentlwish.com
   ============================================================
   覆盖 Elementor + Astra 主题的默认颜色，
   让首页视觉更统一、高级。
   ============================================================ */

/* ========================================
   1. 全局链接颜色覆盖（原主题是绿色）
   ======================================== */

a, 
.page-title,
.entry-content a,
.elementor a {
  color: var(--color-primary) !important;
}

a:hover,
a:focus,
.entry-content a:hover,
.elementor a:hover {
  color: var(--color-primary-hover) !important;
}

/* ========================================
   2. Elementor 标题 — 统一使用深色
   ======================================== */

.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
  color: var(--color-text) !important;
  font-family: var(--font-heading) !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}

/* Hero 标题用最大字重 */
.elementor-widget-heading h1.elementor-heading-title {
  font-weight: var(--font-weight-heading-700) !important;
}

.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
  font-weight: var(--font-weight-heading-600) !important;
}

/* 副标题保持轻盈 */
.elementor-widget-heading .gentlwish-subtitle,
.elementor-widget-heading .hero-subtitle {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-body-400) !important;
  color: var(--color-text-light) !important;
}

/* ========================================
   3. Elementor 按钮 — 统一为 burgundy
   ======================================== */

.elementor-button,
.elementor-button-link,
.elementor-widget-button .elementor-button {
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-body-500) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

/* 主要按钮 */
.elementor-button:not(.elementor-button-secondary):not(.elementor-size-sm) {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
  fill: var(--color-primary-text) !important;
  border: none !important;
}

.elementor-button:not(.elementor-button-secondary):hover {
  background-color: var(--color-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-elevation);
}

/* 描边/次要按钮样式 */
.elementor-button.elementor-size-sm,
a.elementor-button-link[href*="shop"] {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
}

.elementor-button.elementor-size-sm:hover,
a.elementor-button-link[href*="shop"]:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
}

/* ========================================
   4. Elementor 区块背景统一
   ======================================== */

.elementor-section,
.elementor-element.e-con,
.elementor-element.e-con-boxed {
  background-color: var(--color-bg) !important;
}

/* 白色卡片区块保持白色 */
.elementor-element[style*="background"],
.elementor-section[style*="background"] {
  /* Elementor 内联背景保留，不强制覆盖 */
}

/* ========================================
   5. 移除多余的分类强调色 — 首页不显示
   ======================================== */

/* 分类卡片统一使用主色，不显示5种不同颜色 */
.gentlwish-category-card .category-name,
.gentlwish-category-card[data-category] .category-name {
  color: var(--color-text) !important;
}

.gentlwish-category-card[data-category] .category-count {
  color: var(--color-text-muted) !important;
}

/* 分类卡片上的装饰线统一金色 */
.gentlwish-category-card .category-accent {
  background: var(--color-secondary) !important;
}

/* ========================================
   6. Elementor 文本颜色 — 统一
   ======================================== */

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor .elementor-text-editor {
  color: var(--color-text-light) !important;
  font-family: var(--font-body) !important;
  line-height: var(--line-height-body) !important;
}

/* ========================================
   7. 首页 Hero 区特别优化
   ======================================== */

/* Hero 背景统一 */
.elementor-element[data-element_type="container"] 
[style*="background"]:first-of-type {
  background-color: var(--color-bg) !important;
}

/* Hero 文字间距优化 */
.elementor-element:first-of-type 
.elementor-heading-title {
  letter-spacing: -0.01em;
}

/* ========================================
   8. WooCommerce 商店页面 — 减少颜色
   ======================================== */

.woocommerce .price,
.woocommerce-Price-amount {
  color: var(--color-primary) !important;
}

.woocommerce .star-rating {
  color: var(--color-secondary) !important;
}

/* ========================================
   9. Elementor Icon 统一
   ======================================== */

.elementor-icon,
.elementor-icon i,
.elementor-icon svg {
  color: var(--color-secondary) !important;
  fill: var(--color-secondary) !important;
}

/* ========================================
   10. Astra 主题全局覆盖
   ======================================== */

/* 防止 Astra 的绿色干扰 */
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
  background: var(--color-bg);
}

/* 覆盖 Astra 的 primary color 变量 */
:root {
  --ast-global-color-0: var(--color-primary) !important;
  --ast-global-color-1: var(--color-primary-hover) !important;
}
