/* ============================================================
   DIGITALCRAFT — Knowledge Center
   Builds on the main design tokens (styles.css). Dark, premium,
   reading-first. Hub + article layouts, sticky TOC, progress bar.
   ============================================================ */

/* ---------- Reading progress ---------- */
.kb-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
.kb-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-500), var(--cta)); box-shadow: 0 0 12px var(--cta-glow); transition: width .08s linear; }

/* ---------- Back button ---------- */
.kb-back { margin-bottom: var(--s4); }

/* ---------- Breadcrumbs ---------- */
.kb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--text-low); margin-bottom: var(--s4); }
.kb-crumbs a { color: var(--text-low); }
.kb-crumbs a:hover { color: var(--brand-400); }
.kb-crumbs span { opacity: .5; }
.kb-crumbs b { color: var(--text-mid); font-weight: 600; }

/* ---------- Category badge ---------- */
.kb-badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; color: var(--brand-400); background: rgba(24,180,255,.1); border: 1px solid rgba(24,180,255,.22); padding: 5px 12px; border-radius: 30px; }
.kb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); }

/* ============================================================
   HUB (/knowledge/index.html)
   ============================================================ */
.kb-hub-hero { background: var(--grad-hero); padding-block: calc(var(--header-h) + var(--s7)) var(--s6); position: relative; overflow: hidden; }
.kb-hub-hero .container { position: relative; z-index: 1; }
.kb-hub-hero .eyebrow { margin-bottom: var(--s3); }
.kb-hub-hero h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -.03em; margin-bottom: var(--s3); max-width: 18ch; }
.kb-hub-hero p { font-size: var(--fs-lead); color: var(--text-mid); max-width: 60ch; }

.kb-cat { padding-block: var(--s7); border-top: 1px solid var(--border-soft); }
.kb-cat:first-of-type { border-top: 0; }
.kb-cat-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.kb-cat-ic { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; color: var(--brand-400); background: var(--surface-700); border: 1px solid var(--border-soft); }
.kb-cat-ic svg { width: 23px; height: 23px; }
.kb-cat-head h2 { font-size: var(--fs-h3); }
.kb-cat-head p { font-size: var(--fs-small); color: var(--text-low); margin-top: 2px; }

.kb-grid { display: grid; gap: var(--s4); }
.kb-card { display: flex; flex-direction: column; gap: var(--s2); background: var(--surface-700); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: var(--s5);
  transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease); }
.kb-card:hover { transform: translateY(-4px); border-color: rgba(24,180,255,.4); box-shadow: 0 22px 48px rgba(0,0,0,.4); }
.kb-card h3 { font-size: var(--fs-body); color: var(--text-hi); font-weight: 700; line-height: 1.35; }
.kb-card p { font-size: var(--fs-small); color: var(--text-low); line-height: 1.5; flex: 1; }
.kb-card .kb-readmore { font-size: var(--fs-small); font-weight: 700; color: var(--brand-400); display: inline-flex; align-items: center; gap: 6px; }
.kb-card:hover .kb-readmore { gap: 10px; }

/* ============================================================
   ARTICLE
   ============================================================ */
.kb-article-hero { background: var(--grad-hero); padding-block: calc(var(--header-h) + var(--s5)) var(--s6); position: relative; overflow: hidden; }
.kb-article-hero .container { position: relative; z-index: 1; max-width: 820px; }
.kb-article-hero h1 { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.12; margin: var(--s3) 0; }
.kb-lead { font-size: var(--fs-lead); color: var(--text-mid); line-height: 1.6; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--s4); font-size: var(--fs-micro); color: var(--text-low); }
.kb-meta span { display: inline-flex; align-items: center; gap: 6px; }
.kb-meta svg { width: 14px; height: 14px; color: var(--brand-400); }

.kb-body { padding-block: var(--s6) var(--s8); }
.kb-layout { display: grid; gap: var(--s6); max-width: 1080px; margin-inline: auto; }

/* sticky table of contents */
.kb-toc { display: none; }
.kb-toc-inner { position: sticky; inset-block-start: calc(var(--header-h) + var(--s4)); }
.kb-toc-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-low); margin-bottom: var(--s3); }
.kb-toc ul { list-style: none; display: grid; gap: 2px; border-inline-start: 1px solid var(--border-soft); }
.kb-toc a { display: block; font-size: var(--fs-small); color: var(--text-low); padding: 7px 14px; margin-inline-start: -1px; border-inline-start: 2px solid transparent; line-height: 1.4; transition: color .18s var(--ease), border-color .18s var(--ease); }
.kb-toc a:hover { color: var(--text-mid); }
.kb-toc a.is-active { color: var(--brand-400); border-inline-start-color: var(--brand-400); font-weight: 600; }

