/* ==========================================================================
   Construct Software — help.css
   Public Help Centre (?page=help, ?page=help-article). Loaded on help pages only.
   Uses the www.css variables (--blue, --text, --muted, --border, --bg2 …).
   ========================================================================== */

.hc-page { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.hc-muted { color: var(--muted); font-size: .88rem; margin: 1rem 0; }

/* Hero + search */
.hc-hero { text-align: center; padding: 1rem 0 2.5rem; }
.hc-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--text); letter-spacing: -.3px; margin: .5rem 0 0; }
.hc-hero-note { margin-top: 1rem; font-size: .84rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.hc-search { position: relative; max-width: 100%; }
.hc-search i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hc-search input { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1.5px solid var(--border-dark); border-radius: 9px; padding: .6rem .9rem .6rem 2.5rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.hc-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-faint); }
.hc-search-lg { max-width: 620px; margin: 0 auto; }
.hc-search-lg input { padding: 1rem 1rem 1rem 3rem; font-size: 1rem; border-radius: 12px; box-shadow: var(--shadow-sm); }
.hc-search-lg i { left: 1.15rem; font-size: 1.2rem; }
.hc-search-mid { max-width: 620px; margin-bottom: 1rem; }
.hc-search-mid input { padding: .85rem 1rem .85rem 2.7rem; }

/* Products grid on the home page */
.hc-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.hc-product { background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: 1.4rem 1.5rem; scroll-margin-top: 90px; }
.hc-product:target { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-faint); }
.hc-product-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.hc-product-head h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.hc-product-logo { width: 40px; height: 40px; border-radius: 9px; }
.hc-product-mark { width: 40px; height: 40px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-size: 1.3rem; }
.hc-coll-list { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.hc-coll-list a { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; color: var(--text2); font-size: .9rem; }
.hc-coll-list a i { color: var(--muted); font-size: 1.05rem; }
.hc-coll-list a:hover, .hc-coll-list a:hover i { color: var(--blue); }
.hc-count { margin-left: auto; font-size: .72rem; color: var(--muted); background: var(--bg2); border-radius: 20px; padding: 0 .5rem; }

/* Quick answers (uses the www .faq-* accordion) */
.hc-quick { margin-top: 3.5rem; }
.hc-quick .faq-a.hc-article-body { color: var(--text2); font-size: .9rem; }
.hc-faq-link { margin-top: .6rem; font-size: .84rem; }
.hc-faq-link a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }

/* Contact strip */
.hc-contact { margin-top: 3rem; display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px; }
.hc-contact > i { font-size: 1.8rem; color: var(--blue); flex-shrink: 0; }
.hc-contact h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); }
.hc-contact p { font-size: .86rem; color: var(--muted); }
.hc-contact .btn-ghost { margin-left: auto; white-space: nowrap; }

/* Breadcrumbs */
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--muted); margin-bottom: 1.5rem; }
.hc-crumbs a { color: var(--muted); }
.hc-crumbs a:hover { color: var(--blue); }
.hc-crumbs i { font-size: .7rem; }

