/* ==========================================================================
   Pure Nutrition Facts — post component kit  (pnf.css)
   Load once in the child theme. Posts contain only class names, never colours.
   Change a token below and every post on the site updates.
   ========================================================================== */

:root {
  /* Brand */
  --pnf-primary: #0e6e6e;        /* deep teal: headings accents, links, borders */
  --pnf-primary-dark: #0a4f4f;
  --pnf-tint: #e8f3f2;           /* soft teal panels */
  --pnf-accent: #c2410c;         /* terracotta: buy / CTA buttons only */
  --pnf-accent-dark: #9a3412;

  /* Neutrals */
  --pnf-ink: #1b2430;            /* body text */
  --pnf-muted: #5b6672;          /* captions, meta */
  --pnf-line: #dde3e8;           /* borders, table rules */
  --pnf-soft: #f7f9fa;           /* zebra rows, quiet boxes */
  --pnf-white: #ffffff;

  /* States */
  --pnf-warn-bg: #fff6e5;
  --pnf-warn-line: #d97706;
  --pnf-danger: #b42318;
  --pnf-good: #1f7a3d;
  --pnf-good-bg: #e7f5ec;
  --pnf-mod: #8a5a00;
  --pnf-mod-bg: #fff3d6;
  --pnf-lim: #4b5563;
  --pnf-lim-bg: #eef0f3;

  /* Type & shape */
  --pnf-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pnf-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pnf-radius: 10px;
  --pnf-gap: 1.25rem;
}

/* ---------- Base typography inside posts ---------- */
.entry-content { color: var(--pnf-ink); font-family: var(--pnf-sans); font-size: 1.0625rem; line-height: 1.7; }
.entry-content h2, .entry-content h3 { font-family: var(--pnf-serif); color: var(--pnf-ink); line-height: 1.25; }
.entry-content h2 { font-size: 1.6rem; margin: 2.2rem 0 .8rem; padding-top: .4rem; border-top: 2px solid var(--pnf-tint); }
.entry-content h3 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
.entry-content a { color: var(--pnf-primary); text-underline-offset: 2px; }
.entry-content a:hover { color: var(--pnf-primary-dark); }

/* Shared box shell */
.pnf-answer, .pnf-facts, .pnf-caution, .pnf-study, .pnf-tip, .pnf-verdict,
.pnf-calc-cta, .pnf-proscons, .pnf-sources, .pnf-toc, .pnf-faq {
  margin: var(--pnf-gap) 0; border-radius: var(--pnf-radius);
}

/* ---------- Answer box (direct answer under intro or an H2) ---------- */
.pnf-answer { background: var(--pnf-tint); border-left: 4px solid var(--pnf-primary); padding: 1rem 1.25rem; }
.pnf-answer p { margin: 0; }
.pnf-answer strong:first-child { color: var(--pnf-primary-dark); }

/* ---------- Quick facts ---------- */
.pnf-facts { border: 1px solid var(--pnf-line); padding: 1rem 1.25rem; background: var(--pnf-white); }
.pnf-facts__title { font-family: var(--pnf-serif); font-weight: 700; font-size: 1.1rem; margin: 0 0 .6rem; color: var(--pnf-primary-dark); }
.pnf-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.pnf-facts dt { font-weight: 600; color: var(--pnf-muted); }
.pnf-facts dd { margin: 0; }
@media (max-width: 480px) { .pnf-facts dl { grid-template-columns: 1fr; } .pnf-facts dd { margin-bottom: .4rem; } }

/* ---------- Tables (nutrition, comparison, price) ---------- */
.pnf-table-wrap { overflow-x: auto; margin: var(--pnf-gap) 0; -webkit-overflow-scrolling: touch; }
.pnf-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 420px; }
.pnf-table caption { caption-side: top; text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--pnf-ink); }
.pnf-table th, .pnf-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--pnf-line); text-align: left; vertical-align: top; }
.pnf-table thead th { background: var(--pnf-primary); color: var(--pnf-white); font-weight: 600; border-bottom: 0; }
.pnf-table tbody tr:nth-child(even) { background: var(--pnf-soft); }
.pnf-table .pnf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnf-table .pnf-win { font-weight: 700; color: var(--pnf-good); }
.pnf-table-note { font-size: .85rem; color: var(--pnf-muted); margin: -.6rem 0 var(--pnf-gap); }

/* ---------- Evidence badges ---------- */
.pnf-badge { display: inline-block; font-family: var(--pnf-sans); font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; vertical-align: middle; margin-left: .4rem; }
.pnf-badge--strong { color: var(--pnf-good); background: var(--pnf-good-bg); }
.pnf-badge--moderate { color: var(--pnf-mod); background: var(--pnf-mod-bg); }
.pnf-badge--limited { color: var(--pnf-lim); background: var(--pnf-lim-bg); }

