/*
 * Kahu Logic Blocks — atom foundation (KAN-465).
 *
 * Foundation strategy:
 *   - Bootstrap 5 / CoreUI provides the structural layer (grid, spacing
 *     utilities, accordion/card behaviour) — loaded by the theme, NOT redefined
 *     here. We deliberately do not re-skin Bootstrap's components.
 *   - This file styles only the `kl-` atom primitives, mapping them onto the
 *     existing bespoke kahulogic.ai visual language (custom type, colours).
 *   - `kl-` prefix keeps these scoped so they never clobber the site skin or
 *     Bootstrap utility classes. Molecule blocks (KAN-251) compose these atoms.
 *
 * These are baseline styles; design refines exact values against the live skin.
 */

:root {
  --kl-ink: #0a0a0a;
  --kl-accent: #6d5efc;
  --kl-muted: #6b6b6b;
  --kl-tick: #1aa260;
  --kl-radius: 12px;
}

/* heading + <em> accent (house style: italic emphasis tail) */
.kl-heading {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--kl-ink);
}
.kl-heading em {
  font-style: italic;
  color: var(--kl-accent);
}

/* eyebrow / kicker */
.kl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kl-muted);
}

/* badge / pill */
.kl-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.kl-badge--default { background: #f0f0f3; color: var(--kl-ink); }
.kl-badge--popular { background: var(--kl-accent); color: #fff; }
.kl-badge--value   { background: #fff3d6; color: #8a6d1f; }

/* button / CTA */
.kl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.2em;
  border-radius: var(--kl-radius);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.kl-btn:hover { transform: translateY(-1px); }
.kl-btn--primary   { background: var(--kl-ink); color: #fff; }
.kl-btn--secondary { background: transparent; color: var(--kl-ink); box-shadow: inset 0 0 0 1px var(--kl-ink); }
.kl-btn--link      { padding: 0; background: none; color: var(--kl-accent); }

/* icon */
.kl-icon { display: inline-block; line-height: 1; }

/* checklist */
.kl-checklist { list-style: none; margin: 0; padding: 0; }
.kl-check { display: flex; align-items: flex-start; gap: 0.6em; margin: 0.4em 0; }
.kl-check__tick {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--kl-tick);
  position: relative;
}
.kl-check__tick::after {
  content: "";
  position: absolute;
  left: 0.34em;
  top: 0.18em;
  width: 0.28em;
  height: 0.52em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kl-check__text { color: var(--kl-ink); }

/* price */
.kl-price { display: inline-flex; align-items: baseline; gap: 0.15em; }
.kl-price__from {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kl-muted);
  margin-right: 0.4em;
}
.kl-price__symbol { font-size: 1.2rem; font-weight: 600; }
.kl-price__amount { font-size: 2.4rem; font-weight: 600; line-height: 1; }
.kl-price__period { font-size: 0.9rem; color: var(--kl-muted); }

/* image */
.kl-img { display: block; max-width: 100%; height: auto; border-radius: var(--kl-radius); }