/* CreditGuideHub — full redesign, November 2026 (v3).
   Loaded last, so it restyles the existing template without touching content or URLs.
   System: light airy paper background, white cards, deep emerald used only as an accent,
   gold used sparingly. The footer stays dark green; every other dark section is light. */

:root {
  --cgh-ink: #14261d;
  --cgh-muted: #5b6b60;
  --cgh-paper: #fafaf7;
  --cgh-card: #ffffff;
  --cgh-line: #e4e8e0;
  --cgh-green: #0e5f4a;
  --cgh-green-deep: #0b3b2e;
  --cgh-green-soft: #e7f0e8;
  --cgh-gold: #c8932a;
  --cgh-radius: 20px;
  --cgh-shadow: 0 10px 30px rgba(11, 59, 46, 0.08);
  --cgh-shadow-lg: 0 18px 45px rgba(11, 59, 46, 0.14);
}

html { scroll-behavior: smooth; }

body {
  background: var(--cgh-paper) !important;
  color: var(--cgh-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -0.02em; }

/* ---------- Header ---------- */
header.sticky, header[class*="sticky"] {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--cgh-line), 0 8px 24px rgba(11, 59, 46, 0.05);
}
header nav a {
  border-radius: 999px;
  padding: 8px 14px !important;
}
header nav a:hover { background: var(--cgh-green-soft); color: var(--cgh-green-deep) !important; }
header nav a[aria-current="page"], header nav a.bg-slate-100 {
  background: var(--cgh-green-soft) !important;
  color: var(--cgh-green-deep) !important;
}

/* ---------- Light hero (was a dark teal photo hero) ---------- */
/* The hero keeps its couple photo, washed out with white so the text sits on light.
   NOTE: editorial-redesign.css styles this same hero with high-specificity
   `main>section:first-child.bg-brand-950` rules, so these selectors mirror that
   pattern (same specificity, this file loads later, so these win). */
