/* Editorial Trust typography overlay for /guides/ product roundups.
   Loaded via <link rel="stylesheet" href="/css/ed-trust-overlay.css">.
   Applies the Editorial Trust type system (Playfair Display headlines,
   Source Serif Pro body, DM Mono numerics) on top of each guide's existing
   layout without touching component structure. To roll back: remove the
   <link> tag from /guides/ pages. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Source+Serif+Pro:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

/* === Body & background === */
body {
  font-family: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  background: #FAF7F0;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Display headlines (Playfair Display) === */
h1, h2, h3,
.hero h1,
.product-card h3,
.faq-item h4,
.related-link {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: -0.015em;
}

h1, .hero h1 {
  font-weight: 700;
  color: #1F2937;
}

h2 {
  font-weight: 700;
  color: #1F2937;
}

h3, .product-card h3 {
  font-weight: 700;
  color: #1F2937;
}

/* Italics in headlines get the Playfair italic — a quiet editorial accent */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  color: #C45F3C;
}

/* === Numeric specs + prices (DM Mono) === */
.product-price,
.price,
.hero-meta,
.product-best-for ~ ul li strong,
td.numeric,
table th {
  font-family: 'DM Mono', 'Courier New', monospace;
  letter-spacing: 0.01em;
}

.product-price,
.price {
  color: #1F2937;
  font-weight: 500;
}

/* Hero meta dateline */
.hero-meta {
  font-size: 0.85rem;
  color: #6B7280;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* === UI labels stay Inter for chip + button clarity === */
.buy-btn,
.affiliate-notice,
.disclaimer,
.product-rank,
.product-best-for,
.related-link p,
nav a,
.nav a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === Subtle paper-warm card tint === */
.product-card,
.quick-picks,
.insight,
.faq-item,
section.bg-slate-50,
section[class*="bg-"] {
  background: #FFFDF7;
  border-color: #E8E1D4;
}

/* === Editor's-pick accent on product rank labels === */
.product-rank {
  background: #C45F3C !important;
  color: white !important;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3rem 0.75rem;
}

/* === Affiliate-notice paragraph (the lighter old version, when present) === */
.affiliate-notice {
  background: #F3F4F6;
  border-left: 3px solid #5A8B7C;
  padding: 0.85rem 1.1rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  color: #4B5563;
  font-style: normal;
}

/* === FAQ items get a subtle paper warmth === */
.faq-item {
  border-radius: 4px;
  padding: 1rem 1.25rem;
}

.faq-item h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: #1F2937;
}

/* === Tables get the editorial polish === */
table {
  font-family: 'Inter', sans-serif;
}

table th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #1F2937;
  background: #FAF7F0;
}

table td a {
  color: #115E59;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* === Quick Picks chip refinement === */
.quick-pick-item .pick-label {
  font-family: 'DM Mono', monospace;
  color: #C45F3C;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* === Related guides cards keep their Tailwind layout but get type === */
.related-link {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: #1F2937;
}

/* === Drop caps on intro paragraphs (subtle editorial flourish) === */
.intro-text:first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.5em;
  line-height: 0.85;
  float: left;
  margin: 0.1em 0.12em -0.05em 0;
  color: #C45F3C;
}

/* === Decorative thin rule between sections === */
hr {
  border: none;
  border-top: 1px solid #E8E1D4;
  margin: 2.5rem 0;
}

/* === Mediavine ad containers untouched — never style by data-attrs === */
[data-mediavine],
[id^="mediavine-"],
[class*="grow_me_"],
.adthrive-ad {
  font-family: inherit !important;
  background: transparent !important;
}