/* ==========================================================================
   Kootenay Auto Loans — light/dark theme for the resources + article pages.
   Loaded after site.css by every page under /resources/ (written by the
   article renderer). The homepage does not load it and is unchanged.
   The page's <head> sets html[data-theme] to "light" or "dark" before paint:
   the visitor's saved choice ("kal-theme"), else the system setting.
   Declaring our own colour scheme also stops a browser from auto-darkening
   the page (that auto-darkening is what washed out the article header).
   ========================================================================== */

html[data-theme="light"]{color-scheme:only light}
/* The site's grey (#7a8190) is 3.7:1 on the header; this one reads at 4.5:1+ */
html[data-theme="light"] .article-hero .breadcrumb,
html[data-theme="light"] .article-hero .breadcrumb a,
html[data-theme="light"] .article-meta{color:#5d6575}

html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#7fa8ff;          /* accent text, icons, rules: light blue reads on dark */
  --navy-fill:#1e3a78;     /* brand navy, kept for filled buttons, tags, bands */
  --navy-2:#264a94;
  --navy-dark:#0e1f4a;
  --navy-soft:rgba(127,168,255,.12);
  --navy-line:rgba(127,168,255,.32);
  --ink:#eef2fa;
  --ink-2:#d6ddeb;
  --text:#b6c0d3;
  --muted:#8f9ab0;
  --border:#27314a;
  --rule:#1c2437;
  --bg:#0c111d;
  --bg-alt:#121a2c;
  --bg-soft:#0f1524;
  --card:#121a2b;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 4px 12px rgba(0,0,0,.3);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --shadow-lg:0 24px 56px rgba(0,0,0,.45);
}

/* Theme switch: an icon button in the header, before Apply Now. Where the
   header is already full (under 390px, and 881-1180px while the nav links
   show) a compact labelled button in the top bar is used instead. */
.theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;flex-shrink:0;background:none;border:1.5px solid var(--border);border-radius:6px;cursor:pointer;color:var(--ink);padding:0;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--navy);color:var(--navy)}
.theme-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.theme-toggle .i-sun{display:none}
html[data-theme="dark"] .theme-toggle .i-sun{display:block}
html[data-theme="dark"] .theme-toggle .i-moon{display:none}
.theme-bar{display:none;align-items:center;gap:7px;background:none;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#fff;font:600 12px/1 'Montserrat',sans-serif;letter-spacing:.04em;padding:2px 10px;cursor:pointer}
.theme-bar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-bar .i-sun,.theme-bar .t-light{display:none}
html[data-theme="dark"] .theme-bar .i-sun,html[data-theme="dark"] .theme-bar .t-light{display:inline}
html[data-theme="dark"] .theme-bar .i-moon,html[data-theme="dark"] .theme-bar .t-dark{display:none}
@media (max-width:560px){.theme-toggle{width:38px;height:38px}}
@media (max-width:389px),(min-width:881px) and (max-width:1180px){
  .theme-toggle{display:none}
  .theme-bar{display:inline-flex}
}
/* 881-899px: the top bar is one row with no room for the label; icon only */
@media (min-width:881px) and (max-width:899px){
  .theme-bar span{display:none!important}
  .theme-bar{padding:2px 7px}
}

/* Chrome: top bar, header, menus */
html[data-theme="dark"] .topbar{background:#070b14}
html[data-theme="dark"] .header{background:rgba(12,17,29,.94)}
/* The logo is navy artwork; give it the same light plaque the footer uses,
   sized so the header keeps its light-mode height. */
html[data-theme="dark"] .brand{background:linear-gradient(180deg,#ffffff 0%,#f3f6fc 100%);border-radius:12px;padding:4px 14px 4px 6px;gap:10px}
html[data-theme="dark"] .brand-emblem{height:52px}
html[data-theme="dark"] .brand-wordmark{height:29px}
@media (max-width:560px){
  html[data-theme="dark"] .brand{border-radius:10px;padding:4px 9px 4px 5px;gap:7px}
  html[data-theme="dark"] .brand-emblem{height:34px}
  html[data-theme="dark"] .brand-wordmark{height:19px}
}
html[data-theme="dark"] .nav .drop-menu{background:#131b2d}
html[data-theme="dark"] .nav.open{background:#0f1626}
html[data-theme="dark"] .btn-primary{background:var(--navy-fill);border-color:#3a5ba8;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.35)}
html[data-theme="dark"] .btn-primary:hover{background:var(--navy-2);border-color:#5a7fcc}
html[data-theme="dark"] .btn-outline{background:transparent}

/* Article header */
html[data-theme="dark"] .article-hero{background:linear-gradient(180deg,#141e34 0%,var(--bg) 100%)}
html[data-theme="dark"] .article-hero::before{background:radial-gradient(680px 320px at 88% -10%,rgba(127,168,255,.12),transparent 60%)}
html[data-theme="dark"] .article-tag{background:var(--navy-fill);box-shadow:none;border:1px solid #3a5ba8}

/* Article body */
html[data-theme="dark"] .article-body ul li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237fa8ff' stroke-width='3.5'><path d='M5 12l5 5L20 7'/></svg>")}
html[data-theme="dark"] .article-body ol li::before{background:var(--navy-fill)}
html[data-theme="dark"] .article-body blockquote{background:var(--navy-fill)}

/* Sidebar, cards, FAQ, call-to-action */
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .res,
html[data-theme="dark"] .faq details{background:var(--card)}
html[data-theme="dark"] .side-card.apply{background:var(--navy-fill);border-color:#2c4a8c}
html[data-theme="dark"] .side-card.apply .btn-primary,
html[data-theme="dark"] .cta-band .btn-primary{background:#fff;color:#1e3a78;border-color:#fff}
html[data-theme="dark"] .side-card.apply .btn-primary:hover,
html[data-theme="dark"] .cta-band .btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-dark)}
html[data-theme="dark"] .res:hover .res-ic,
html[data-theme="dark"] .faq details[open] summary .plus{background:var(--navy-fill);color:#fff}
html[data-theme="dark"] .faq-section{background:var(--bg)}
html[data-theme="dark"] .cta-band{background:var(--navy-fill)}
/* The section around the CTA band carries an inline white background */
html[data-theme="dark"] section[style*="background:#fff"]{background:var(--bg)!important}
html[data-theme="dark"] footer{border-top:1px solid var(--border)}
html[data-theme="dark"] .foot-socials a:hover{background:var(--navy-fill)}