/* =========================================================
   review.css — QB Review System (CLEAN + PRODUCTION)
   - Deduped (no repeated blocks)
   - Money Page blue system
   - Anchor jump fix (single source of truth)
   - WP admin-bar offset (logged-in)
========================================================= */

/* =========================
   0) ANCHOR JUMP FIX (ONE SOURCE OF TRUTH)
   - Put sticky header height here
   - Works for all #hash jumps inside .qb-review
========================= */
:root{
  --qb-anchor-offset: 0px; /* ✅ change this to match your real sticky header height */
}

/* Offset for native anchor jumps */
html{
  scroll-padding-top: var(--qb-anchor-offset);
}

/* WordPress admin bar adds ~32px (desktop) / ~46px (mobile) */
body.admin-bar{
  --qb-anchor-offset: 104px; /* 72 + ~32 */
}
@media (max-width: 782px){
  body.admin-bar{
    --qb-anchor-offset: 118px;
  }
}

/* Ensure targets don't land under sticky header */
.qb-review [id]{
  scroll-margin-top: var(--qb-anchor-offset);
}

/* =========================
   1) BASE TOKENS + PAGE
========================= */
.qb-review{
  --qb-bg: #ffffff;
  --qb-bg2:#f6f8fb;

  --qb-card:#ffffff;
  --qb-text:#0f172a;
  --qb-muted: rgba(15,23,42,.72);
  --qb-line: rgba(15,23,42,.12);

  /* Money Page blue system (fallbacks) */
  --qb-accent: var(--accent-main, #2563EB);
  --qb-accent-hover: var(--accent-hover, #1D4ED8);
  --qb-accent-soft: var(--accent-soft, rgba(37,99,235,.10));
  --qb-accent-soft-2: rgba(37,99,235,.16);
  --qb-accent-border: var(--accent-border, #DBEAFE);

  --qb-pro:#16a34a;
  --qb-warn:#f59e0b;
  --qb-con:#dc2626;

  --qb-radius: 16px;
  --qb-max: 1080px;

  color: var(--qb-text);
  line-height: 1.55;
  background: linear-gradient(180deg,var(--qb-bg),var(--qb-bg2));

  /* Typography polish */
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Page breathing */
  padding: 22px 0;
}

/* Wrapper */
.qb-review .qb-wrap{
  max-width: var(--qb-max);
  margin: 0 auto;
  padding: 22px 18px 28px;
}

/* Links */
.qb-review a{
  color: var(--qb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.qb-review a:hover{
  color: var(--qb-accent-hover);
  text-decoration-thickness: 2px;
}

/* Long text readability */
.qb-review p{
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 12px 0;
}

/* =========================
   2) HERO GRID
========================= */
.qb-review .qb-hero{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .qb-review .qb-hero{ grid-template-columns: 1fr; }
}

/* =========================
   3) CARDS
========================= */
.qb-review .qb-card{
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  padding: 20px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 10px 26px rgba(15,23,42,.06);
}
.qb-review .qb-card + .qb-card{ margin-top: 20px; }

.qb-review .qb-card-soft{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.018);
}

/* Hero subtle blue glow */
.qb-review .qb-hero > .qb-card:first-child{
  border-color: rgba(37,99,235,.18);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(180deg, rgba(37,99,235,.06), #ffffff 70%);
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 18px 40px rgba(0,0,0,.06);
}

/* Divider */
.qb-review .qb-hr{
  height: 1px;
  background: var(--qb-line);
  margin: 16px 0;
}

/* =========================
   4) TYPOGRAPHY
========================= */
.qb-review .qb-kicker{
  color: var(--qb-muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  margin: 0 0 6px;
}

.qb-review .qb-h1{
  margin: .35rem 0 .6rem;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.qb-review .qb-h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;

  /* Money Page blue left bar */
  position: relative;
  padding-left: 12px;
}
.qb-review .qb-h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:5px;
  height:1.1em;
  border-radius:999px;
  background: var(--qb-accent);
  opacity:.9;
}

.qb-review .qb-h3{
  margin: 6px 0 .4rem;
  font-size: 18px;
  line-height: 1.2;
}

.qb-review .qb-lead{ margin: .5rem 0; }
.qb-review .qb-muted{ color: var(--qb-muted); }
.qb-review .qb-small{ font-size: 13px; }
.qb-review .qb-disclaimer{ color: var(--qb-muted); }

/* =========================
   5) PILLS
========================= */
.qb-review .qb-badge-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.qb-review .qb-pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--qb-line);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--qb-muted);
  font-weight: 800;
  font-size: 13px;
  background: rgba(15,23,42,.02);
}
.qb-review .qb-pill strong{ color: var(--qb-text); }

/* =========================
   6) BUTTONS (Money Page blue)
========================= */
.qb-review .qb-btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.qb-review .qb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,.20);
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  outline: none;
}
.qb-review .qb-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}
.qb-review .qb-btn:active{ transform: translateY(0); box-shadow: none; }

.qb-review .qb-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 10px 18px rgba(15,23,42,.08);
  border-color: rgba(37,99,235,.35);
}

.qb-review .qb-btn.qb-btn-primary{
  background: var(--qb-accent);
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
}
.qb-review .qb-btn.qb-btn-primary:hover{
  background: var(--qb-accent-hover);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}

.qb-review .qb-btn.qb-btn-ghost{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.20);
  color: var(--qb-accent-hover) !important;
}
.qb-review .qb-btn.qb-btn-ghost:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.32);
}

