/* ============================================================================
   Q&A custom-post-type stylesheet — single answers + archive + topic archive
   Editorial design: typographic hierarchy, generous spacing, no gradients,
   no centered-card-on-gradient, Phosphor inline SVGs only.
   Color tokens (cream/teal/warm grey) match the bai-cta footer block so the
   entire reading flow feels like one piece.
   ============================================================================ */

:root {
  --bai-bg: #FFFEFB;
  --bai-bg-soft: #FBF8F3;
  --bai-border: #E8E1D2;
  --bai-border-strong: #D8CFB8;
  --bai-ink: #0F2027;
  --bai-ink-soft: #3F4A52;
  --bai-ink-muted: #7A8489;
  --bai-accent: #1B3A4B;
  --bai-accent-strong: #0F2027;
  --bai-highlight: #FFE9A8;
  --bai-quote-bar: #C9A86A;

  --bai-sans: var(--e-global-typography-primary-font-family), sans-serif;
  --bai-quote-font: var(--e-global-typography-primary-font-family), sans-serif;

  --bai-content-width: 760px;
  --bai-page-width: 1180px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SHARED reset for both archive + single
   ───────────────────────────────────────────────────────────────────────── */
.bai-answer, .bai-archive {
  background: var(--bai-bg);
  color: var(--bai-ink);
  font-family: var(--bai-sans);
  font-size: 17px;
  line-height: 1.7;
}
.bai-answer, .bai-answer *,
.bai-archive, .bai-archive *,
.bai-cta, .bai-cta *,
.bai-related, .bai-related *,
.bai-toc, .bai-toc * {
  font-family: var(--bai-sans);
}
.bai-answer a, .bai-archive a {
  color: var(--bai-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.bai-answer a:hover, .bai-archive a:hover { color: var(--bai-accent-strong); }

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE — container + breadcrumb + eyebrow + title
   ───────────────────────────────────────────────────────────────────────── */
.bai-answer__container {
  max-width: var(--bai-page-width);
  margin: 0 auto;
  padding: 36px clamp(16px, 3vw, 32px) 80px;
}
.bai-answer__header { margin: 0 0 36px; max-width: var(--bai-content-width); }
.bai-answer__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--bai-ink-muted);
}
.bai-answer__breadcrumb a {
  color: var(--bai-ink-muted);
  text-decoration: none;
  transition: color .18s ease;
}
.bai-answer__breadcrumb a:hover { color: var(--bai-accent); text-decoration: underline; }

.bai-answer__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--bai-ink-muted);
  letter-spacing: .01em;
}
.bai-answer__topic {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--bai-accent);
  background: var(--bai-bg-soft);
  border: 1px solid var(--bai-border);
  border-radius: 2px;
  padding: 4px 10px;
}
.bai-answer__time { display: inline-flex; align-items: center; gap: 5px; }
.bai-answer__time svg { color: var(--bai-ink-muted); }

.bai-answer__title {
  margin: 0;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--bai-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE — two-column layout (content + sticky TOC)
   ───────────────────────────────────────────────────────────────────────── */
.bai-answer__layout {
  display: grid;
  grid-template-columns: minmax(0, var(--bai-content-width)) minmax(0, 240px);
  gap: 48px;
  align-items: start;
}
.bai-answer__main { min-width: 0; }
.bai-answer__sidebar { min-width: 0; }
.bai-answer__sidebar-inner { position: sticky; top: 96px; }

@media (max-width: 960px) {
  .bai-answer__layout { grid-template-columns: 1fr; gap: 32px; }
  .bai-answer__sidebar-inner { position: static; }
  .bai-toc { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE — CONTENT typography
   ───────────────────────────────────────────────────────────────────────── */
.bai-answer__content { font-size: 18px; line-height: 1.75; color: var(--bai-ink-soft); }
.bai-answer__content > [itemprop="text"] > *:first-child { margin-top: 0; }
.bai-answer__content > [itemprop="text"] > *:last-child  { margin-bottom: 0; }

/* Lead-paragraph: first <p> on the page styled larger */
.bai-answer__content > [itemprop="text"] > p:first-of-type {
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--bai-ink);
  font-weight: 400;
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--bai-bg-soft);
  border-left: 3px solid var(--bai-accent);
  border-radius: 0 2px 2px 0;
}
.bai-answer__content > [itemprop="text"] > p:first-of-type b { color: var(--bai-ink); }

.bai-answer__content p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.75;
}

.bai-answer__content h2 {
  margin: 52px 0 16px;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--bai-ink);
  scroll-margin-top: 90px;
}
.bai-answer__content h3 {
  margin: 36px 0 14px;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--bai-ink);
  scroll-margin-top: 90px;
}
.bai-answer__content h4 {
  margin: 28px 0 12px;
  font-family: var(--bai-sans);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bai-ink-muted);
}

