/* Developed by John Matthew */
/* =============================================
   BLOG PAGES — Modern clean design
   Plain black (dark) / plain white (light)
   ============================================= */

/* Override backgrounds — dark base behind the video */
html { background: #000000 !important; }
body { background: transparent !important; }
[data-theme="light"] html { background: #ffffff !important; }
.noise-overlay { display: none !important; }
#office-bg, #aurora-bg, #spline-bg { display: none !important; }
/* PAGE CONTENT CONTAINER — blog pages get same container with 90% bg */
.content {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: rgba(0,0,0,0.9) !important;
  border-left: 1px solid rgba(255,255,255,0.04) !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}
[data-theme="light"] .content {
  background: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(0,0,0,0.06) !important;
  border-right-color: rgba(0,0,0,0.06) !important;
}

/* Scroll-linked video background */
.blog-video-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blog-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 1s ease;
}
.blog-video-bg::after {
  content: none;
}
[data-theme="light"] .blog-video-bg video {
  opacity: 0.5;
  filter: brightness(1.3) saturate(0.8);
}
[data-theme="light"] .blog-video-bg::after {
  content: none;
}
[data-theme="light"] body { background: transparent !important; }

/* Remove all text outlines/strokes on blog pages */
h1, h2, h3, .section-title, .hero h1,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] .section-title,
[data-theme="light"] .hero h1 {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* Nav — clean */
nav#navbar { background: rgba(0,0,0,0.8) !important; backdrop-filter: blur(20px) !important; }
nav#navbar.scrolled { background: rgba(0,0,0,0.95) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }

/* ============================================================
   FOOTER — DO NOT OVERRIDE IN THIS FILE.
   Blog and blog-article footers must match site-wide footer styles
   defined in styles.css. Any footer rule here with !important caused
   the long-running bug where blog footers looked different from the
   rest of the site. Leave blank intentionally.
   ============================================================ */

/* =============================================
   ARTICLE PAGES (inside /blog/ folder)
   Widen content to match standard site width
   ============================================= */

/* Article wrapper — full standard width */
.content section {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}

/* Override ANY inline max-width on article wrappers */
.content section > div {
  max-width: 100% !important;
  width: 100% !important;
  padding: 2rem 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Article text — clean readable style */
.content article {
  max-width: 100%;
  width: 100%;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  color: #aaa !important;
}
.content article h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #f0f0f0 !important;
  margin: 2.5rem 0 1rem;
}
.content article h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #e0e0e0 !important;
  margin: 2rem 0 0.8rem;
}
.content article p {
  color: #999 !important;
  line-height: 1.9 !important;
  margin-bottom: 1.2rem;
  text-align: justify;
}
.content article ul, .content article ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2rem;
}
.content article li {
  color: #999 !important;
  line-height: 1.85;
  margin-bottom: 0.5rem;
}
.content article a {
  color: var(--clr-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content article strong {
  color: #ddd;
  font-weight: 600;
}
.content article code {
  background: rgba(255,255,255,0.06);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88rem;
}
.content article blockquote {
  border-left: 3px solid var(--clr-primary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(255,255,255,0.02);
  border-radius: 0 8px 8px 0;
}

/* Page hero on article pages */
.page-hero {
  padding-top: 8rem !important;
  padding-bottom: 2rem !important;
}
.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  line-height: 1.3 !important;
  max-width: 900px;
}

/* =============================================
   LIGHT MODE
   ============================================= */
[data-theme="light"] body { background: transparent !important; }
[data-theme="light"] nav#navbar { background: rgba(255,255,255,0.85) !important; }
[data-theme="light"] nav#navbar.scrolled { background: rgba(255,255,255,0.95) !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
/* INTENTIONALLY EMPTY — footer styling lives only in styles.css.
   Do not add any footer rules (dark or light mode) to this file. */

[data-theme="light"] .content article { color: #444 !important; }
[data-theme="light"] .content article p { color: #555 !important; }
[data-theme="light"] .content article li { color: #555 !important; }
[data-theme="light"] .content article h2 { color: #1a1a1a !important; }
[data-theme="light"] .content article h3 { color: #2a2a2a !important; }
[data-theme="light"] .content article strong { color: #1a1a1a; }
[data-theme="light"] .content article a { color: var(--clr-primary) !important; }
[data-theme="light"] .content article code { background: rgba(0,0,0,0.05); }
[data-theme="light"] .content article blockquote { background: rgba(0,0,0,0.02); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .content section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}