main>section:first-child.bg-brand-950 {
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.97) 42%, rgba(255, 255, 255, 0.72) 68%, rgba(255, 255, 255, 0.38) 100%),
    url('/images/editorial/finance-03.webp') !important;
  background-size: cover !important;
  background-position: 72% center !important;
  color: var(--cgh-ink) !important;
  border-bottom: 1px solid var(--cgh-line);
  border-radius: 0 0 36px 36px;
}
main>section:first-child.bg-brand-950 .bg-dot-grid { display: none !important; }
main>section:first-child.bg-brand-950 h1 {
  font-size: clamp(2.75rem, 5.4vw, 4.3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  color: var(--cgh-ink) !important;
  max-width: 680px;
}
main>section:first-child.bg-brand-950 h1 .cgh-accent { color: var(--cgh-green) !important; }
main>section:first-child.bg-brand-950 h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--cgh-gold);
}
/* Eyebrow pill: soft emerald, not a white outline */
main>section:first-child.bg-brand-950 span.uppercase {
  display: inline-block;
  background: var(--cgh-green-soft) !important;
  color: var(--cgh-green-deep) !important;
  border: 1px solid #cfe0c8;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
}
main>section:first-child.bg-brand-950 p.text-slate-300 { color: var(--cgh-muted) !important; }
main>section:first-child.bg-brand-950 p.text-slate-300:first-of-type { font-size: 1.14rem; }
/* Primary CTA stays solid emerald; secondary becomes a white button with emerald edge */
main>section:first-child.bg-brand-950 a[class*="bg-brand-700"] {
  border-radius: 999px !important;
  padding: 14px 28px !important;
  background: var(--cgh-green) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(14, 95, 74, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
main>section:first-child.bg-brand-950 a[class*="bg-brand-700"]:hover {
  transform: translateY(-2px);
  background: var(--cgh-green-deep) !important;
  box-shadow: 0 14px 28px rgba(14, 95, 74, 0.32);
}
main>section:first-child.bg-brand-950 a[class*="border-white"] {
  border-radius: 999px !important;
  padding: 14px 28px !important;
  background: #fff !important;
  color: var(--cgh-green-deep) !important;
  border: 1.5px solid var(--cgh-green) !important;
  box-shadow: 0 6px 18px rgba(11, 59, 46, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
main>section:first-child.bg-brand-950 a[class*="border-white"]:hover {
  transform: translateY(-2px);
  background: var(--cgh-green-soft) !important;
  box-shadow: 0 10px 24px rgba(11, 59, 46, 0.14);
}
/* Hero badges: soft green chips */
main>section:first-child.bg-brand-950 p span.rounded-full {
  background: var(--cgh-green-soft) !important;
  border-color: #cfe0c8 !important;
  color: var(--cgh-green-deep) !important;
}
/* Hero side cards: solid white cards on the light hero */
main>section:first-child.bg-brand-950 a.block.rounded-2xl {
  background: #fff !important;
  border: 1px solid var(--cgh-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--cgh-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
main>section:first-child.bg-brand-950 a.block.rounded-2xl:hover {
  transform: translateY(-4px);
  background: #fff !important;
  box-shadow: var(--cgh-shadow-lg);
}
main>section:first-child.bg-brand-950 a.block.rounded-2xl h2 { color: var(--cgh-ink) !important; }
main>section:first-child.bg-brand-950 a.block.rounded-2xl p { color: var(--cgh-muted) !important; }
main>section:first-child.bg-brand-950 a.block.rounded-2xl svg { color: var(--cgh-green) !important; }

/* ---------- Formerly dark sections (homepage tools band, tools index) -> light ---------- */
main section.bg-brand-950:not(.cgh-photo-hero) {
  background: linear-gradient(180deg, #eef4e6 0%, #f7f9f5 100%) !important;
  color: var(--cgh-ink) !important;
}
main section.bg-brand-950:not(.cgh-photo-hero) .bg-dot-grid { display: none !important; }
main section.bg-brand-950:not(.cgh-photo-hero) h2 { color: var(--cgh-ink) !important; }
main section.bg-brand-950:not(.cgh-photo-hero) p.text-slate-300 { color: var(--cgh-muted) !important; }
main section.bg-brand-950:not(.cgh-photo-hero) .text-accent-300 { color: var(--cgh-green) !important; }
main section.bg-brand-950:not(.cgh-photo-hero) a.group {
  border-color: var(--cgh-line) !important;
}

/* ---------- Section rhythm + eyebrows ---------- */
main > section { overflow-wrap: anywhere; }
main section .text-accent-300 { color: var(--cgh-green) !important; }

/* ---------- Cards everywhere ---------- */
a.group.rounded-2xl, div.rounded-2xl {
  border-radius: var(--cgh-radius) !important;
}
a.group.rounded-2xl {
  border-color: var(--cgh-line) !important;
  box-shadow: var(--cgh-shadow) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden;
}
a.group.rounded-2xl:hover {
  transform: translateY(-4px);
  box-shadow: var(--cgh-shadow-lg) !important;
}
a.group.rounded-2xl img { border-radius: 0 !important; }
a.group.rounded-2xl h3 { color: var(--cgh-ink) !important; }

/* Quick-access tool links */
.cgh-quick {
  background: linear-gradient(180deg, #ffffff, #f2f6ee) !important;
  border: 1px solid var(--cgh-line);
  border-radius: 28px;
}
.cgh-actions a {
  border-radius: 999px !important;
  box-shadow: var(--cgh-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.cgh-actions a:hover { transform: translateY(-2px); box-shadow: var(--cgh-shadow-lg); }

/* Photo strip cards */
.cgh-photo-strip a {
  border-radius: var(--cgh-radius) !important;
  border-color: var(--cgh-line) !important;
  box-shadow: var(--cgh-shadow) !important;
}

/* ---------- Resources page: real cards with numbers ---------- */
.cgh-resources { display: grid; gap: 20px; counter-reset: cgh-res; }
.cgh-resource-card {
  counter-increment: cgh-res;
  background: #fff;
  border: 1px solid var(--cgh-line);
  border-radius: var(--cgh-radius);
  padding: 28px 30px;
  box-shadow: var(--cgh-shadow);
}
.cgh-resource-card h2 { margin-top: 0 !important; }
.cgh-resource-card h2::before {
  content: counter(cgh-res, decimal-leading-zero);
  display: inline-block;
  margin-right: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--cgh-green-soft);
  color: var(--cgh-green-deep);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 3px;
}
.cgh-resource-card p:last-child { margin-bottom: 0 !important; }
.cgh-resource-note {
  background: var(--cgh-green-soft);
  border: 1px solid #cfe0c8;
  border-radius: var(--cgh-radius);
  padding: 24px 30px;
}
.cgh-resource-note h2 { margin-top: 0 !important; font-size: 1.25rem !important; }
.cgh-resource-note p:last-child { margin-bottom: 0 !important; }

/* ---------- Article pages ---------- */
.article-body { font-size: 1.06rem; line-height: 1.85; color: #2b3a31; }
.article-body h2 {
  margin-top: 2.4rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #e8efe2;
}
.article-body table { border-radius: 14px; overflow: hidden; box-shadow: var(--cgh-shadow); }
.article-body thead th { background: var(--cgh-green-deep) !important; color: #fff !important; }
.article-body tbody tr:nth-child(even) { background: #f4f7f0; }

/* Sources box + worksheet box */
section[aria-labelledby="sources-heading"] {
  border-radius: var(--cgh-radius) !important;
  background: #eef4e6 !important;
  border-color: #d6e2c8 !important;
  box-shadow: var(--cgh-shadow);
}

/* Buttons site-wide: pill where they are calls to action */
a.bg-brand-700, a[class*="bg-brand-700"] { border-radius: 999px !important; }

/* Forms */
input, select, textarea { border-radius: 12px !important; }
button[type="submit"], input[type="submit"] { border-radius: 999px !important; }

/* Calculator pages: keep the tool card clean on the light system */
.cgh-tool {
  border-color: var(--cgh-line) !important;
  box-shadow: var(--cgh-shadow) !important;
  border-radius: var(--cgh-radius) !important;
}

/* Footer: stays dark green (the one dark element, standard for a modern site) */
footer, .m-footer {
  border-radius: 28px 28px 0 0;
  background: #0b3b2e !important;
  color: #d7e5da !important;
}
footer a, .m-footer a { color: #eaf3ea !important; }

/* Mobile */
@media (max-width: 640px) {
  main>section:first-child.bg-brand-950 { border-radius: 0 0 24px 24px; }
  main>section:first-child.bg-brand-950 h1 { font-size: 2.4rem !important; }
  .cgh-resource-card, .cgh-resource-note { padding: 22px; }
}

/* Header "Explore Tools" button: emerald on every page.
   editorial-redesign.css already sets this, but the 50/30/20 guide and the
   author page do not load that file, so their button fell back to navy
   (bg-brand-700 = #163d6b). This file loads last and is loaded by all pages,
   so this rule guarantees the emerald button everywhere. */
header a[href="/tools/"][class*="bg-brand-700"] {
  background: #087f72 !important;
}