/* Help Center styles.
 *
 * Extracted from the inline <style> block that views/help/partials/chrome-top.ejs used to
 * re-ship on every render. chrome-top is the shared chrome for all three Help page types
 * (hub, section, article), so this file carries the rules for all of them — do not split it
 * per page type.
 *
 * Loaded from chrome-top.ejs after includes/head.ejs, so these rules sit last in the cascade
 * and keep overriding the theme exactly as the inline block did. The `!important`
 * declarations below are inherited from that block for the same reason: the theme's
 * `section.page-header h1` (assets/css/layout.css) and `.page-header .container h1`
 * (css/style.css) would otherwise win.
 */

/* The hero must out-specify the theme's `section.dark.page-header` and `.dark-background`, both
   of which set an opaque dark background with `!important` (css/style.css). A bare `.help-hero`
   loses that fight — which is why the background used to be repeated as an inline style attribute
   on the element. Qualifying the selector makes the stylesheet rule win on its own. */
section.page-header.help-hero { background-color: rgba(148, 149, 150, 0.12) !important; }
.help-hero h1 { font-size: 20px !important; color: #000 !important; }
.help-card { display: block; height: 100%; padding: 24px; border: 1px solid #eee; border-radius: 8px;
    background: #fff; transition: box-shadow .15s ease, transform .15s ease; color: inherit; }
.help-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-2px); text-decoration: none; }
.help-card .help-card-icon { font-size: 26px; color: #547698; margin-bottom: 10px; }
.help-card h3 { margin: 0 0 6px; font-size: 17px; }
.help-card p { margin: 0 0 8px; color: #777; font-size: 14px; }
.help-card .help-count { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: .5px; }
.help-grid > [class*="col-"] { margin-bottom: 24px; }
/* The hub's "Browse topics" heading is an <h2> for a gap-free heading outline, but keeps the
   smaller size it had as an <h3> (theme h2 is 30px, h3 is 24px). */
.help-section-title { font-size: 24px; }
.help-roles { margin: 14px 0 8px; }
.help-roles .btn { margin: 2px; }
.help-roles .btn.active { background: #547698; border-color: #547698; color: #fff; }
.help-search { max-width: 560px; margin: 14px auto 0; }
.help-article-body h2 { font-size: 18px; font-weight: 400; margin: 26px 0 8px; }
.help-article-body h3 { font-size: 15px; font-weight: 400; margin: 20px 0 6px; }
.help-article-body h4 { font-size: 14px; font-weight: 400; margin: 16px 0 6px; }
.help-article-body p, .help-article-body li { font-size: 14px; line-height: 1.6; }
/* The theme sets margin-bottom:30px on every <p>, which reads as a section break
   between consecutive paragraphs. Tighten it to a normal paragraph gap. */
.help-article-body p { margin-bottom: 12px; }
.help-article-item { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px; border-bottom: 1px solid #eee; }
.help-article-item a { font-size: 16px; }
.help-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px;
    border-radius: 10px; background: #f0f0f0; color: #888; }
.help-badge.optional { background: #eef4ff; color: #3b6cb7; }
.help-breadcrumb { font-size: 13px; color: #547698; margin-bottom: 14px; }
.help-breadcrumb a { color: #547698; }
/* The breadcrumb is a <nav> + <ol> (views/help/section.ejs and views/help/article.ejs) so
   assistive tech gets a landmark and an ordered list. These rules make it read as one inline
   trail again, and carry the "›" separator that used to be literal text between the links — as
   generated content it stays decorative instead of being announced as a crumb. Nothing here
   depends on the number of crumbs, so both the section trail and the article's longer one are
   covered; neither page should put separators in its markup or they will double up.
   `margin: 0` is load-bearing, not tidiness — essentials.css gives every <ol> a 30px bottom
   margin, which collapses through the <nav> and would quietly replace the 14px gap above with
   30px. `padding: 0` rather than padding-left, since the UA indent is on the inline-start side
   and flips under [dir="rtl"]. `display: inline` (not inline-block) keeps every inter-crumb
   space a line-break opportunity, as the flat inline run had. */
.help-breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.help-breadcrumb li { display: inline; }
.help-breadcrumb li + li::before { content: "\203A"; padding: 0 6px; }
.help-coming-soon { padding: 24px; background: #fafafa; border: 1px dashed #ddd; border-radius: 8px; color: #777; }
.help-contact { margin-top: 36px; padding: 22px; background: rgba(148, 149, 150, 0.08); border-radius: 8px; }
.help-empty { display: none; padding: 18px; color: #999; }
[dir="rtl"] .help-article-item { flex-direction: row-reverse; }