/* === Matrix Video Background === */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.35; /* subtle, not overpowering */
}

/* Overlay to darken background slightly */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

/* Make sure the site background doesn’t interfere */
body {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure hero section is transparent */
.text-center.pb-5 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* === Force dark cards always === */
.card,
.card.bg-dark,
.card.h-100.bg-dark,
.card-body,
.card-footer {
  background-color: #1b1b1b !important;  /* soft black */
  color: #eaeaea !important;             /* readable white-gray */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Make sure text inside cards is bright */
.card-title,
.card-text,
.card-footer small,
.card a,
.card small {
  color: #eaeaea !important;
}

/* Disable any light/dark theme switching */
@media (prefers-color-scheme: light) {
  .card,
  .card-body,
  .card-footer {
    background-color: #1b1b1b !important;
    color: #eaeaea !important;
  }
}

/* Keep hero section transparent */
.text-center.pb-5 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* === Always display video background, even in dark mode === */
@media (prefers-color-scheme: dark) {
  body {
    background: transparent !important;
  }

  .video-background {
    display: block !important;
    opacity: 0.35 !important;
  }

  .overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }
}

/* Force remove Bootstrap's dark mode overrides */
[data-bs-theme="dark"],
[data-theme="dark"],
html[data-color-scheme="dark"] {
  background: transparent !important;
}

body.bg-dark {
  background-color: transparent !important;
}

/* === Force consistent dark mode across all environments === */

/* Disable Bootstrap's auto color-scheme switching */
:root {
  color-scheme: only dark !important;
}

/* Force all Bootstrap theme attributes to behave as dark */
html,
body,
[data-bs-theme],
[data-bs-theme="light"],
[data-bs-theme="dark"],
[data-theme],
[data-theme="light"],
[data-theme="dark"] {
  background-color: transparent !important;
  color-scheme: dark !important;
  --bs-body-bg: transparent !important;
  --bs-body-color: #eaeaea !important;
  --bs-dark: #000 !important;
  --bs-light: #000 !important;
}

/* Ensure nothing bright sneaks in */
body,
.container,
.content-wrapper {
  background: transparent !important;
  color: #eaeaea !important;
}

/* Ensure cards stay dark and readable */
.card,
.card-body,
.card-footer {
  background-color: #1b1b1b !important;
  color: #eaeaea !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Keep video & overlay visible always */
.video-background {
  display: block !important;
  opacity: 0.35 !important;
}

.overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* === Author info card transparency === */
.list-group,
.list-group-item.bg-dark,
.list-group-item {
  background-color: rgba(27, 27, 27, 0.75) !important;  /* translucent dark layer */
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: #eaeaea !important;
}

/* Make sure links and icons remain readable */
.list-group-item a,
.list-group-item small,
.list-group-item i {
  color: #eaeaea !important;
}

/* Optional: subtle glow for icons to match the matrix look */
.list-group-item i {
  text-shadow: 0 0 4px rgba(0, 255, 70, 0.5);
}

/* === Fully transparent author info section === */

/* Parent column */
.col-sm-3.text-secondary.pb-3 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove all list group backgrounds and borders */
.list-group,
.list-group-item,
.list-group-item.bg-dark {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Text and icons over video */
.list-group-item,
.list-group-item a,
.list-group-item small,
.list-group-item i {
  color: #eaeaea !important; /* clean readable white */
  text-shadow: 0 0 6px rgba(0, 255, 70, 0.4); /* faint green glow for Matrix feel */
}

/* Optional hover effect for a subtle pulse */
.list-group-item:hover i {
  text-shadow: 0 0 10px rgba(0, 255, 70, 0.8);
  transition: text-shadow 0.2s ease-in-out;
}

/* === Center align page titles === */
h1.fw-bold.text-white.pt-4.pb-5 {
  text-align: center !important;
  width: 100%;
  display: block;
}

/* Optional: make sure spacing looks balanced when centered */
h1.fw-bold.text-white.pt-4.pb-5 {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* === Universal image formatting for posts === */
.post-content img,
.text-secondary img,
p img,
figure img {
  display: block;
  margin: 1.5rem auto;           /* center horizontally */
  max-width: 90%;                /* responsive and neat */
  height: auto;
  border-radius: 8px;            /* smooth edges */
  box-shadow: 0 0 12px rgba(0, 255, 70, 0.15); /* subtle Matrix glow */
}

/* Optional: subtle zoom on hover */
.post-content img:hover,
p img:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

/* Center captions (for <figcaption> if you use it) */
figure {
  text-align: center;
  margin: 1.5rem auto;
}

figure figcaption {
  font-size: 0.9em;
  color: #888;
  margin-top: 0.5rem;
  font-style: italic;
}

/* === Keep author avatar left-aligned === */
.list-group-item img,
.col-sm-3 img,
img.rounded-circle {
  display: inline !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* === Auto-fix inline colors for dark theme === */
.post-content,
.page-content,
.content,
article,
main {
  /* Force all text to inherit from the body color */
  color: inherit !important;
  background: transparent !important;
}

.post-content * {
  /* If any inline styles set light backgrounds or dark text, override them */
  color: inherit !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure headings, paragraphs, lists, etc. are readable */
h1, h2, h3, h4, h5, h6,
p, li, blockquote {
  color: #eaeaea !important;
}

/* Optional: add faint glow for better contrast on mobile OLED screens */
h1, h2, h3 {
  text-shadow: 0 0 6px rgba(0, 255, 70, 0.15);
}

/* === Smart Dark Mode Text Auto-Fix === */
.post-content,
.page-content,
.content,
article,
main {
  color: inherit !important;
  background: transparent !important;
}

/* Apply to all child elements inside posts */
.post-content * {
  background: transparent !important;

  /* Automatically override *only* very dark or very light text colors */
  color: inherit !important;
  /* Re-apply accent colors where intended */
}

.post-content a,
.post-content a:visited,
.post-content strong,
.post-content em,
.post-content b,
.post-content i {
  /* Preserve Matrix accent look */
  color: #00ff46 !important;
  text-shadow: 0 0 6px rgba(0, 255, 70, 0.4);
}

/* Optional subtle glow for headings to keep them legible over video backgrounds */
.post-content h1,
.post-content h2,
.post-content h3 {
  color: #eaeaea !important;
  text-shadow: 0 0 6px rgba(0, 255, 70, 0.15);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Make quotes and lists easier to read */
.post-content blockquote,
.post-content li {
  color: #eaeaea !important;
  opacity: 0.95;
}

/* Ensure borders and underlines don't vanish */
.post-content hr,
.post-content table,
.post-content th,
.post-content td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Optional: maintain highlight colors for code blocks or marked text */
.post-content code,
.post-content pre,
.post-content mark {
  background-color: rgba(0, 255, 70, 0.1) !important;
  color: #00ff46 !important;
  border-radius: 4px;
  padding: 0 0.25em;
}