/* ============================================================
   Help Center theme – public pages (home + FAQ)
   Colours come from --hc-accent (set inline from the KB accent)
   ============================================================ */

body.theme-helpcenter {
    font-family: 'Raleway', 'Inter', system-ui, sans-serif;
    background: #fff;
    color: #1f2937;
}

/* ─── Top bar ──────────────────────────────────────────────────────────────── */
.hc-top {
    background: var(--hc-accent);
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.25rem 3rem;
}
.hc-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; flex-shrink: 0; min-width: 0; }
.hc-brand-logo  { height: 44px; max-width: 220px; object-fit: contain; }
.hc-brand-logo-solo { height: 56px; max-width: 320px; }
.hc-brand-emoji { font-size: 1.8rem; line-height: 1; }
.hc-brand-name  { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }

.hc-search { flex: 1; display: flex; min-width: 0; }
.hc-search input {
    flex: 1; min-width: 0;
    padding: 0 1.25rem; height: 56px;
    border: none; border-radius: 6px 0 0 6px;
    font-family: inherit; font-size: 1.05rem; color: #1f2937; background: #fff;
    outline: none;
}
.hc-search input::placeholder { color: #9ca3af; }
.hc-search button {
    height: 56px; padding: 0 2.25rem;
    background: var(--hc-accent-dark); color: #fff;
    border: none; border-radius: 0 6px 6px 0;
    font-family: inherit; font-size: 1.05rem; font-weight: 500;
    cursor: pointer; transition: filter .15s;
}
.hc-search button:hover { filter: brightness(1.2); }

.hc-browse {
    flex-shrink: 0;
    height: 56px; display: inline-flex; align-items: center; padding: 0 2.5rem;
    border: 1.5px solid rgba(255,255,255,.85); border-radius: 6px;
    color: #fff; text-decoration: none; font-size: 1.05rem; font-weight: 500;
    transition: background .15s;
}
.hc-browse:hover { background: rgba(255,255,255,.12); }

/* Browse categories dropdown */
.hc-browse-wrap { position: relative; flex-shrink: 0; }
.hc-browse { gap: .6rem; }
.hc-browse-caret { width: 18px; height: 18px; transition: transform .15s; }
.hc-browse[aria-expanded="true"] .hc-browse-caret { transform: rotate(180deg); }
.hc-menu {
    position: absolute; right: 0; top: calc(100% + .5rem);
    min-width: 280px; max-height: 70vh; overflow-y: auto;
    background: #fff; border: 1px solid #d5dbe5; border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: .4rem; z-index: 50;
}
.hc-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .85rem; border-radius: 4px;
    color: var(--hc-accent); text-decoration: none; font-size: .98rem; font-weight: 500;
}
.hc-menu-item:hover, .hc-menu-item:focus-visible { background: var(--hc-accent-tint); outline: none; }
.hc-menu-item.active { background: var(--hc-accent); color: #fff; }
.hc-menu-item.active .hc-menu-count { background: rgba(255,255,255,.25); color: #fff; }
.hc-menu-sub { padding-left: 2rem; font-weight: 400; }
.hc-menu-sub span:first-child::before { content: '›'; opacity: .5; margin-right: .5rem; }
.hc-menu-all { font-weight: 700; border-bottom: 1px solid #e6ebf2; border-radius: 4px 4px 0 0; margin-bottom: .25rem; }
.hc-menu-count { font-size: .78rem; color: #6b7280; background: #eceff3; border-radius: 999px; padding: .05rem .55rem; }
.hc-menu-empty { padding: .75rem .85rem; color: #6b7280; font-size: .9rem; }

/* ─── Breadcrumb strip ─────────────────────────────────────────────────────── */
.hc-crumb {
    background: #e6ebf2;
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 3rem;
    font-size: 1rem; color: var(--hc-accent);
}
.hc-crumb-label { font-weight: 700; margin-right: .3rem; }
.hc-crumb-home  { display: inline-flex; color: var(--hc-accent); }
.hc-crumb-sep   { color: var(--hc-accent); opacity: .6; }
.hc-crumb-current { font-weight: 500; }

/* ─── Shared content column ────────────────────────────────────────────────── */
.hc-main { max-width: 1240px; margin: 0 auto; padding: 2.5rem 3rem 4rem; }

/* ─── FAQ article ──────────────────────────────────────────────────────────── */
.theme-helpcenter .tutorial-body { padding: 0; background: #fff; }
.theme-helpcenter .viewer-layout { background: #fff; }
.theme-helpcenter .tutorial-content { max-width: none; padding: 0; }

.hc-article-title {
    display: flex; align-items: center; gap: .85rem;
    font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--hc-accent);
    padding-bottom: 1.25rem; border-bottom: 1px solid #4b5563;
    line-height: 1.3;
}
.hc-q-icon { flex-shrink: 0; width: 34px; height: 34px; color: var(--hc-accent); }

.hc-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: 1rem 0; border-bottom: 1px solid #4b5563;
    margin-bottom: 2rem;
}
.hc-meta-icon { width: 22px; height: 22px; color: var(--hc-accent); margin-right: .4rem; flex-shrink: 0; }
.hc-tag {
    background: #eceff3; color: var(--hc-accent);
    padding: .45rem .9rem; border-radius: 4px;
    font-size: 1rem; font-weight: 500; text-decoration: none;
    transition: background .15s;
}
.hc-tag:hover { background: #dfe4ec; }
.hc-desc { color: #4b5563; margin: -1rem 0 2rem; font-size: 1.05rem; }

/* "100% found this useful" pill */
.hc-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #e7f8f4; color: #36b39b;
    padding: .45rem 1rem; border-radius: 4px;
    font-size: 1rem; font-weight: 500;
}
.hc-pill svg { width: 20px; height: 20px; }
.hc-pill.low  { background: #fdecec; color: #dc2626; }
.hc-pill.mid  { background: #fff6e0; color: #d97706; }

/* body text */
.theme-helpcenter .text-block { font-size: 1.15rem; line-height: 1.7; color: #1f2937; }
.theme-helpcenter .text-block p { margin-bottom: 1rem; }
.theme-helpcenter .step-heading h2 { color: var(--hc-accent); }
.theme-helpcenter .step-num { background: var(--hc-accent); }

/* ─── Did this help you? ───────────────────────────────────────────────────── */
.theme-helpcenter .helpful-wrap {
    margin-top: 2.5rem; padding: 2rem 0 2.25rem;
    background: none; border: none; border-top: 1px solid #4b5563; border-bottom: 1px solid #4b5563; border-radius: 0;
    text-align: left;
}
.theme-helpcenter .helpful-ask { align-items: stretch; gap: 1rem; }
.hc-help-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.theme-helpcenter .helpful-q { font-size: 1.5rem; font-weight: 500; color: var(--hc-accent); }
.theme-helpcenter .helpful-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.theme-helpcenter .helpful-btn {
    justify-content: center; gap: .75rem;
    height: 64px; border-radius: 4px; border: none;
    font-size: 1.35rem; font-weight: 500;
}
.theme-helpcenter .helpful-icon { width: 1.3em; height: 1.3em; }
.theme-helpcenter .helpful-btn[data-helpful="1"] { background: #e7f8f4; color: #36b39b; }
.theme-helpcenter .helpful-btn[data-helpful="0"] { background: #fdecec; color: #dc2626; }
.theme-helpcenter .helpful-btn:hover:not(:disabled) { filter: brightness(.96); background: inherit; color: inherit; }
.theme-helpcenter .helpful-btn[data-helpful="1"]:hover:not(:disabled) { background: #d6f3ec; color: #2a9c86; }
.theme-helpcenter .helpful-btn[data-helpful="0"]:hover:not(:disabled) { background: #fbdada; color: #b91c1c; }
.theme-helpcenter .helpful-result { align-items: flex-start; gap: .5rem; }
.theme-helpcenter .helpful-thanks { font-size: 1.35rem; font-weight: 500; color: var(--hc-accent); }
.theme-helpcenter .helpful-stats { font-size: 1rem; }
.theme-helpcenter .helpful-stats strong { color: #36b39b; }

/* related + footer */
.theme-helpcenter .related-wrap { border-top: none; margin-top: 2.5rem; padding-top: 0; }
.theme-helpcenter .related-heading { color: var(--hc-accent); }
.theme-helpcenter .related-card:hover { border-color: var(--hc-accent); }
.theme-helpcenter .related-card-arrow, .theme-helpcenter .related-tag { color: var(--hc-accent); }
.theme-helpcenter .tutorial-footer { border-top: none; }

/* ─── Home page ────────────────────────────────────────────────────────────── */
.hc-home-intro { margin-bottom: 2rem; }
.hc-home-intro h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--hc-accent); margin-bottom: .35rem; }
.hc-home-intro p  { color: #4b5563; font-size: 1.05rem; }
.hc-home-meta { color: #6b7280; font-size: .9rem; margin-top: .4rem; }

.theme-helpcenter .kb-body { max-width: none; padding: 0; }
.theme-helpcenter .kb-section-header { border-bottom-color: #4b5563; }
.theme-helpcenter .kb-section-title { color: var(--hc-accent); }
.theme-helpcenter .kb-section-title::before { background: var(--hc-accent); }
.theme-helpcenter .kb-subsection-title { color: #4b5563; }
.theme-helpcenter .tut-card { border-radius: 4px; }
.theme-helpcenter .tut-card::before { background: var(--hc-accent); }
.theme-helpcenter .tut-card:hover { border-color: var(--hc-accent); box-shadow: 0 4px 24px var(--hc-accent-tint); }
.theme-helpcenter .tut-card-title { color: var(--hc-accent); }
.theme-helpcenter .tut-tag { background: #eceff3; color: var(--hc-accent); border-radius: 4px; }
.theme-helpcenter .tut-tag:hover { background: var(--hc-accent); color: #fff; }
.theme-helpcenter .tut-steps::before, .theme-helpcenter .tut-arrow { color: var(--hc-accent); background: var(--hc-accent); }
.theme-helpcenter .tut-arrow { background: none; }
.theme-helpcenter .kb-footer { border-top: none; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hc-top { flex-wrap: wrap; padding: 1rem 1.25rem; gap: .75rem; }
    .hc-brand { width: 100%; }
    .hc-search { flex-basis: 100%; }
    .hc-search input, .hc-search button, .hc-browse { height: 48px; font-size: .95rem; }
    .hc-browse-wrap { width: 100%; }
    .hc-browse { width: 100%; justify-content: center; }
    .hc-menu { left: 0; right: 0; }
    .hc-crumb { padding: .75rem 1.25rem; font-size: .9rem; }
    .hc-main { padding: 1.5rem 1.25rem 3rem; }
    .theme-helpcenter .helpful-btns { grid-template-columns: 1fr; }
    .theme-helpcenter .helpful-q, .theme-helpcenter .helpful-thanks { font-size: 1.2rem; }
}