/* TRUST-001 trust-page styling. Warm parchment brand, reuses design tokens. */

.trust-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  color: var(--brand-espresso);
}

.trust-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
  margin-bottom: 3rem;
}
.trust-hero__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 1.5rem;
}
.trust-hero__lede {
  font-size: 1.05rem;
  color: var(--text-deep);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

.trust-section { margin-bottom: 3rem; }
.trust-section__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 1.25rem;
}
.trust-section__lede {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 1rem;
}

.trust-letter__body p { line-height: 1.65; margin: 0 0 1rem; }
.trust-letter__body em { font-style: italic; color: var(--text-label); }
.trust-letter__sign {
  margin-top: 1.5rem !important;
  font-family: 'Roboto Slab', serif;
  color: var(--text-deep);
}
.trust-letter__more {
  margin: 0.75rem 0 0 !important;
  font-size: 0.95rem;
}
.trust-letter__more a { color: var(--text-label); font-weight: 500; }
.trust-letter__more a:hover { color: var(--brand-espresso); }
.trust-disclosure__more {
  margin: 0.75rem 0 0 !important;
  font-size: 0.95rem;
}
.trust-disclosure__more a { color: var(--brand-gold); font-weight: 500; }
.trust-disclosure__more a:hover { color: var(--cream); }

.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.trust-card {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  padding: 1.25rem;
}
.trust-card h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.trust-card p { margin: 0 0 0.5rem; line-height: 1.55; font-size: 0.95rem; }
.trust-card p:last-child { margin-bottom: 0; }
.trust-card__link { font-weight: 500; }

/* Four-card sections lock to 2x2 to avoid a three-column orphan on desktop. */
.trust-cards--verify,
.trust-grid {
  grid-template-columns: repeat(2, 1fr);
}

.trust-grid {
  display: grid;
  gap: 1rem;
}
.trust-grid__cell {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  padding: 1.25rem;
}
.trust-grid__cell h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}
.trust-grid__cell p { margin: 0; line-height: 1.55; font-size: 0.95rem; }

.trust-disclosure {
  background: var(--brand-espresso);
  color: var(--cream);
  padding: 1.5rem;
  border-radius: 6px;
}
.trust-disclosure p { margin: 0; line-height: 1.6; }
.trust-disclosure strong { color: var(--brand-gold); }

.trust-stack__item {
  padding: 1.25rem 0;
}
.trust-stack__item h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.trust-stack__item p { margin: 0; line-height: 1.6; }

.trust-cta {
  background: var(--brand-espresso);
  color: var(--cream);
  padding: 2.5rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 3rem;
}
.marketing-page .trust-cta__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
  color: var(--cream);
}
.trust-cta__body { margin: 0 0 1rem; opacity: 0.85; }
.trust-cta__email a {
  color: var(--brand-gold);
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: underline;
}

.trust-subprocessor-hero { margin-bottom: 2rem; }
.trust-breadcrumb {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--text-label);
}
.trust-breadcrumb a { color: var(--text-label); }
.trust-subprocessor-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  background: var(--cream);
}
.trust-subprocessor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.trust-subprocessor-table th,
.trust-subprocessor-table td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--cream-border);
  vertical-align: top;
}
.trust-subprocessor-table th {
  background: var(--cream-deep);
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-deep);
}
.trust-subprocessor-table tr:last-child td { border-bottom: 0; }
.trust-subprocessor-table a { text-decoration: underline; }
.trust-subprocessor-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--cream);
  border-radius: 4px;
}
.trust-subprocessor-note p { margin: 0 0 0.5rem; line-height: 1.55; font-size: 0.9rem; }
.trust-subprocessor-note p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .trust-content { padding: 2rem 1rem 3rem; }
  .trust-hero { padding: 1.5rem 0 1.5rem; margin-bottom: 2rem; }
  .trust-section { margin-bottom: 2rem; }
  .trust-cta { padding: 2rem 1rem; }
  .trust-cards--verify,
  .trust-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   METH-001 methodology page extensions. Reuses .trust-* tokens and palette.
   Tables on /methodology/sources and /methodology/nutrients reuse the
   canonical .trust-subprocessor-table styling rather than introducing a
   parallel table component.
   --------------------------------------------------------------------------- */

.method-content { max-width: 920px; }

/* Body-text rhythm for methodology copy. The base trust.css scopes
   typography to specific child selectors (.trust-letter__body p, etc.)
   which leaves general .trust-section paragraphs and lists at browser
   defaults. Re-establish a comfortable reading rhythm. */