/* ---------- Caution: who should be careful ---------- */
.pnf-caution { background: var(--pnf-warn-bg); border-left: 4px solid var(--pnf-warn-line); padding: 1rem 1.25rem; }
.pnf-caution__title { font-weight: 700; margin: 0 0 .4rem; color: #7a3e00; }
.pnf-caution ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Research summary ---------- */
.pnf-study { border: 1px solid var(--pnf-line); background: var(--pnf-soft); padding: 1rem 1.25rem; }
.pnf-study__title { font-weight: 700; margin: 0 0 .5rem; }
.pnf-study dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .5rem; }
.pnf-study dt { font-weight: 600; color: var(--pnf-muted); }
.pnf-study dd { margin: 0; }
.pnf-study p { margin: .4rem 0 0; }

/* ---------- Practical tip ---------- */
.pnf-tip { border: 1px dashed var(--pnf-primary); padding: .85rem 1.1rem; }
.pnf-tip p { margin: 0; }
.pnf-tip strong:first-child { color: var(--pnf-primary-dark); }

/* ---------- Verdict (reviews, comparisons) ---------- */
.pnf-verdict { border: 2px solid var(--pnf-primary); padding: 1.1rem 1.25rem; background: var(--pnf-white); }
.pnf-verdict__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pnf-verdict__title { font-family: var(--pnf-serif); font-size: 1.25rem; font-weight: 700; margin: 0; }
.pnf-score { font-family: var(--pnf-serif); font-size: 1.6rem; font-weight: 700; color: var(--pnf-primary-dark); }
.pnf-score small { font-size: .9rem; color: var(--pnf-muted); font-weight: 400; }
.pnf-verdict dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .8rem; }
.pnf-verdict dt { font-weight: 600; color: var(--pnf-muted); }
.pnf-verdict dd { margin: 0; }
.pnf-verdict p { margin: .4rem 0 0; }

/* ---------- Pros / cons ---------- */
.pnf-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pnf-pros, .pnf-cons { border-radius: var(--pnf-radius); padding: 1rem 1.1rem; }
.pnf-pros { background: var(--pnf-good-bg); }
.pnf-cons { background: #fdecea; }
.pnf-pros h3, .pnf-cons h3 { margin: 0 0 .5rem; font-size: 1.05rem; border: 0; padding: 0; }
.pnf-pros ul, .pnf-cons ul { margin: 0; padding-left: 1.2rem; }
@media (max-width: 640px) { .pnf-proscons { grid-template-columns: 1fr; } }

/* ---------- Buttons & calls to action ---------- */
.pnf-btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 8px; font-weight: 700; text-decoration: none !important;
  background: var(--pnf-primary); color: var(--pnf-white) !important; }
.pnf-btn:hover { background: var(--pnf-primary-dark); }
.pnf-btn--buy { background: var(--pnf-accent); }
.pnf-btn--buy:hover { background: var(--pnf-accent-dark); }
.pnf-cta { text-align: center; margin: var(--pnf-gap) 0; }
.pnf-cta__note { display: block; font-size: .82rem; color: var(--pnf-muted); margin-top: .4rem; }

.pnf-calc-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--pnf-tint); padding: 1rem 1.25rem; }
.pnf-calc-cta p { margin: 0; flex: 1 1 260px; }

/* ---------- Affiliate disclosure ---------- */
.pnf-disclosure { font-size: .85rem; color: var(--pnf-muted); border-top: 1px solid var(--pnf-line); border-bottom: 1px solid var(--pnf-line);
  padding: .5rem 0; margin: 0 0 var(--pnf-gap); }

/* ---------- Table of contents ---------- */
.pnf-toc { background: var(--pnf-soft); padding: 1rem 1.25rem; }
.pnf-toc__title { font-weight: 700; margin: 0 0 .4rem; }
.pnf-toc ol { margin: 0; padding-left: 1.2rem; }

/* ---------- FAQ (native details/summary, no JS) ---------- */
.pnf-faq details { border-bottom: 1px solid var(--pnf-line); padding: .75rem 0; }
.pnf-faq summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 1.5rem; }
.pnf-faq summary::-webkit-details-marker { display: none; }
.pnf-faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--pnf-primary); font-weight: 700; }
.pnf-faq details[open] summary::after { content: "–"; }
.pnf-faq details p { margin: .5rem 0 0; }

/* ---------- Sources ---------- */
.pnf-sources { font-size: .9rem; color: var(--pnf-muted); }
.pnf-sources ol { padding-left: 1.3rem; margin: .4rem 0 0; }
.pnf-sources li { margin-bottom: .3rem; word-break: break-word; }

/* ---------- Recipe helpers (WP Recipe Maker renders the card itself) ---------- */
.pnf-recipe-links { background: var(--pnf-soft); border-radius: var(--pnf-radius); padding: .9rem 1.2rem; margin: var(--pnf-gap) 0; }
.pnf-recipe-links p { margin: 0; }

/* ---------- Print ---------- */
@media print {
  .pnf-cta, .pnf-calc-cta, .pnf-toc { display: none; }
  .pnf-table thead th { background: none; color: #000; border-bottom: 2px solid #000; }
}