/* kb.css — база знаний (/baza-znaniy/): поиск Pagefind, карточки рубрик, лента «Новое».
   Подключается ТОЛЬКО на хабе базы знаний поверх site.css.
   Токены берём из site.css (--ink, --blue, --hair, --card, --muted, --faint). */

/* ─────────── Поиск ─────────── */

.kb-search { margin: 30px 0 46px; }
.kb-nojs { color: var(--faint); font-size: 15px; margin: 10px 0 0; }

/* Pagefind UI разворачиваем в палитру сайта: дефолт у него сине-фиолетовый
   с собственной типографикой. resetStyles:false в инициализации + перекрытие
   переменных здесь = поле выглядит как остальные элементы сайта. */
#kb-search {
  --pagefind-ui-scale: 0.86;
  --pagefind-ui-primary: var(--ink);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: #fff;
  --pagefind-ui-border: var(--hair);
  --pagefind-ui-tag: var(--card);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 14px;
  --pagefind-ui-font: inherit;
}

#kb-search .pagefind-ui__search-input {
  font-size: 17px;
  font-weight: 500;
  padding: 17px 20px 17px 50px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 18px center;
  border: 1px solid var(--hair);
  border-radius: 14px;
  color: var(--ink);
  transition: border-color .15s, background-color .15s;
}
#kb-search .pagefind-ui__search-input::placeholder { color: var(--faint); font-weight: 400; }
#kb-search .pagefind-ui__search-input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
#kb-search .pagefind-ui__search-clear {
  background: transparent;
  color: var(--faint);
  font-size: 14px;
  font-weight: 500;
  padding-right: 18px;
}
#kb-search .pagefind-ui__search-clear:hover { color: var(--ink); }

#kb-search .pagefind-ui__results-area { margin-top: 22px; }
#kb-search .pagefind-ui__message {
  font-size: 14px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 0 0 6px;
}
#kb-search .pagefind-ui__results { padding: 0; }
#kb-search .pagefind-ui__result {
  border: none;
  border-top: 1px solid var(--hair);
  padding: 18px 0;
}
#kb-search .pagefind-ui__result-title {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0 0 5px;
}
#kb-search .pagefind-ui__result-link { color: var(--ink); text-decoration: none; }
#kb-search .pagefind-ui__result-link:hover { color: var(--blue); text-decoration: underline; }
#kb-search .pagefind-ui__result-excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
#kb-search mark {
  background: #fff2c2;
  color: var(--ink);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 2px;
}
#kb-search .pagefind-ui__result-nested { padding-left: 18px; border-left: 2px solid var(--hair); margin-top: 10px; }
#kb-search .pagefind-ui__result-nested .pagefind-ui__result-link { font-size: 15px; font-weight: 600; }
#kb-search .pagefind-ui__button {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  padding: 13px;
  margin-top: 18px;
  cursor: pointer;
}
#kb-search .pagefind-ui__button:hover { border-color: var(--blue); color: var(--blue); }

/* ─────────── Карточки рубрик ─────────── */

.kb-rubrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.kb-rub {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s;
}
a.kb-rub:hover { border-color: var(--blue); transform: translateY(-2px); }
.kb-rub-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 9px;
}
.kb-rub h3 { margin: 0 0 7px; font-size: 17.5px; font-weight: 700; letter-spacing: -.2px; }
.kb-rub p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.kb-rub-more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}

/* ─────────── Лента «Новое» ─────────── */

.kb-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; }
.kb-latest { border-top: 1px solid var(--hair); margin: 0 0 8px; }
.kb-item {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: var(--ink);
}
.kb-item:hover .kb-item-title { color: var(--blue); }
.kb-item-kind {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.kb-item-title {
  display: block;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.2px;
  margin: 4px 0 5px;
}
.kb-item-desc { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.kb-item-date { display: block; font-size: 13.5px; color: var(--faint); margin-top: 6px; }

/* ─────────── Адаптив ─────────── */

@media (max-width: 900px) { .kb-rubrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .kb-rubrics { grid-template-columns: 1fr; gap: 12px; }
  .kb-rub { padding: 19px 20px; }
  .kb-search { margin: 24px 0 36px; }
  #kb-search .pagefind-ui__search-input { font-size: 16px; padding: 15px 16px 15px 46px; background-position: 16px center; }
}

@media print {
  .kb-search, .kb-rub-more { display: none; }
}