/* ===== Help Center — legal-page redesign overrides ===== */
/* Uses legal-page.css for the blue background + pill nav/footer.
   Here: the wide content card, TOC pills coloured per topic, filled topic
   icons, and the +/× toggle with the nav-button offset.
   No black outlines/offsets on the cards themselves. */

/* Wide card wrapping the hero + sidebar + content */
.help-card {
  width: 100%;
  max-width: 960px;
  background: var(--color-bg-primary);
  border-radius: 32px;
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Hero → compact, centred header inside the card */
.help-card .help-hero {
  align-items: center;
  text-align: center;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  gap: 12px;
}
.help-card .help-hero__title {
  color: var(--color-label-primary); /* override legacy .title-block h1 link colour */
  font-weight: var(--font-weight-black);
}

/* Layout fills the card (drop the standalone page padding/margins/cap) */
.help-card .help-layout {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* ===== Topic icons → coloured glyph, no circle (colour set inline per topic) ===== */

/* ===== TOC pills — white by default, topic colour when active ===== */
.help-card .toc { gap: 8px; }
.help-card .toc a {
  background: var(--color-white);
  color: var(--color-label-primary);
  border-radius: 9999px;
  padding: 12px 16px;
}
.help-card .toc a::before { display: none; } /* remove the old left indicator bar */
.help-card .toc a:hover { border-color: rgb(from var(--color-label-primary) r g b / 0.22); }
.help-card .toc a.active {
  background: var(--toc-color, var(--color-accent-blue));
  border-color: var(--toc-color, var(--color-accent-blue));
  color: var(--color-white);
}

/* ===== Answer toggle → +/× circle with the nav-button offset ===== */
.help-card .qa-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-black);
  background: var(--color-accent-blue);
  color: var(--color-white);
  box-shadow: 2px 2px 0 var(--color-black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.help-card .qa-toggle i { font-size: 16px; }
.help-card .qa-header:hover .qa-toggle {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-black);
}
.help-card .qa.open .qa-toggle {
  transform: none;
  box-shadow: 3px 3px 0 var(--color-black);
}

/* CTA keeps its own look; footer spacing comes from .legal-main */
.site-footer { margin-top: 0; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  /* ↓↓↓ HELP CARD — MOBILE TWEAKABLES ↓↓↓ */
  .help-card {
    padding: 24px 18px;   /* card padding */
    border-radius: 24px;
    gap: 28px;            /* gap between hero block and the layout */
  }
}