/* Boditrax website - Help Centre (/help/centre and /help/centre/*)
 * Topic tiles, question search, popular questions, and the category pages' topic list and expandable questions.
 * Colours, radii and type follow the rest of the site (plum headings, yellow accents, card borders, text-sm copy).
 * Logical properties (inline-start/end) so the layout mirrors in right-to-left languages. */

/* ---- Round icon badges (same as the contact page cards) -------------------------------------- */
.btx-help-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid;
  border-radius: 9999px;
  background: var(--background);
}
.btx-help-icon--plum { border-color: color-mix(in oklab, var(--brand-plum) 60%, transparent); color: var(--brand-plum); }
.btx-help-icon--green { border-color: color-mix(in oklab, var(--brand-green) 70%, transparent); color: var(--brand-green); }
.btx-help-icon--blue { border-color: color-mix(in oklab, var(--brand-blue) 70%, transparent); color: var(--brand-blue); }
.btx-help-icon--yellow { border-color: var(--brand-yellow); color: var(--brand-plum); }
.btx-help-icon--coral { border-color: color-mix(in oklab, var(--brand-coral) 70%, transparent); color: var(--brand-coral); }
.btx-help-icon--inverse { border-color: color-mix(in oklab, var(--brand-plum-foreground) 40%, transparent); background: transparent; color: var(--brand-plum-foreground); }

/* ---- Topic tiles (hub): 1 / 2 / 4 columns, the 8th tile is the support tile ------------------- */
.btx-help-cards {
  display: grid;
  gap: 1rem;
}
@media (width >= 40rem) { .btx-help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) { .btx-help-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.btx-help-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  transition: border-color 300ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btx-help-card:hover { border-color: color-mix(in oklab, var(--foreground) 25%, transparent); }
.btx-help-card:focus-visible { outline: 2px solid var(--brand-plum); outline-offset: 3px; }
.btx-help-card--support {
  border-color: var(--brand-plum);
  background: var(--brand-plum);
  color: var(--brand-plum-foreground);
}
.btx-help-card--support:hover { border-color: var(--brand-plum); background: color-mix(in oklab, var(--brand-plum) 92%, white); }
.btx-help-card__arrow { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.btx-help-card:hover .btx-help-card__arrow,
.btx-help-card:focus-visible .btx-help-card__arrow { transform: translateX(0.375rem); }
[dir="rtl"] .btx-help-card__arrow { transform: scaleX(-1); }
[dir="rtl"] .btx-help-card:hover .btx-help-card__arrow,
[dir="rtl"] .btx-help-card:focus-visible .btx-help-card__arrow { transform: translateX(-0.375rem) scaleX(-1); }

/* ---- Question search (hub; shown by boditrax.js) ---------------------------------------------- */
.btx-help-search { max-width: 40rem; }
.btx-help-search__label {
  display: block;
  margin-bottom: 0.625rem;
  color: var(--brand-plum);
  font-size: var(--text-sm);
  font-weight: 500;
}
.btx-help-search__field { position: relative; }
.btx-help-search__icon {
  position: absolute;
  inset-inline-start: 1.125rem;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--brand-plum);
  opacity: 0.6;
  transform: translateY(-50%);
  pointer-events: none;
}
.btx-help-search__input {
  width: 100%;
  padding: 0.95rem 1.25rem;
  padding-inline-start: 3rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 15px;
  outline: none;
  box-shadow: 0 18px 40px -28px rgba(52, 26, 74, 0.35);
  transition: border-color 200ms, box-shadow 200ms;
}
.btx-help-search__input::placeholder { opacity: 0.45; }
.btx-help-search__input:focus-visible {
  border-color: var(--brand-plum);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-plum) 22%, transparent);
}
.btx-help-search__panel {
  margin-top: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.18);
}
.btx-help-search__status {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}
.btx-help-search__status[data-help-search-none] { font-weight: 400; letter-spacing: normal; text-transform: none; opacity: 0.75; font-size: var(--text-sm); }
.btx-help-search__results { max-height: 22rem; overflow-y: auto; }
.btx-help-search__results a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  transition: background-color 150ms;
}
.btx-help-search__results a:hover,
.btx-help-search__results a:focus-visible { background: color-mix(in oklab, var(--foreground) 5%, transparent); outline: none; }
.btx-help-search__category {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}
.btx-help-search__question { display: block; margin-top: 0.125rem; color: var(--brand-plum); font-size: var(--text-sm); }

/* ---- Popular questions (hub) ------------------------------------------------------------------- */
.btx-help-popular {
  display: grid;
  border-top: 1px solid var(--border);
}
@media (width >= 48rem) {
  .btx-help-popular { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.btx-help-popular li { border-bottom: 1px solid var(--border); }
.btx-help-popular__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem 0;
  transition: opacity 200ms;
}
.btx-help-popular__question { color: var(--brand-plum); font-size: 1.0625rem; line-height: 1.4; }
.btx-help-popular__link:hover .btx-help-popular__question { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brand-yellow); }
.btx-help-popular__category { font-size: 0.75rem; opacity: 0.55; }

