/* Help center. Sits on the shared template header and footer, so only the
   page body needs styling. Brand blue and yellow, matching the rest of the site. */

.help-page { --help-blue: #0057b8; --help-blue-dark: #003f88; --help-yellow: #ffc928; --help-ink: #051036; --help-muted: #5b6b84; --help-line: #e2e9f2; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- hero --- */

.help-hero { padding: 64px 0 48px; background: linear-gradient(168deg, #f2f7fd 0%, #eaf2fc 100%); }
.help-hero__title { margin: 0; color: var(--help-ink); font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; }
.help-hero__lead { margin: 12px 0 0; color: var(--help-muted); font-size: 1.02rem; line-height: 1.65; }

.help-search { max-width: 640px; margin: 30px auto 0; display: flex; align-items: stretch; border-radius: 10px; background: #fff; box-shadow: 0 12px 34px rgb(5 16 54 / 10%); overflow: hidden; }
.help-search input {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  padding: 0 20px;
  border: 0;
  color: var(--help-ink);
  background: transparent;
  font: inherit;
  font-size: 1rem;
}
.help-search input:focus { outline: 3px solid rgb(0 87 184 / 18%); outline-offset: -3px; }
.help-search button {
  min-width: 118px;
  padding: 0 26px;
  border: 0;
  color: #fff;
  background: var(--help-blue);
  font: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.help-search button:hover { background: var(--help-blue-dark); }
.help-search__status { margin: 14px 0 0; min-height: 1.2em; color: var(--help-muted); font-size: .86rem; }

/* --------------------------------------------------------------- topics --- */

.help-topics { padding: 56px 0 8px; }
.help-card {
  height: 100%;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--help-line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.help-card:hover { border-color: var(--help-blue); background: #fbfdff; box-shadow: 0 14px 34px rgb(5 16 54 / 9%); }
.help-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: var(--help-blue-dark);
  background: #eaf2ff;
  font-size: 1.4rem;
  transition: color .2s ease, background .2s ease;
}
.help-card:hover .help-card__icon { color: var(--help-blue-dark); background: var(--help-yellow); }
.help-card__title { margin: 0 0 8px; color: var(--help-ink); font-size: 1.1rem; font-weight: 600; }
.help-card__text { margin: 0; color: var(--help-muted); font-size: .93rem; line-height: 1.65; }

/* Hidden by the search filter rather than removed, so the grid keeps its order. */
[data-help-topic].is-filtered, [data-help-question].is-filtered { display: none; }
.help-empty { margin: 26px 0 0; padding: 18px 20px; border: 1px dashed #c3d3e6; border-radius: 10px; color: var(--help-muted); background: #f7fafd; font-size: .92rem; text-align: center; }
.help-empty.is-hidden { display: none; }

/* ------------------------------------------------------------------ faq --- */

.help-faq { padding: 60px 0 20px; scroll-margin-top: 24px; }
.help-faq .accordion__item { background: #fff; transition: border-color .2s ease; }
.help-faq .accordion__item:hover { border-color: #c3d6ee !important; }
.help-faq .accordion__button { width: 100%; text-align: left; cursor: pointer; }
.help-faq .accordion__content p { color: var(--help-muted); line-height: 1.7; }

/* Category switching + "Load more": questions stay in the DOM and are hidden by
   class, the same way the search filter above hides them. */
.help-card.is-active { border-color: var(--help-blue); background: #fbfdff; box-shadow: 0 14px 34px rgb(5 16 54 / 9%); }
.help-card.is-active .help-card__icon { color: var(--help-blue-dark); background: var(--help-yellow); }
[data-help-question].is-category-hidden, [data-help-question].is-window-hidden { display: none; }
#help-faq-more-wrap.is-hidden { display: none; }

/* -------------------------------------------------------------- contact --- */

.help-contact { padding: 46px 0 76px; }
.help-contact__panel { padding: 38px clamp(24px, 4vw, 48px); border-radius: 18px; color: #fff; background: linear-gradient(150deg, var(--help-blue-dark) 0%, var(--help-blue) 100%); }
.help-contact__title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
.help-contact__text { margin: 10px 0 0; max-width: 46ch; color: rgb(255 255 255 / 80%); font-size: .98rem; line-height: 1.65; }
.help-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.help-contact__button {
  min-height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 10px;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.help-contact__button:hover { border-color: #fff; background: rgb(255 255 255 / 14%); color: #fff; }
.help-contact__button.-primary { border-color: var(--help-yellow); color: var(--help-blue-dark); background: var(--help-yellow); }
.help-contact__button.-primary:hover { background: #e8ad00; border-color: #e8ad00; color: var(--help-blue-dark); }

@media (max-width: 767px) {
  .help-hero { padding: 44px 0 34px; }
  .help-search { flex-direction: column; }
  .help-search button { min-height: 50px; }
  .help-topics { padding-top: 40px; }
  .help-contact__panel { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-page * { transition-duration: .01ms !important; }
}