.method-content .trust-section p { margin: 0 0 1rem; line-height: 1.6; }
.method-content .trust-section p:last-child { margin-bottom: 0; }
.method-content .trust-section ul,
.method-content .trust-section ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
.method-content .trust-section li { margin: 0 0 0.4rem; line-height: 1.6; }
.method-content .trust-section li:last-child { margin-bottom: 0; }

/* Brand-coloured bullets for the methodology rule lists (e.g. Rounding). */
.method-content .trust-section .method-list li { margin-bottom: 0.65rem; }
.method-content .trust-section .method-list li::marker { color: var(--status-pass); }

/* Cards and grid blocks need air before the next paragraph. Without this
   the prose collides with the bottom edge of the card group (visible on
   the "Staged but not yet promoted" line under Where the data comes from). */
.method-content .trust-section .trust-grid,
.method-content .trust-section .trust-cards { margin-bottom: 1.25rem; }
.method-content .trust-section .trust-grid + p,
.method-content .trust-section .trust-cards + p { margin-top: 0; }

/* METH-002 north-star callout at the top of /methodology. The one
   sentence the whole method answers to, set apart in the espresso
   disclosure treatment so it reads as a commitment, not body copy. */
.method-northstar {
  background: var(--brand-espresso);
  color: var(--cream);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 3rem;
}
.method-northstar__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.5rem;
}
.method-northstar__body {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Jump-nav table of contents */
.method-toc {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 0 0 3rem;
}
.method-toc__title {
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 0.5rem;
}
.method-toc__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 1rem;
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
}
.method-toc__list a { color: var(--brand-espresso); }
.method-toc__list a:hover { color: var(--brand-gold); }

/* Answer-first lead paragraphs after each H2.
   Holds a 40-60 word direct-answer summary that AI engines (Google AI
   Overviews, ChatGPT, Perplexity, Claude) extract as the section's
   citable snippet. Visually distinct enough to anchor scan-readers but
   not so loud it disrupts the existing prose rhythm. Speakable JSON-LD
   on /methodology and /trust references these classes so voice
   assistants read the leads aloud rather than the full section.

   Two parallel classes (.method-lead for the methodology page,
   .trust-lead for the trust page) keep CSS scope explicit: the
   methodology page uses .method-content, the trust page does not, so
   sharing a single class would require widening the selector. */
.method-content .trust-section .method-lead,
.trust-content .trust-section .trust-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--brand-espresso);
  max-width: 68ch;
  margin: 0 0 1.5rem;
}

/* Inline formula and citation blocks */
.method-formula,
.method-citebox {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.92rem;
  margin: 0.5rem 0 1rem;
  overflow-x: auto;
}
.method-citebox { white-space: pre; line-height: 1.5; }

/* On methodology tables, all headers use DM Mono so the column labels
   (Source, Publisher, Foods, Last refreshed, etc.) read as a uniform
   strip, matching the FOODS / LAST REFRESHED look that the .is-numeric
   class would otherwise apply only to numeric columns. The trust
   sub-processor page keeps its Roboto Slab headers via the unscoped
   .trust-subprocessor-table th rule earlier in this file. */
.method-content .trust-subprocessor-table th {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

/* .is-numeric is body-cell-only: it gives numeric values DM Mono with
   tabular-nums for column alignment. Headers carry the class for
   right-alignment but pick up the same DM Mono treatment from the
   methodology header rule above. */
.trust-subprocessor-table td.is-numeric {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  white-space: nowrap;
}
.trust-subprocessor-table code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}
.method-table-note { font-size: 0.9rem; color: var(--text-label); margin: 0.5rem 0 1rem; }

/* Source-presence inline indicator */
.method-presence { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.method-presence__badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--cream-border);
}
.method-presence__badge.is-on { background: var(--brand-gold); color: var(--brand-espresso); border-color: var(--brand-gold); }
.method-presence__badge.is-off { background: transparent; color: var(--decorative-off); }

/* Mobile */
@media (max-width: 640px) {
  .method-toc__list { grid-template-columns: 1fr; }
  .trust-subprocessor-table { font-size: 0.85rem; }
  .trust-subprocessor-table th,
  .trust-subprocessor-table td { padding: 0.6rem 0.6rem; }
  .method-presence { gap: 0.2rem; }
  .method-presence__badge { font-size: 0.65rem; }
}