/* ============================================================
   MyQbit.com help centre
   ------------------------------------------------------------
   Layered on top of the site stylesheet, which supplies every
   token, the type scale and the primary button. Nothing here
   redefines a colour: a help centre that drifted from the
   company site would read as a different company.

   The shape is search first, then a scannable list. A parent
   arriving here has a specific question and no patience, so the
   search box is the biggest thing on the page and every article
   is one tap from open.
   ============================================================ */

/* ---------- Search ---------- */
.help-hero { padding-block: clamp(40px, 6vw, 72px); }
.help-search { position: relative; max-width: 620px; margin-top: 26px; }
.help-search input {
  width: 100%;
  min-height: 56px;
  padding: 14px 20px 14px 50px;
  font-size: 17px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.help-search input::placeholder { color: var(--text-muted); }
.help-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--text-muted); pointer-events: none;
}
.help-search-hint { margin-top: 10px; font-size: var(--step--1); color: var(--text-muted); }

/* Results replace the page body while typing, so there is never a
   question about where the answer went. */
.help-results { margin-top: 26px; }
.help-results[hidden] { display: none; }
.help-result {
  display: block; padding: 14px 18px; margin-bottom: 10px;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.help-result:hover, .help-result:focus-visible { border-color: var(--qbit-brand); transform: translateY(-1px); }
.help-result strong { display: block; margin-bottom: 3px; }
.help-result span { font-size: var(--step--1); color: var(--text-secondary); }
.help-result em { font-style: normal; color: var(--qbit-brand); font-weight: 600; }
.help-noresults { padding: 22px; color: var(--text-secondary); }

/* The hero already carries the space above the list. Without this the
   hero's bottom padding and the section's top padding stack into a
   dead band between the search box and the first answer. */
#help-body { padding-top: 0; }

/* ---------- Section cards on the hub ---------- */
.help-sections { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .help-sections { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .help-sections { grid-template-columns: repeat(3, 1fr); } }

/* One tile rule for every tile in the help centre. A new tile joins
   this selector list rather than copying these numbers. */
.help-section-card {
  display: block; height: 100%; padding: 22px;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  transition: border-color 140ms ease, transform 140ms ease;
}
.help-section-card:hover, .help-section-card:focus-visible {
  border-color: var(--qbit-brand); transform: translateY(-2px);
}
.help-section-card .num {
  display: block; font-size: var(--step--1); font-weight: 700;
  color: var(--qbit-brand); font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.help-section-card h3 { margin: 0 0 6px; font-size: var(--step-1); }
.help-section-card p { margin: 0; font-size: var(--step--1); color: var(--text-secondary); }
.help-section-card .count { display: block; margin-top: 12px; font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Article list ---------- */
.help-toc {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 34px; padding: 0; list-style: none;
}
.help-toc a {
  display: inline-block; padding: 7px 14px; font-size: var(--step--1);
  text-decoration: none; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
}
.help-toc a:hover, .help-toc a[aria-current="true"] { border-color: var(--qbit-brand); color: var(--qbit-brand); }

.help-articles { margin: 0; padding: 0; list-style: none; }
.help-article {
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.help-article:first-child { border-top: 1px solid var(--border); }

.help-article > summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: var(--step-1); font-weight: 600; line-height: 1.35;
}
.help-article > summary::-webkit-details-marker { display: none; }
.help-article > summary::after {
  content: ''; flex: 0 0 auto; margin-left: auto; margin-top: 7px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.help-article[open] > summary::after { transform: rotate(-135deg); }
.help-article > summary:hover { color: var(--qbit-brand); }


.help-body { padding: 0 4px 26px; max-width: var(--measure); }
.help-body > p { margin: 0 0 16px; }
.help-body ol { margin: 0 0 18px; padding-left: 22px; }
.help-body ol li { margin-bottom: 9px; }
.help-body ul.tips { margin: 0 0 18px; padding: 0; list-style: none; }
.help-body ul.tips li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: var(--step--1); color: var(--text-secondary);
}
.help-body ul.tips li::before {
  content: ''; position: absolute; left: 8px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--qbit-brand);
}
.help-note {
  padding: 14px 16px; margin: 0 0 18px;
  border-left: 3px solid var(--qbit-brand);
  background: var(--bg-soft); border-radius: 0 10px 10px 0;
  font-size: var(--step--1); color: var(--text-secondary);
}
.help-note strong { color: var(--text); }

/* ---------- Video ----------
   Click to load: nothing is requested from YouTube until someone
   asks for it, so opening a help page contacts nobody. */
.help-video { margin: 0 0 20px; }
.help-video button {
  position: relative; display: block; width: 100%; max-width: 360px;
  padding: 0; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; cursor: pointer; background: var(--bg-soft);
}
.help-video button img { display: block; width: 100%; height: auto; }
.help-video button::after {
  content: ''; position: absolute; inset: 0;
  background: rgb(15 23 42 / 18%);
}
.help-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: 58px; height: 58px; border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgb(15 23 42 / 28%);
}
.help-video .play svg { width: 22px; height: 22px; color: #111; margin-left: 3px; }
.help-video iframe { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border: 0; border-radius: 16px; }
.help-video[data-orient="landscape"] button,
.help-video[data-orient="landscape"] iframe { max-width: 560px; }
.help-video[data-orient="landscape"] iframe { aspect-ratio: 16 / 9; }
.help-video figcaption { margin-top: 8px; font-size: var(--step--1); color: var(--text-muted); }

/* ---------- Shot placeholder ----------
   Honest about what is not here yet, rather than a broken image. */
.help-shot-todo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin: 0 0 18px;
  border: 1px dashed var(--border); border-radius: 10px;
  font-size: var(--step--1); color: var(--text-muted);
}

/* ---------- Footer nav between sections ---------- */
.help-pager { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 46px; }
.help-pager a { font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .help-article > summary::after, .help-result, .help-section-card { transition: none; }
}