/* ---- Category pages: topic list beside the questions -------------------------------------------- */
.btx-help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (width >= 64rem) {
  .btx-help-layout { grid-template-columns: 15rem minmax(0, 48rem); gap: 4rem; }
  .btx-help-nav { position: sticky; top: 7rem; align-self: start; }
}
.btx-help-nav__title {
  color: color-mix(in oklab, var(--brand-plum) 90%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.btx-help-nav ul { margin-top: 1rem; }
/* Phones and tablets: the topics scroll sideways as pills. */
@media (width < 64rem) {
  .btx-help-nav ul { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
  .btx-help-nav__link {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--card);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .btx-help-nav__link[aria-current="page"] { border-color: var(--brand-plum); background: var(--brand-plum); color: var(--brand-plum-foreground); }
}
@media (width >= 64rem) {
  .btx-help-nav ul { border-inline-start: 1px solid var(--border); }
  .btx-help-nav__link {
    display: block;
    margin-inline-start: -1px;
    padding: 0.5rem 0;
    padding-inline-start: 1rem;
    border-inline-start: 2px solid transparent;
    font-size: var(--text-sm);
    opacity: 0.7;
    transition: opacity 200ms, color 200ms;
  }
  .btx-help-nav__link:hover { color: var(--brand-plum); opacity: 1; }
  .btx-help-nav__link[aria-current="page"] { border-inline-start-color: var(--brand-yellow); color: var(--brand-plum); font-weight: 500; opacity: 1; }
}

.btx-help-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}
.btx-help-list {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
}

/* Expandable questions (native <details>, so they work without JavaScript and open on find-in-page). */
.btx-help-q + .btx-help-q { border-top: 1px solid var(--border); }
.btx-help-q { scroll-margin-top: 6.5rem; }
.btx-help-q__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  color: var(--brand-plum);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms;
}
.btx-help-q__summary::-webkit-details-marker { display: none; }
.btx-help-q__summary:hover { background: color-mix(in oklab, var(--foreground) 3%, transparent); }
.btx-help-q__summary:focus-visible { outline: 2px solid var(--brand-plum); outline-offset: -2px; border-radius: 0.5rem; }
.btx-help-q__title { font-size: 1rem; font-weight: 500; line-height: 1.45; }
.btx-help-q__chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btx-help-q[open] .btx-help-q__chevron { transform: rotate(180deg); }
.btx-help-q[open] .btx-help-q__summary { padding-bottom: 0.5rem; }
.btx-help-q__answer {
  padding: 0 1.5rem 1.5rem;
  max-width: 44rem;
  font-size: 15px;
  line-height: 1.75;
  color: color-mix(in oklab, currentColor 80%, transparent);
}
.btx-help-q:target .btx-help-q__summary { box-shadow: inset 3px 0 0 var(--brand-yellow); }
[dir="rtl"] .btx-help-q:target .btx-help-q__summary { box-shadow: inset -3px 0 0 var(--brand-yellow); }

/* Previous / next topic */
.btx-help-pager {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (width >= 40rem) { .btx-help-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.btx-help-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  transition: border-color 200ms;
}
.btx-help-pager__link:hover { border-color: color-mix(in oklab, var(--foreground) 25%, transparent); }
.btx-help-pager__link--next { text-align: end; grid-column: -2; }
.btx-help-pager__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; }
.btx-help-pager__title { color: var(--brand-plum); font-size: var(--text-sm); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .btx-help-card, .btx-help-card__arrow, .btx-help-q__chevron { transition: none; }
}

/* ---- Answer content: paragraphs, lists and the safety note ---------------------------------------- */
.btx-help-q__answer > * + * { margin-top: 0.875rem; }
.btx-help-q__list {
  padding-inline-start: 1.25rem;
  list-style: disc;
}
.btx-help-q__list--steps { list-style: decimal; }
.btx-help-q__list li { padding-inline-start: 0.25rem; }
.btx-help-q__list li + li { margin-top: 0.375rem; }
.btx-help-q__list li::marker { color: var(--brand-plum); }
.btx-help-q__list--steps li::marker { font-weight: 600; }
.btx-help-q__callout {
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in oklab, var(--brand-coral) 35%, transparent);
  border-inline-start: 3px solid var(--brand-coral);
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--brand-coral) 6%, var(--card));
}
.btx-help-q__callout > p + p { margin-top: 0.375rem; }
.btx-help-q__callout-title {
  color: var(--brand-plum);
  font-size: var(--text-sm);
  font-weight: 600;
}