/* ─────────────────────────────────────────────────────────────────────────
   v2.3 OVERRIDES — bright gold, dynamic icon swap, astrology vector bg.
   This file is appended after main.css and forces the correct values
   with high specificity (html selector + !important on critical tokens).
   ───────────────────────────────────────────────────────────────────────── */

/* === FORCE BRIGHT GOLD COLOR SCHEME — wins over all earlier CSS === */
html, html:not(.dark) {
  --primary:        #e0a93a !important;       /* bright warm gold */
  --primary-light:  #f0c060 !important;
  --primary-dark:   #b88820 !important;
  --primary-fg:     #faf7f0 !important;
  --bg:             #f8f5ee !important;       /* warm cream */
  --bg-card:        #fefcf6 !important;
  --bg-muted:       #efe9dc !important;
  --border:         #e0d5be !important;
  --text:           #1a1f33 !important;       /* deep navy */
  --text-muted:     #5c6175 !important;
  --text-subtle:    #8b90a3 !important;
  --heading:        #1a1f33 !important;       /* navy headings on cream */
  --accent:         #e0a93a !important;
}

html.dark {
  --primary:        #f0c060 !important;       /* BRIGHT pop gold for dark mode */
  --primary-light:  #ffd980 !important;
  --primary-dark:   #d9a83e !important;
  --primary-fg:     #0e1019 !important;
  --bg:             #0e1019 !important;       /* deep navy */
  --bg-card:        #161a28 !important;
  --bg-muted:       #1f2436 !important;
  --border:         #2a3048 !important;
  --text:           #f8f5ee !important;       /* cream */
  --text-muted:     #b8bccd !important;
  --text-subtle:    #8088a0 !important;
  --heading:        #f0c060 !important;       /* GLOWING GOLD headings on navy */
  --accent:         #f0c060 !important;
}

/* === DYNAMIC SUN/MOON SWAP =============================================
   Light mode (default, no .dark on html) → show SUN
   Dark mode  (.dark on html)             → show MOON
   ===================================================================== */
.cc-icon-sun  { display: block !important; }
.cc-icon-moon { display: none !important; }
html.dark .cc-icon-sun  { display: none  !important; }
html.dark .cc-icon-moon { display: block !important; }

/* Make the toggle icon pop in gold */
.cc-theme-toggle .cc-icon-sun,
.cc-theme-toggle .cc-icon-moon { color: var(--primary); }

/* === HEADINGS in BRIGHT gold (dark mode) and deep navy (light mode) === */
html h1, html h2, html h3, html h4,
html .cc-h1, html .cc-section-title, html .cc-page-title,
html .cc-trust-title, html .cc-tool-title, html .cc-post-title,
html .cc-result-title, html .cc-cat-hero h1 {
  color: var(--heading) !important;
  font-family: var(--font-serif), 'Fraunces', Georgia, serif !important;
}

/* Hero title — BIG bright gold accent on dark */
html .cc-h1 .accent { color: var(--primary) !important; }
html.dark .cc-h1 .accent {
  color: #f0c060 !important;
  text-shadow: 0 0 24px rgba(240, 192, 96, 0.35);
}

/* Card titles stay in regular text color (not gold) — better readability */
html .cc-tool-name, html .cc-blog-title, html .cc-cat-name {
  color: var(--text) !important;
}
html .cc-blog-card:hover .cc-blog-title,
html .cc-tool-card:hover .cc-tool-name {
  color: var(--primary) !important;
}

/* === CENTER ALIGN section headings (Popular / Trending / Cosmic Insights) === */
.cc-section-header--center {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
  margin-bottom: 2.5rem;
}
.cc-section-header--center .cc-section-title { text-align: center !important; }
.cc-section-header--center .cc-section-sub   { text-align: center !important; max-width: 560px; margin: 0.375rem auto 0; }

/* Force these specific sections' titles centered (defensive) */
.cc-section-popular-tools .cc-section-title,
.cc-section-trending      .cc-section-title,
.cc-section-blog          .cc-section-title,
.cc-section-categories    .cc-section-title {
  text-align: center !important;
}

/* Buttons — bright gold with strong hover */
html .cc-btn-primary {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-color: var(--primary) !important;
}
html .cc-btn-primary:hover {
  background: var(--primary-light) !important;
  box-shadow: 0 6px 20px rgba(224, 169, 58, 0.4);
}
html .cc-btn-outline:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* === ASTROLOGY VECTOR BACKGROUND ART ===================================
   Subtle constellation/star/sun-moon pattern on body, layered behind everything.
   Uses inline SVGs as data-URIs so no external requests are needed.
   ===================================================================== */
