/* ===== HAMA knowledge base / articles — layout + animations (uses styles.css + landing.css) ===== */

/* reading progress bar */
.kb-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--cyan));z-index:60;transition:width .12s linear}

/* language switcher (anchor-based, separate URLs per language) */
.kb-langs{display:flex;gap:2px;padding:3px;background:#fff;border:1px solid var(--line);border-radius:999px}
.kb-langs a{font-family:inherit;font-weight:700;font-size:12px;color:var(--ink-3);padding:5px 11px;border-radius:999px;text-decoration:none;transition:.2s}
.kb-langs a.active{background:var(--primary);color:#fff}
.kb-langs a:not(.active):hover{color:var(--ink)}

/* article body */
.kb-body{max-width:760px;margin:0 auto}
.kb-body h2{font-family:var(--font-display);font-size:clamp(21px,2.4vw,28px);font-weight:800;letter-spacing:-.01em;margin:36px 0 12px;color:var(--ink)}
.kb-body h3{font-size:18px;font-weight:700;margin:22px 0 8px;color:var(--ink)}
.kb-body p{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin:0 0 16px}
.kb-body ul,.kb-body ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.kb-body li{font-size:16px;line-height:1.65;margin-bottom:8px}
.kb-body strong{color:var(--ink);font-weight:700}
.kb-body a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--primary-soft)}
.kb-body a:hover{border-bottom-color:var(--primary)}

/* TL;DR / short-answer callout */
.kb-tldr{background:var(--primary-soft);border:1px solid rgba(37,99,235,.18);border-radius:var(--radius);padding:20px 22px;margin:0 auto 28px;max-width:760px}
.kb-tldr .kb-tldr-l{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.kb-tldr p{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}

/* highlight callout inside body */
.kb-note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:12px;padding:16px 18px;margin:0 0 18px}
.kb-note p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* related articles */
.kb-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;margin:0 auto}
.kb-rel{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;transition:.2s;box-shadow:var(--shadow)}
.kb-rel:hover{border-color:var(--primary);transform:translateY(-2px)}
.kb-rel span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.kb-rel h3{font-size:15.5px;font-weight:700;color:var(--ink);margin:8px 0 0;line-height:1.35}

/* reveal-on-scroll animation */
.kb-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.kb-reveal.in{opacity:1;transform:none}
.kb-reveal.d1{transition-delay:.06s}
.kb-reveal.d2{transition-delay:.12s}
.kb-reveal.d3{transition-delay:.18s}

/* hero entrance */
.lp-hero .lp-kicker,.lp-hero .lp-h1,.lp-hero .lp-lead{animation:kb-up .7s cubic-bezier(.2,.7,.2,1) both}
.lp-hero .lp-h1{animation-delay:.07s}
.lp-hero .lp-lead{animation-delay:.14s}
@keyframes kb-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .kb-related{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kb-reveal{opacity:1;transform:none;transition:none}
  .lp-hero .lp-kicker,.lp-hero .lp-h1,.lp-hero .lp-lead{animation:none}
  .kb-progress{display:none}
}