/*
 * Help Center. Uses the tokens in home.css, the same look as mynjgov.com.
 */
.hc-skip { position: absolute; left: var(--space-4); top: -48px; z-index: 20; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--text); color: var(--white); text-decoration: none; }
.hc-skip:focus { top: var(--space-2); }
.d-hero .d-lead a { color: var(--action); }
.hc-status { margin: var(--space-2) 0 0; min-height: 21px; font-size: var(--text-body-sm); color: var(--text-muted); }
.hc-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-8); }
.hc-toc { position: sticky; top: 80px; align-self: start; }
.hc-toc-label { margin: 0 0 var(--space-2); font-size: var(--text-caption); font-weight: 500; line-height: 20px; color: var(--text-muted); }
.hc-toc ul { margin: 0; padding: 0; list-style: none; }
.hc-toc a { display: block; padding: 6px 0; font-size: var(--text-body-sm); line-height: 21px; color: var(--body); text-decoration: none; }
.hc-toc a:hover { color: var(--action); }
.hc-section { margin-bottom: var(--space-8); scroll-margin-top: 80px; }
.hc-h2 { margin: 0 0 var(--space-3); font-size: var(--text-h3); font-weight: 700; line-height: 32px; }
.hc-h2 a { color: inherit; text-decoration: none; }
.hc-h2 a:hover { color: var(--action); }
.hc-toc a[aria-current="page"] { color: var(--text); font-weight: 600; }
.d-kicker a { color: inherit; text-decoration: none; }
.hc-search { margin-bottom: var(--space-2); }
/* The index lists every question. Each links to its answer on the topic page. */
.hc-list { margin: 0; padding: 0; list-style: none; }
.hc-q { border-bottom: 1px solid var(--hair); }
.hc-q a { display: block; padding: var(--space-3) 0; font-size: var(--text-body); line-height: 24px; color: var(--body); text-decoration: none; }
.hc-q a:hover { color: var(--action); }
/* A topic page shows every answer open: a hairline row, the question, the answer in body. */
.hc-a { padding: var(--space-4) 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.hc-h3 { margin: 0 0 var(--space-2); font-size: var(--text-h4); font-weight: 600; line-height: 24px; }
.hc-a p { margin: 0; max-width: 640px; color: var(--body); }
.hc-a p a { color: var(--action); }
.hc-a .hc-dated { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--text-muted); }
.hc-a:target .hc-h3 { color: var(--action); }
.hc-empty { margin: 0 0 var(--space-8); color: var(--text-muted); }
.hc-contact { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-hi); }
.hc-contact p { margin: 0; color: var(--body); }
.hc-contact a { color: var(--action); }
@media (max-width: 767px) {
  .hc-layout { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-6); }
  /* On a phone the topics would push the answers further below the fold. The headings carry the topics. */
  .hc-toc { display: none; }
  .hc-h3 { font-size: var(--text-body); }
}