@import url("/css/themes/litely.css");

:root,
[data-bs-theme="light"],
[data-bs-theme="helpos-civic"] {
  --bs-primary: #2e7d32;
  --bs-primary-rgb: 46, 125, 50;
  --bs-primary-text-emphasis: #163d18;
  --bs-primary-bg-subtle: #dbeedc;
  --bs-primary-border-subtle: #a8d1ab;

  --bs-secondary: #1f4e79;
  --bs-secondary-rgb: 31, 78, 121;
  --bs-secondary-text-emphasis: #0f2940;
  --bs-secondary-bg-subtle: #d9e6f1;
  --bs-secondary-border-subtle: #a8c2d8;

  --bs-success: #2e7d32;
  --bs-success-rgb: 46, 125, 50;
  --bs-info: #1f4e79;
  --bs-info-rgb: 31, 78, 121;
  --bs-danger: #c62828;
  --bs-danger-rgb: 198, 40, 40;
  --bs-danger-text-emphasis: #641515;
  --bs-danger-bg-subtle: #f7d7d7;
  --bs-danger-border-subtle: #e7a9a9;

  --bs-body-bg: #f4f6f8;
  --bs-body-bg-rgb: 244, 246, 248;
  --bs-body-color: #1f2933;
  --bs-body-color-rgb: 31, 41, 51;
  --bs-emphasis-color: #14202b;
  --bs-heading-color: #17324d;
  --bs-secondary-color: rgba(31, 41, 51, 0.72);
  --bs-tertiary-color: rgba(31, 41, 51, 0.55);
  --bs-border-color: rgba(31, 41, 51, 0.12);
  --bs-border-color-translucent: rgba(31, 41, 51, 0.08);
  --bs-secondary-bg: #e9eef2;
  --bs-tertiary-bg: #f8fafb;
  --bs-link-color: #1f4e79;
  --bs-link-color-rgb: 31, 78, 121;
  --bs-link-hover-color: #163957;
  --bs-link-hover-color-rgb: 22, 57, 87;
  --bs-focus-ring-color: rgba(31, 78, 121, 0.24);
  --bs-box-shadow-sm: 0 0.2rem 0.6rem rgba(19, 39, 59, 0.06);
  --bs-box-shadow: 0 0.6rem 1.5rem rgba(19, 39, 59, 0.08);
  --bs-box-shadow-lg: 0 1rem 2.5rem rgba(19, 39, 59, 0.12);
  --bs-border-radius: 0.85rem;
  --bs-border-radius-sm: 0.65rem;
  --bs-border-radius-lg: 1rem;
  --bs-font-sans-serif: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --bs-body-line-height: 1.65;
}

html {
  background: #eef3f5;
}

body {
  background:
    linear-gradient(180deg, #f7faf8 0, #f4f6f8 14rem, #f4f6f8 100%);
  color: var(--bs-body-color);
  letter-spacing: 0.002em;
}

a {
  text-underline-offset: 0.16em;
}

a:hover,
a:focus {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--bs-heading-color);
  letter-spacing: -0.01em;
}

.navbar,
nav.navbar,
header .navbar,
#navbar {
  background: rgba(250, 252, 251, 0.96);
  border-bottom: 1px solid rgba(31, 78, 121, 0.12);
  box-shadow: 0 0.35rem 1rem rgba(19, 39, 59, 0.06);
  backdrop-filter: blur(10px);
}

.navbar::before,
nav.navbar::before,
#navbar::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.28rem;
  background:
    linear-gradient(90deg, #2e7d32 0, #2e7d32 58%, #1f4e79 82%, #c62828 100%);
}

.navbar-brand,
.site-name,
.navbar .navbar-brand {
  color: #17324d;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: #234f2a;
}

.nav-link,
.navbar .nav-link,
.nav-item > a {
  color: #24445f;
  font-weight: 500;
}

.nav-link:hover,
.nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #1f4e79;
}

.container-lg,
.container-md,
.container {
  position: relative;
}

.card,
.accordion .card,
.list-group-item,
.dropdown-menu,
.modal-content,
.table-responsive,
.searchable-select .dropdown-menu,
.community-sidebar,
.sidebar,
.comment-node,
.comment,
.post,
.post-listing,
.main-content-wrapper > div,
.private-message,
.comment-reply {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(31, 41, 51, 0.1);
  box-shadow: var(--bs-box-shadow-sm);
}

.card,
.accordion .card,
.dropdown-menu,
.modal-content,
.comment-node,
.comment,
.post,
.post-listing {
  border-radius: 0.95rem;
}

