/* NOT LINKED DIRECTLY since 2026-10-20: pages load caf-v7-assets/site.min.css, which is styles.css + pages.css + caf-white.css
   minified in that order. After editing this file run ~/godaddy-remote-backups/pagespeed-css-20261020/build/build.sh,
   upload site.min.css and bump ?v= on the 12 static pages (home.html, contact-us, faqs, how-it-works, lease-buyout,
   privacy-policy, accessibility, terms-of-service, articles/index.php + 3 hubs). */
/* =====================================================================
   Champion Auto Finance — v6 "white" override (light theme)
   Flips the navy-glass dark theme to a clean white one by redefining the
   palette tokens, removes the background image, and keeps text readable
   (dark ink body, blue links, red/blue accents). Loaded LAST.
   ===================================================================== */

:root {
  /* grounds: navy scale -> white / light greys */
  --navy-950: #ffffff;
  --navy-900: #ffffff;
  --navy-800: #eef3fa;
  --navy-700: #e2eaf5;

  /* text: light ink -> dark ink */
  --ink:      #0f1728;
  --ink-dim:  #38455f;
  --ink-faint:#5c6a84;

  /* surfaces / borders */
  --glass:    #ffffff;
  --glass-2:  #f3f7fc;
  --line:     rgba(16,42,79,0.16);
  --panel:    #ffffff;

  /* softer shadows/glows for a light ground */
  --shadow:   0 20px 50px -30px rgba(16,42,79,0.28);
  --glow:     0 0 0 1px rgba(43,137,255,0.28), 0 14px 34px -14px rgba(43,137,255,0.30);

  /* accents kept: --blue #2b89ff, --red #e3142d, --chrome #cfe0f5 remain */
}

/* Remove the background image; white ground */
html, body {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--ink) !important;
}

/* Hide the dark intro/loader overlay entirely */
.intro { display: none !important; }

/* Default readable text everywhere */
body, p, li, span, small, strong, em, td, th, dd, dt, figcaption, label, blockquote,
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
}
.muted, .subtle, [class*="dim"], [class*="faint"], .eyebrow, .kicker { color: var(--ink-dim) !important; }

