/*
 * Help center (P-24): search box, article typography, table of contents, callouts, feedback. It reuses the vocabulary of
 * front-site.css (.front-hero, .front-card, .front-prose, .front-side, .front-media) and adds only what articles need.
 */
.help-search { position: relative; z-index: 10; max-width: 44rem; }
.help-search-box { display: flex; gap: .5rem; align-items: center; position: relative; }
/* The icon is centred on the field alone, so it stays inside it when the button wraps below on phones */
.help-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.help-search-box .form-control,
.help-search-box .form-control.form-control-lg { padding-inline-start: 3.1rem; }
/* The suggestions hang below the hero: it must not clip them and must sit above the next section */
.front-hero.help-hero { overflow: visible; }
.help-search-icon { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--bs-secondary-color); pointer-events: none; z-index: 3; }
.help-search-results { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + .35rem); max-height: 24rem; overflow-y: auto; box-shadow: var(--front-shadow); }
.help-search-results { background: var(--bs-paper-bg, var(--bs-body-bg)); border-radius: .5rem; }
.help-search-results .list-group-item { background: transparent; display: flex; flex-direction: column; gap: .15rem; }

.help-result-list .list-group-item { padding: 1rem 1.25rem; }
.help-article-card { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.1rem 1.25rem; border: 1px solid var(--front-border); border-radius: .85rem; background: var(--bs-paper-bg, var(--bs-body-bg)); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.help-article-card:hover, .help-article-card:focus-visible { border-color: var(--bs-primary); transform: translateY(-2px); color: inherit; }
.help-article-card .fw-semibold { color: var(--bs-heading-color); }

.help-article-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.help-category-links li + li { margin-top: .6rem; }
.help-category-links a { text-decoration: none; }

/* Article body */
.help-prose h2 { scroll-margin-top: 6.5rem; }
.help-prose h3 { font-size: 1.2rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.help-prose ol, .help-prose ul { padding-inline-start: 1.4rem; margin-bottom: 1.25rem; }
.help-prose li { margin-bottom: .45rem; }
.help-prose ol { counter-reset: help-step; list-style: none; padding-inline-start: 0; }
.help-prose ol > li { counter-increment: help-step; position: relative; padding-inline-start: 2.6rem; min-height: 1.9rem; }
.help-prose ol > li::before { content: counter(help-step); position: absolute; inset-inline-start: 0; top: .1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); font-weight: 700; font-size: .9rem; display: grid; place-items: center; }
.help-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--bs-info); border-radius: .5rem; background: rgba(var(--bs-info-rgb), .08); }
.help-prose blockquote p:last-child { margin-bottom: 0; }
.help-prose table { width: 100%; margin-bottom: 1.25rem; border-collapse: collapse; font-size: .95rem; }
.help-prose th, .help-prose td { padding: .6rem .75rem; border: 1px solid var(--front-border); text-align: start; vertical-align: top; }
.help-prose th { background: var(--front-soft); }
.help-figure { margin: 0 0 2rem; }
.help-figure figcaption { margin-top: .6rem; font-size: .85rem; color: var(--bs-secondary-color); }
.help-figure img { display: block; width: 100%; height: auto; }

.help-side .help-toc a { display: block; padding: .3rem 0; text-decoration: none; }
.help-toc { margin-bottom: 1.25rem; }

.help-feedback { margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--front-border); border-radius: var(--front-radius); background: var(--front-soft); }
.help-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.help-pager a { display: flex; flex-direction: column; text-decoration: none; max-width: 48%; }

/* The «?» panel inside the application (help-panel.js) */
.help-panel .help-panel-body img { max-width: 100%; height: auto; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.help-panel .help-panel-body h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.help-panel .help-panel-body ol { padding-inline-start: 1.25rem; }
.help-panel .help-panel-body blockquote { margin: 1rem 0; padding: .75rem 1rem; border-inline-start: 4px solid var(--bs-info); background: rgba(var(--bs-info-rgb), .08); border-radius: .4rem; }
.help-panel .help-panel-body table { width: 100%; font-size: .9rem; }
.help-panel .help-panel-body th, .help-panel .help-panel-body td { padding: .4rem .5rem; border: 1px solid var(--bs-border-color); }

@media (max-width: 575.98px) {
  .help-search-box { flex-wrap: wrap; }
  .help-search-box .btn, .help-search-field { flex-basis: 100%; width: 100%; }
  .help-pager { flex-direction: column; }
  .help-pager a { max-width: 100%; }
}