/* ==========================================================================
   style.css — Kampot Pathways Blog
   --------------------------------------------------------------------------
   Same brand tokens as the main site (kampotpathways.com/css/style.css) —
   river/laterite/mist/charcoal palette, Fraunces + Inter, --kp-ease motion
   curve — trimmed down to just what a text-first blog needs. No theme
   switcher, no i18n data pipeline: this is a deliberately simpler sibling
   of the main site's stylesheet, not a copy of it.
   ========================================================================== */

:root {
  --kp-mist: 246 244 239;      /* #F6F4EF */
  --kp-charcoal: 34 40 42;     /* #22282A */
  --kp-coconut: 232 237 227;   /* #E8EDE3 */

  --kp-river: 27 75 74;        /* #1b4b4a */
  --kp-river-600: 27 75 74;
  --kp-river-700: 16 45 44;

  --kp-laterite-600: 168 85 46; /* #a8552e */
  --kp-laterite-700: 136 69 37; /* #884525 */

  --kp-tide-300: 156 201 194;   /* #9cc9c2 */

  --kp-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, .font-serif {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

a {
  transition: color 250ms var(--kp-ease), background-color 250ms var(--kp-ease);
}

.kp-btn-primary {
  transition: background-color 250ms var(--kp-ease);
}

/* Simple prose measure + spacing for article bodies — Tailwind's Play CDN
   build doesn't include the @tailwindcss/typography plugin, so long-form
   post copy gets its own light-touch rules instead of `prose`. */
.kp-article {
  max-width: 68ch;
}
.kp-article > * + * {
  margin-top: 1.25em;
}
.kp-article h2 {
  margin-top: 2em;
  font-weight: 600;
  font-size: 1.5rem;
}
.kp-article ul, .kp-article ol {
  padding-left: 1.5em;
}
.kp-article ul { list-style: disc; }
.kp-article ol { list-style: decimal; }
.kp-article blockquote {
  border-left: 3px solid rgb(var(--kp-river) / 0.3);
  padding-left: 1em;
  font-style: italic;
  color: rgb(var(--kp-charcoal) / 0.75);
}

/* Fact-check callout — used on any post touching visa/legal/medical
   specifics until those figures are verified at publish time (see
   ProjectBrief.md §4/§9.6). Remove the callout once verified, don't just
   leave it in and hope readers notice. */
.kp-callout {
  border: 1px solid rgb(var(--kp-laterite-600) / 0.4);
  background: rgb(var(--kp-laterite-600) / 0.06);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
}