/* ==========================================================================
   KNOWLEDGE POST
   Namespaced nfg-kpost- throughout. Reuses existing NutriFoodGuide
   design tokens from style.css. Only loaded on nfg_kpost singles.
   ========================================================================== */

/* ---- Top bar ---- */
.nfg-kpost-topbar {
  background: var(--color-primary);
  color: var(--color-secondary);
  position: sticky;
  top: 0;
  z-index: 30;
}
.nfg-kpost-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
}
.nfg-kpost-topbar__crumbs a { color: rgba(244,239,228,0.85); text-decoration: none; }
.nfg-kpost-topbar__crumbs a:hover { color: var(--color-secondary); }
.nfg-kpost-topbar__crumbs span[aria-hidden] { margin: 0 0.4em; opacity: 0.6; }

/* Reading progress bar */
.nfg-kpost-progress {
  height: 3px;
  background: var(--color-highlight);
  width: 0%;
  transition: width 100ms linear;
}

/* Two-column layout: mini TOC + article */
.nfg-kpost-layout {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-2) 0;
}
.nfg-kpost-layout .nfg-kpost { padding-inline: 0; }
@media (max-width: 900px) {
  .nfg-kpost-layout { grid-template-columns: 1fr; }
  .nfg-kpost-toc { display: none; }
}

.nfg-kpost-toc {
  position: sticky;
  top: calc(3px + var(--space-2));
}
.nfg-kpost-toc__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.nfg-kpost-toc ul { list-style: none; margin: 0; padding: 0; }
.nfg-kpost-toc li { margin-bottom: 0.4em; }
.nfg-kpost-toc a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.3em 0.5em;
  border-radius: var(--radius-sm);
}
.nfg-kpost-toc a:hover { color: var(--color-primary); }
.nfg-kpost-toc a.is-current {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
}

/* Embedded live Map bridge, end of chapter */
.nfg-kpost-bridge {
  background: var(--color-primary-dark);
  padding-block: var(--space-5);
  margin-top: var(--space-4);
}
.nfg-kpost-bridge__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-secondary);
  margin: 0 0 0.2em;
}
.nfg-kpost-bridge__subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(244,239,228,0.65);
  margin: 0 0 var(--space-3);
}
.nfg-kpost-bridge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}
.nfg-kpost-bridge__card {
  background: rgba(244,239,228,0.08);
  border: 1px solid rgba(244,239,228,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.nfg-kpost-bridge__card:hover { background: rgba(244,239,228,0.16); }
.nfg-kpost-bridge__card-title {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-secondary);
}
.nfg-kpost-bridge__card-preview {
  display: inline-block;
  margin-top: 0.3em;
  font-size: var(--text-xs);
  color: var(--color-highlight);
}
.nfg-kpost-bridge__footer { text-align: center; margin-top: var(--space-3); }

/* ---- Article shell ---- */
.nfg-kpost { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.nfg-kpost-section { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.nfg-kpost-section:last-child { border-bottom: none; }
.nfg-kpost-section h2 { font-size: var(--text-2xl); }

/* ---- Hero ---- */
.nfg-kpost-hero { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.nfg-kpost-hero__text { flex: 1; min-width: 280px; }
.nfg-kpost-hero__kicker { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-dark); font-weight: var(--font-weight-semibold); }
.nfg-kpost-hero h1 { font-size: var(--text-4xl); margin-block: var(--space-1) var(--space-2); }
.nfg-kpost-hero__intro { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 480px; }
.nfg-kpost-hero__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block: var(--space-3); }
.nfg-kpost-chip { background: var(--color-secondary); border-radius: var(--radius-md); padding: var(--space-2); min-width: 120px; }
.nfg-kpost-chip__label { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); }
.nfg-kpost-chip__text { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.nfg-kpost-hero__image { flex: 1; min-width: 260px; max-width: 420px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.nfg-kpost-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* Quick Answer (AEO/GEO) — deliberately distinct from key_takeaway:
   this OPENS with the answer, key_takeaway CLOSES with one. Bordered
   box, not a colored fill, so it reads as "the direct answer" rather
   than "a highlighted aside." */
.nfg-kpost-quick-answer {
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}
.nfg-kpost-quick-answer__question {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary-dark);
  margin: 0 0 0.4em;
}
.nfg-kpost-quick-answer__text {
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  margin: 0;
}

/* ---- Step badge (used on cycle_diagram) ---- */
.nfg-kpost-step-badge { display: inline-block; background: var(--color-primary); color: var(--color-secondary); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); padding: 0.3em 0.8em; border-radius: var(--radius-sm); margin-bottom: var(--space-1); }
.nfg-kpost-pullquote { border-left: 3px solid var(--color-accent); background: var(--color-secondary); padding: var(--space-2) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary-dark); margin: var(--space-3) 0; }

/* ---- Cycle diagram ---- */
.nfg-kpost-cycle { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.nfg-kpost-cycle__node { background: var(--color-primary); color: var(--color-secondary); border-radius: 999px; padding: var(--space-2) var(--space-4); font-family: var(--font-display); font-weight: var(--font-weight-semibold); }
.nfg-kpost-cycle__arrow { color: var(--color-accent); font-size: var(--text-xl); }

/* ---- Fact grid ---- */
.nfg-kpost-grid-title { text-align: center; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary-dark); margin-bottom: var(--space-4); }
.nfg-kpost-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.nfg-kpost-fact-card { text-align: center; }
.nfg-kpost-fact-card__icon { width: 44px; height: 44px; margin-inline: auto; border-radius: 50%; background: var(--color-secondary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.nfg-kpost-fact-card__label { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); margin-bottom: 0.3em; }
.nfg-kpost-fact-card__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.nfg-kpost-fact-card__tags { list-style: none; padding: 0; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-accent-dark); }

