/* Nord Colors - https://www.nordtheme.com/docs/colors-and-palettes */
:root {
  --nord0:  #2E3440;
  --nord1:  #3B4252;
  --nord2:  #434C5E;
  --nord3:  #4C566A;
  --nord4:  #D8DEE9;
  --nord5:  #E5E9F0;
  --nord6:  #ECEFF4;
  --nord7:  #8FBCBB;
  --nord8:  #88C0D0;
  --nord9:  #81A1C1;
  --nord10: #5E81AC;
  --nord11: #BF616A;
  --nord12: #D08770;
  --nord13: #EBCB8B;
  --nord14: #A3BE8C;
  --nord15: #B48EAD;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Global */
body {
  background-color: var(--nord0);
  color: var(--nord6);
}

a, .page-link {
  color: var(--nord9);
}
a:hover, .page-link:hover {
  color: var(--nord10);
}

/* Bootstrap components */
.navbar, .list-group-item, .card {
  background-color: var(--nord1);
  border-color: var(--nord2);
  color: var(--nord6);
}

.navbar-brand, .navbar-nav .nav-link {
  color: var(--nord6) !important;
}

.list-group-item-action,
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: var(--nord6);
  background-color: var(--nord2);
}

.card-header {
  background-color: var(--nord2);
  border-color: var(--nord3);
  color: var(--nord6);
}

.btn-secondary {
  background-color: var(--nord10);
  border-color: var(--nord10);
  color: var(--nord6);
}
.btn-secondary:hover {
  background-color: var(--nord9);
  border-color: var(--nord9);
}

blockquote {
  background-color: var(--nord1);
  border-left: 0.25rem solid var(--nord9);
  padding: 1rem;
  margin: 1rem 0;
  color: var(--nord6);
}

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

/* Override container padding */
.container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Improved forum list separation */
.list-group {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-group-item {
  border: 1px solid var(--nord3) !important;
  border-radius: 0.5rem !important;
  margin: 0 !important;
  background-color: var(--nord1) !important;
}

.list-group-item-action {
  color: var(--nord6) !important;
  padding: 1rem !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--nord2) !important;
}


.text-backdrop {
  position: relative;           /* establish stacking context */
  padding: 2rem;                /* breathing room */
  border-radius: .5rem;         /* match your taste */
  overflow: visible;            /* ensure pseudo can show */
  z-index: 1;                   /* above any background images */
}

/* The magic: an “always-behind” semi-transparent box */
.text-backdrop::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: inherit;       /* match the parent’s corners */
  z-index: -1;                  /* behind the text/backdrop container */
}

.text-backdrop::before {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}