/**
 * BlogPage - Background & Layer Styles
 *
 * This file manages the complete visual layering system for BlogPage and ArticlePage:
 * - z-index 0: Background div (#blog-shared-background)
 * - z-index 1: Purple glows (.blog-bg-glow)
 * - z-index 5: Vignette overlay (#blog-vignette-overlay)
 * - z-index 10: Page content (articles, sections)
 */

/* ==========================================================================
   Page Background Base
   ========================================================================== */

body.blog-page {
  background: rgba(9, 5, 24, 1) !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body.blog-article-page {
  background: #111827 !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   Background Layer
   ========================================================================== */

#blog-shared-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background: rgba(9, 5, 24, 1);
}

/* ==========================================================================
   Vignette Overlay
   Edge darkening effect above glows, below content
   ========================================================================== */

#blog-vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0) 48%,
    rgba(0, 0, 0, 0.2) 65%,
    rgba(0, 0, 0, 0.5) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
  background-size: 100% 150%;
  background-position: center;
}

/* ==========================================================================
   Page Isolation
   Ensure BlogPage styles don't affect other pages
   ========================================================================== */

body:not(.blog-page):not(.blog-article-page) #blog-shared-background,
body:not(.blog-page):not(.blog-article-page) #blog-vignette-overlay,
body:not(.blog-page):not(.blog-article-page) .blog-bg-glow {
  display: none !important;
}

/* ==========================================================================
   Content Layering
   Ensures content is above background layers for proper stacking context.
   ========================================================================== */

body.blog-page #app,
body.blog-page #main-content,
body.blog-article-page #app,
body.blog-article-page #main-content {
  position: relative;
}

body.blog-page #main-content > *:not(#header-container),
body.blog-article-page #main-content > *:not(#header-container) {
  position: relative;
  z-index: 10;
}

body.blog-page #page-content,
body.blog-page #footer-container,
body.blog-article-page #article-container,
body.blog-article-page #footer-container {
  position: relative;
  z-index: 10;
}

body.blog-article-page #article-container,
body.blog-page #page-content {
  flex: 1;
  width: 100%;
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

@media (max-width: 768px) {
  #blog-shared-background {
    opacity: 0.85;
  }
}