/* =========================
   Base + Background
========================= */

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: url("../images/mmhi-colored-pic.jpg") center center / cover no-repeat fixed;

  /* layout for fixed navbar */
  padding-top: 72px; /* navbar height */
}

/* Dark mode blur layer only, light mode stays original */
body.theme-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  background: inherit;
  filter: blur(2px) brightness(0.75);
  transform: scale(1.05);

  /* IMPORTANT: keep the overlay behind everything */
  z-index: 0;
  pointer-events: none;
}

/* Make content always sit above background */
body > * {
  position: relative;
  z-index: 1;
}

/* =========================
   Theme Variables
========================= */

body.theme-light {
  --bg-card: rgba(255, 255, 255, 0.92);
  --text: #0b0b0b;
  --muted: #4b4b4b;
  --border: rgba(0, 0, 0, 0.18);

  --btn-bg: #0b0b0b;
  --btn-text: #ffffff;
  --btn-border: #0b0b0b;

  --btn-outline-bg: transparent;
  --btn-outline-text: #0b0b0b;
  --btn-outline-border: #0b0b0b;

  --badge-bg: rgba(255, 255, 255, 0.9);
  --badge-text: #0b0b0b;

  --link: #0b0b0b;
}

body.theme-dark {
  --bg-card: rgba(0, 0, 0, 0.70);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.75);
  --border: rgba(255, 255, 255, 0.18);

  --btn-bg: #ffffff;
  --btn-text: #0b0b0b;
  --btn-border: #ffffff;

  --btn-outline-bg: transparent;
  --btn-outline-text: #ffffff;
  --btn-outline-border: rgba(255, 255, 255, 0.75);

  --badge-bg: rgba(0, 0, 0, 0.55);
  --badge-text: #ffffff;

  --link: #ffffff;
}

/* =========================
   Navbar (fixed, always on top)
========================= */

nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100; /* above overlay and content */
}

.navbar-custom {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

body.theme-light .navbar-custom {
  background: rgba(255, 255, 255, 0.65);
}

.navbar-custom .navbar-brand {
  color: var(--text) !important;
}

.logo-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/* =========================
   Main layout + footer fix
   (works even if footer is inside main)
========================= */

main {
  min-height: calc(100vh - 72px); /* viewport minus navbar */
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

main > .row {
  flex: 1;
}

/* footer at bottom */
footer {
  margin-top: auto;
}

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

/* =========================
   Card + Typography
========================= */

.app-card {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.card {
  border-radius: 14px;
}

.question-box {
  background: transparent;
  border-color: var(--border) !important;
}

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

/* =========================
   Buttons
========================= */

.btn-solid-theme {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-border) !important;
}

.btn-solid-theme:hover,
.btn-solid-theme:focus,
.btn-solid-theme:active {
  background: var(--btn-text) !important;
  color: var(--btn-bg) !important;
  border: 1px solid var(--btn-bg) !important;
}

.btn-outline-theme {
  background: var(--btn-outline-bg) !important;
  color: var(--btn-outline-text) !important;
  border: 1px solid var(--btn-outline-border) !important;
}

.btn-outline-theme:hover,
.btn-outline-theme:focus,
.btn-outline-theme:active {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
}

/* Option buttons */
#options button {
  text-align: left;
}

#options .btn {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

#options .btn:hover,
#options .btn:focus {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

body.theme-light #options .btn:hover,
body.theme-light #options .btn:focus {
  background: #0b0b0b !important;
  color: #ffffff !important;
  border-color: #0b0b0b !important;
}

/* Selected option */
.option-selected {
  border-width: 2px !important;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
}

/* =========================
   Study screen buttons only
   dark mode only
========================= */

body.theme-dark #btn-study-back-home,
body.theme-dark #btn-study-prev,
body.theme-dark #btn-study-next {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

body.theme-dark #btn-study-back-home:hover,
body.theme-dark #btn-study-back-home:focus,
body.theme-dark #btn-study-back-home:active,
body.theme-dark #btn-study-prev:hover,
body.theme-dark #btn-study-prev:focus,
body.theme-dark #btn-study-prev:active,
body.theme-dark #btn-study-next:hover,
body.theme-dark #btn-study-next:focus,
body.theme-dark #btn-study-next:active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* =========================
   Badges, links, review cards
========================= */

.badge-theme {
  background: var(--badge-bg) !important;
  color: var(--badge-text) !important;
}

a.more-info {
  color: var(--link) !important;
  word-break: break-word;
  text-decoration: underline;
}

a.more-info:hover {
  opacity: 0.85;
}

#review-list .card {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

#review-list .card-body {
  color: var(--text);
}

#review-list .bg-light {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0b0b0b !important;
}

/* =========================
   Mobile spacing below fixed navbar
========================= */

@media (max-width: 576px) {
  body {
    padding-top: 110px; /* more space below fixed navbar on phones */
  }

  main {
    margin-top: 0; /* avoid double spacing */
  }
}