.qb-review .qb-btn-full{ width: 100%; }
.qb-review .qb-btns-tight{ margin: 0; }

/* =========================
   7) TOC PILLS
========================= */
.qb-review .qb-toc{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.qb-review .qb-toc a{
  border: 1px solid rgba(37,99,235,.18);
  padding: 9px 12px;
  border-radius: 999px;
  color: #0F172A;
  font-weight: 800;
  font-size: 13px;
  background: rgba(37,99,235,.06);
  text-decoration: none !important;
}
.qb-review .qb-toc a:hover{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.32);
}

@media (max-width: 720px){
  .qb-review .qb-toc{ gap: 8px; }
  .qb-review .qb-toc a{
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* =========================
   8) SCORE CARD
========================= */
.qb-review .qb-score{ display: grid; gap: 10px; }
.qb-review .qb-score__sub{ color: var(--qb-muted); font-weight: 800; }
.qb-review .qb-score__value{
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
}

/* =========================
   9) CALLOUT
========================= */
.qb-review .qb-callout{
  border-left: 3px solid var(--qb-warn);
  padding: 10px 12px;
  background: rgba(245,158,11,.08);
  border-radius: 12px;
}

/* =========================
   10) GRIDS
========================= */
.qb-review .qb-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px){
  .qb-review .qb-grid2{ grid-template-columns: 1fr; }
}

.qb-review .qb-mt12{ margin-top: 12px; }
.qb-review .qb-mt14{ margin-top: 14px; }
.qb-review .qb-mt10{ margin-top: 10px; }

/* =========================
   11) LISTS
========================= */
.qb-review .qb-list{
  margin: .4rem 0 0;
  padding-left: 18px;
}
.qb-review .qb-list li{
  margin: 8px 0;
  line-height: 1.6;
}

/* =========================
   12) PROS & CONS
========================= */
.qb-review .qb-proscons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .qb-review .qb-proscons{ grid-template-columns: 1fr; }
}

.qb-review .qb-proscons .qb-card{
  position: relative;
  padding-left: 22px;
}

.qb-review .qb-pros{
  border-left: 5px solid #16a34a;
  background: rgba(22,163,74,.06);
}

.qb-review .qb-cons{
  border-left: 5px solid #f97316;
  background: rgba(249,115,22,.06);
}

.qb-review .qb-pros::before,
.qb-review .qb-cons::before{
  position: absolute;
  top: 18px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.qb-review .qb-pros::before{
  content: "✓";
  color: #16a34a;
  border: 2px solid rgba(22,163,74,.35);
}

.qb-review .qb-cons::before{
  content: "!";
  color: #f97316;
  border: 2px solid rgba(249,115,22,.35);
}

/* =========================
   13) COMPARE ROWS
========================= */
.qb-review .qb-compare{ display: grid; gap: 12px; }

.qb-review .qb-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--qb-line);
  border-radius: 14px;
  background: rgba(15,23,42,.018);
}
@media (max-width: 700px){
  .qb-review .qb-row{ grid-template-columns: 1fr; }
}

.qb-review .qb-lhs{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* =========================
   14) WHAT IT IS / ISN'T (inner cards)
========================= */
.qb-review #what-it-is .qb-grid2 > div{
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius);
  padding: 18px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 10px 26px rgba(15,23,42,.06);
}

.qb-review #what-it-is .qb-grid2 > div:first-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(22,163,74,.06), transparent 55%),
    var(--qb-card);
}

.qb-review #what-it-is .qb-grid2 > div:last-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(249,115,22,.05), transparent 55%),
    var(--qb-card);
}

/* =========================
   15) FOOTER CTA + FOOTER
========================= */
.qb-review .qb-footer-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 820px){
  .qb-review .qb-footer-cta{
    gap: 14px;
    align-items: flex-start;
  }
}

.qb-review .qb-footer{
  padding: 0 18px 28px;
}

/* =========================
   16) FAQ (Q/A styling)
========================= */
.qb-review #faq .qb-h3{
  font-size: 15px;
  font-weight: 900;
  color: var(--qb-text);
  margin: 14px 0 6px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qb-review #faq .qb-h3::before{
  content: "Q";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--qb-accent-hover);
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.20);
  margin-top: 1px;
}

.qb-review #faq .qb-h3 + p{
  margin: 0 0 12px;
  color: rgba(15,23,42,.78);
  font-size: 14px;
  line-height: 1.65;
  padding-left: 32px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  padding-bottom: 12px;
}

.qb-review #faq .qb-h3:last-of-type + p{
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 720px){
  .qb-review #faq .qb-h3{ font-size: 14px; }
  .qb-review #faq .qb-h3 + p{ padding-left: 30px; }
}

/* =========================================================
   EZ-TOC ANCHOR FIX (CRITICAL)
   Fix offset when clicking Table of Contents links
========================================================= */

/* Apply offset to EZ-TOC generated anchors */
.ez-toc-container a[href^="#"] {
  scroll-margin-top: var(--qb-anchor-offset);
}

/* Also apply to headings targeted by EZ-TOC */
.ez-toc-container + * [id],
.qb-review h2[id],
.qb-review h3[id] {
  scroll-margin-top: var(--qb-anchor-offset);
}

html { scroll-behavior: auto !important; }

.qb-footer-cta-stack{
  justify-content: flex-start;
}

.qb-footer-cta-stack .qb-btns{
  margin-top: 12px;
}