/*
Theme Name: 12Zodiacs Child
Theme URI: https://12zodiacs.com
Description: Child theme for Blocksy - 12Zodiacs custom styles
Author: YL
Template: blocksy
Version: 3.2.0
Text Domain: blocksy-child
*/

/* 12Zodiacs Child Theme - Blocksy-Aligned Stylesheet v3.1
 * Fixed: full-width sections + removed wp_footer hook + dedup inline styles
 * Updated: 2026-07-18
 */

/* ===== Brand Colors → Imperial Purple & Gold (2026-07-18) ===== */
:root {
  --theme-palette-color-1: #3D2B5C;
  --theme-palette-color-2: #5A4480;
  --theme-palette-color-3: #6B6275;
  --theme-palette-color-4: #281B3F;
  --theme-palette-color-5: #E0D9CC;
  --theme-palette-color-6: #F8F5F0;
  --theme-palette-color-7: #FAFBFC;
  --theme-palette-color-8: #FFFFFF;

  --zx-red: #3D2B5C;          /* 帝王紫 — 主色 (was 朱红) */
  --zx-gold: #C9A84C;          /* 鎏金 — 装饰 */
  --zx-dark: #281B3F;          /* 暗夜紫 — 深背景 */
  --zx-cream: #F8F5F0;         /* 宣纸白 — 卡片底 */
  --zx-green: #2D5F3F;         /* 翠绿 — 功能色(正面/木) */
  --zx-imperial: #3D2B5C;      /* 帝王紫 */
  --zx-imperial-light: #5A4480;/* 紫罗兰高亮 */
  --zx-red-accent: #A8323C;    /* 宫墙红 — CTA/语义红(负面) */
}

/* ===== Page Title Hide ===== */
.zx-hide-page-title .ct-hero-section { display: none !important; }

/* ===== FULL-WIDTH FIX ===== */
/* Blocksy's main.min.css constrains .is-layout-constrained children to var(--theme-block-width).
   Override this for our full-width section wrappers so Hero/CTA backgrounds span the viewport. */
.entry-content.is-layout-constrained > .zx-hero,
.entry-content.is-layout-constrained > .zx-section,
.entry-content.is-layout-constrained > .zx-section-cream,
.entry-content.is-layout-constrained > .zx-cta-bar,
.entry-content.is-layout-constrained > section.zx-hero,
.entry-content.is-layout-constrained > section.zx-section,
.entry-content.is-layout-constrained > section.zx-section-cream,
.entry-content.is-layout-constrained > section.zx-cta-bar {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

/* entry-content itself should not have max-width constraint */
.entry-content { max-width: none !important; }

/* ===== Typography (entry-content) ===== */
.entry-content { font-size: 1rem; line-height: 1.75; color: var(--theme-text-color); }
.entry-content h2 { font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif; font-size: 2rem; font-weight: 600; margin: 2.5em 0 0.8em; color: var(--theme-palette-color-4); }
.entry-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5em 0 0.6em; color: var(--theme-palette-color-3); }
.entry-content p { margin-bottom: 1.2em; }
.entry-content ul { margin-bottom: 1.2em; padding-left: 1.5em; }
.entry-content li { margin-bottom: 0.5em; }
.entry-content a { color: var(--zx-red); text-decoration: none; }
.entry-content a:hover { text-decoration: underline; }

/* FIX 1: Button text visibility — .entry-content a (0,1,1) overrides .zx-btn (0,1,0)
   Use .entry-content a.zx-btn (0,1,1) to match specificity, then !important as safety net */