/* ---- Process flow ---- */
.nfg-kpost-process { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); }
.nfg-kpost-process__step { text-align: center; width: 130px; }
.nfg-kpost-process__number { width: 32px; height: 32px; margin-inline: auto; border-radius: 50%; background: var(--color-primary); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.nfg-kpost-process__label { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--color-primary-dark); }
.nfg-kpost-process__text { font-size: var(--text-xs); color: var(--color-text-muted); }
.nfg-kpost-process__arrow { color: var(--color-accent); font-size: var(--text-lg); margin-top: 8px; }

/* ---- Definition card ---- */
.nfg-kpost-definition { background: var(--color-secondary); border-radius: var(--radius-md); padding: var(--space-3); border-left: 3px solid var(--color-accent); }
.nfg-kpost-definition__label { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); margin-bottom: 0.3em; }

/* ---- Stat ring (CSS conic-gradient, no canvas/JS needed) ---- */
.nfg-kpost-stat-ring { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nfg-kpost-stat-ring__circle {
  --nfg-pct: 50;
  width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--color-primary) calc(var(--nfg-pct) * 1%), var(--color-secondary) 0);
  display: flex; align-items: center; justify-content: center;
}
.nfg-kpost-stat-ring__circle span { background: var(--color-bg); width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); }
.nfg-kpost-stat-ring__title { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); }

/* ---- Quick facts row ---- */
.nfg-kpost-quickfacts { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.nfg-kpost-quickfact { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); text-align: center; min-width: 110px; }
.nfg-kpost-quickfact__value { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary-dark); }
.nfg-kpost-quickfact__label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Food source grid ---- */
.nfg-kpost-food-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.nfg-kpost-food-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; text-align: center; }
.nfg-kpost-food-group__image { aspect-ratio: 4/3; background: var(--color-secondary); }
.nfg-kpost-food-group__image img { width: 100%; height: 100%; object-fit: cover; }
.nfg-kpost-food-group__label { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); margin-top: var(--space-1); font-size: var(--text-sm); }
.nfg-kpost-food-group__examples { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0 var(--space-1) var(--space-2); }

/* ---- Food examples row ---- */
.nfg-kpost-examples-row { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.nfg-kpost-example { text-align: center; width: 90px; }
.nfg-kpost-example__image { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin-inline: auto; background: var(--color-secondary); }
.nfg-kpost-example__image img { width: 100%; height: 100%; object-fit: cover; }
.nfg-kpost-example__name { font-size: var(--text-xs); font-weight: var(--font-weight-medium); margin-top: 0.4em; }
.nfg-kpost-example__serving { font-size: 10px; color: var(--color-text-muted); }
.nfg-kpost-example__amount { display: inline-block; font-size: 10px; background: var(--color-secondary); color: var(--color-primary-dark); border-radius: 999px; padding: 0.15em 0.6em; margin-top: 0.2em; }

/* ---- Comparison ---- */
.nfg-kpost-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .nfg-kpost-comparison { grid-template-columns: 1fr; } }
.nfg-kpost-comparison__col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.nfg-kpost-comparison__title { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); margin-bottom: var(--space-1); }
.nfg-kpost-comparison__col ul { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); }

/* ---- Distribution list ---- */
.nfg-kpost-distribution__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-2); padding-block: var(--space-1); border-bottom: 1px solid var(--color-border); }
.nfg-kpost-distribution__label { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); font-size: var(--text-sm); }
.nfg-kpost-distribution__text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- Key takeaway (reuses the same visual language as elsewhere) ---- */
.nfg-kpost-takeaway { background: var(--color-secondary); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-3); }
.nfg-kpost-takeaway__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-dark); font-weight: var(--font-weight-semibold); margin-bottom: 0.3em; }

/* ---- Quiz ---- */
.nfg-kpost-quiz__question { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.nfg-kpost-quiz__question legend { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); padding: 0 0.3em; }
.nfg-kpost-quiz__option { display: block; font-size: var(--text-sm); padding: 0.4em 0; cursor: pointer; }
.nfg-kpost-quiz__option input { margin-right: 0.5em; }
.nfg-kpost-quiz__question.is-correct { border-color: var(--color-success); background: #EEF4F1; }
.nfg-kpost-quiz__question.is-incorrect { border-color: var(--color-error); background: #FBEEED; }
.nfg-kpost-quiz__result { font-weight: var(--font-weight-semibold); margin-top: var(--space-2); }

/* ---- Sources ---- */
.nfg-kpost-sources { padding-left: 1.3em; }
.nfg-kpost-sources li { font-size: var(--text-sm); margin-bottom: 0.5em; }

.nfg-kpost-note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); }

/* ---- Image placeholder (labeled, never a broken <img>) ---- */
.nfg-kpost-image-placeholder {
  width: 100%; height: 100%; min-height: 140px;
  background: repeating-linear-gradient(135deg, var(--color-secondary), var(--color-secondary) 10px, var(--color-bg) 10px, var(--color-bg) 20px);
  border: 1px dashed var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; padding: var(--space-2);
}

/* ---- Chapter stepper CSS removed: the multi-chapter stepper it
   styled is architecturally impossible now (1:1 Guide:Post relationship
   — see single-nfg_kpost.php header comment). The embedded live Map
   preview bridge that replaces it (mocked up, not yet built) will add
   its own styles here when built. ---- */

/* ---- Scroll reveal (respects prefers-reduced-motion via the sitewide
   override already in style.css — no extra logic needed here) ---- */
.nfg-kpost-section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.nfg-kpost-section.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 640px) {
  .nfg-kpost-hero { flex-direction: column; }
  .nfg-kpost-comparison { grid-template-columns: 1fr; }
}