/* Help centre (templates/core/help.html). Loaded after info-pages.css, whose
   .ip-faq styles the questions. */

.hc-search { position: relative; max-width: 620px; margin: 22px 0 0; }
.hc-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--slate); }
.hc-search input { width: 100%; min-height: 56px; padding: 0 18px 0 48px; border: 1px solid rgba(23,17,28,.18); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.hc-search input:focus { outline: 3px solid #C99BC8; outline-offset: 1px; border-color: var(--plum); }
.hc-count { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--slate); }

.hc-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0 0 56px; }
.hc-topics[hidden] { display: none; }
.hc-topic { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.hc-topic:hover { border-color: var(--plum); transform: translateY(-2px); }
.hc-topic i { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 50%; background: #F2E6F2; color: var(--plum); }
.hc-topic strong { font-size: 17px; }
.hc-topic span { font-size: 14px; line-height: 1.5; color: var(--slate); }

.hc-section { scroll-margin-top: 100px; }
.hc-section[hidden] { display: none; }
.hc-body details { scroll-margin-top: 100px; }
.hc-body details[hidden] { display: none; }
.hc-answer { padding: 0 22px 20px; font-size: 16px; line-height: 1.7; color: #2C2136; }
.hc-body .hc-answer p { margin: 0 0 12px; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.hc-body .hc-answer p:last-child { margin-bottom: 0; }
.hc-answer ul, .hc-answer ol { margin: 0 0 12px; padding-left: 22px; }
.hc-answer li { margin: 4px 0; }
.hc-answer a { color: var(--plum); font-weight: 600; }
.hc-none { margin: 24px 0 0; font-size: 16px; color: var(--slate); }

@media (prefers-reduced-motion: reduce) { .hc-topic { transition: none; } .hc-topic:hover { transform: none; } }