/* ============================================================================
   Aletheia Knowledge Hub — LIGHT theme
   ----------------------------------------------------------------------------
   Loaded AFTER /css/styles.css (and after each hub page's inline <style>),
   ONLY on Knowledge Hub pages (/sourcing-university/*). Re-skins the shared
   dark theme + the pages' own inline dark styles to match the light homepage.

   NOT linked on pricing/privacy/terms/onboard/etc, so the dark shared theme
   there is untouched. Uses !important because it must beat both the shared
   stylesheet's var(--white) heading colour AND each page's inline <style>.

   Palette mirrors index.html:
     --bg #fbfbfd  --surface #f2f1f6  --ink #16161c  --ink-soft #4a4a54
     --muted #84848f  --line #e6e5ec  --accent #7b2dff
     dark accents/footer: #0c0a1a / #f5f3fb / #adaabb / #251f3f / #a985ff
   ============================================================================ */

:root{
  --hub-bg:#fbfbfd;
  --hub-surface:#f2f1f6;
  --hub-ink:#16161c;
  --hub-ink-soft:#4a4a54;
  --hub-muted:#84848f;
  --hub-line:#e6e5ec;
  --hub-accent:#7b2dff;
  --hub-dark-bg:#0c0a1a;
  --hub-dark-ink:#f5f3fb;
  --hub-dark-soft:#adaabb;
  --hub-dark-line:#251f3f;
  --hub-dark-accent:#a985ff;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body{
  background:var(--hub-bg) !important;
  color:var(--hub-ink-soft) !important;
}
/* Overrides both styles.css `h1..h6{color:var(--white)}` and the pages'
   inline `#fff` heading colours. Buttons/links are not headings, so their
   white text is unaffected. */
h1,h2,h3,h4,h5,h6{color:var(--hub-ink) !important;}

/* ── Nav (article pages: #site-nav) ────────────────────────────────────── */
#site-nav.is-scrolled{
  background:rgba(251,251,253,0.82) !important;
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--hub-line) !important;
}
/* Fix the inline white wordmark; the nested ".ai" keeps its own inline
   purple because it is a deeper element with its own color. */
