/* ======================================================
   STARDUST SPACE THEME (sitewide)
   Dark-space gradient on body + canvas starfield behind
   all content. Section wrappers override their backgrounds
   to transparent so stars show through. Article bodies
   keep a light panel so text stays readable.
   Mirrors the inline theme in index.html.
   ====================================================== */

#stardust-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

body {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(76, 29, 149, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 82% 78%, rgba(30, 27, 110, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #0a0420 0%, #04020f 100%) !important;
  background-attachment: fixed !important;
}

/* Full-width sections / hero wrappers: drop their own bgs
   so the starfield shows through cleanly. Cards keep their
   own panels. */
.hero,
.how-it-works-section,
.insights,
.si-hero,
.archive-hero,
.hub-hero,
.page-hero,
.main-section,
section.section,
section.container-fluid {
  background: transparent !important;
}

/* Sticky nav variants: translucent space-violet with blur */
.sticky-nav,
.si-topbar,
nav.sticky-nav,
header.sticky-nav {
  background: rgba(8, 4, 28, 0.78) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(167, 139, 250, 0.15);
}
.sticky-nav.scrolled {
  background: rgba(8, 4, 28, 0.92) !important;
}

/* Footer variants: fully opaque so the starfield doesn't show through */
.footer,
.site-footer,
footer.footer,
footer.site-footer {
  background: #08041c !important;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
  position: relative;
  z-index: 1;
}

/* Article body containers: float a white panel over the
   starfield so long-form text stays readable. Targets the
   SwitchInsights article layout (<article class="container">)
   without affecting layout-wide .container wrappers that
   don't hold body copy. */
article.container {
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(8, 4, 28, 0.55),
    0 0 60px rgba(167, 139, 250, 0.12);
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Related-reading / sources blocks that often sit as siblings
   of article.container — keep them readable on dark bg */
.related-reading,
.sources-section,
.article-sources,
.article-footer-cta {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(8, 4, 28, 0.55),
    0 0 60px rgba(167, 139, 250, 0.12);
  padding: 2rem;
  max-width: 800px;
  margin: 2rem auto;
}