.help-container {
    max-width: 960px;
}

/* Bootstrap's default blue links/focus rings are off-brand; the help centre
   follows the same palette as the CMS content blocks (see brand.css). */
.help-container a {
    color: var(--gg-secondary);
}

.help-container a:hover,
.help-container a:focus {
    color: var(--gg-primary);
}

.help-container .breadcrumb-item.active {
    color: var(--gg-grey-medium);
}

.help-container .form-control:focus {
    border-color: var(--gg-accent);
    box-shadow: 0 0 0 0.2rem rgba(163, 255, 146, 0.25);
}

.help-container .list-group-item-action:hover,
.help-container .list-group-item-action:focus {
    background-color: var(--gg-grey-lightest);
}

.help-article {
    line-height: 1.7;
}

.help-article h2 {
    color: var(--gg-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.help-article img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gg-grey-lightest, #dee2e6);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.help-category-card {
    transition: box-shadow 0.15s ease-in-out;
}

.help-category-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.help-article-list {
    list-style: disc outside;
    padding-left: 1.25rem;
}

.help-article-list li {
    padding: 0.125rem 0;
    color: var(--bs-secondary-color, #6c757d);
}

.help-article-list li::marker {
    color: var(--bs-secondary-color, #6c757d);
}

.help-callout {
    border-left: 4px solid var(--gg-accent, #a3ff92);
    background: var(--gg-grey-lightest, #f8f9fa);
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    border-radius: 0.25rem;
}
.help-callout p { margin-bottom: 0; }

.help-article figure[data-shot] {
    margin: 1.5rem 0;
    padding: 0.5rem;
    border: 1px dashed var(--gg-grey-light, #dee2e6);
    border-radius: 0.5rem;
}
.help-article figure[data-shot] figcaption {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
    font-style: italic;
}