.entry-content a.zx-btn,
.entry-content a.zx-btn-primary,
.entry-content a.zx-btn-outline { text-decoration: none !important; }
.entry-content a.zx-btn-primary { background: var(--zx-gold) !important; color: var(--zx-dark) !important; }
.entry-content a.zx-btn-outline { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
.entry-content a.zx-btn-primary:hover { background: #E0C97A !important; color: var(--zx-dark) !important; }
.entry-content a.zx-btn-outline:hover { border-color: var(--zx-gold) !important; color: var(--zx-gold) !important; }

/* FIX 3: Prevent underline on card/button links — only underline inline text links */
.entry-content a.zx-btn:hover,
.entry-content a.zx-btn-primary:hover,
.entry-content a.zx-btn-outline:hover,
.entry-content a.zx-zodiac-card:hover,
.entry-content a.zx-knowledge-card:hover,
.entry-content a.zx-feature-card:hover,
.entry-content a.zx-cl-btn:hover,
.entry-content a.zx-element-item:hover,
.entry-content a.zx-link-pill:hover { text-decoration: none !important; }

/* ===== Inner content max-width ===== */
.zx-hero-inner,
.zx-section > *,
.zx-section-cream > *,
.zx-cta-bar > * {
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ===== Hero (Homepage) ===== */
.zx-hero {
  position: relative;
  overflow: hidden;
  background: var(--zx-dark);
  color: #fff;
  text-align: center;
  padding: 100px 20px 80px;
}
/* 星象背景 — 径向渐变光晕 */
.zx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(201,168,76,0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(168,50,60,0.12) 0%, transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(90,68,128,0.25) 0%, transparent 50%);
  pointer-events: none;
}
/* 星点装饰 */
.zx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(201,168,76,0.6), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(201,168,76,0.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 20%, rgba(224,201,122,0.7), transparent),
    radial-gradient(1px 1px at 60% 60%, rgba(201,168,76,0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 35%, rgba(224,201,122,0.5), transparent),
    radial-gradient(1px 1px at 92% 70%, rgba(201,168,76,0.4), transparent),
    radial-gradient(1px 1px at 35% 75%, rgba(201,168,76,0.3), transparent),
    radial-gradient(1px 1px at 55% 90%, rgba(201,168,76,0.4), transparent);
  pointer-events: none;
}
.zx-hero-inner { position: relative; z-index: 1; max-width: 1290px; margin: 0 auto; padding: 0 20px; }
.zx-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); color: #E0C97A;
  border-radius: 100px; padding: 6px 18px; margin-bottom: 28px;
}
.zx-hero-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--zx-gold);
}
.zx-hero h1 {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  font-size: 3.5rem; font-weight: 600; line-height: 1.08; margin: 0 0 24px; color: #fff;
  letter-spacing: -0.5px;
}
.zx-gold-text { color: var(--zx-gold); font-style: italic; font-weight: 500; }
.zx-hero-sub {
  font-size: 1.15rem; max-width: 600px; margin: 0 auto 44px;
  opacity: 0.75; line-height: 1.6; font-weight: 300;
}
.zx-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

/* ===== 信任数据条 ===== */
.zx-trust-bar {
  display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
  margin-top: 56px; padding: 20px 0;
  border-top: 1px solid rgba(201,168,76,0.2);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.zx-trust-item {
  text-align: center; padding: 0 32px;
  border-right: 1px solid rgba(201,168,76,0.15);
}
.zx-trust-item:last-child { border-right: none; }
.zx-trust-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem; font-weight: 600; color: var(--zx-gold);
  line-height: 1; margin-bottom: 4px;
}
.zx-trust-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
  color: rgba(248,245,240,0.6); font-weight: 500;
}

/* ===== Buttons ===== */
.zx-btn {
  display: inline-block; padding: 16px 36px; border-radius: 100px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: all 0.25s ease; cursor: pointer; border: none;
}
.zx-btn-primary {
  background: var(--zx-gold); color: var(--zx-dark);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}
