/* ==========================================================================
   Kootenay Auto Loans — dark theme for the HOMEPAGE sections.
   The homepage loads article-theme.css first (colour tokens, top bar, header,
   logo plaque, theme switch, FAQ, CTA band, footer) and then this file for
   the sections only the homepage has. Light mode is not changed here.
   In dark mode --navy is the light accent blue, so every place the homepage
   FILLS with navy is pointed back at --navy-fill.
   ========================================================================== */

/* Hero: the photo fades into the page colour instead of into white */
html[data-theme="dark"] .hero{background:var(--bg)}
html[data-theme="dark"] .hero::after{background:linear-gradient(90deg,#0c111d 0%,#0c111d 30%,rgba(12,17,29,.85) 46%,rgba(12,17,29,.35) 62%,rgba(12,17,29,0) 80%)}
@media (min-width:1280px){
  html[data-theme="dark"] .hero::after{background:linear-gradient(90deg,#0c111d 0%,#0c111d 22%,rgba(12,17,29,.78) 30%,rgba(12,17,29,.34) 40%,rgba(12,17,29,.08) 50%,rgba(12,17,29,0) 62%)}
}
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .tb-ic{background:var(--card)}

/* Navy fills */
html[data-theme="dark"] .section-pill,
html[data-theme="dark"] .about-point .ic,
html[data-theme="dark"] .about-quote,
html[data-theme="dark"] .proc .num,
html[data-theme="dark"] .credit-section,
html[data-theme="dark"] .test-author .av,
html[data-theme="dark"] .ap .ic,
html[data-theme="dark"] .ci:hover .ic{background:var(--navy-fill);color:#fff}
html[data-theme="dark"] .section-pill{box-shadow:none;border:1px solid #3a5ba8}
html[data-theme="dark"] .cv-card .l{color:rgba(255,255,255,.68)}
html[data-theme="dark"] .apply-card .badge{background:#1b7a43}
html[data-theme="dark"] .proc .num{border-color:var(--card);box-shadow:0 8px 18px rgba(0,0,0,.4)}

/* White sections and cards */
html[data-theme="dark"] .process-section,
html[data-theme="dark"] .reviews-section{background:var(--bg)}
html[data-theme="dark"] .veh,
html[data-theme="dark"] .about-visual-card,
html[data-theme="dark"] .proc,
html[data-theme="dark"] .test,
html[data-theme="dark"] .google-badge,
html[data-theme="dark"] .apply-card,
html[data-theme="dark"] .ci,
html[data-theme="dark"] .contact-form{background:var(--card)}
html[data-theme="dark"] .cv-pull{background:var(--card);color:var(--ink)}

/* Vehicle tiles: a neutral grey "studio" floor, the dark-mode version of light
   mode's white room. Each car image carries its own grey shadow (darkest under
   the sedan, lightest, about rgb 95, under the van); the floor stays lighter than
   all of them so every car reads as parked, not floating. The site's extra
   oval and drop-shadow are switched off here: they sit below the car's own
   shadow and make it look lifted. The label strip keeps the dark card colour. */
html[data-theme="dark"] .veh-img-wrap{background:linear-gradient(180deg,#626367 0%,#505155 100%)}
html[data-theme="dark"] .veh-img-wrap::before{display:none}
html[data-theme="dark"] .veh-img-wrap img{filter:none}

/* Forms */
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form select,
html[data-theme="dark"] .form textarea{background-color:#0f1626;border-color:#33405e;color:var(--ink)}
html[data-theme="dark"] .form input:focus,
html[data-theme="dark"] .form select:focus,
html[data-theme="dark"] .form textarea:focus{box-shadow:0 0 0 4px rgba(127,168,255,.18)}
html[data-theme="dark"] .form select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='%237fa8ff'><path d='M6 8L0 0h12z'/></svg>")}
html[data-theme="dark"] .soft-note{color:#5fd08f}
html[data-theme="dark"] .form-status.ok{background:rgba(95,208,143,.1);color:#5fd08f;border-color:rgba(95,208,143,.35)}
html[data-theme="dark"] .form-status.err{background:rgba(255,120,120,.08);color:#ff8f8f;border-color:rgba(255,120,120,.35)}