/* Collection page + search results */
.hc-coll-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.hc-coll-head h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.hc-coll-head .lead { margin-top: .3rem; }
.hc-coll-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--blue-faint); color: var(--blue); border: 1px solid var(--blue-border); }
.hc-list { border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); max-width: 820px; }
.hc-list-item { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); color: inherit; transition: background .15s; }
.hc-list-item:first-child { border-top: 0; }
.hc-list-item:hover { background: var(--bg2); }
.hc-list-text { flex: 1; min-width: 0; }
.hc-list-title { font-weight: 600; color: var(--text); }
.hc-list-item:hover .hc-list-title { color: var(--blue); }
.hc-list-crumb { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.hc-list-summary { font-size: .86rem; color: var(--muted); margin-top: .2rem; line-height: 1.55; }
.hc-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex-shrink: 0; }
.hc-list-item.is-locked .hc-list-title { color: var(--text2); }
.hc-list mark { background: rgba(250,204,21,.35); color: inherit; padding: 0 .1em; border-radius: .15rem; }
.hc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.hc-chips .filter-btn { text-decoration: none; }
.hc-chapter-no { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; background: rgba(109,40,217,.1); color: #6d28d9; margin-top: .1rem; }

/* Badges */
.hc-type { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hc-type-guide { color: var(--blue); }
.hc-type-quick { color: var(--green); }
.hc-type-reference { color: #6d28d9; }
.hc-lock { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted); white-space: nowrap; }

/* Article */
.hc-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; align-items: start; }
.hc-article { min-width: 0; max-width: 760px; }
.hc-article-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.hc-article .article-title { margin-bottom: .6rem; }
.hc-summary { max-width: none; margin-bottom: .9rem; }
.hc-article-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .8rem; color: var(--muted); padding-bottom: 1.3rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--border); }
.hc-article-body { overflow-wrap: anywhere; }
.hc-article-body h2, .hc-article-body h3 { scroll-margin-top: 90px; }
.hc-article-body h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin: 1.25rem 0 .5rem; }
.hc-article-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.hc-article-body figure { margin: 1.5rem 0; }
.hc-article-body figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-top: .4rem; }
.hc-article-body table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; display: block; overflow-x: auto; font-size: .9rem; }
.hc-article-body th, .hc-article-body td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; }
.hc-article-body th { background: var(--bg2); color: var(--text); }
.hc-article-body pre { background: var(--bg2); border: 1px solid var(--border); padding: .8rem 1rem; border-radius: 9px; white-space: pre-wrap; font-size: .86rem; margin-bottom: 1.1rem; }
.hc-article-body blockquote { border-left: 3px solid var(--border-dark); padding-left: 1rem; color: var(--muted); margin-bottom: 1.1rem; }
.hc-article-body .help-callout-info, .hc-article-body .help-callout-tip, .hc-article-body .help-callout-warning { padding: .85rem 1.1rem; border-radius: 10px; margin: 1.4rem 0; border-left: 4px solid; }
.hc-article-body .help-callout-info    { background: var(--blue-faint); border-color: var(--blue); }
.hc-article-body .help-callout-tip     { background: rgba(26,138,74,.07); border-color: var(--green); }
.hc-article-body .help-callout-warning { background: rgba(198,138,0,.08); border-color: var(--gold); }
.hc-article-body .help-callout-info > :last-child, .hc-article-body .help-callout-tip > :last-child, .hc-article-body .help-callout-warning > :last-child { margin-bottom: 0; }
.hc-toc-mobile { display: none; margin-bottom: 1.4rem; padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .88rem; }
.hc-toc-mobile summary { font-weight: 600; cursor: pointer; color: var(--text); }
.hc-toc-mobile ul { margin-top: .5rem; }
.hc-toc-mobile li { padding: .2rem 0; }
.hc-toc-mobile li.sub { padding-left: 1rem; }

.hc-locked { display: flex; gap: 1.1rem; padding: 1.5rem; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px; }
.hc-locked > i { font-size: 1.8rem; color: var(--blue); flex-shrink: 0; }
.hc-locked h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.hc-locked p { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }

.hc-chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2.5rem; }
.hc-chapter-nav a { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); }
.hc-chapter-nav a span { font-size: .78rem; color: var(--muted); }
.hc-chapter-nav a:hover { border-color: var(--blue); }
.hc-chapter-nav a.next { text-align: right; }

.hc-aside { position: sticky; top: 90px; }
.hc-aside-block { margin-bottom: 1.8rem; }
.hc-aside-title { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.hc-aside-block > a { display: block; padding: .3rem 0; font-size: .87rem; color: var(--text2); }
.hc-aside-block > a:hover { color: var(--blue); }
.hc-toc { border-left: 2px solid var(--border); padding-left: .9rem; }
.hc-toc a.sub { padding-left: .8rem; font-size: .82rem; }

/* Empty states */
.hc-empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.hc-empty > i { font-size: 2.4rem; color: var(--border-dark); display: block; margin-bottom: .8rem; }
.hc-empty h1, .hc-empty h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.hc-empty .hc-search { margin: 1.2rem auto 0; }
.hc-empty-sm { padding: 2.5rem 1rem; border: 1.5px dashed var(--border); border-radius: 14px; max-width: 820px; }

@media (max-width: 960px) {
  .hc-article-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hc-aside { position: static; }
  .hc-aside .hc-toc { display: none; }
  .hc-toc-mobile { display: block; }
}
@media (max-width: 720px) {
  .hc-page { padding: 2rem 1.25rem 4rem; }
  .hc-products { grid-template-columns: 1fr; }
  .hc-contact { flex-direction: column; align-items: flex-start; }
  .hc-contact .btn-ghost { margin-left: 0; }
  .hc-list-item { flex-wrap: wrap; }
  .hc-list-meta { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .hc-chapter-nav { grid-template-columns: 1fr; }
}