/**
 * Help Center Styles
 * Comprehensive styling for help center pages
 * 
 * Requirements: 4.9, 4.10, 10.1
 */

/* Base Help Center Container */
.help-center {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    overflow-x: hidden;
}

/* Page Header */
.help-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.help-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary, #1e293b);
    margin-bottom: 0.5rem;
}

.help-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary, #64748b);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Category Page Header */
.category-header {
    margin-bottom: 2rem;
}

.category-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #1e293b);
}

.help-categories h2,
.help-popular h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #1e293b);
}

/* Breadcrumb Navigation */
.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 0.5rem;
    color: var(--text-secondary, #94a3b8);
}

.breadcrumb a {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--text-secondary, #64748b);
}

/* Search Components */
.help-search-container {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    position: relative;
}

.help-search-form {
    display: flex;
    gap: 0;
    background: var(--bg-primary, #fff);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.help-search-form:focus-within {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.help-search-input {
    flex: 1;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary, #1e293b);
    min-width: 0;
}

.help-search-input::placeholder {
    color: var(--text-secondary, #94a3b8);
}

.help-search-button {
    padding: 0.85rem 1.25rem;
    background: var(--color-primary, #2563eb);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-search-button:hover {
    background: #1d4ed8;
}

/* Autocomplete */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10;
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9rem;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
    background: var(--bg-secondary, #f1f5f9);
    outline: none;
}

/* Category Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary, #2563eb);
}

.category-card:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

.category-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-primary, #1e293b);
}

.category-description {
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-size: 0.88rem;
    flex: 1;
}

.category-count {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}

/* Article Lists */
.articles-list,
.popular-articles-list,
.related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-item,
.popular-articles-list li {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.article-link,
.popular-article-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-radius: 8px;
    margin: 0 -0.75rem;
}

.article-link:hover,
.popular-article-link:hover {
    background: var(--bg-secondary, #f1f5f9);
}

.article-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.article-category {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}

.article-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

/* Article Content */
.help-article {
    margin-bottom: 3rem;
}

.article-header {
    margin-bottom: 2rem;
}

.article-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #1e293b);
}

.article-content {
    line-height: 1.75;
    font-size: 1rem;
    color: var(--text-primary, #334155);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #1e293b);
}

.article-content p { margin-bottom: 1rem; }

.article-content ul,
.article-content ol {
    margin-bottom: 1rem;
    padding-left: 1.75rem;
}

.article-content li { margin-bottom: 0.4rem; }

.article-content code {
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88em;
}

.article-content pre {
    background: var(--bg-secondary, #f1f5f9);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.article-content pre code { background: none; padding: 0; }

.article-content a {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.article-content a:hover { text-decoration: underline; }

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.article-content blockquote {
    border-left: 4px solid var(--color-primary, #2563eb);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary, #64748b);
    font-style: italic;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    overflow-x: auto;
    display: block;
}

.article-content th,
.article-content td {
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.9rem;
}

.article-content th {
    background: var(--bg-secondary, #f1f5f9);
    font-weight: 600;
}

/* Article Tags */
.article-tags {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.tags-label {
    font-weight: 600;
    margin-right: 0.5rem;
    font-size: 0.85rem;
}

.tag {
    display: inline-block;
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
    color: var(--text-secondary, #64748b);
    transition: background 0.15s;
}

.tag:hover { background: var(--border-color, #e2e8f0); }

/* Feedback Widget */
.article-feedback {
    background: var(--bg-secondary, #f8fafc);
    padding: 1.75rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color, #e2e8f0);
}

.article-feedback h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #1e293b);
}

.feedback-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.feedback-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: var(--text-primary, #334155);
}

.feedback-button:hover {
    border-color: var(--color-primary, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}

.feedback-form { margin-top: 1rem; }

.feedback-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.feedback-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    resize: vertical;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
}

.feedback-submit {
    padding: 0.6rem 1.25rem;
    background: var(--color-primary, #2563eb);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s;
}

.feedback-submit:hover { background: #1d4ed8; }

.feedback-thanks {
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    color: #059669;
    text-align: center;
    font-weight: 500;
}

/* Related Articles */
.related-articles { margin-top: 2rem; }

.related-articles h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #1e293b);
}

.related-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.related-link {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.related-link:hover { text-decoration: underline; }

/* Search Results */
.results-header { margin-bottom: 1.25rem; }

.results-header h2 {
    font-size: 1.1rem;
    color: var(--text-primary, #1e293b);
}

.results-list { list-style: none; padding: 0; margin: 0; }

.result-item {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 1.25rem 0;
}

.result-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.result-link:hover .result-title { color: var(--color-primary, #2563eb); }

.result-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    transition: color 0.2s;
    color: var(--text-primary, #1e293b);
}

.result-snippet {
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.5rem;
    line-height: 1.6;
    font-size: 0.9rem;
}

.result-snippet mark {
    background: rgba(250, 204, 21, 0.3);
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
    color: inherit;
}

.result-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

/* Empty States */
.help-empty,
.search-empty {
    text-align: center;
    color: var(--text-secondary, #94a3b8);
    padding: 2rem;
}

.search-empty h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #1e293b);
}

.search-suggestions {
    margin-top: 1.5rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.search-suggestions h3 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.search-suggestions ul { list-style: disc; padding-left: 1.5rem; }
.search-suggestions li { margin-bottom: 0.4rem; font-size: 0.9rem; }
.search-suggestions a { color: var(--color-primary, #2563eb); text-decoration: none; }
.search-suggestions a:hover { text-decoration: underline; }

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .help-center { padding: 1rem; }
    .help-header { margin-bottom: 1.5rem; }
    .help-header h1 { font-size: 1.5rem; }
    .help-subtitle { font-size: 0.95rem; }
    .help-categories h2, .help-popular h2 { font-size: 1.15rem; }
    .article-header h1 { font-size: 1.35rem; }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .category-card { padding: 1.15rem; }
    .category-name { font-size: 1rem; }

    .article-meta, .result-meta {
        flex-direction: column;
        gap: 0.2rem;
    }

    .feedback-buttons { flex-direction: column; }

    .popular-article-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .help-search-container { margin-bottom: 1.75rem; }
}

@media (max-width: 480px) {
    .help-center { padding: 0.75rem; }

    .help-search-input {
        padding: 0.7rem 0.85rem;
        font-size: 0.88rem;
    }

    .help-search-button { padding: 0.7rem 0.85rem; }

    .category-card { padding: 1rem; }
    .article-feedback { padding: 1.25rem; }
    .article-content { font-size: 0.95rem; }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    .help-search-container, .article-feedback, .related-articles { display: none; }
    .help-center { max-width: 100%; padding: 0; }
    .article-content { font-size: 12pt; }
}

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] .help-header h1 { color: var(--text-primary, #f1f5f9); }
[data-theme="dark"] .help-subtitle { color: var(--text-secondary, #94a3b8); }

[data-theme="dark"] .breadcrumb li:not(:last-child)::after { color: #64748b; }
[data-theme="dark"] .breadcrumb a { color: #60a5fa; }
[data-theme="dark"] .breadcrumb [aria-current="page"] { color: #94a3b8; }

[data-theme="dark"] .help-search-form { background: var(--bg-primary, #1e293b); border-color: #334155; }
[data-theme="dark"] .help-search-input { color: #f1f5f9; }
[data-theme="dark"] .help-search-input::placeholder { color: #64748b; }
[data-theme="dark"] .help-search-form:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }

[data-theme="dark"] .autocomplete-results { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .autocomplete-item:hover { background: #334155; }

[data-theme="dark"] .category-card { background: var(--bg-primary, #1e293b); border-color: #334155; }
[data-theme="dark"] .category-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: #60a5fa; }
[data-theme="dark"] .category-name { color: #f1f5f9; }
[data-theme="dark"] .category-description { color: #94a3b8; }
[data-theme="dark"] .category-count { color: #64748b; }

[data-theme="dark"] .article-item,
[data-theme="dark"] .popular-articles-list li { border-bottom-color: #334155; }
[data-theme="dark"] .article-link:hover,
[data-theme="dark"] .popular-article-link:hover { background: #334155; }
[data-theme="dark"] .article-title { color: #f1f5f9; }
[data-theme="dark"] .article-meta { color: #64748b; }

[data-theme="dark"] .article-header h1 { color: #f1f5f9; }
[data-theme="dark"] .article-content { color: #cbd5e1; }
[data-theme="dark"] .article-content h1,
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3,
[data-theme="dark"] .article-content h4,
[data-theme="dark"] .article-content h5,
[data-theme="dark"] .article-content h6 { color: #f1f5f9; }
[data-theme="dark"] .article-content code { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .article-content pre { background: #0f172a; }
[data-theme="dark"] .article-content a { color: #60a5fa; }
[data-theme="dark"] .article-content blockquote { border-left-color: #60a5fa; color: #94a3b8; }
[data-theme="dark"] .article-content th { background: #334155; }
[data-theme="dark"] .article-content th,
[data-theme="dark"] .article-content td { border-color: #334155; }

[data-theme="dark"] .article-tags { border-top-color: #334155; }
[data-theme="dark"] .tag { background: #334155; color: #cbd5e1; }

[data-theme="dark"] .article-feedback { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .article-feedback h2 { color: #f1f5f9; }
[data-theme="dark"] .feedback-button { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .feedback-button:hover { border-color: #60a5fa; background: #334155; }
[data-theme="dark"] .feedback-form textarea { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .feedback-thanks { background: rgba(16, 185, 129, 0.1); color: #34d399; }

[data-theme="dark"] .related-articles h2 { color: #f1f5f9; }
[data-theme="dark"] .related-list li { border-bottom-color: #334155; }
[data-theme="dark"] .related-link { color: #60a5fa; }

[data-theme="dark"] .result-item { border-bottom-color: #334155; }
[data-theme="dark"] .result-title { color: #f1f5f9; }
[data-theme="dark"] .result-snippet { color: #94a3b8; }
[data-theme="dark"] .result-snippet mark { background: rgba(250, 204, 21, 0.2); color: #fde68a; }
[data-theme="dark"] .result-meta { color: #64748b; }
[data-theme="dark"] .search-empty h2 { color: #f1f5f9; }

/* ── RTL Support ────────────────────────────────────────────── */
[dir="rtl"] .help-center { direction: rtl; }
[dir="rtl"] .breadcrumb ol { direction: rtl; }
[dir="rtl"] .breadcrumb li:not(:last-child)::after {
    content: '‹';
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .help-search-input { text-align: right; }

[dir="rtl"] .article-content blockquote {
    border-left: none;
    border-right: 4px solid var(--color-primary, #2563eb);
    padding-left: 0;
    padding-right: 1rem;
}
[data-theme="dark"][dir="rtl"] .article-content blockquote { border-right-color: #60a5fa; }

[dir="rtl"] .article-content ul,
[dir="rtl"] .article-content ol {
    padding-left: 0;
    padding-right: 1.75rem;
}

[dir="rtl"] .tags-label { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .tag { margin-right: 0; margin-left: 0.4rem; }

[dir="rtl"] .popular-article-link { flex-direction: row-reverse; }
@media (max-width: 768px) {
    [dir="rtl"] .popular-article-link { flex-direction: column; align-items: flex-end; }
}

[dir="rtl"] .search-suggestions ul { padding-left: 0; padding-right: 1.5rem; }

[dir="rtl"] .article-link,
[dir="rtl"] .popular-article-link {
    margin: 0 -0.75rem;
    padding: 1rem 0.75rem;
}

[dir="rtl"] .article-content table { direction: rtl; }
[dir="rtl"] .article-content th,
[dir="rtl"] .article-content td { text-align: right; }

[dir="rtl"] .feedback-form textarea { direction: rtl; }

/* ============================================================================
   HELP CENTER — DESIGN LAYER v2  (2026)
   Appended last so it wins the cascade. Fixes the inverted heading scale
   (body headings were larger than the article title), adds the hero, icon
   category grid, two-column category layout with a sidebar tree, sub-category
   sections, the article "On this page" TOC, reading meta, prev/next, and a
   premium look. Fully RTL + dark-mode aware. Everything is scoped under
   .help-center so it never leaks into the rest of the site.
   ============================================================================ */

.help-center {
    /* Local design tokens — fall back to the global palette. */
    --hc-radius: 16px;
    --hc-radius-sm: 10px;
    --hc-gap: 1.25rem;
    --hc-accent: var(--color-primary, #2563eb);
    --hc-accent-soft: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
    --hc-card-bg: var(--bg-primary, #ffffff);
    --hc-card-border: var(--border-color, #e6e9ef);
    --hc-ink: var(--text-primary, #0f172a);
    --hc-ink-soft: var(--text-secondary, #64748b);
    --hc-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --hc-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .12);
    max-width: 1200px;
}

/* ── HEADING SCALE (authoritative — overrides main.css h1..h4) ───────────── */
.help-center .help-header h1,
.help-center .hc-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.help-center .category-header h1,
.help-center .article-header h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.help-center .help-categories h2,
.help-center .help-popular h2,
.help-center .hc-section > h2,
.help-center .related-articles h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Article BODY headings — deliberately SMALLER than the article title so the
   hierarchy reads correctly (this is the bug the owner flagged). */
.help-center .article-content h1 { font-size: 1.5rem;   font-weight: 700; }
.help-center .article-content h2 { font-size: 1.375rem; font-weight: 700; margin-top: 2rem; }
.help-center .article-content h3 { font-size: 1.125rem; font-weight: 650; margin-top: 1.5rem; }
.help-center .article-content h4 { font-size: 1rem;     font-weight: 650; margin-top: 1.25rem; text-transform: none; }
.help-center .article-content h5,
.help-center .article-content h6 { font-size: 0.95rem;  font-weight: 600; }
.help-center .category-name,
.help-center .hc-cat-card__title { font-size: 1.2rem; font-weight: 700; }

/* ── HERO (home) ─────────────────────────────────────────────────────────── */
.help-center .hc-hero {
    text-align: center;
    padding: 2.5rem 1rem 0.5rem;
}
.help-center .hc-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--hc-accent);
    background: var(--hc-accent-soft);
    padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.help-center .hc-hero .help-subtitle { max-width: 620px; font-size: 1.125rem; }

/* Popular-question chips under the hero search */
.help-center .hc-chips {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    margin: 1.1rem auto 0; max-width: 720px;
}
.help-center .hc-chip {
    font-size: .85rem; font-weight: 500;
    color: var(--hc-ink-soft);
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid transparent;
    padding: .45rem .85rem; border-radius: 999px;
    text-decoration: none; transition: all .15s ease;
    white-space: nowrap;
}
.help-center .hc-chip:hover {
    color: var(--hc-accent); border-color: var(--hc-accent);
    background: var(--hc-accent-soft); transform: translateY(-1px);
}

/* ── ICON CATEGORY GRID ──────────────────────────────────────────────────── */
.help-center .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--hc-gap);
}
.help-center .category-card,
.help-center .hc-cat-card {
    position: relative;
    border-radius: var(--hc-radius);
    border: 1px solid var(--hc-card-border);
    background: var(--hc-card-bg);
    box-shadow: var(--hc-shadow);
    padding: 1.5rem 1.4rem;
    overflow: hidden;
}
.help-center .category-card::before {
    /* subtle top accent that grows on hover */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--hc-accent), color-mix(in srgb, var(--hc-accent) 40%, #a855f7));
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.help-center .category-card:hover { box-shadow: var(--hc-shadow-hover); transform: translateY(-4px); }
.help-center .category-card:hover::before { transform: scaleX(1); }
.help-center [dir="rtl"] .category-card::before { transform-origin: right; }

.help-center .hc-cat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--hc-accent-soft); color: var(--hc-accent);
    margin-bottom: 1rem;
}
.help-center .hc-cat-icon svg { width: 22px; height: 22px; }
.help-center .category-count {
    display: inline-block; margin-top: .9rem;
    color: var(--hc-ink-soft);
}

/* ── PUBLISHER BAND (home) ───────────────────────────────────────────────── */
.help-center .hc-publisher-band {
    margin: 2.5rem 0;
    padding: 1.5rem 1.6rem;
    border-radius: var(--hc-radius);
    background: linear-gradient(135deg, color-mix(in srgb, var(--hc-accent) 8%, transparent), transparent);
    border: 1px solid var(--hc-card-border);
}
.help-center .hc-publisher-band__head {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.help-center .hc-publisher-band__head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.help-center .hc-publisher-band .categories-grid { margin: 0; }

/* Page-level search that sits ABOVE the sidebar+content layout (category /
   article pages). Capped to a comfortable width and centered in the page. */
.help-center .help-search-container--wide {
    max-width: 560px;
    margin: 0 auto 2rem;
}

/* ── TWO-COLUMN CATEGORY / ARTICLE LAYOUT with SIDEBAR TREE ──────────────── */
.help-center .hc-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.help-center .hc-sidebar {
    position: sticky; top: 88px;
    align-self: start;
    max-height: calc(100vh - 110px); overflow-y: auto;
    padding-right: .5rem;
}
.help-center .hc-tree { list-style: none; margin: 0; padding: 0; }
.help-center .hc-tree__section + .hc-tree__section { margin-top: .35rem; }
.help-center .hc-tree a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .7rem; border-radius: 8px;
    color: var(--hc-ink-soft); text-decoration: none; font-size: .9rem;
    transition: background .15s, color .15s;
}
.help-center .hc-tree a:hover { background: var(--bg-secondary, #f1f5f9); color: var(--hc-ink); }
.help-center .hc-tree a.is-active {
    background: var(--hc-accent-soft); color: var(--hc-accent); font-weight: 650;
}
.help-center .hc-tree__parent > a { font-weight: 650; color: var(--hc-ink); }
.help-center .hc-tree__children { list-style: none; margin: .15rem 0 .35rem; padding: 0 0 0 .8rem; }
.help-center [dir="rtl"] .hc-tree__children { padding: 0 .8rem 0 0; }
.help-center .hc-tree__children a { font-size: .875rem; }
.help-center .hc-tree__count {
    font-size: .72rem; font-weight: 600; color: var(--hc-ink-soft);
    background: var(--bg-secondary, #f1f5f9); border-radius: 999px; padding: .05rem .45rem;
}

/* ── SUB-CATEGORY SECTIONS (category page) ───────────────────────────────── */
.help-center .hc-subcat + .hc-subcat { margin-top: 2.25rem; }
.help-center .hc-subcat__head {
    display: flex; align-items: baseline; gap: .6rem;
    padding-bottom: .5rem; margin-bottom: .35rem;
    border-bottom: 1px solid var(--hc-card-border);
}
.help-center .hc-subcat__head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.help-center .hc-subcat__desc { color: var(--hc-ink-soft); font-size: .9rem; margin: 0 0 .5rem; }

/* Article rows carry a one-line summary now */
.help-center .article-link .article-title { display: block; margin-bottom: .15rem; }
.help-center .hc-article-summary {
    font-size: .85rem; color: var(--hc-ink-soft); line-height: 1.5;
    display: block; max-width: 60ch;
}
.help-center .article-link {
    flex-direction: column; align-items: flex-start;
}
.help-center .article-link .article-meta { margin-top: .3rem; }

/* ── ARTICLE PAGE: content column + "On this page" TOC ───────────────────── */
.help-center .hc-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 2.5rem; align-items: start;
}
.help-center .hc-toc {
    position: sticky; top: 88px; align-self: start;
    font-size: .85rem;
    border-inline-start: 2px solid var(--hc-card-border);
    padding-inline-start: 1rem;
}
.help-center .hc-toc__title {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hc-ink-soft); margin: 0 0 .6rem;
}
.help-center .hc-toc ul { list-style: none; margin: 0; padding: 0; }
.help-center .hc-toc li { margin: .1rem 0; }
.help-center .hc-toc a {
    display: block; padding: .25rem 0; color: var(--hc-ink-soft);
    text-decoration: none; border-inline-start: 2px solid transparent;
    margin-inline-start: -1rem; padding-inline-start: 1rem; transition: color .15s, border-color .15s;
}
.help-center .hc-toc a:hover { color: var(--hc-ink); }
.help-center .hc-toc a.is-active { color: var(--hc-accent); border-inline-start-color: var(--hc-accent); font-weight: 600; }
.help-center .hc-toc a[data-depth="3"] { padding-inline-start: 1.9rem; font-size: .82rem; }

/* article headings get scroll-margin so anchor jumps clear the sticky nav */
.help-center .article-content :is(h2, h3, h4) { scroll-margin-top: 96px; }

/* Reading meta row under the title */
.help-center .hc-article-meta {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    color: var(--hc-ink-soft); font-size: .85rem; margin-top: .5rem;
}
.help-center .hc-article-meta .hc-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* Prev / Next */
.help-center .hc-prevnext {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem;
}
.help-center .hc-prevnext a {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1rem 1.15rem; border: 1px solid var(--hc-card-border); border-radius: var(--hc-radius-sm);
    text-decoration: none; color: var(--hc-ink); background: var(--hc-card-bg);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.help-center .hc-prevnext a:hover { border-color: var(--hc-accent); box-shadow: var(--hc-shadow); transform: translateY(-2px); }
.help-center .hc-prevnext__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--hc-ink-soft); }
.help-center .hc-prevnext__title { font-weight: 650; font-size: .95rem; }
.help-center .hc-prevnext__next { text-align: right; }
.help-center [dir="rtl"] .hc-prevnext__next { text-align: left; }

/* ── "STILL STUCK?" FOOTER CTA ───────────────────────────────────────────── */
.help-center .hc-still-stuck {
    margin-top: 3rem; padding: 2rem 1.6rem; text-align: center;
    border-radius: var(--hc-radius);
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--hc-card-border);
}
.help-center .hc-still-stuck h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.help-center .hc-still-stuck p { color: var(--hc-ink-soft); margin: 0 0 1.1rem; }
.help-center .hc-still-stuck__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.help-center .hc-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
    text-decoration: none; transition: all .15s ease;
}
.help-center .hc-btn--primary { background: var(--hc-accent); color: #fff; }
.help-center .hc-btn--primary:hover { background: #1d4ed8; transform: translateY(-1px); }
.help-center .hc-btn--ghost { background: transparent; color: var(--hc-ink); border: 1px solid var(--hc-card-border); }
.help-center .hc-btn--ghost:hover { border-color: var(--hc-accent); color: var(--hc-accent); }

/* ── FOCUS VISIBILITY (a11y) ─────────────────────────────────────────────── */
.help-center a:focus-visible,
.help-center button:focus-visible,
.help-center .hc-chip:focus-visible,
.help-center .category-card:focus-visible {
    outline: 2px solid var(--hc-accent); outline-offset: 2px; border-radius: 6px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .help-center .hc-layout,
    .help-center .hc-article-layout { grid-template-columns: 1fr; }
    /* Sidebar tree becomes a collapsible block at the top; TOC collapses. */
    .help-center .hc-sidebar { position: static; max-height: none; margin-bottom: 1.5rem; }
    .help-center .hc-toc {
        position: static; border-inline-start: 0; padding-inline-start: 0;
        border: 1px solid var(--hc-card-border); border-radius: var(--hc-radius-sm);
        padding: 1rem 1.15rem; margin-bottom: 1.5rem;
    }
    .help-center .hc-toc[hidden] { display: none; }
}
@media (max-width: 640px) {
    .help-center { padding: 1.25rem; }
    .help-center .hc-hero { padding-top: 1.5rem; }
    .help-center .hc-prevnext { grid-template-columns: 1fr; }
    .help-center .categories-grid { grid-template-columns: 1fr; }
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .help-center {
    --hc-card-bg: #1e293b;
    --hc-card-border: #334155;
    --hc-ink: #f1f5f9;
    --hc-ink-soft: #94a3b8;
    --hc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --hc-shadow-hover: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
[data-theme="dark"] .help-center .hc-chip,
[data-theme="dark"] .help-center .hc-still-stuck,
[data-theme="dark"] .help-center .hc-tree a:hover { background: #0f172a; }
[data-theme="dark"] .help-center .hc-tree__count { background: #0f172a; }
[data-theme="dark"] .help-center .article-content :is(h1,h2,h3,h4,h5,h6) { color: #f1f5f9; }

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .help-center * { transition: none !important; }
    .help-center .category-card:hover,
    .help-center .hc-prevnext a:hover,
    .help-center .hc-chip:hover { transform: none; }
}