/* Help center — search hero, topic cards, contact options. */
.page-help .help-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem); }
.page-help .help-hero .breadcrumb { justify-content: center; }
@media (max-width: 991.98px) { .page-help .help-hero .breadcrumb { justify-content: flex-start; } }
.page-help .help-search { max-width: 640px; margin-inline: auto; }
.page-help .help-search .form-control { border: 0; }
.page-help .help-cat { border-top: 4px solid var(--brand-primary); }
.page-help .help-links { display: grid; gap: .1rem; }
.page-help .help-links a { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; color: var(--brand-text); font-weight: 500; border-bottom: 1px solid var(--brand-border); }
.page-help .help-links li:last-child a { border-bottom: 0; }
.page-help .help-links a i, .page-help .help-links a span[class*="fa-"] { color: var(--brand-primary); font-size: .75rem; transition: transform var(--transition-fast); }
.page-help .help-links a:hover { color: var(--brand-primary); }
.page-help .help-links a:hover i, .page-help .help-links a:hover span[class*="fa-"] { transform: translateX(3px); }
.page-help .contact-option { display: flex; flex-direction: column; }
.page-help .contact-option .btn { margin-top: auto; }
.page-help .accordion-button { font-family: var(--font-body); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
/* colors.css's `.accordion{}` block (light-only, no dark counterpart) hardcodes
   the expanded state to literal light hex (#282828 on #FDECEE) and a light-red
   focus ring, so an expanded FAQ row in dark mode would show near-black text on
   a near-black page. Scoped to .page-help so it wins on specificity without
   touching colors.css. Category-faq accordion lives on this page's FAQ/topic
   category view (category/faqs.php) and on the Contact page (see p-contact.css
   for its twin). */
[data-bs-theme=dark] .page-help .accordion {
    --bs-accordion-active-color: var(--brand-text);
    --bs-accordion-active-bg: var(--brand-primary-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .35);
    --bs-accordion-border-color: var(--brand-border);
}

/* Quick-link row in the hero (ported from eliteforce's support_links.php) — translucent
   circle badges, since these sit on the dark page-hero rather than a white card surface. */
.page-help .support-link { color: var(--brand-text-on-dark); text-decoration: none; }
/* --brand-bg-rgb flips with the theme (white in light, ink in dark), but this
   circle sits on .help-hero — a .page-hero band that is ALWAYS ink, in both
   themes. A flipping bg color here inverts to a near-invisible dark-on-dark
   circle once the page itself goes dark, so it's pinned to white on purpose,
   the same way --brand-text-on-dark is pinned rather than derived. */
.page-help .support-link-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .15); color: var(--brand-text-on-dark); font-size: 1.1rem; margin-bottom: .5rem; transition: background var(--transition-fast); }
.page-help .support-link:hover .support-link-icon, .page-help .support-link:focus-visible .support-link-icon { background: rgba(255, 255, 255, .28); }
.page-help .support-link-title { display: block; font-size: var(--text-sm); font-weight: 600; }

/* Help topic page (category/help.php) */
.page-help .help-topic-card { border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.page-help .help-topic-articles a { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; color: var(--brand-text); font-weight: 500; border-bottom: 1px solid var(--brand-border); }
.page-help .help-topic-articles li:last-child a { border-bottom: 0; }
.page-help .help-topic-articles a i { color: var(--brand-primary); font-size: .75rem; }

/* Popular Articles module (mod_articles/popular_items.php) */
.page-help .swiper-popular-articles { padding-bottom: .25rem; }

/* Popular Articles band: card slides with the nav arrows outside the track. */
.page-help .popular-articles .swiper-popular-articles { padding: .25rem .25rem 1rem; }
.page-help .popular-article-card { height: auto; padding: 1.5rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-top: 4px solid var(--brand-primary); border-radius: var(--radius-sm); }
.page-help .popular-article-card h4, .page-help .popular-article-card .h5 { font-family: var(--font-heading); text-transform: uppercase; }
.page-help .popular-article-card a:hover, .page-help .popular-article-card a:focus-visible { color: var(--brand-primary) !important; }
.page-help .popular-articles .btn-icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm) !important; }
@media (max-width: 575.98px) { .page-help .popular-articles .position-absolute { display: none; } }