/* =========================================================
   mein-solardach.ch — palette overrides (pilot)
   Minimal-invasive: only changes color variables + neutralizes
   dark overlay on .kosten section. Existing CSS structure intact.
   ========================================================= */

:root {
  /* Override teal+coral with navy+gold per memory feedback_solar_redesign_pitfalls */
  --primary: #0f2942;        /* was teal #0d9488 */
  --primary-dark: #1e3a5f;
  --primary-light: #d4a838;  /* gold accent for hover/highlights */
  --primary-50: rgba(15, 41, 66, 0.06);
  --primary-100: rgba(15, 41, 66, 0.12);
  --accent: #d4a838;          /* was coral #f43f5e */
  --accent-dark: #b58e2a;
  --accent-light: #e8c66a;
  --bg: #faf7f0;              /* was cool gray; now warm cream */
  --bg-white: #ffffff;
  --bg-dark: #0f2942;
  --text: #1a2233;
  --text-light: #5a6478;
  --text-muted: #8089a0;
  --border: #e6dfd1;          /* warm beige border */
  --glow-rgb: 212, 168, 56;   /* gold glow */
}

/* Neutralize the dark overlay on .kosten section that uses inline bg-image */
section.kosten[style*="background-image"] {
  background: linear-gradient(180deg, var(--bg) 0%, #f3ede0 100%) !important;
  background-image: linear-gradient(180deg, var(--bg) 0%, #f3ede0 100%) !important;
  color: var(--text) !important;
}
section.kosten[style*="background-image"] h2,
section.kosten[style*="background-image"] h3 { color: var(--primary) !important; }
section.kosten[style*="background-image"] p,
section.kosten[style*="background-image"] .pricing-note { color: var(--text-light) !important; }
section.kosten[style*="background-image"] .pricing-card { background: var(--bg-white); color: var(--text); }
section.kosten[style*="background-image"] .pricing-card h3,
section.kosten[style*="background-image"] .pricing-card .pricing-tag,
section.kosten[style*="background-image"] .pricing-card .pricing-size,
section.kosten[style*="background-image"] .pricing-card .pricing-price,
section.kosten[style*="background-image"] .pricing-card .pricing-amount { color: var(--primary) !important; }

/* Force -webkit-text-fill-color to match current color across the whole kosten subtree.
   Why: section has inline color:#fff; -webkit-text-fill-color inherits the computed value
   from ancestors (not currentColor at use time), so child color overrides leave the fill
   stuck at white/navy and text renders the wrong colour or disappears. */
section.kosten[style*="background-image"],
section.kosten[style*="background-image"] *,
section.kosten[style*="background-image"] *::before,
section.kosten[style*="background-image"] *::after {
  -webkit-text-fill-color: currentColor !important;
}

/* Featured plan badge "Beliebt": navy bg + white text (default rule above turned it navy/navy = invisible). */
section.kosten[style*="background-image"] .pricing-featured .pricing-tag {
  color: #ffffff !important;
}

/* Hide leftover popup floating triggers (from pv-popup.js — only main modal stays) */
#pvf-quick-trigger,
#pvf-quick-popup { display: none !important; }

/* Ensure popup header text visible (site h2/p has higher specificity, override) */
.pvf-header h2, .pvf-header p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

/* Footer visibility — make sure footer text not too low contrast */
.footer p, .footer-brand p, .footer-col p { color: rgba(255,255,255,0.78) !important; }
.footer a, .footer-col a { color: rgba(255,255,255,0.7); }
.footer a:hover, .footer-col a:hover { color: var(--accent-light) !important; }
.footer-bottom { color: rgba(255,255,255,0.6); }

/* nav-cta button — make sure visible */
.nav-cta { background: var(--primary) !important; color: #fff !important; }
.nav-cta:hover { background: var(--primary-dark) !important; color: #fff !important; }

/* hero text-gradient — change from teal-gradient to gold accent (no broken gradient text) */
.text-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* btn-primary in new palette */
.btn-primary { background: var(--primary) !important; color: #fff !important; }
.btn-primary:hover { background: var(--primary-dark) !important; color: #fff !important; }
.btn-outline { border-color: var(--primary) !important; color: var(--primary) !important; }
.btn-outline:hover { background: var(--primary) !important; color: #fff !important; }