.bai-answer__content blockquote {
  margin: 28px 0;
  padding: 20px 24px 18px 28px;
  background: var(--bai-bg-soft);
  border-left: 4px solid var(--bai-quote-bar);
  border-radius: 0 2px 2px 0;
  font-family: var(--bai-quote-font);
  font-style: normal;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--bai-ink);
}
.bai-answer__content blockquote p { margin: 0 0 8px; font-size: inherit; line-height: inherit; }
.bai-answer__content blockquote p:last-child { margin-bottom: 0; }
.bai-answer__content blockquote cite,
.bai-answer__content blockquote a {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--bai-sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--bai-accent);
  text-decoration: none;
  letter-spacing: .01em;
}
.bai-answer__content blockquote a:hover { text-decoration: underline; }
.bai-answer__content blockquote a::before { content: "— "; color: var(--bai-ink-muted); }

.bai-answer__content hl,
.bai-answer__content .bai-highlight {
  background: linear-gradient(180deg, transparent 60%, var(--bai-highlight) 60%);
  padding: 0 2px;
  font-weight: 500;
  color: var(--bai-ink);
}

.bai-answer__content b { color: var(--bai-ink); font-weight: 700; }
.bai-answer__content i, .bai-answer__content em { font-style: italic; }

.bai-answer__content ul, .bai-answer__content ol { margin: 0 0 22px; padding-left: 1.4em; }
.bai-answer__content li { margin: 0 0 8px; line-height: 1.7; }
.bai-answer__content li::marker { color: var(--bai-quote-bar); font-weight: 600; }

.bai-answer__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 32px auto;
  border-radius: 2px;
}

.bai-answer__content a:not([class]) {
  color: var(--bai-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE — TABLE OF CONTENTS sidebar
   ───────────────────────────────────────────────────────────────────────── */
.bai-toc {
  padding: 20px 20px 18px;
  background: var(--bai-bg-soft);
  border: 1px solid var(--bai-border);
  border-radius: 2px;
  font-size: 14px;
}
.bai-toc__title {
  margin: 0 0 12px;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--bai-ink);
}
.bai-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: bai-toc; }
.bai-toc__item {
  counter-increment: bai-toc;
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 10px;
  line-height: 1.45;
}
.bai-toc__item::before {
  content: counter(bai-toc) ".";
  flex: 0 0 auto;
  min-width: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bai-ink-muted);
  font-variant-numeric: tabular-nums;
}
.bai-toc__item--sub { margin-left: 22px; font-size: 13px; }
.bai-toc__item a {
  color: var(--bai-ink-soft);
  text-decoration: none;
  transition: color .18s ease;
  flex: 1 1 auto;
  min-width: 0;
}
.bai-toc__item a:hover { color: var(--bai-accent); }

/* ─────────────────────────────────────────────────────────────────────────
   ARCHIVE — hero + topic chips + list
   ───────────────────────────────────────────────────────────────────────── */
.bai-archive__hero {
  background: var(--bai-bg);
  border-bottom: 1px solid var(--bai-border);
  padding: 64px clamp(20px, 4vw, 48px) 48px;
}
.bai-archive__hero-inner {
  max-width: var(--bai-page-width);
  margin: 0 auto;
}
.bai-archive__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bai-accent);
  background: var(--bai-bg-soft);
  border: 1px solid var(--bai-border);
  border-radius: 2px;
}
.bai-archive__title {
  margin: 0 0 16px;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--bai-ink);
}
.bai-archive__sub {
  margin: 0 0 18px;
  max-width: 65ch;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--bai-ink-soft);
}
.bai-archive__count {
  margin: 0;
  font-size: 13px;
  color: var(--bai-ink-muted);
  letter-spacing: .02em;
}

.bai-archive__topics {
  max-width: var(--bai-page-width);
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 48px) 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bai-archive__topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bai-ink-soft);
  background: var(--bai-bg);
  border: 1px solid var(--bai-border);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bai-archive__topic-chip:hover {
  border-color: var(--bai-accent);
  color: var(--bai-accent);
}
.bai-archive__topic-chip.is-active {
  background: var(--bai-accent);
  border-color: var(--bai-accent);
  color: #fff;
}
.bai-archive__topic-chip.is-active .bai-archive__topic-count { color: rgba(255,255,255,.7); }
.bai-archive__topic-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--bai-ink-muted);
  font-variant-numeric: tabular-nums;
}

.bai-archive__list-section {
  max-width: var(--bai-page-width);
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 48px) 80px;
}
.bai-archive__list { list-style: none; margin: 0; padding: 0; }
.bai-archive__item { border-top: 1px solid var(--bai-border); }
.bai-archive__item:last-child { border-bottom: 1px solid var(--bai-border); }
.bai-archive__link {
  display: block;
  padding: 28px 0;
  text-decoration: none;
  color: inherit;
  transition: padding .18s ease;
}
.bai-archive__link:hover { padding-left: 8px; }
.bai-archive__item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--bai-ink-muted);
}
.bai-archive__item-topic {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bai-accent);
}
.bai-archive__item-title {
  margin: 0 0 10px;
  font-family: var(--bai-sans);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--bai-ink);
}
.bai-archive__item-excerpt {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bai-ink-soft);
  max-width: 70ch;
}
.bai-archive__item-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bai-accent);
}
.bai-archive__link:hover .bai-archive__item-cta svg { transform: translateX(4px); }
.bai-archive__item-cta svg { transition: transform .18s ease; }

