/*
 * seo-pages.css: scoped components for DataDelivery SEO pages (comparison, best-tools, integration, how-to).
 * Plan: .claude/plans/2026-10-06-datadelivery-seo-revamp.md, 1.A.4. Plain CSS, not Tailwind, so the
 * components render the same whether or not the Tailwind CDN has finished loading.
 * Components: .cmp-table, .facts-stamp, .vendor-disclosure, .faq, .related-links, .sources.
 * Colors: navy #1A2533 (text), accent #44B3E6 (borders and highlights only; too light for body text).
 */

/* ---------------------------------------------------------------------------------------------- */
/* .cmp-table: wrapper around a comparison table.                                                 */
/* Markup: <div class="cmp-table" role="region" aria-label="..." tabindex="0"><table>             */
/*   <caption>...</caption> (visually hidden), <th scope="col"> / <th scope="row">, text cells.   */
/* Our column cells may carry .cmp-ours. Under 640px the table keeps its width and scrolls.        */
/* ---------------------------------------------------------------------------------------------- */
.cmp-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(26, 37, 51, 0.08);
}
.cmp-table:focus-visible {
  outline: 3px solid #1A2533;
  outline-offset: 2px;
}
.cmp-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1f2937;
  text-align: left;
}
.cmp-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cmp-table th,
.cmp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  text-align: left;
}
.cmp-table thead th {
  background: #f9fafb;
  color: #1A2533;
  font-weight: 700;
  border-bottom: 2px solid #d1d5db;
}
.cmp-table tbody th[scope="row"] {
  color: #111827;
  font-weight: 600;
}
.cmp-table .cmp-ours {
  background: #f0f9fe;
}
.cmp-table thead .cmp-ours {
  background: #e3f4fc;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 639px) {
  .cmp-table table {
    min-width: 640px;
  }
}

/* ---------------------------------------------------------------------------------------------- */
/* .facts-stamp: dated "checked on" line or cell. Must contain <time datetime="YYYY-MM-DD">.      */
/* Our prices and the Enterprise run count may appear only inside a .facts-stamp element.          */
/* ---------------------------------------------------------------------------------------------- */
.facts-stamp {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
}
p.facts-stamp,
div.facts-stamp {
  margin: 0 0 1rem;
}
.facts-stamp time {
  font-weight: 600;
  color: #1A2533;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------- */
/* .vendor-disclosure: "we make DataDelivery" disclosure, methodology box, non-affiliation note.  */
/* ---------------------------------------------------------------------------------------------- */
.vendor-disclosure {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #44B3E6;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #374151;
}
.vendor-disclosure h2,
.vendor-disclosure h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1A2533;
}
.vendor-disclosure p {
  margin: 0 0 0.5rem;
}
.vendor-disclosure p:last-child {
  margin-bottom: 0;
}
.vendor-disclosure a {
  color: #1A2533;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------------------------- */
/* .faq: <div class="faq"><details><summary>Question</summary><p>Answer</p></details>...</div>     */
/* The visible questions and answers must equal the FAQPage JSON-LD.                               */
/* ---------------------------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq details {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1A2533;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: #44B3E6;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq summary:focus-visible {
  outline: 3px solid #1A2533;
  outline-offset: 2px;
  border-radius: 12px;
}
.faq details > :not(summary) {
  margin: 0;
  padding: 0 20px 16px;
  color: #4b5563;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------------------------- */
/* .related-links: in-body cross-links (these count toward the 3-inbound-link rule).               */
/* Markup: <ul class="related-links"><li><a href="/path/"><span class="related-links-title">...  */
/*   </span><span class="related-links-text">...</span></a></li></ul>                              */
/* ---------------------------------------------------------------------------------------------- */
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-links a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #1A2533;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.related-links a:hover {
  border-color: #44B3E6;
  box-shadow: 0 4px 12px rgba(26, 37, 51, 0.08);
}
.related-links a:focus-visible {
  outline: 3px solid #1A2533;
  outline-offset: 2px;
}
.related-links-title {
  display: block;
  margin-bottom: 4px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.related-links-text {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #4b5563;
}

/* ---------------------------------------------------------------------------------------------- */
/* .sources: list of vendor pages used for the facts. Links use rel="nofollow noopener".           */
/* ---------------------------------------------------------------------------------------------- */
.sources {
  margin: 16px 0 0;
  padding: 0 0 0 20px;
  list-style: disc;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #6b7280;
}
.sources li {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.sources a {
  color: #374151;
  text-decoration: underline;
}