.zx-btn-primary:hover { background: #E0C97A; color: var(--zx-dark); transform: translateY(-1px); text-decoration: none; }
.zx-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.zx-btn-outline:hover { border-color: var(--zx-gold); color: var(--zx-gold); text-decoration: none; }

/* ===== Dual Finder Panels ===== */
.zx-finder-dual { display: flex; gap: 24px; flex-wrap: wrap; }
.zx-finder-panel {
  flex: 1; min-width: 280px;
  background: #fff; color: var(--zx-dark);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.zx-finder-panel h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--zx-dark); }
.zx-finder-desc { font-size: 0.85rem; color: #666; margin: 0 0 16px; }
.zx-finder-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.zx-select-wrap { flex: 1; min-width: 100px; }
.zx-select-wrap.zx-grow { flex: 2; min-width: 120px; }
.zx-select-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 4px; }
.zx-finder-panel select, .zx-input {
  width: 100%; padding: 10px 28px 10px 12px;
  border: 2px solid var(--theme-palette-color-5);
  border-radius: 10px; font-size: 0.95rem; background: #fff;
  appearance: auto; -webkit-appearance: auto; -moz-appearance: auto;
}
.zx-finder-panel select:focus, .zx-input:focus { border-color: var(--zx-red); outline: none; }
.zx-finder-btn {
  width: 100%; padding: 14px;
  background: var(--zx-gold); color: var(--zx-dark);
  border: none; border-radius: 100px;
  font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
  box-shadow: 0 2px 12px rgba(201,168,76,0.25);
}
.zx-finder-btn:hover { background: var(--zx-gold); color: var(--zx-dark); }

/* ===== Section Wrappers ===== */
.zx-section { padding: 80px 20px; text-align: center; }
.zx-section-cream { background: var(--zx-cream); padding: 80px 20px; }
.zx-section-title {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  font-size: 2.2rem; font-weight: 600; margin: 0 0 12px; color: var(--zx-dark);
  letter-spacing: -0.3px;
}
.zx-section-sub { font-size: 1.05rem; color: var(--theme-palette-color-3); max-width: 650px; margin: 0 auto 48px; }

/* ===== Zodiac Grid (Homepage) ===== */
.zx-zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.zx-zodiac-card {
  display: block; text-align: center; text-decoration: none;
  background: #fff; border-radius: 14px; padding: 24px 12px;
  border: 2px solid transparent;
  transition: all 0.25s ease; cursor: pointer;
}
.zx-zodiac-card:hover { border-color: var(--card-color, var(--zx-red)); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-decoration: none; }
.zx-zodiac-char { font-family: 'Noto Serif SC', serif; font-size: 2.5rem; font-weight: 700; color: var(--card-color, var(--zx-red)); margin-bottom: 8px; }
.zx-zodiac-name { font-size: 1rem; font-weight: 700; color: var(--zx-dark); margin: 4px 0 2px; }
.zx-zodiac-branch { font-size: 0.8rem; color: #999; }
@media (max-width: 900px) { .zx-zodiac-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .zx-zodiac-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ===== Feature Cards (4-col) ===== */
.zx-features, .zx-features-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.zx-feature-card {
  background: #fff; border: 1px solid var(--theme-palette-color-5);
  border-radius: 16px; padding: 32px 24px; text-align: center;
  transition: all 0.25s ease;
}
.zx-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.zx-feature-icon { font-size: 2.5rem; margin-bottom: 16px; }
.zx-feature-card h3 { font-size: 1.15rem; margin: 0 0 12px; color: var(--zx-dark); }
.zx-feature-card p { font-size: 0.9rem; color: #666; line-height: 1.6; margin: 0 0 16px; }
.zx-feature-card a { font-weight: 600; color: var(--zx-gold); text-decoration: none; }
.zx-feature-card a:hover { color: var(--zx-imperial); }
.zx-feature-bazi { border: 2px solid var(--zx-gold); position: relative; }
.zx-feature-bazi::after { content: "POPULAR"; position: absolute; top: -10px; right: 16px; background: var(--zx-gold); color: var(--zx-dark); font-size: 0.65rem; font-weight: 700; padding: 3px 10px; border-radius: 10px; }
@media (max-width: 900px) { .zx-features, .zx-features-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zx-features, .zx-features-4 { grid-template-columns: 1fr; } }

/* ===== Knowledge Grid ===== */
.zx-knowledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zx-knowledge-card {
  display: block; background: #fff; border: 1px solid var(--theme-palette-color-5);
  border-radius: 14px; padding: 28px 24px; text-decoration: none; color: var(--zx-dark);
  transition: all 0.25s ease;
}
.zx-knowledge-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); border-color: var(--zx-gold); text-decoration: none; }
.zx-knowledge-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--zx-imperial); background: rgba(61,43,92,0.08); padding: 4px 12px; border-radius: 10px; margin-bottom: 14px; }
.zx-knowledge-card h3 { font-size: 1.2rem; margin: 0 0 10px; color: var(--zx-dark); }
.zx-knowledge-card p { font-size: 0.85rem; color: #666; line-height: 1.6; margin: 0 0 16px; }
.zx-knowledge-count { font-size: 0.8rem; font-weight: 600; color: var(--zx-gold); }
.zx-knowledge-ten-gods { border-left: 4px solid var(--zx-red); }
.zx-knowledge-nayin { border-left: 4px solid var(--zx-gold); }
.zx-knowledge-stems { border-left: 4px solid var(--zx-green); }
.zx-knowledge-relations { border-left: 4px solid #3B82C4; }
@media (max-width: 900px) { .zx-knowledge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zx-knowledge-grid { grid-template-columns: 1fr; } }

/* ===== Elements Bar ===== */
.zx-elements-bar { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.zx-element-item { text-align: center; text-decoration: none; padding: 16px 24px; border-radius: 14px; transition: all 0.25s ease; }
.zx-element-item:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.zx-element-char { font-family: 'Noto Serif SC', serif; font-size: 2.5rem; font-weight: 700; }
.zx-element-name { font-size: 0.9rem; font-weight: 600; color: #666; margin-top: 4px; }

/* ===== CTA Bar ===== */
.zx-cta-bar {
  position: relative; overflow: hidden;
  background: var(--zx-dark); color: #fff; text-align: center; padding: 80px 20px;
}
.zx-cta-bar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(201,168,76,0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(168,50,60,0.08) 0%, transparent 45%);
}
.zx-cta-bar > * { position: relative; z-index: 1; }
.zx-cta-bar .zx-hero-cta { justify-content: center; }
.zx-cta-bar h2 {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  color: var(--zx-gold); font-size: 2.4rem; font-weight: 600; margin: 0 0 16px;
  letter-spacing: -0.3px;
}
.zx-cta-bar p { font-size: 1.05rem; opacity: 0.7; margin: 0 0 32px; max-width: 580px; margin-left: auto; margin-right: auto; }

/* ===== Zodiac Detail Page ===== */
.zx-detail-hero { background: var(--zx-cream); border-radius: 16px; padding: 32px; margin-bottom: 32px; display: flex; align-items: center; gap: 24px; max-width: 820px; margin-left: auto; margin-right: auto; }
.zx-detail-hero-char { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--sign-color, var(--zx-red)); }
.zx-detail-hero-title { font-size: 2rem; font-weight: 700; margin: 0 0 8px; color: var(--zx-dark); line-height: 1.3; }
.zx-pairing-title { font-size: 1.8rem; font-weight: 700; color: var(--zx-dark); margin: 0 0 16px; line-height: 1.3; }
.zx-detail-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.zx-hero-kw { display: inline-block; font-size: 0.8rem; padding: 4px 14px; border: 1px solid var(--sign-color, var(--zx-red)); border-radius: 16px; color: var(--sign-color, var(--zx-red)); }
.zx-detail-hero-info { flex: 1; }

.zodiac-intro { font-size: 1.05rem; line-height: 1.8; margin: 24px 0; }

.zx-quick-facts { background: var(--zx-cream); border-radius: 16px; padding: 24px 28px; margin: 32px auto; max-width: 820px; }
.zx-quick-facts h3 { font-size: 1.1rem; color: var(--zx-dark); margin: 0 0 16px; }
.zx-quick-facts table { width: 100%; border-collapse: collapse; }
.zx-quick-facts td { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.zx-quick-facts td:first-child { font-size: 0.85rem; color: #888; width: 40%; }
.zx-quick-facts td:last-child { font-weight: 600; color: var(--zx-dark); }

.zx-compat-section { background: var(--zx-cream); border-radius: 12px; padding: 20px; margin: 16px 0; }
.zx-compat-section a { font-weight: 700; }

/* ===== Pairing Score Card ===== */
.zx-compat-score-card { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; background: var(--zx-cream); border-radius: 16px; padding: 32px; margin: 24px 0; }
.zx-compat-overall { flex-shrink: 0; }
.zx-score-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: conic-gradient(var(--zx-red) calc(var(--score) * 1%), #e0d5c0 0); position: relative; }
.zx-score-circle::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.zx-score-circle > * { position: relative; z-index: 1; }
.zx-score-number { font-size: 1.8rem; font-weight: 800; color: var(--zx-red); line-height: 1; }
.zx-score-label { font-size: 0.7rem; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.zx-compat-breakdown { flex: 1; min-width: 250px; }
.zx-score-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.zx-score-bar .zx-score-label { flex: 0 0 130px; font-size: 0.85rem; color: var(--zx-dark); font-weight: 600; text-transform: none; letter-spacing: 0; }
.zx-bar-fill { flex: 1; height: 8px; border-radius: 4px; background: var(--zx-red); min-width: 60px; }
.zx-score-bar .zx-score-val { flex: 0 0 40px; font-size: 0.85rem; font-weight: 700; color: var(--zx-red); text-align: right; }

/* ===== CTA Section ===== */
.zx-cta-section { text-align: center; background: var(--zx-cream); border-radius: 12px; padding: 24px; margin: 32px 0; }
.zx-cta-section h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--zx-dark); }
.zx-cta-section a { color: var(--zx-red); font-weight: 600; text-decoration: none; }

/* ===== Lucky Elements Table ===== */
.zx-lucky-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.zx-lucky-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.zx-lucky-table td:first-child { font-weight: 600; color: #666; }
.zx-lucky-table td:last-child { font-weight: 600; color: var(--zx-dark); }

.zodiac-years-table { width: 100%; border-collapse: collapse; }
.zodiac-years-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.zodiac-years-table a { color: var(--zx-red); font-weight: 600; }

/* ===== Cross-links (mu-plugin) ===== */
.zx-crosslinks { margin: 40px auto 20px; padding: 28px; background: var(--zx-cream); border-radius: 16px; border-left: 4px solid var(--zx-gold); max-width: 820px; }
.zx-cl-section { margin-bottom: 20px; }
.zx-cl-section:last-child { margin-bottom: 0; }
.zx-cl-section h3 { font-size: 1rem; color: var(--zx-dark); margin: 0 0 8px; }
.zx-cl-links { font-size: 0.85rem; line-height: 2; color: #666; }
.zx-cl-links a { color: var(--zx-red); text-decoration: none; }
.zx-cl-links a:hover { text-decoration: underline; }
.zx-cl-cta { text-align: center; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); }
.zx-cl-btn { display: inline-block; padding: 12px 28px; background: var(--zx-red); color: #fff !important; border-radius: 12px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: background 0.2s; }
.zx-cl-btn:hover { background: var(--zx-gold); color: var(--zx-dark) !important; text-decoration: none; }

/* ===== Blocksy Native Footer Customization ===== */
.ct-footer .ct-footer-copyright {
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--theme-text-color);
}
.ct-footer .ct-footer-copyright a {
  color: var(--theme-text-color);
  text-decoration: none;
  margin: 0 4px;
}
.ct-footer .ct-footer-copyright a:hover {
  color: var(--zx-gold);
  text-decoration: underline;
}
.ct-footer .zx-footer-links {
  margin-bottom: 8px;
}
.ct-footer .zx-footer-disclaimer {
  max-width: 700px;
  margin: 8px auto 0;
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.5;
}
.ct-footer .zx-footer-copy {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.5;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .zx-hero h1 { font-size: 2rem; }
  .zx-section-title { font-size: 1.5rem; }
  .zx-finder-dual { flex-direction: column; }
  .zx-detail-hero { flex-direction: column; text-align: center; }
  .zx-detail-hero-char { font-size: 3rem; }
}

/* ===== Dedup Page Styles (replaces inline styles on 175+ pages) ===== */

/* Year/Combo page hero box */
.zx-page-hero { background: #281B3F; color: #F8F5F0; padding: 24px; border-radius: 12px; margin: 0 0 24px; }
.zx-page-hero-title { margin: 0 0 8px; font-size: 28px; color: #F8F5F0; }
.zx-page-hero-sub { margin: 0 0 16px; font-size: 16px; opacity: 0.8; }

/* Pill row + pills */
.zx-pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.zx-pill { background: rgba(255,255,255,0.1); padding: 6px 14px; border-radius: 20px; font-size: 14px; }
.zx-pill-sm { padding: 5px 12px; border-radius: 16px; font-size: 13px; }

/* Info/notice box */
.zx-info-box { background: #F8F5F0; border: 1px solid #C9A84C; padding: 16px 20px; border-radius: 8px; margin: 0 0 20px; }
.zx-info-box strong { color: #281B3F; }

/* Stats row + cards */
.zx-stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.zx-stat-card { flex: 1; min-width: 140px; background: #F8F5F0; padding: 14px; border-radius: 8px; text-align: center; }
.zx-stat-label { font-size: 12px; color: #666; text-transform: uppercase; margin-bottom: 4px; }
.zx-stat-value { font-weight: bold; }
.zx-stat-red { font-size: 20px; color: #3D2B5C; }
.zx-stat-gold { font-size: 16px; color: #C9A84C; }
.zx-stat-green { font-size: 16px; color: #2D5F3F; }

/* Section headings */
.zx-h2 { color: #281B3F; border-bottom: 2px solid #C9A84C; padding-bottom: 8px; }

/* Body text */
.zx-body { line-height: 1.8; font-size: 16px; }
.zx-body-italic { font-style: italic; color: #555; }
.zx-body-sm { margin: 0; font-size: 14px; line-height: 1.6; }
.zx-list { line-height: 2; font-size: 15px; }

/* Compatibility tags */
.zx-tag { color: white; padding: 8px 16px; border-radius: 8px; font-size: 14px; }
.zx-tag-good { background: #2D5F3F; }
.zx-tag-bad { background: #A8323C; }
.zx-tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Pros/Cons boxes (combo pages) */
.zx-pros-box { flex: 1; min-width: 200px; background: #E8F5E9; border-left: 4px solid #2D5F3F; padding: 14px 18px; border-radius: 0 8px 8px 0; }
.zx-cons-box { flex: 1; min-width: 200px; background: #FFF3E0; border-left: 4px solid #A8323C; padding: 14px 18px; border-radius: 0 8px 8px 0; }
.zx-pros-title { font-weight: bold; color: #2D5F3F; margin-bottom: 8px; }
.zx-cons-title { font-weight: bold; color: #A8323C; margin-bottom: 8px; }

/* Labels */
.zx-label-green { font-weight: bold; color: #2D5F3F; }
.zx-label-red { font-weight: bold; color: #A8323C; }

/* Disclaimer box */
.zx-disclaimer { margin-top: 40px; padding: 16px; background: #f5f5f5; border-radius: 8px; font-size: 13px; color: #888; }

/* ===== Round 2: Famous people cards + combo extras ===== */
.zx-famous-grid { display: grid; gap: 12px; }
.zx-famous-card { display: flex; gap: 12px; padding: 12px; background: #F8F5F0; border-radius: 8px; }
.zx-famous-avatar { min-width: 40px; text-align: center; }
.zx-famous-emoji { font-size: 20px; }
.zx-famous-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.zx-h2-mt { margin-top: 32px; }
.zx-link-pill { background: #F8F5F0; color: #281B3F; padding: 5px 12px; border-radius: 16px; text-decoration: none; font-size: 13px; border: 1px solid #C9A84C; }
.zx-link-pill:hover { text-decoration: none; opacity: 0.85; }
.zx-links-box { margin: 0 0 20px; padding: 16px; background: #F8F5F0; border-radius: 8px; }
.zx-section-mini { margin: 0 0 8px; color: #3D2B5C; font-size: 17px; }
.zx-body-15 { font-size: 15px; }

/* ===== Round 3: combo residuals + gradient boxes ===== */
.zx-gap-sm { gap: 6px !important; }
.zx-mb-24 { margin: 0 0 24px; }
.zx-bold-mb8 { font-weight: bold; margin-bottom: 8px; }
.zx-gradient-box { margin: 24px 0; padding: 16px; background: linear-gradient(135deg,#f8f5f0,#fff); border-radius: 12px; }
.zx-grad-gold { border-left: 4px solid #C9A84C; }
.zx-grad-blue { border-left: 4px solid #3B82C4; }
.zx-grad-red { border-left: 4px solid #A8323C; }
.zx-grad-green { border-left: 4px solid #2D5F3F; }
.zx-radius-round { border-radius: 20px; }

/* ===== Mobile Responsive Enhancements ===== */
@media (max-width: 768px) {
  /* Hero 缩小标题避免换行混乱 */
  .zx-hero h1 { font-size: 2.2rem; }
  .zx-hero { padding: 60px 16px 48px; }
  .zx-hero-sub { font-size: 1rem; }

  /* 信任数据条缩小 */
  .zx-trust-bar { gap: 0; padding: 16px 0; margin-top: 40px; }
  .zx-trust-item { padding: 0 16px; }
  .zx-trust-num { font-size: 1.5rem; }
  .zx-trust-label { font-size: 0.65rem; }

  /* 查询面板优化 */
  .zx-finder-panel { padding: 20px 16px; }
  .zx-finder-row { gap: 8px; }

  /* Section 间距适中 */
  .zx-section, .zx-section-cream { padding: 48px 16px; }
  .zx-section-title { font-size: 1.6rem; }
  .zx-section-sub { font-size: 0.95rem; margin-bottom: 32px; }

  /* 生肖卡片更紧凑 */
  .zx-zodiac-grid { gap: 8px; }
  .zx-zodiac-card { padding: 16px 8px; }
  .zx-zodiac-char { font-size: 2rem; }

  /* 工具卡片文字加大 */
  .zx-feature-card { padding: 24px 16px; }
  .zx-feature-card p { font-size: 0.85rem; }

  /* 知识卡片 */
  .zx-knowledge-card { padding: 20px 16px; }
  .zx-knowledge-card p { font-size: 0.82rem; }

  /* CTA */
  .zx-cta-bar { padding: 48px 16px; }
  .zx-cta-bar h2 { font-size: 1.8rem; }

  /* 按钮宽度优化 */
  .zx-hero-cta { gap: 12px; }
  .zx-btn { padding: 14px 24px; font-size: 0.95rem; }
}
/* ---- Page 20: Chinese Zodiac Overview ---- */
/* Use existing design patterns, alias no-prefix classes to zx- system */

/* Hero title block */
.page-id-20 .zx-page-title {
  background: #281B3F; color: #F8F5F0;
  padding: 28px 32px; border-radius: 12px; margin: 0 0 32px;
  font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700;
  text-align: center; line-height: 1.3;
}
/* Zodiac grid — 4 cols for 12 signs (vs 6 cols for smaller sets) */
.page-id-20 .zodiac-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.page-id-20 .zodiac-card {
  background: #fff; padding: 24px 16px; text-align: center;
  border: 1px solid rgba(61,43,92,0.08); border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.page-id-20 .zodiac-card:hover {
  transform: translateY(-3px); box-shadow: 0 6px 20px rgba(61,43,92,0.1);
}
.page-id-20 .zodiac-card a { text-decoration: none; color: inherit; }
.page-id-20 .zodiac-card strong {
  font-family: 'Cormorant Garamond', serif; font-size: 1.1rem;
  color: #3D2B5C; display: block; margin-bottom: 8px;
}
.page-id-20 .zodiac-card span { font-size: 0.85rem; color: #6B5F7E; }
/* FAQ */
.page-id-20 .zodiac-faq p {
  background: rgba(201,168,76,0.06); border-left: 3px solid #C9A84C;
  padding: 16px 20px; margin-bottom: 12px; border-radius: 0 8px 8px 0;
}
@media (max-width: 768px) {
  .page-id-20 .zodiac-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}