/* content.css - compare, blog and state-hub pages.
   Rides on styles.css (tokens, nav, footer, buttons) + reuses nutrition.css classes. */

.content-head { padding: 26px 0 6px; max-width: 760px; }
.content-head .nut-state { margin-bottom: 14px; }
.content-head h1 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.06; margin: 6px 0 16px; color: var(--text);
}
.content-head .lede { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.content-meta { font-size: 13px; color: var(--muted); margin-top: 16px; letter-spacing: .01em; }

/* long-form article body */
.article { max-width: 720px; }
.article h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.6rem;
  margin: 40px 0 14px; color: var(--text);
}
.article h3 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.2rem;
  margin: 28px 0 10px; color: var(--green-dark);
}
.article p { font-size: 1.06rem; line-height: 1.72; color: var(--text); margin: 0 0 18px; }
.article p.muted { color: var(--muted); }
.article ul { margin: 0 0 20px; padding-left: 22px; }
.article li { font-size: 1.06rem; line-height: 1.7; color: var(--text); margin-bottom: 8px; }
.article strong { font-weight: 600; }
.article .pull {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.5rem; line-height: 1.4;
  color: var(--green-dark); border-left: 3px solid var(--green); padding: 4px 0 4px 22px; margin: 28px 0;
}

/* simple horizontal bar chart (inline, no JS) */
.chart { margin: 22px 0 10px; }
.chart-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 12px; margin-bottom: 10px; }
.chart-row .lab { font-size: 14px; font-weight: 500; color: var(--text); }
.chart-row .track { background: var(--canvas); border-radius: 999px; height: 18px; overflow: hidden; }
.chart-row .fill { height: 100%; background: linear-gradient(90deg, var(--green) 0%, var(--green-dark) 100%); border-radius: 999px; }
.chart-row .val { font-size: 14px; font-weight: 600; color: var(--green-dark); text-align: right; }
.chart-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }

/* ranked data list */
.rank { display: grid; gap: 8px; margin: 18px 0; }
.rank-item {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px;
}
.rank-item .n { font-family: "Fraunces", serif; font-weight: 700; color: var(--green); font-size: 1.05rem; }
.rank-item .dish b { font-weight: 600; color: var(--text); }
.rank-item .dish span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rank-item .stat { font-family: "Fraunces", serif; font-weight: 700; color: var(--text); font-size: 1.1rem; white-space: nowrap; }
.rank-item a { color: inherit; }

/* comparison table */
.cmp-wrap { overflow-x: auto; margin: 8px 0 4px; }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 15px; line-height: 1.55; }
.cmp thead th { font-family: "Fraunces", serif; font-size: 1.05rem; color: var(--text); border-bottom: 2px solid var(--border); }
.cmp thead th.svas { color: var(--green-dark); }
.cmp tbody th { font-weight: 500; color: var(--muted); width: 26%; }
.cmp td.svas { background: var(--green-soft); color: var(--text); font-weight: 500; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: none; }

/* honest two-column "who it's for" */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.split .card-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px;
}
.split .card-box h3 { margin: 0 0 12px; font-size: 1.15rem; color: var(--text); }
.split .card-box ul { margin: 0; padding-left: 20px; }
.split .card-box li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; color: var(--muted); }

/* blog index cards */
.post-grid { display: grid; gap: 16px; margin: 8px 0; }
.post-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px; color: var(--text);
  transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.post-card .kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.post-card h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.5rem; margin: 8px 0 8px; color: var(--text); }
.post-card p { color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
.post-card .read { font-size: 14px; font-weight: 600; color: var(--green-dark); }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 92px 1fr 52px; gap: 8px; }
}