/*
 * Extras for the standalone landing and comparison pages
 * (/compare/*.html, /best-baby-tracker-for-twins.html, etc.).
 *
 * Loaded after blog.css, so it reuses the same --blog-* tokens and the
 * .blog-container / .article / .article-body / .article-cta components. This
 * file only adds what blog.css does not cover: comparison tables and an
 * accordion FAQ. Night palette, literal values, no drop shadows. */

/* ---------- Comparison table ---------- */

.cmp-table-wrap {
  overflow-x: auto;
  margin: 32px 0 8px;
  -webkit-overflow-scrolling: touch;
}

table.cmp {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--blog-font);
  font-size: 16px;
  line-height: 150%;
}

table.cmp caption {
  caption-side: bottom;
  margin-top: 12px;
  font-size: 13px;
  color: var(--blog-taupe);
  text-align: left;
}

.cmp th,
.cmp td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--blog-hairline);
  vertical-align: top;
}

.cmp thead th {
  font-weight: 500;
  color: var(--blog-bone);
  background: var(--blog-layer-2);
  white-space: nowrap;
}

/* First column: the feature label. */
.cmp tbody th {
  font-weight: 400;
  color: var(--blog-sand);
}

.cmp td {
  color: var(--blog-sand);
}

/* Highlight the Multibaby column so the comparison reads at a glance. */
.cmp .col-mb {
  color: var(--blog-bone);
  background: var(--blog-layer-1);
}

.cmp .yes {
  color: var(--blog-amber-400);
  font-weight: 500;
}

.cmp .no {
  color: var(--blog-taupe);
}

/* ---------- FAQ accordion (no JS: native details/summary) ---------- */

.faq {
  max-width: 720px;
  margin: 8px auto 0;
}

.faq details {
  border-bottom: 1px solid var(--blog-hairline);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 32px 20px 0;
  position: relative;
  font-family: var(--blog-font);
  font-size: 19px;
  font-weight: 500;
  line-height: 140%;
  color: var(--blog-bone);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Plus/minus affordance drawn in CSS. */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--blog-amber-400);
  transition: transform 250ms ease;
}

.faq details[open] summary::after {
  content: "\2212"; /* minus sign */
}

.faq details p {
  margin: 0 0 20px;
  padding-right: 32px;
  font-family: var(--blog-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 165%;
  color: var(--blog-sand);
}

/* ---------- Related-links row ---------- */

.page-links {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--blog-hairline);
}

.page-links h2 {
  font-family: var(--blog-font);
  font-size: 22px;
  font-weight: 500;
  color: var(--blog-bone);
  margin: 0 0 16px;
}

.page-links ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-links a {
  color: var(--blog-amber-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 17px;
}

.page-links a:hover {
  opacity: 0.6;
}