body {
  position: relative;
  background:
    /* layer 1: subtle stars (small) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='%23e0a93a' opacity='0.10'><circle cx='30' cy='40' r='1'/><circle cx='110' cy='80' r='1.5'/><circle cx='220' cy='30' r='1'/><circle cx='320' cy='90' r='2'/><circle cx='370' cy='180' r='1'/><circle cx='80' cy='220' r='1.5'/><circle cx='180' cy='280' r='1'/><circle cx='280' cy='340' r='2'/><circle cx='50' cy='350' r='1'/><circle cx='350' cy='280' r='1.5'/><circle cx='150' cy='150' r='1'/><circle cx='250' cy='220' r='1.2'/></g></svg>"),
    /* layer 2: large faint zodiac wheel left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='none' stroke='%23e0a93a' stroke-width='0.5' opacity='0.06'><circle cx='300' cy='300' r='280'/><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200'/><g><line x1='300' y1='20' x2='300' y2='580'/><line x1='20' y1='300' x2='580' y2='300'/><line x1='102' y1='102' x2='498' y2='498'/><line x1='498' y1='102' x2='102' y2='498'/></g></g></svg>"),
    /* layer 3: faint moon top-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g opacity='0.08'><path d='M150 60 A90 90 0 1 0 150 240 A70 70 0 1 1 150 60 Z' fill='%23e0a93a'/></g></svg>"),
    var(--bg) !important;
  background-repeat:
    repeat,
    no-repeat,
    no-repeat;
  background-position:
    0 0,
    -180px 100px,
    calc(100% + 100px) 80px;
  background-size:
    400px 400px,
    600px 600px,
    300px 300px;
  background-attachment:
    scroll,
    fixed,
    fixed;
}

/* In dark mode, vectors glow brighter gold */
html.dark body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='%23f0c060' opacity='0.18'><circle cx='30' cy='40' r='1'/><circle cx='110' cy='80' r='1.5'/><circle cx='220' cy='30' r='1'/><circle cx='320' cy='90' r='2'/><circle cx='370' cy='180' r='1'/><circle cx='80' cy='220' r='1.5'/><circle cx='180' cy='280' r='1'/><circle cx='280' cy='340' r='2'/><circle cx='50' cy='350' r='1'/><circle cx='350' cy='280' r='1.5'/><circle cx='150' cy='150' r='1'/><circle cx='250' cy='220' r='1.2'/><circle cx='400' cy='60' r='1.5'/><circle cx='200' cy='400' r='1'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='none' stroke='%23f0c060' stroke-width='0.6' opacity='0.10'><circle cx='300' cy='300' r='280'/><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='200'/><g><line x1='300' y1='20' x2='300' y2='580'/><line x1='20' y1='300' x2='580' y2='300'/><line x1='102' y1='102' x2='498' y2='498'/><line x1='498' y1='102' x2='102' y2='498'/></g></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g opacity='0.14'><path d='M150 60 A90 90 0 1 0 150 240 A70 70 0 1 1 150 60 Z' fill='%23f0c060'/></g></svg>"),
    var(--bg) !important;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, -180px 100px, calc(100% + 100px) 80px;
  background-size: 400px 400px, 600px 600px, 300px 300px;
  background-attachment: scroll, fixed, fixed;
}

/* Ensure content stays readable above the vector backgrounds */
.cc-header, .cc-footer, .cc-card, .cc-cat-card, .cc-calculator-card,
.cc-trust, .cc-result-header, .cc-cat-hero {
  position: relative;
  z-index: 1;
}

/* Hero gets a subtle constellation overlay */
.cc-hero { position: relative; }
.cc-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400'><g fill='none' stroke='%23e0a93a' stroke-width='1' opacity='0.15'><circle cx='150' cy='100' r='2' fill='%23e0a93a'/><circle cx='250' cy='80' r='2' fill='%23e0a93a'/><circle cx='350' cy='130' r='2.5' fill='%23e0a93a'/><circle cx='480' cy='90' r='2' fill='%23e0a93a'/><circle cx='600' cy='150' r='2' fill='%23e0a93a'/><line x1='150' y1='100' x2='250' y2='80'/><line x1='250' y1='80' x2='350' y2='130'/><line x1='350' y1='130' x2='480' y2='90'/><line x1='480' y1='90' x2='600' y2='150'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center 30%;
  opacity: 0.7;
}
html.dark .cc-hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400'><g fill='none' stroke='%23f0c060' stroke-width='1' opacity='0.30'><circle cx='150' cy='100' r='2' fill='%23f0c060'/><circle cx='250' cy='80' r='2' fill='%23f0c060'/><circle cx='350' cy='130' r='2.5' fill='%23f0c060'/><circle cx='480' cy='90' r='2' fill='%23f0c060'/><circle cx='600' cy='150' r='2' fill='%23f0c060'/><line x1='150' y1='100' x2='250' y2='80'/><line x1='250' y1='80' x2='350' y2='130'/><line x1='350' y1='130' x2='480' y2='90'/><line x1='480' y1='90' x2='600' y2='150'/></g></svg>");
}
.cc-hero-content { position: relative; z-index: 2; }

/* Footer also reinforces card bg so it's not washed out by body bg */
.cc-footer { background: var(--bg-card) !important; }

/* Header is solid (slightly transparent) so menu is readable */
.cc-header {
  background: rgba(248, 245, 238, 0.92) !important;
  backdrop-filter: blur(20px);
}
html.dark .cc-header {
  background: rgba(14, 16, 25, 0.92) !important;
}