#site-nav .nav-logo > span{color:var(--hub-ink) !important;}
.nav-link{color:var(--hub-ink-soft) !important;}
.nav-link:hover,.nav-link.is-active{color:var(--hub-ink) !important;}
/* Keep the CTA pill purple with WHITE text. */
.btn-nav-cta{background:#7b2dff !important;color:#fff !important;}

/* Discussion / comments widget (styles injected at runtime by su-comments.js) */
.su-root{color:#4a4a54 !important;}
.su-title{color:#16161c !important;}
.su-rules{background:#f2f1f6 !important;border-color:#e6e5ec !important;}
.su-rules summary{color:#4a4a54 !important;}
/* .su-tab kept its dark #0f172a background — only the text colour had been
   overridden, so the tabs were the one dark element left on every article. */
.su-tab{background:#f2f1f6 !important;border-color:#e6e5ec !important;color:#84848f !important;}
.su-tab-active{background:#ffffff !important;color:#16161c !important;}
.su-input,.su-text,.su-suggest-box{background:#ffffff !important;border-color:#e6e5ec !important;color:#16161c !important;}
.su-check{color:#4a4a54 !important;}
.su-btn-ghost{color:#4a4a54 !important;border-color:#e6e5ec !important;}
.su-me{color:#84848f !important;}
.su-empty{color:#84848f !important;}
.su-c{border-top-color:#e6e5ec !important;}
.su-c-user{color:#7b2dff !important;}
.su-c-body{color:#4a4a54 !important;}

/* ── Nav (index + legacy article pages: #site-header) ──────────────────── */
#site-header.scrolled{
  background:rgba(251,251,253,0.85) !important;
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hub-line) !important;
}
#site-header .header-brand > span{color:var(--hub-ink) !important;}
.header-nav a{color:var(--hub-ink-soft) !important;}
.header-nav a:hover,.header-nav a.active{color:var(--hub-ink) !important;}
.btn-cta{color:#fff !important;} /* purple pill, white text */

/* ── Page hero (index / legacy) ────────────────────────────────────────── */
.page-hero p{color:var(--hub-ink-soft) !important;}
.eyebrow{color:var(--hub-accent) !important;}

/* ── Article chrome (both class variants) ──────────────────────────────── */
.article-title,.article-h1{color:var(--hub-ink) !important;}
.article-category,.article-cat{color:var(--hub-accent) !important;}
.article-meta{color:var(--hub-muted) !important;border-bottom-color:var(--hub-line) !important;}
.article-body p,.article-body li{color:var(--hub-ink-soft) !important;}
.article-body ul,.article-body ol{color:var(--hub-ink-soft) !important;}
.article-body strong{color:var(--hub-ink) !important;}
.article-body h2,.article-body h3{color:var(--hub-ink) !important;}
.article-back{color:var(--hub-accent) !important;}

/* ── Index article cards ───────────────────────────────────────────────── */
.su-card{
  background:#ffffff !important;
  border:1px solid var(--hub-line) !important;
  border-radius:18px !important;
}
.su-card:hover{
  border-color:rgba(123,45,255,0.4) !important;
  box-shadow:0 6px 24px rgba(22,22,28,0.06) !important;
}
.su-title{color:var(--hub-ink) !important;}
.su-excerpt{color:var(--hub-ink-soft) !important;}
.su-category{color:var(--hub-accent) !important;}
.su-meta,.su-date,.su-read-time{color:var(--hub-muted) !important;}
.su-read-more{color:var(--hub-accent) !important;}

/* Search box + category pills (index, inline-styled) */
#su-search{
  background:#ffffff !important;
  border:1px solid var(--hub-line) !important;
  color:var(--hub-ink) !important;
}
#su-search::placeholder{color:var(--hub-muted) !important;}
.su-pill{
  color:var(--hub-ink-soft) !important;
  background:var(--hub-surface) !important;
  border:1px solid var(--hub-line) !important;
}
.su-pill:hover{border-color:var(--hub-accent) !important;color:var(--hub-ink) !important;}
.su-pill.is-active{background:var(--hub-accent) !important;border-color:var(--hub-accent) !important;color:#fff !important;}

/* ── Related articles ──────────────────────────────────────────────────── */
.su-related{border-top-color:var(--hub-line) !important;}
.su-related-h{color:var(--hub-ink) !important;}
.su-related-label{color:var(--hub-accent) !important;}
.su-related a{color:var(--hub-ink-soft) !important;}
.su-related a:hover{color:var(--hub-ink) !important;}

/* ── Share row ─────────────────────────────────────────────────────────── */
.su-share{border-top-color:var(--hub-line) !important;}
.su-share-label{color:var(--hub-accent) !important;}
.su-share-btn{
  background:#ffffff !important;
  border:1px solid var(--hub-line) !important;
  color:var(--hub-ink-soft) !important;
}
.su-share-btn:hover{
  background:rgba(123,45,255,0.08) !important;
  border-color:rgba(123,45,255,0.4) !important;
  color:var(--hub-ink) !important;
}

/* Comments placeholder */
#su-comments-wrap p{color:var(--hub-muted) !important;}

/* ── Inline decorative boxes that would otherwise be invisible on light ── */
/* "Up next" box (light-purple tint): white strong -> ink, link -> accent */
[style*="rgba(123,45,255,0.06)"] strong{color:var(--hub-ink) !important;}
[style*="rgba(123,45,255,0.06)"] p{color:var(--hub-ink-soft) !important;}
[style*="rgba(123,45,255,0.06)"] a{color:var(--hub-accent) !important;}
/* Closing note whose top border was rgba(255,255,255,.08) on dark */
.article-body p[style*="rgba(255,255,255,0.08)"]{border-top-color:var(--hub-line) !important;}

/* ── Footer — deep-violet dark, matched to the homepage ────────────────── */
footer{
  background:var(--hub-dark-bg) !important;
  border-top:1px solid var(--hub-dark-line) !important;
}
footer .footer-tagline,footer .footer-copy,footer .footer-group-title{color:var(--hub-dark-soft) !important;}
footer .footer-link{color:rgba(255,255,255,0.55) !important;}
footer .footer-link:hover{color:var(--hub-dark-ink) !important;}
footer .footer-bottom{border-top-color:var(--hub-dark-line) !important;}

/* Index / legacy footer (.site-footer) — same deep-violet treatment */
.site-footer{
  background:var(--hub-dark-bg) !important;
  border-top:1px solid var(--hub-dark-line) !important;
}
.site-footer .footer-copy{color:var(--hub-dark-soft) !important;}
.site-footer .footer-links a{color:rgba(255,255,255,0.55) !important;}
.site-footer .footer-links a:hover{color:var(--hub-dark-ink) !important;}