/* HBP Support Articles — documentation-specific UI.
   Loaded only on /support/ and on pages marked as a Support Article. */

.hbp-support-wrap .hbp-feed-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hbp-primary, #2563EB);
    margin: 0 0 8px;
}

.hbp-support-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--hbp-gray-500, #64748B);
    margin: 8px 0 0;
}
.hbp-support-meta .hbp-feed-meta-sep { color: var(--hbp-gray-300, #CBD5E1); }

/* Support article wrap needs more room than the 720px novel-reading
   column used by plain pages/posts, since it hosts a 3-column layout
   (TOC | article | sidebar). Keep it aligned with the site's other
   wide containers (header/footer/home feed all use 1180px). */
.hbp-single-wrap.hbp-support-wrap {
    max-width: 1180px;
}

/* Layout: TOC | article | sidebar.
   The grid only ever defines tracks for the columns that are actually
   visible at the current breakpoint, so the aside(s) never reserve
   empty space that starves the article column. */
.hbp-support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
.hbp-support-toc-col, .hbp-support-sidebar-col { display: none; }
@media (min-width: 900px) {
    .hbp-support-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .hbp-support-toc-col { display: block; }
}
@media (min-width: 1024px) {
    .hbp-support-layout { grid-template-columns: 220px minmax(0, 1fr) 260px; }
    .hbp-support-sidebar-col { display: block; }
}

.hbp-support-toc {
    position: sticky;
    top: 90px;
    padding: 16px;
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: var(--hbp-radius, 14px);
    font-size: 13px;
}
.hbp-support-toc-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hbp-gray-400, #94A3B8); margin-bottom: 10px; }
.hbp-support-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hbp-support-toc a { color: var(--hbp-gray-600, #475569); text-decoration: none; line-height: 1.4; display: block; }
.hbp-support-toc a:hover { color: var(--hbp-primary, #2563EB); }
.hbp-support-toc .hbp-toc-lvl-3 { padding-left: 14px; font-size: 12.5px; }

/* Helpful voting */
.hbp-support-helpful {
    margin-top: 32px;
    padding: 20px;
    text-align: center;
    background: var(--hbp-gray-50, #F8FAFC);
    border-radius: var(--hbp-radius, 14px);
}
.hbp-support-helpful-q { font-weight: 700; margin: 0 0 12px; }
.hbp-support-helpful-btns { display: flex; justify-content: center; gap: 10px; }
.hbp-support-vote {
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    background: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.hbp-support-vote:hover { border-color: var(--hbp-primary, #2563EB); transform: translateY(-1px); }
.hbp-support-vote i { margin-right: 6px; }
.hbp-support-vote-count { color: var(--hbp-gray-400, #94A3B8); margin-left: 4px; }
.hbp-support-helpful-thanks { font-weight: 600; color: var(--hbp-success, #16A34A); margin: 0; }

/* Previous / Next */
.hbp-support-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}
.hbp-support-prevnext-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-radius: var(--hbp-radius, 14px);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.hbp-support-prevnext-link:hover { border-color: var(--hbp-primary, #2563EB); transform: translateY(-2px); }
.hbp-support-next { grid-column: 2; text-align: right; }
.hbp-support-prevnext-label { font-size: 12px; font-weight: 700; color: var(--hbp-gray-400, #94A3B8); text-transform: uppercase; letter-spacing: .04em; }
.hbp-support-prevnext-title { font-weight: 700; color: var(--hbp-gray-800, #1E293B); }

/* Related articles + hub grid (shared card style) */
.hbp-support-related, .hbp-support-hub-group { margin-top: 32px; }
.hbp-support-related-title, .hbp-support-hub-group-title { font-weight: 800; font-size: 15px; margin: 0 0 14px; }
.hbp-support-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.hbp-support-related-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--hbp-gray-200, #E2E8F0);
    border-radius: var(--hbp-radius, 14px);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.hbp-support-related-card:hover { border-color: var(--hbp-primary, #2563EB); transform: translateY(-2px); }
.hbp-support-related-card-title { font-weight: 700; color: var(--hbp-gray-800, #1E293B); }
.hbp-support-related-card-excerpt { font-size: 13px; color: var(--hbp-gray-500, #64748B); line-height: 1.5; }

/* Sidebar (category nav) */
.hbp-support-sidebar-box {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hbp-support-hub-link { font-weight: 700; font-size: 13px; color: var(--hbp-primary, #2563EB); text-decoration: none; }
.hbp-support-sidebar-group-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hbp-gray-400, #94A3B8); margin-bottom: 8px; }
.hbp-support-sidebar-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hbp-support-sidebar-group a { font-size: 13.5px; color: var(--hbp-gray-600, #475569); text-decoration: none; line-height: 1.4; }
.hbp-support-sidebar-group a:hover { color: var(--hbp-primary, #2563EB); }
.hbp-support-sidebar-active a { color: var(--hbp-primary, #2563EB); font-weight: 700; }

/* Hub page header */
.hbp-support-hub-wrap { max-width: 900px; margin: 0 auto; padding: 32px 20px 80px; }
.hbp-support-hub-header { margin-bottom: 24px; }