/* Links = readable brand blue (blue-soft is too light on white) */
a { color: #0b4f93; }
a:hover { color: #072f5c; }

/* Any element that pulled a dark navy background directly -> light */
[style*="background:#0"], [style*="background: #0"],
[style*="background-color:#0"], [style*="background-color: #0"],
[style*="background:#1"], [style*="background: #1"] {
  background: #ffffff !important;
  color: var(--ink) !important;
}

/* Hardcoded dark gradient panels seen in home2.css / pages.css -> light card */
.stat, .card, .panel, .glass, [class*="card"], [class*="panel"], [class*="tile"],
[class*="feature"], [class*="step"], [class*="duo__card"] {
  color: var(--ink);
}

/* Make ANY white text black — including labels on filled buttons/badges */
.btn, .button, [class*="btn"], .badge, .pill, .cta,
.btn *, [class*="btn"] * {
  color: #000000 !important;
}
/* outline/ghost buttons on white keep blue text */
.btn--ghost, .btn--outline, [class*="ghost"], [class*="outline"],
.btn--ghost *, [class*="ghost"] * {
  color: #0b4f93 !important;
  background: transparent !important;
}

/* Header / nav text -> blue */
.nav .nav__links a, .nav__links a,
.nav__phone, .nav__email,
.nav__contact, .nav__contact * {
  color: #0b4f93 !important;
}
.nav .nav__links a:hover { color: #072f5c !important; }

/* Catch any remaining white text site-wide -> black
   (buttons handled above; this fixes stray white copy) */
[style*="color:#fff"], [style*="color: #fff"],
[style*="color:#ffffff"], [style*="color: #ffffff"],
[style*="color:white"], [style*="color: white"] {
  color: #000000 !important;
}

/* =====================================================================
   Header: shorter bar + gets more opaque on scroll
   (scroll JS already toggles .nav.is-stuck at >20px)
   ===================================================================== */

/* Shorter header — the 150px logo was making it very tall */
.nav__logo { height: 46px !important; }
.nav { padding: 0.3rem 0 !important; }

/* At the top: translucent white so the page shows through faintly */
.nav {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border-bottom: 1px solid transparent !important;
}

/* Scrolled: more opaque, tighter, with a soft shadow */
.nav.is-stuck {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 6px 22px rgba(16, 42, 79, 0.08) !important;
  padding: 0.15rem 0 !important;
}
.nav.is-stuck .nav__logo { height: 40px !important; }

/* Header sizing (2026-08-25).
   The 160px logo made .nav 170px tall while .hero only reserves 7rem (112px)
   of top padding, so the fixed header sat on top of the first ~58px of every
   v7 page — the NJ DOBI badge on the home page was completely hidden.
   64px keeps the mark legible, brings the bar to ~74px, and clears the hero
   padding with room to spare. Matches .brand img in lb-assets/lb.css. */
.nav__logo { height: 112px !important; }
.nav.is-stuck .nav__logo { height: 112px !important; }

/* FAQ as one continuous list (no separate boxes) */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(16,42,79,0.14); }
.faq-item:first-child { border-top: 1px solid rgba(16,42,79,0.14); }
.faq-item h3 { color: #0f1728 !important; font-size: 1.18rem; margin: 0 0 0.5rem; }
.faq-item p { color: #38455f !important; margin: 0; line-height: 1.6; }

/* Gradient-clipped headline text (was clipped to a light gradient -> invisible on white) */
[style*="background-clip"], .grad-text, [class*="grad"] {
  -webkit-text-fill-color: initial !important;
  color: var(--ink) !important;
  background: none !important;
}

/* Accent headlines that used a light blue->white->red clip -> solid readable blue */
.hero__title-accent,
.subhero__title .accent,
.hero-content h2 {
  -webkit-text-fill-color: #1466c9 !important;
  color: #1466c9 !important;
  background: none !important;
}

/* Stat / step numbers that were clipped to a light gradient -> solid blue */
.stat__num, .statband__num, .step__num {
  -webkit-text-fill-color: #1466c9 !important;
  color: #1466c9 !important;
  background: none !important;
}

/* Alternating "band" sections -> light tint (were dark translucent navy) */
.section--band { background: #eef3fa !important; }

/* Form inputs were dark navy -> white so typed text is readable */
input, textarea, select,
.cta__form input, .form-card input, .form-card textarea, .form-card select {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }

/* Footer -> white with dark text (was dark translucent navy) */
.footer, .site-footer, footer {
  background: #ffffff !important;
  border-top: 1px solid var(--line) !important;
}
.footer *, .site-footer * { color: var(--ink-dim) !important; }
.footer a:hover, .site-footer a:hover { color: #0b4f93 !important; }
.footer__logo, .site-footer img { filter: none !important; }

/* ---- Mobile: slim header + content-first hero (phones) ---- */
@media (max-width: 720px) {
  /* header: the 160px logo made it eat ~1/4 of the screen */
  .nav__logo,
  .nav.is-stuck .nav__logo { height: 44px !important; }
  .nav { padding: 6px 0 !important; }

  /* hero: drop the decorative emblem, kill the 100vh gap, size the headline to fit */
  .hero__visual { display: none !important; }
  .hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    align-items: start !important;
    text-align: left !important;
    padding: 88px 1.25rem 44px !important;
  }
  .hero h1 { font-size: 2.15rem !important; line-height: 1.1 !important; }
  .hero__content { order: 1 !important; }
}

/* ---- Lease Buyouts additions: navy kicker, red button keeps white text ---- */
.kicker { color: #123a6d !important; }
.btn--red { background: var(--red) !important; }
.btn--red, .btn--red * { color: #ffffff !important; }

/* ---- Home hero: Champ in front of the dealership (2026-08-25) ----
   Replaces the decorative shield emblem. Shown on mobile too — it is now
   real brand content, not decoration, so the 720px hero__visual hide is
   reversed for this block only. */
.hero__champ-wrap { position: relative; width: min(560px, 100%); }
.hero__champ {
  width: 100%; height: auto; display: block;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(11, 45, 90, 0.18);
}
@media (max-width: 720px) {
  .hero--champ .hero__visual { display: block !important; }
  .hero__champ-wrap { width: 100%; margin: 1.25rem 0 0; }
  .hero__champ { border-radius: 14px; }
}

/* In-page anchors must not land underneath the fixed header (2026-08-25). */
:target,
[id]:not(body):not(html) { scroll-margin-top: 96px; }

/* =====================================================================
   Static header (2026-08-25)
   The bar no longer floats over the page — it sits in normal flow and
   scrolls away, so nothing can be hidden underneath it and the hero does
   not need to reserve space for it. The logo fills the bar edge to edge:
   padding is 0 and the 112px mark alone sets the header height.
   ===================================================================== */
.nav {
  /* static: the bar sits in normal flow and scrolls away with the page.
     The mobile dropdown is position:absolute; top:100%, so .nav__inner (below)
     is made the containing block instead — under a static .nav that 100%
     resolved against the viewport and the menu opened offscreen. */
  position: static !important;
  padding: 0 !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.nav.is-stuck {
  /* static: the bar sits in normal flow and scrolls away with the page.
     The mobile dropdown is position:absolute; top:100%, so .nav__inner (below)
     is made the containing block instead — under a static .nav that 100%
     resolved against the viewport and the menu opened offscreen. */
  position: static !important;
  padding: 0 !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.nav__inner { padding-top: 0 !important; padding-bottom: 0 !important; position: relative; }

/* Mobile dropdown stacking (2026-08-26).
   Making .nav `position: static` above also silently disabled its `z-index: 100`
   (z-index has no effect on static elements). The open mobile menu is laid out
   correctly against .nav__inner, but .hero is position:relative and comes later
   in the DOM, so the hero's text painted straight over the menu. Give the open
   dropdown the z-index the header used to carry. 100 clears page content
   (0-3) and stays under the skip-link / scroll bar (200) and overlay (999). */
@media (max-width: 960px) {
  .nav.is-open .nav__links { z-index: 100; }
}
.nav__brand { align-self: stretch; }
.nav__logo { display: block; }

/* Header is in-flow now, so the hero only needs ordinary breathing room. */
.hero { padding-top: 2.5rem !important; }
@media (max-width: 720px) {
  .nav__logo, .nav.is-stuck .nav__logo { height: 64px !important; }
  .hero { padding-top: 1.5rem !important; }
}

/* Nav mark is now the horizontal lockup (championautofinance_logo.webp,
   92% height fill) rather than shield.png (41% fill, mostly transparent
   padding) — that is what made the logo look small in a full-height bar.
   The old blue drop-shadow was tuned for the shield; drop it. */
.nav__logo { filter: none !important; width: auto !important; max-width: 340px; object-fit: contain; }
@media (max-width: 720px) { .nav__logo { max-width: 200px; } }