CENTO knowledge base

/* ── Root KB hub page — CENTO design system ── */
.kb-wrap { font-family:inherit; max-width:900px; }

/* Intro header */
.kb-head {
  padding:32px 0 28px 0;
  border-bottom:1px solid #E8E8E8;
  margin-bottom:32px;
}
.kb-head p {
  font-size:.95em; color:#555; margin:0 0 10px 0;
  line-height:1.7; max-width:720px;
}
.kb-head p:last-child { margin-bottom:0; }

/* Audience chips */
.kb-chips { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0 0; }
.kb-chip {
  font-size:.72em; font-weight:600; padding:3px 10px;
  border-radius:10px; white-space:nowrap;
  background:#deeaf7; color:#003d80; border:1px solid #b3d4ee;
}

/* Two-column layout */
.kb-layout { display:flex; gap:24px; align-items:flex-start; }
.kb-main { flex:1; min-width:0; }
.kb-side { width:240px; flex-shrink:0; }

/* Section label */
.hub-section-label {
  font-size:.72em; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#888;
  margin:0 0 14px 0; padding-bottom:8px;
  border-bottom:2px solid #E8E8E8;
}

/* Section cards */
.kb-card {
  border:1px solid #E8E8E8; border-radius:8px;
  margin-bottom:10px; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
  background:#fff;
}
.kb-card:hover {
  border-color:#b3d4ee;
  box-shadow:0 2px 10px rgba(0,90,180,.10);
}
.kb-card-link {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 18px; text-decoration:none; color:inherit;
}
.kb-card-icon {
  width:40px; height:40px; border-radius:8px;
  background:#deeaf7; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; margin-top:1px;
}
.kb-card-icon svg { color:#005AB4; }
.kb-card-title {
  font-size:.95em; font-weight:700; color:#005AB4;
  margin:0 0 4px 0;
}
.kb-card-desc {
  font-size:.83em; color:#555; margin:0 0 8px 0; line-height:1.55;
}
.kb-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.kb-ctag {
  font-size:.68em; font-weight:600; padding:2px 8px;
  border-radius:8px; white-space:nowrap;
  background:#f1f5f9; color:#475569; border:1px solid #cbd5e1;
}

/* Resources panel */
.kb-resources {
  border:1px solid #E8E8E8; border-radius:8px;
  overflow:hidden;
}
.kb-res-head {
  font-size:.75em; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#888;
  padding:10px 14px 8px 14px;
  border-bottom:1px solid #E8E8E8;
  background:#f5f5f5;
}
.kb-res-list { list-style:none; margin:0; padding:0; }
.kb-res-list li { border-bottom:1px solid #E8E8E8; }
.kb-res-list li:last-child { border-bottom:none; }
.kb-res-list a {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  font-size:.83em; color:#005AB4; text-decoration:none;
  line-height:1.4;
}
.kb-res-list a:hover { background:#f5f8ff; }
.kb-res-list a svg { flex-shrink:0; color:#888; }

/* Demo note */
.kb-demo-note {
  margin-top:24px;
  border:1px solid #E8E8E8; border-radius:8px;
  overflow:hidden;
}
.kb-demo-note-head {
  font-size:.75em; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#888;
  padding:10px 14px 8px 14px;
  border-bottom:1px solid #E8E8E8;
  background:#f5f5f5;
}
.kb-demo-note-body {
  padding:12px 14px;
  font-size:.85em; color:#555; line-height:1.65;
}
.kb-demo-note-body a { color:#005AB4; }

/* Contact row */
.kb-contact {
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding:10px 14px;
  background:#f5f5f5; border:1px solid #E8E8E8;
  border-radius:6px; font-size:.82em; color:#555;
}
.kb-contact a { color:#005AB4; }

/* Responsive fallback */
@media (max-width:680px) {
  .kb-layout { flex-direction:column; }
  .kb-side { width:100%; }
}