/* prose */
.kb-prose { max-width: 760px; min-width: 0; }
.kb-prose h2 { font-size: var(--fs-h3); color: var(--text-hi); margin: var(--s7) 0 var(--s3); scroll-margin-top: calc(var(--header-h) + var(--s4)); letter-spacing: -.01em; }
.kb-prose h3 { font-size: var(--fs-h4); color: var(--text-hi); margin: var(--s5) 0 var(--s2); }
.kb-prose p { color: var(--text-mid); margin-bottom: var(--s3); line-height: 1.75; }
.kb-prose ul, .kb-prose ol { display: grid; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; }
.kb-prose li { position: relative; padding-inline-start: 22px; color: var(--text-mid); line-height: 1.65; list-style: none; }
.kb-prose ul li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400); }
.kb-prose ol { counter-reset: kb; }
.kb-prose ol li { counter-increment: kb; }
.kb-prose ol li::before { content: counter(kb); position: absolute; inset-inline-start: 0; inset-block-start: 1px; font-size: 11px; font-weight: 800; color: var(--brand-400); }
.kb-prose a { color: var(--brand-400); text-decoration: underline; text-underline-offset: 2px; }
.kb-prose strong { color: var(--text-hi); font-weight: 700; }

/* pros / cons / "when not needed" callouts */
.kb-cols { display: grid; gap: var(--s3); margin: var(--s4) 0; }
.kb-col { background: var(--surface-700); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--s4); }
.kb-col h4 { font-size: var(--fs-small); font-weight: 800; margin-bottom: var(--s2); display: flex; align-items: center; gap: 8px; }
.kb-col.pro h4 { color: #46D38A; }
.kb-col.con h4 { color: #FF8E8E; }
.kb-col ul { margin: 0; }
.kb-col li { font-size: var(--fs-small); }
.kb-col.pro li::before { background: #46D38A; }
.kb-col.con li::before { content: ""; background: #FF8E8E; }

.kb-note { border-inline-start: 3px solid var(--brand-500); background: rgba(24,180,255,.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--s4); margin: var(--s4) 0; }
.kb-note b { color: var(--text-hi); }
.kb-note p:last-child { margin-bottom: 0; }

/* inline CTA (top + middle) */
.kb-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  background: linear-gradient(120deg, rgba(24,180,255,.1), rgba(17,214,245,.05)); border: 1px solid rgba(24,180,255,.22);
  border-radius: var(--radius-card); padding: var(--s4) var(--s5); margin: var(--s6) 0; }
.kb-cta p { color: var(--text-mid); margin: 0; font-size: var(--fs-small); max-width: 46ch; }
.kb-cta p b { color: var(--text-hi); }
.kb-cta .kb-cta-actions { display: flex; gap: var(--s2); flex-shrink: 0; }

/* CTA buttons must NOT inherit the prose link styling (underline / link color) */
.kb-prose a.btn { text-decoration: none; }
.kb-prose a.btn-primary { color: var(--cta-ink); }
/* WhatsApp CTA — recognizable solid green with a readable dark label + icon */
.kb-cta .btn-wa, .kb-cta-final .btn-wa { background: #25D366; border-color: transparent; color: #05231A; }
.kb-cta .btn-wa:hover, .kb-cta-final .btn-wa:hover { background: #21C25C; color: #05231A; transform: translateY(-2px); }
.kb-prose a.btn-wa { color: #05231A; }
.kb-cta .btn-wa svg, .kb-cta-final .btn-wa svg { width: 18px; height: 18px; }

/* final CTA section */
.kb-cta-final { text-align: center; background: var(--grad-hero); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: var(--s7) var(--s5); margin-top: var(--s7); position: relative; overflow: hidden; }
.kb-cta-final h2 { font-size: var(--fs-h3); color: var(--text-hi); margin: 0 0 var(--s2); }
.kb-cta-final p { color: var(--text-mid); margin: 0 auto var(--s4); max-width: 52ch; }
.kb-cta-final .final-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* FAQ */
.kb-faq { margin-top: var(--s6); }
.kb-faq .faq-item { background: var(--surface-700); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--s2); }
.kb-faq summary { list-style: none; cursor: pointer; padding: var(--s4); font-weight: 700; color: var(--text-hi); font-size: var(--fs-small); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary::after { content: "+"; color: var(--brand-400); font-size: 1.4rem; font-weight: 300; transition: transform .25s var(--ease); flex-shrink: 0; }
.kb-faq details[open] summary::after { transform: rotate(45deg); }
.kb-faq .faq-body { padding: 0 var(--s4) var(--s4); }
.kb-faq .faq-body p { color: var(--text-mid); font-size: var(--fs-small); line-height: 1.7; margin: 0; }

/* related articles */
.kb-related { margin-top: var(--s7); border-top: 1px solid var(--border-soft); padding-top: var(--s6); }
.kb-related h2 { font-size: var(--fs-h4); color: var(--text-hi); margin-bottom: var(--s4); }
.kb-related-grid { display: grid; gap: var(--s3); }
.kb-related a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); background: var(--surface-700); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); color: var(--text-mid); font-size: var(--fs-small); font-weight: 600; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.kb-related a:hover { border-color: rgba(24,180,255,.4); color: var(--text-hi); transform: translateX(-3px); }
.kb-related a svg { width: 16px; height: 16px; color: var(--brand-400); flex-shrink: 0; }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .kb-grid { grid-template-columns: repeat(2, 1fr); }
  .kb-cols { grid-template-columns: 1fr 1fr; }
  .kb-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .kb-layout { grid-template-columns: 232px 1fr; align-items: start; gap: var(--s8); }
  .kb-toc { display: block; }
  .kb-prose { margin-inline: 0; }
}