.bai-archive__pagination {
  margin: 48px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.bai-archive__pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--bai-ink-soft);
  background: var(--bai-bg);
  border: 1px solid var(--bai-border);
  border-radius: 2px;
  text-decoration: none;
  transition: all .18s ease;
}
.bai-archive__pagination .page-numbers:hover {
  border-color: var(--bai-accent);
  color: var(--bai-accent);
}
.bai-archive__pagination .page-numbers.current {
  background: var(--bai-accent);
  border-color: var(--bai-accent);
  color: #fff;
}
.bai-archive__pagination .dots { border: 0; background: transparent; }

.bai-archive__empty {
  padding: 64px 0;
  text-align: center;
  font-size: 16px;
  color: var(--bai-ink-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   SINGLE — CTA + RELATED (these elements live in mu-plugin output;
   their selectors live in bible-ai-cta.php and answers-landing-enhance.php
   inline <style>, so we only fine-tune spacing here).
   ───────────────────────────────────────────────────────────────────────── */
.bai-answer__main .bai-cta { margin: 64px 0 24px; }
.bai-answer__main .bai-related { margin: 56px 0 16px; }

/* ─────────────────────────────────────────────────────────────────────────
   THEME OVERRIDES — defeat global uppercase / oversized headings / indented
   lists imposed by Hello-theme + Elementor + Yoast post-content CSS.
   These selectors win against `.entry-content h2`, `.elementor h1` etc.
   We use !important sparingly — only on properties the theme aggressively
   restyles (text-transform, font-size, list paddings).
   ───────────────────────────────────────────────────────────────────────── */
body .bai-answer .bai-answer__title,
body .bai-answer .bai-answer__content h2,
body .bai-answer .bai-answer__content h3,
body .bai-answer .bai-answer__content h4,
body .bai-answer .bai-toc .bai-toc__title,
body .bai-answer .bai-related .bai-related__title,
body .bai-archive .bai-archive__title,
body .bai-archive .bai-archive__item-title,
body .bai-cta .bai-cta__title {
  text-transform: none !important;
  font-style: normal;
}

body .bai-answer .bai-answer__title { font-size: clamp(28px, 4vw, 42px) !important; }
body .bai-answer .bai-answer__content h2 { font-size: clamp(22px, 2.4vw, 26px) !important; }
body .bai-answer .bai-answer__content h3 { font-size: clamp(17px, 1.7vw, 19px) !important; }
body .bai-answer .bai-toc .bai-toc__title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; }
body .bai-answer .bai-related .bai-related__title { font-size: clamp(16px, 1.7vw, 18px) !important; }
body .bai-archive .bai-archive__title { font-size: clamp(34px, 5.4vw, 56px) !important; }
body .bai-archive .bai-archive__item-title { font-size: clamp(19px, 2.2vw, 24px) !important; }

/* TOC + related lists — kill theme's auto list-padding + uppercase links */
body .bai-answer .bai-toc__list,
body .bai-answer .bai-related__list,
body .bai-archive .bai-archive__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .bai-answer .bai-toc__list li,
body .bai-answer .bai-related__list li,
body .bai-archive .bai-archive__list li {
  margin-left: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
}
body .bai-answer .bai-toc__list a,
body .bai-answer .bai-related__link,
body .bai-answer .bai-related__q,
body .bai-archive .bai-archive__link,
body .bai-archive .bai-archive__item-title,
body .bai-archive .bai-archive__item-cta,
body .bai-archive .bai-archive__topic-chip {
  text-transform: none !important;
  letter-spacing: -.005em;
}
body .bai-answer .bai-related__list { border-top: 1px solid var(--bai-border) !important; }
body .bai-answer .bai-related__item { border-bottom: 1px solid var(--bai-border) !important; }
body .bai-answer .bai-related__link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 4px !important;
  text-decoration: none !important;
  color: var(--bai-accent) !important;
}
body .bai-answer .bai-related__link:hover { color: var(--bai-accent-strong) !important; }
body .bai-answer .bai-related__q { font-weight: 500 !important; font-size: 16px !important; }

/* Eyebrow chips — strict size + accent color */
body .bai-answer .bai-answer__topic,
body .bai-archive .bai-archive__eyebrow,
body .bai-archive .bai-archive__item-topic {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;  /* keep eyebrow uppercase — intentional */
}

/* CTA button text — ensure white even when theme repaints links */
body .bai-cta a.bai-cta__btn,
body .bai-cta a.bai-cta__btn:link,
body .bai-cta a.bai-cta__btn:visited,
body .bai-cta a.bai-cta__btn:hover,
body .bai-cta a.bai-cta__btn:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
body .bai-cta a.bai-cta__btn .bai-cta__btn-text { color: #FFFFFF !important; }
body .bai-cta a.bai-cta__btn svg { color: #FFFFFF !important; }

/* ─────────────────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  .bai-answer__breadcrumb,
  .bai-answer__sidebar,
  .bai-cta,
  .bai-related { display: none !important; }
  .bai-answer__layout { grid-template-columns: 1fr; }
  .bai-answer__content { color: #000; }
}