.card-header,
.accordion .card-header,
.list-group-item.active,
.dropdown-header {
  background: linear-gradient(180deg, #f7fbf8 0, #eef4f1 100%);
  border-color: rgba(46, 125, 50, 0.14);
  color: #1d3c2c;
}

.main-content-wrapper > div,
.home .card,
.community .card,
.post .card,
.comment .card {
  overflow: hidden;
}

.post-listing,
.post,
.comment-node,
.comment {
  border-left: 0.28rem solid rgba(31, 78, 121, 0.18);
}

.post-listing:hover,
.post:hover,
.comment-node:hover,
.comment:hover {
  border-left-color: rgba(46, 125, 50, 0.55);
  box-shadow: 0 0.8rem 1.8rem rgba(19, 39, 59, 0.08);
}

.md-div,
.comment-content,
.post-body,
.post-content,
.markdown-text {
  line-height: 1.72;
  color: #22313d;
}

.md-div blockquote,
blockquote {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 0.3rem solid rgba(31, 78, 121, 0.42);
  background: #f3f7fa;
  color: #314659;
}

.md-div code,
code {
  background: #edf3f6;
  color: #14314d;
  border-radius: 0.35rem;
  padding: 0.12rem 0.35rem;
}

.btn-primary {
  --bs-btn-bg: #2e7d32;
  --bs-btn-border-color: #2e7d32;
  --bs-btn-hover-bg: #27692b;
  --bs-btn-hover-border-color: #255f28;
  --bs-btn-active-bg: #245d27;
  --bs-btn-active-border-color: #224f23;
  --bs-btn-color: #ffffff;
}

.btn-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  --bs-btn-bg: #1f4e79;
  --bs-btn-border-color: #1f4e79;
  --bs-btn-hover-bg: #183d5f;
  --bs-btn-hover-border-color: #173854;
  --bs-btn-active-bg: #15344f;
  --bs-btn-active-border-color: #132d44;
  --bs-btn-color: #ffffff;
}

.btn-outline-secondary {
  --bs-btn-color: #1f4e79;
  --bs-btn-border-color: rgba(31, 78, 121, 0.3);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
}

.btn-link,
.dropdown-item,
.page-link {
  color: #1f4e79;
}

.btn-link:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.page-link:hover {
  color: #163957;
  background-color: rgba(31, 78, 121, 0.08);
}

.form-control,
.form-select,
.form-check-input,
.searchable-select .form-control,
textarea,
input,
select {
  border-color: rgba(31, 41, 51, 0.16);
  background: rgba(255, 255, 255, 0.98);
  color: #1f2933;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
textarea:focus,
input:focus,
select:focus {
  border-color: rgba(31, 78, 121, 0.45);
  box-shadow: 0 0 0 0.22rem rgba(31, 78, 121, 0.14);
}

.form-check-input:checked {
  background-color: #2e7d32;
  border-color: #2e7d32;
}

.alert-danger,
.text-danger,
.border-danger {
  color: #8f1f1f !important;
}

.alert-danger {
  background: #f8e0e0;
  border-color: #e8b6b6;
}

.alert-info,
.alert-secondary {
  background: #e8f0f6;
  border-color: #bfd3e4;
  color: #183a5c;
}

.badge.bg-primary,
.bg-primary {
  background-color: #2e7d32 !important;
}

.badge.bg-secondary,
.bg-secondary {
  background-color: #1f4e79 !important;
}

.text-primary {
  color: #2e7d32 !important;
}

.text-secondary {
  color: #1f4e79 !important;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(31, 78, 121, 0.035);
}

.table thead th {
  color: #24445f;
  border-bottom-color: rgba(31, 78, 121, 0.18);
}

.table td,
.table th {
  border-color: rgba(31, 41, 51, 0.08);
}

.pagination .page-item.active .page-link {
  background-color: #2e7d32;
  border-color: #2e7d32;
}

.pagination .page-link {
  color: #1f4e79;
}

#sidebarContainer .card,
aside .card,
.sidebar .card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0, rgba(247, 250, 248, 0.98) 100%);
}

#tagline,
.site-desc,
.sidebar .md-div {
  color: #355064;
}

.vote-bar,
.progress {
  background-color: #e6edf1;
}

.progress-bar,
.vote-bar .active {
  background-color: #2e7d32;
}

.navbar .badge,
.nav-link .badge {
  background: #c62828 !important;
  color: #fff;
}

hr,
.dropdown-divider {
  border-color: rgba(31, 41, 51, 0.1);
}

@media (max-width: 768px) {
  body {
    background: #f4f6f8;
  }

  .navbar,
  nav.navbar,
  #navbar {
    backdrop-filter: none;
  }

  .card,
  .comment-node,
  .post,
  .post-listing {
    border-radius: 0.8rem;
  }
}