/* ===============================
   Q&A Network Overrides Tailwinds
   Colors + Branding
   =============================== */

:root {
  --bs-primary: #0b6e4f;
  --bs-primary-rgb: 11, 110, 79;

  --bs-body-color: #000;
  --bs-body-bg: #fff;
}

/* 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);
}
header img {
  width: 40px;
  height: 40px;
}
header .fs-5 {
  font-weight: 600;
}
header small {
  font-size: 0.9rem;
  color: #000;
  opacity: 0.7;
}
header nav a.active {
  color: var(--bs-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--bs-primary);
}

/* Buttons */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #064c36 !important;
  border-color: #064c36 !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

/* Search Box */
.search-box input {
  border-radius: .5rem 0 0 .5rem;
}
.search-box button {
  border-radius: 0 .5rem .5rem 0;
}
.search-box input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.15rem rgba(11,110,79,0.25);
}
@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: #064c36;
  text-decoration: none !important;
}
.card-title a {
  text-decoration: none !important;
  color: #000;
  font-weight: 700;
}

/* Footer */
footer {
  background: linear-gradient(135deg, #0b6e4f, #064c36);
  color: #fff !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
footer a {
  color: #fff !important;
  text-decoration: none !important;
}
footer a:hover {
  color: #ddd !important;
}

/* Mobile refinements */
@media (max-width: 767.98px) {
  .search-box input,
  .search-box button {
    font-size: 1rem;
    padding: 0.65rem;
  }
  .ad-banner {
    padding: 0.75rem !important;
    font-size: 0.9rem;
  }
  .question-card {
    margin-bottom: 1rem;
  }
  .question-card .card-body {
    padding: 1rem;
  }
  footer .d-flex {
    gap: 1rem;
  }
  footer small {
    margin-bottom: 0.5rem;
    display: block;
  }
  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;
  }
}

/* Lists & Pagination */
.list-group-item a {
  color: var(--bs-dark);
  font-weight: 500;
}
.list-group-item a:hover {
  color: #064c36;
  text-decoration: underline;
}
.pagination .page-link {
  color: var(--bs-dark);
  border-color: var(--bs-dark);
}
.pagination .page-link:hover {
  background-color: #064c36;
  color: #ffffff;
}
.pagination .page-item.active .page-link {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: #fff;
}
.pagination {
  margin: 1rem 0 2rem;
}

/* Section headings */
h1.h4 {
  color: #343a40;
  font-weight: 600;
  margin-bottom: 1rem;
}
h1 {
  font-size: 2rem;
  font-weight: 500;
}

/* Sidebar & containers */
.col-lg-4 {
  border-left: 1px solid #eee;
  padding-left: 1.5rem;
}
.list-group-item {
  transition: background-color 0.2s ease;
}
.list-group-item:hover {
  background-color: #f7f7f7;
}
.container .card,
.q-sidebar .card,
.q-list-sidebar .card,
#q-sidebar .card,
#q-list-sidebar .card {
  border: 1px solid var(--bs-primary);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(11,110,79,0.1);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}
.q-sidebar .card:hover,
#q-sidebar .card:hover {
  border-color: #064c36;
  box-shadow: 0 0.5rem 1rem rgba(11,110,79,0.15);
}
.q-sidebar .card span,
.q-list-sidebar .card span,
#q-sidebar .card span,
#q-list-sidebar .card span {
  color: var(--bs-primary);
  font-weight: 500;
}

/* Special buttons */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Answer content */
.answer-content a {
  color: var(--bs-primary);
  font-weight: 500;
  border-bottom: 2px dotted var(--bs-primary);
  text-decoration: none;
}
.answer-content a:hover {
  color: #064c36;
  border-bottom-color: #064c36;
}

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

/* Sticky sidebar */
.sticky-sidebar {
  min-width: 280px;
  max-width: 100%;
}
@media (min-width: 992px) {
  .sticky-sidebar {
    position: sticky;
    top: 2rem;
  }
}

/* Code blocks */
code.code-warning {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}
pre {
  position: relative;
  padding: 2.5rem 1rem 1rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f3f8f5;
  border: 1px solid #cce5d4;
  border-radius: 0.5rem;
  overflow-x: auto;
}
pre code {
  color: #064c36;
}
pre button.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Tags */
.tags-wrapper {
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.tag-link {
  border-bottom: 2px dotted var(--bs-dark);
  font-weight: 400;
  text-decoration: none;
  color: inherit;
  margin-right: .75rem;
  display: inline-block;
}
.tag-link:hover {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  font-weight: 500;
}

/* Global hover accents */
a:hover,
.text-primary:hover {
  color: #064c36 !important;
}

/* ===================================
   Pagination (SEO Theme / Tailwind Style)
   =================================== */
.pagination {
  margin: 1.5rem 0 2.5rem;
}

.pagination .page-link {
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  padding: 0.5rem 0.9rem;
  background-color: #fff;
  transition: all 0.2s ease;
  font-weight: 500;
}

.pagination .page-link:hover {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  text-decoration: none;
}

.pagination .page-item.active .page-link {
  background-color: #064c36;
  border-color: #064c36;
  color: #fff;
  font-weight: 600;
}

.pagination .page-item.disabled .page-link {
  color: #9ca3af;
  background-color: #e5e7eb;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.pagination .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(11,110,79,0.25);
}