/* -------------------------------------------------------------
   ProdXVerse - answer-first blocks (AEO/GEO)

   Styles for the three blocks that make a page extractable by answer
   engines: the quick answer, the key-takeaway list, and the FAQ.
   Loaded by blog/post.php and blog/page.php.
   ------------------------------------------------------------- */

/* -- Quick answer + key takeaways --------------------------- */

.post-answer {
  max-width: 740px;
  margin: 0 auto 36px;
  display: grid;
  gap: 18px;
}

.post-answer__tldr,
.post-answer__takeaways {
  padding: 20px 24px;
  border: 1px solid var(--pxv-border);
  border-left: 3px solid var(--pxv-indigo);
  border-radius: 12px;
  background: #FAFAFC;
}

.post-answer__takeaways {
  border-left-color: var(--pxv-coral);
}

.post-answer__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--pxv-font-mono, ui-monospace, monospace);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pxv-text-light);
}

.post-answer__tldr p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--pxv-text);
}

.post-answer__takeaways ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.post-answer__takeaways li {
  font-size: .96rem;
  line-height: 1.6;
  color: var(--pxv-text);
}

/* -- FAQ ---------------------------------------------------- */

.post-faq {
  max-width: 740px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--pxv-border);
}

.post-faq__title {
  margin: 0 0 20px;
  font-family: var(--pxv-font-heading, inherit);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pxv-text);
}

.post-faq__list {
  display: grid;
  gap: 10px;
}

.post-faq__item {
  border: 1px solid var(--pxv-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.post-faq__item[open] {
  border-color: var(--pxv-indigo);
}

.post-faq__question {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pxv-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.post-faq__question::-webkit-details-marker { display: none; }

.post-faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--pxv-indigo);
}

.post-faq__item[open] .post-faq__question::after { content: '-'; }

.post-faq__answer {
  padding: 0 20px 18px;
}

.post-faq__answer p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--pxv-text-light);
}

@media (max-width: 640px) {
  .post-answer__tldr,
  .post-answer__takeaways { padding: 16px 18px; }
  .post-faq__question { padding: 14px 16px; font-size: .95rem; }
  .post-faq__answer { padding: 0 16px 16px; }
}

/* -------------------------------------------------------------
   Tables

   The comparison tables are the blocks AI Overviews lift most readily, and
   they were rendering as unstyled browser default - which reads as broken.
   Wrapped in their own scroll container so a wide table never forces the
   whole page to scroll sideways on a phone.
   ------------------------------------------------------------- */

.pseo-content table,
.post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 28px 0;
  font-size: .95rem;
  line-height: 1.6;
  border: 1px solid var(--pxv-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.pseo-content thead,
.post-content thead {
  background: #F6F6FA;
}

.pseo-content th,
.post-content th {
  text-align: left;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pxv-text-light);
  padding: 14px 18px;
  border-bottom: 1px solid var(--pxv-border);
  vertical-align: bottom;
}

.pseo-content td,
.post-content td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--pxv-border);
  color: var(--pxv-text);
  vertical-align: top;
}

.pseo-content tbody tr:last-child td,
.post-content tbody tr:last-child td { border-bottom: none; }

.pseo-content tbody tr:hover,
.post-content tbody tr:hover { background: #FAFAFC; }

/* The first column is the row label, so it carries the weight. */
.pseo-content td:first-child,
.post-content td:first-child { font-weight: 600; }

/* Below this width a four-column table cannot be read; let it scroll on its
   own rather than breaking the page layout. */
@media (max-width: 700px) {
  .pseo-content table,
  .post-content table { display: block; overflow-x: auto; white-space: nowrap; }
  .pseo-content th, .pseo-content td,
  .post-content th, .post-content td { white-space: normal; min-width: 150px; }
}

/* -------------------------------------------------------------
   Answer capsule
   ------------------------------------------------------------- */

.pseo-content .answer-capsule,
.post-content .answer-capsule {
  margin: 0 0 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--pxv-indigo);
  border-radius: 0 10px 10px 0;
  background: #F7F7FB;
  font-size: 1.05rem;
  line-height: 1.65;
}

.pseo-content .answer-capsule strong,
.post-content .answer-capsule strong { font-weight: 600; color: var(--pxv-text); }