/* Basic layout helpers and markdown styling */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 1rem;
}
.markdown-body p { margin-bottom: .5rem; }
.card + .card { margin-top: 1rem; }

/* Content width */
@media (min-width: 992px) {
  main .col-lg-6 { max-width: var(--blog-max-width); }
}

/* Responsive images */
.markdown-body img,
.card img,
img {
  max-width: 100%;
  height: auto;
}

/* Prevent oversized images from breaking card layout */
.card-body .markdown-body img {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional: figures should scale as well */
.markdown-body figure,
.markdown-body figure img {
  max-width: 100%;
}

/* Theme variables */
:root {
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --link: #0d6efd;
  --link-hover: #0b5ed7;
  --header-bg: #f8f9fa;
}

body.uapp-theme-light {
  --bg: #ffffff;
  --text: #212529;
  --muted: #6c757d;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --link: #0d6efd;
  --link-hover: #0b5ed7;
  --header-bg: #f8f9fa;
}

body.uapp-theme-dark {
  --bg: #121212;
  --text: #eaeaea;
  --muted: #b5b5b5;
  --card-bg: #1e1e1e;
  --card-border: #2a2a2a;
  --link: #66aaff;
  --link-hover: #99c2ff;
  --header-bg: #1a1a1a;
  /* Override Bootstrap CSS variables for better contrast */
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-card-color: var(--text);
}

body {
  background-color: var(--bg);
  color: var(--text);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.text-muted { color: var(--muted) !important; }

.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Prevent overflow from long words/URLs inside cards and markdown bodies */
.card .card-body,
.markdown-body {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Constrain images inside cards to container width */
.card .card-body img,
.markdown-body img {
  max-width: 100%;
  height: auto;
}

/* Ensure base text color inside cards/markdown is readable */
body.uapp-theme-dark .card,
body.uapp-theme-dark .card .card-body,
body.uapp-theme-dark .card,
body.uapp-theme-dark .card .card-body,
body.uapp-theme-dark .markdown-body {
  color: var(--text);
}

/* In dark theme, avoid bright Bootstrap light backgrounds */
body.uapp-theme-dark .bg-light {
  background-color: var(--card-bg) !important;
}
body.uapp-theme-dark .border-bottom,
body.uapp-theme-dark .card,
body.uapp-theme-dark .card .card-body {
  border-color: var(--card-border) !important;
}

/* Avoid overly dimmed secondary text inside cards; keep only explicit .text-muted dim */
body.uapp-theme-dark .card .text-body-secondary,
body.uapp-theme-dark .card .text-secondary {
  color: var(--text) !important;
}

header.bg-light { background-color: var(--header-bg) !important; }

/* Adjust bootstrap border color in dark theme */
body.uapp-theme-dark .border-bottom { border-color: var(--card-border) !important; }
body.uapp-theme-dark .border-top { border-color: var(--card-border) !important; }

/* Improve dark mode badges and buttons */
body.uapp-theme-dark .badge.text-bg-secondary {
  background-color: #2a2a2a !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border);
}
body.uapp-theme-dark .badge.text-bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/* Outline buttons in dark mode */
body.uapp-theme-dark .btn.btn-outline-primary {
  color: var(--link);
  border-color: var(--link);
}
body.uapp-theme-dark .btn.btn-outline-primary:hover,
body.uapp-theme-dark .btn.btn-outline-primary:focus {
  background-color: var(--link);
  color: #000;
  border-color: var(--link);
}

/* Ensure links are visible inside cards */
.card a { color: var(--link); }
.card a:hover { color: var(--link-hover); }

/* Ensure muted text is readable on dark backgrounds */
body.uapp-theme-dark .text-muted { color: var(--muted) !important; }