/* ===============================
   AI Bootstrap Builder Overrides
   Colors: Purple (#7952b3), Black (#000), White (#fff)
   =============================== */

/* Global Colors */
:root {
  --bs-primary: #7952b3;
  --bs-primary-rgb: 121, 82, 179;

  --bs-body-color: #000;  /* Black text */
  --bs-body-bg: #fff;     /* White background */
}

/* Body */
body {
  background-color: #fafafa;
  color: var(--bs-body-color);
}

/* Header */
header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
header a {
  text-decoration: none !important;
  color: #000;
}
header a:hover {
  color: var(--bs-primary);
}

/* Logo */
header img {
  width: 40px;
  height: 40px;
}
header .fs-5 {
  font-weight: 600;
}
header small {
  font-size: 0.9rem;
  color: #000;
  opacity: 0.7;
}

/* Buttons (all primary buttons) */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #59359c !important; /* darker purple */
  border-color: #59359c !important;
  color: #fff !important;
}

/* Search Box */
.search-box input {
  border-radius: .5rem 0 0 .5rem;
}
.search-box button {
  border-radius: 0 .5rem .5rem 0;
}
@media (max-width: 767.98px) {
  .search-box {
    flex-direction: column;
  }
  .search-box input,
  .search-box button {
    width: 100% !important;
    border-radius: .5rem !important;
    margin: 0.25rem 0;
  }
}

/* Cards */
.question-card {
  transition: box-shadow .2s ease-in-out;
}
.question-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.1);
}
.question-card a {
  text-decoration: none !important;
  color: var(--bs-primary);
}
.question-card a:hover {
  color: #59359c;
  text-decoration: none !important;
}

/* Footer */
footer {
  background-color: #7952b3 !important; /* force purple */
  color: #fff !important;              /* white text */
}
footer a {
  color: #fff !important;
  text-decoration: none !important;
}
footer a:hover {
  color: #ddd !important; /* lighter hover */
  text-decoration: none !important;
}

/* Mobile-first refinements */
@media (max-width: 767.98px) {
  
  /* Search box tweaks */
  .search-box input, 
  .search-box button {
    font-size: 1rem;
    padding: 0.65rem; /* even sizing */
  }

  /* Banner ad spacing */
  .ad-banner {
    padding: 0.75rem !important;
    font-size: 0.9rem;
  }

  /* Cards */
  .question-card {
    margin-bottom: 1rem;
  }
  .question-card .card-body {
    padding: 1rem; /* tighter on mobile */
  }

  /* Footer links */
  footer .d-flex {
    gap: 1rem; /* tighter spacing between links */
  }
  footer small {
    margin-bottom: 0.5rem;
    display: block;
  }
}

/* Center header content on mobile */
@media (max-width: 767.98px) {
  header .container {
    flex-direction: column !important;
    text-align: center;
  }
  header a.d-flex {
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  header nav {
    margin-top: 0.5rem;
  }
  header nav a {
    display: inline-block;
    margin: 0 0.5rem;
  }
}

/* Question links */
.list-group-item a {
  color: #6f42c1; /* Bootstrap purple */
  font-weight: 500;
}

.list-group-item a:hover {
  color: #5a32a3; /* slightly darker on hover */
  text-decoration: underline;
}

/* Pagination */
.pagination .page-link {
  color: #6f42c1;
  border-color: #6f42c1;
}

.pagination .page-link:hover {
  background-color: #f3e9fc;
  color: #5a32a3;
}

.pagination .page-item.active .page-link {
  background-color: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}

/* Section headings */
h1.h4 {
  color: #343a40; /* dark gray for balance */
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Right sidebar spacing */
.col-lg-4 {
  border-left: 1px solid #eee;
  padding-left: 1.5rem;
}

/* Card/list items hover */
.list-group-item {
  transition: background-color 0.2s ease;
}
.list-group-item:hover {
  background-color: #f9f5ff; /* subtle lavender hover */
}

/* Pagination spacing */
.pagination {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* Sidebar ads/widgets */
.q-sidebar .card,
.q-list-sidebar .card {
  border: 1px solid #6f42c1;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.1);
  margin-bottom: 1rem;
}

.q-sidebar .card span,
.q-list-sidebar .card span {
  color: #6f42c1;
  font-weight: 500;
}

/* Sidebar ads/widgets */
#q-sidebar .card {
  border: 1px solid #6f42c1;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.1);
  margin-bottom: 1rem;
}

#q-sidebar .card span {
  color: #6f42c1;
  font-weight: 500;
}

#q-sidebar .card,
#q-list-sidebar .card {
  border: 1px solid #6f42c1;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.1);
  margin-bottom: 1rem;
}

#q-sidebar .card span,
#q-list-sidebar .card span {
  color: #6f42c1;
  font-weight: 500;
}

.container .card {
  border: 1px solid #6f42c1;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.1);
  margin-bottom: 1rem;
}

/* Back button override */
.btn-outline-primary {
  color: #6f42c1;
  border-color: #6f42c1;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #6f42c1;
  color: #fff;
  border-color: #6f42c1;
}

/* --- Global Primary Color Override (Purple) --- */
.btn-primary {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #5a32a3;
  border-color: #5a32a3;
}

/* Outline version */
.btn-outline-primary {
  color: #6f42c1;
  border-color: #6f42c1;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #6f42c1;
  color: #fff;
  border-color: #6f42c1;
}

/* Links inside AI-generated answers */
.answer-content a {
  color: #6f42c1;
  font-weight: 500;
  border-bottom: 2px dotted #6f42c1;
  text-decoration: none; /* remove default underline */
}

.badge-pending {
  background-color: #000 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  padding: 0.2em 0.4em !important;
  border-radius: 0.25rem;
}

/* Prevent the sidebar from collapsing or breaking */
.sticky-sidebar {
  min-width: 280px;
  max-width: 100%;
}

/* Optional: Make it scroll with sticky behavior */
@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 2rem;
  }
}

/* Highlighted <style>/<script> blocks */
code.code-warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

/* 📋 Pre Code Block (tight + copy ready) */
pre {
  position: relative;
  padding: 2.5rem 1rem 1rem 1rem; /* top padding for button */
  margin-bottom: 1rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow-x: auto;
}


pre button.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}