/* modules/addons/kbquickfind/assets/kbquickfind.css */
/* turbopress KB Quickfind – Bootstrap 4.5.3 compatible + turbopress dark-mode class */

:root{
  --kbqf-radius: 12px;
  --kbqf-border-w: 1px;
  --kbqf-gap-top: 6px;

  /* Light */
  --kbqf-bg: #ffffff;
  --kbqf-text: #212529;     /* BS4 body text */
  --kbqf-muted: #6c757d;    /* BS4 secondary */
  --kbqf-border: rgba(0,0,0,0.12);
  --kbqf-shadow: 0 12px 28px rgba(0,0,0,0.15);

  --kbqf-hover: rgba(0,0,0,0.04);
  --kbqf-active: rgba(0,0,0,0.07);
}

/* turbopress dark mode */
body.dark-mode{
  --kbqf-bg: #111827;
  --kbqf-text: #e5e7eb;
  --kbqf-muted: #9ca3af;
  --kbqf-border: rgba(255,255,255,0.12);
  --kbqf-shadow: 0 16px 34px rgba(0,0,0,0.55);

  --kbqf-hover: rgba(255,255,255,0.06);
  --kbqf-active: rgba(255,255,255,0.10);
}

/* Dropdown container */
.kbqf-results{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--kbqf-gap-top));

  background-color: var(--kbqf-bg) !important; /* force bg */
  color: var(--kbqf-text);

  border: var(--kbqf-border-w) solid var(--kbqf-border);
  border-radius: var(--kbqf-radius);
  box-shadow: var(--kbqf-shadow);

  z-index: 2000;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Optional: nicer scrollbar (WebKit) */
.kbqf-results::-webkit-scrollbar{ width: 10px; }
.kbqf-results::-webkit-scrollbar-thumb{
  background: rgba(108,117,125,0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.dark-mode .kbqf-results::-webkit-scrollbar-thumb{
  background: rgba(156,163,175,0.30);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Items */
.kbqf-item{
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.2;

  display: flex;
  flex-direction: column;
  gap: 4px;

  transition: background 120ms ease;
}

.kbqf-item + .kbqf-item{
  border-top: 1px solid var(--kbqf-border);
}

.kbqf-item:hover{ background: var(--kbqf-hover); }
.kbqf-item.is-active{ background: var(--kbqf-active); }

.kbqf-title{
  font-weight: 600;
  font-size: 14px;
  color: var(--kbqf-text);
}

.kbqf-sub{
  font-size: 12px;
  color: var(--kbqf-muted);
}