/* 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: #1E1712;
}

.trust-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
  margin-bottom: 3rem;
}
.trust-hero__title {
  font-family: 'Fraunces', Georgia, 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: #3E3228;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

.trust-section { margin-bottom: 3rem; }
.trust-section__title {
  font-family: 'Fraunces', Georgia, 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: #6B5A4A; }
.trust-letter__sign {
  margin-top: 1.5rem !important;
  font-family: 'Fraunces', Georgia, serif;
  color: #3E3228;
}
.trust-letter__more {
  margin: 0.75rem 0 0 !important;
  font-size: 0.95rem;
}
.trust-letter__more a { color: #6B5A4A; font-weight: 500; }
.trust-letter__more a:hover { color: #1E1712; }
.trust-disclosure__more {
  margin: 0.75rem 0 0 !important;
  font-size: 0.95rem;
}
.trust-disclosure__more a { color: #F0A500; font-weight: 500; }
.trust-disclosure__more a:hover { color: #FDF8EF; }

.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.trust-card {
  background: #FDF8EF;
  border: 1px solid #E8DCC8;
  border-radius: 6px;
  padding: 1.25rem;
}
.trust-card h3 {
  font-family: 'Fraunces', Georgia, 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: #FDF8EF;
  border: 1px solid #E8DCC8;
  border-radius: 6px;
  padding: 1.25rem;
}
.trust-grid__cell h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #6B5A4A;
  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: #1E1712;
  color: #FDF8EF;
  padding: 1.5rem;
  border-radius: 6px;
}
.trust-disclosure p { margin: 0; line-height: 1.6; }
.trust-disclosure strong { color: #F0A500; }

.trust-stack__item {
  padding: 1.25rem 0;
}
.trust-stack__item h3 {
  font-family: 'Fraunces', Georgia, 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: #1E1712;
  color: #FDF8EF;
  padding: 2.5rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 3rem;
}
.marketing-page .trust-cta__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
  color: #FDF8EF;
}
.trust-cta__body { margin: 0 0 1rem; opacity: 0.85; }
.trust-cta__email a {
  color: #F0A500;
  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: #6B5A4A;
}
.trust-breadcrumb a { color: #6B5A4A; }
.trust-subprocessor-table-wrap {
  overflow-x: auto;
  border: 1px solid #E8DCC8;
  border-radius: 6px;
  background: #FDF8EF;
}
.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 #E8DCC8;
  vertical-align: top;
}
.trust-subprocessor-table th {
  background: #F5EADC;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3E3228;
}
.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: #FDF8EF;
  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: #4A7C3F; }

/* 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; }

/* Jump-nav table of contents */
.method-toc {
  background: #FDF8EF;
  border: 1px solid #E8DCC8;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 0 0 3rem;
}
.method-toc__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #6B5A4A;
  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: #1E1712; }
.method-toc__list a:hover { color: #F0A500; }

/* 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: #1E1712;
  max-width: 68ch;
  margin: 0 0 1.5rem;
}

/* Inline formula and citation blocks */
.method-formula,
.method-citebox {
  background: #FDF8EF;
  border: 1px solid #E8DCC8;
  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 Fraunces 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: #6B5A4A; 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 #E8DCC8;
}
.method-presence__badge.is-on { background: #F0A500; color: #1E1712; border-color: #F0A500; }
.method-presence__badge.is-off { background: transparent; color: #B8A998; }

/* 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; }
}