@charset "UTF-8";
/* SKYDB Knowledge-base page skin — re-styles the KBE plugin
 * (`[kbe_knowledgebase]` shortcode) markup to match the Atlas
 * card / list-row visual language used elsewhere in the theme.
 * Auto-loaded by skydb_enqueue_per_page_assets() on the
 * /knowledge-base/ WP page (post_name = knowledge-base). The
 * KBE plugin is third-party (do-not-edit); all overrides live
 * here so an update doesn't blow them away.
 */
/* Two-column category grid. KBE uses .kbe-cols-2 / .kbe-cols-3
 * — keep the breakpoint behaviour but switch to CSS Grid so
 * cards stay the same height. */
.kbe-categories {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .kbe-categories {
    grid-template-columns: 1fr 1fr;
  }
}
/* Category card — same chrome as the forum board card. */
.kbe-category {
  margin: 0 !important;
  /* KBE adds inline-style margins */
  float: none !important;
  width: auto !important;
  padding: 1rem 1.1rem;
  background: var(--skydb-paper-2, #F2F5FA);
  border: 1px solid var(--skydb-rule, #DCE3EF);
  border-radius: 8px;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.kbe-category:hover {
  background: rgba(33, 65, 150, 0.07);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(33, 65, 150, 0.1);
}

/* Category heading — Atlas condensed-uppercase. */
.kbe-category-header {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.kbe-category-title {
  font-family: var(--skydb-font-condensed, "Archivo Narrow");
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The KBE plugin wraps the category title in a link to its
 * `/topic/group/<slug>/` archive page — that archive is a
 * separate, ugly KBE-template page we don't want users to land
 * on. Disable the click; the article rows below the title are
 * still individually linked. */
/* Title needs !important because the parent child-theme.css sets
 * `a { color: ... !important }` site-wide. Same trick we use on
 * the nav-item-mega hover. Building-page H2s use --skydb-navy as
 * their headline colour — match that here. */
.kbe-category-title a,
.kbe-category-title a:hover,
.kbe-category-title a:visited {
  color: var(--skydb-navy, #1F2D7A) !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

/* "N Articles" pill — same style the forum / rating components
 * use so the count chip vocabulary is consistent. */
.kbe-count {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: rgba(33, 65, 150, 0.1);
  color: var(--skydb-navy-deep, #141E5C);
  border-radius: 999px;
  font-family: var(--skydb-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Article list — tight rows. Each LI is the hover target via
 * :has(a:hover) so the icon (which the KBE plugin renders as a
 * sibling of the <a>, not a child) is part of the hover band.
 * No inter-item margin; first/last get the outer rounded
 * corners. */
.kbe-object-list {
  list-style: none;
  margin: 0.25rem -1.1rem -1rem;
  /* bleed to card edges; pull
     into the card's bottom padding
     so the last row sits flush
     instead of leaving empty space. */
  padding: 0;
}

.kbe-object-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  color: var(--skydb-fg);
  line-height: 1.5;
  transition: background 0.12s ease, color 0.12s ease;
}

.kbe-object-list-item a {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit;
}

/* SVG icon — sized to the text. align-items: flex-start on the
 * row pairs with margin-top here so the icon sits on the cap-line
 * of the first text line (looks aligned even when the title
 * wraps to two lines). */
.kbe-object-list-item svg {
  flex: 0 0 1.1em;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  color: var(--skydb-navy-deep, #141E5C);
  transition: color 0.12s ease;
}

/* Hover the whole row (icon + text) when the inner anchor is
 * hovered. Solid navy fill + white text; no underline. */
.kbe-object-list-item:has(a:hover),
.kbe-object-list-item:has(a:focus-visible) {
  background: var(--skydb-navy, #1F2D7A);
  color: #fff;
}

.kbe-object-list-item:has(a:hover) a,
.kbe-object-list-item:has(a:focus-visible) a {
  color: #fff !important;
  text-decoration: none !important;
}

.kbe-object-list-item:has(a:hover) svg,
.kbe-object-list-item:has(a:focus-visible) svg {
  color: #fff;
}

/* Don't underline the inner h2 / count / svg when the user hovers
 * the wrapping anchor — matches the no-hover-underline rule for
 * boxes everywhere else in the theme. */
.kbe-category:hover *,
.kbe-category:focus-visible *,
.kbe-object-list-item a:hover *,
.kbe-object-list-item a:focus-visible * {
  text-decoration: none !important;
}

/* Search bar at the top of the KB — re-skin the input + button
 * to match the rest of SKYDB's form controls. */
.kbe-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kbe-search-form input[type=text],
.kbe-search-form input[type=search] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--skydb-rule, #DCE3EF);
  border-radius: 999px;
  background: var(--skydb-bg, #FBFCFE);
  color: var(--skydb-fg);
  font-family: var(--skydb-font-body);
}

.kbe-search-form button,
.kbe-search-form input[type=submit] {
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
  background: var(--bs-primary, #214196);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--skydb-font-body);
  font-weight: 600;
  cursor: pointer;
}

/* Breadcrumb trail (visible on the article + category drill-in
 * pages) — match the forum's small-caps crumb. */
.kbe-breadcrumbs {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--skydb-fg-muted, #5A6489);
}

.kbe-breadcrumbs-part a {
  color: inherit;
  text-decoration: none;
}

.kbe-breadcrumbs-part a:hover {
  color: var(--skydb-cyan-deep, #0EA5E9);
}

[data-bs-theme=dark] .kbe-category {
  background: rgba(120, 170, 255, 0.06);
  border-color: rgba(120, 170, 255, 0.15);
}
[data-bs-theme=dark] .kbe-search-form input {
  background: var(--skydb-bg-2);
}

/*# sourceMappingURL=knowledge-base.css.map */