/**
 * DataAssist-IO — single blog/FAQ post: dark "article" theme.
 * Scoped to body.dhp-article. Turns Blocksy's cream default into a designed
 * dark reading page (header, prose, TOC, progress, end matter, comments).
 */

body.dhp-article{
  --da-bg:#ffffff; --da-surface:#f7f8fb; --da-tint:#f4f4fa; --da-line:#e2e1ea;
  --da-ink:#1c1b22; --da-body:#4b5563; --da-muted:#6b6a76;
  --da-blue:#3B82F6; --da-blue-strong:#2563eb; --da-code:#9fc6ff;
  --da-read:748px;
  background:var(--da-bg);
}

/* ---- kill Blocksy's light content canvas; go full dark ---- */
body.dhp-article #main,
body.dhp-article .ct-container-full,
body.dhp-article .site-main,
body.dhp-article .entry-content{ background:transparent !important; }
body.dhp-article{ color:var(--da-body); }

/* Blocksy constrains children with .is-width-constrained; match its measure */
body.dhp-article .is-width-constrained{
  max-width:var(--da-read); margin-left:auto; margin-right:auto;
  padding-left:20px; padding-right:20px; box-sizing:content-box;
}
@media (max-width:820px){ body.dhp-article{ --da-read:100%; } }

/* ============================ header ============================ */
body.dhp-article .dhp-a-head{ text-align:center; padding-top:54px; }
body.dhp-article .dhp-a-kicker{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--da-blue); text-decoration:none; margin:0 0 16px;
}
body.dhp-article .dhp-a-kicker:hover{ text-decoration:underline; }
body.dhp-article .dhp-a-title{
  font-size:clamp(30px,4.6vw,46px); font-weight:800; letter-spacing:-.025em;
  line-height:1.12; color:var(--da-ink) !important; margin:0 0 18px; text-wrap:balance;
}
body.dhp-article .dhp-a-deck{
  font-size:clamp(17px,2.2vw,20px); line-height:1.55; color:var(--da-muted);
  max-width:620px; margin:0 auto 26px;
}
body.dhp-article .dhp-a-meta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; color:var(--da-muted); flex-wrap:wrap;
}
body.dhp-article .dhp-a-avatar{ border-radius:50%; width:34px; height:34px; }
body.dhp-article .dhp-a-by{ color:var(--da-ink); font-weight:650; }
body.dhp-article .dhp-a-dot{ opacity:.5; }

/* featured banner */
body.dhp-article .dhp-a-banner{ margin:40px auto 8px; }
body.dhp-article .dhp-a-banner img{
  width:100%; height:auto; border-radius:16px; border:1px solid var(--da-line);
  display:block;
}

/* ============================ TOC ============================ */
body.dhp-article .dhp-toc{
  margin:40px auto 8px; background:var(--da-surface); border:1px solid var(--da-line);
  border-radius:14px; padding:6px 8px;
}
body.dhp-article .dhp-toc[hidden]{ display:none; }
body.dhp-article .dhp-toc-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:none; border:0; cursor:pointer; padding:12px 14px; color:var(--da-ink);
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
body.dhp-article .dhp-toc-chevron{
  width:9px; height:9px; border-right:2px solid var(--da-muted); border-bottom:2px solid var(--da-muted);
  transform:rotate(45deg); transition:transform .2s; margin-bottom:3px;
}
body.dhp-article .dhp-toc-toggle[aria-expanded="false"] .dhp-toc-chevron{ transform:rotate(-45deg); margin-bottom:0; margin-top:3px; }
body.dhp-article .dhp-toc-list{
  list-style:none; margin:0; padding:2px 6px 10px; display:grid; gap:2px;
  counter-reset:toc;
}
body.dhp-article .dhp-toc-list[hidden]{ display:none; }
body.dhp-article .dhp-toc-list li{ margin:0; }
body.dhp-article .dhp-toc-list a{
  display:block; padding:7px 12px; border-radius:8px; text-decoration:none;
  color:var(--da-muted); font-size:14.5px; line-height:1.4; border-left:2px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
body.dhp-article .dhp-toc-list a:hover{ color:var(--da-ink); background:rgba(0,0,0,.04); }
body.dhp-article .dhp-toc-list a.is-active{ color:var(--da-blue); border-left-color:var(--da-blue); background:rgba(59,130,246,.08); }
body.dhp-article .dhp-toc-list .lvl-3 a{ padding-left:26px; font-size:13.5px; }

/* ============================ prose ============================ */
body.dhp-article .entry-content{ font-size:17.5px; line-height:1.78; color:var(--da-body); }
body.dhp-article .entry-content > *{ scroll-margin-top:80px; }
body.dhp-article .entry-content p{ margin:0 0 1.4em; }
body.dhp-article .entry-content :is(h2,h3,h4){ color:var(--da-ink) !important; letter-spacing:-.02em; line-height:1.2; }
body.dhp-article .entry-content h2{ font-size:clamp(24px,3.2vw,30px); font-weight:800; margin:2em 0 .55em; }
body.dhp-article .entry-content h3{ font-size:clamp(19px,2.4vw,22px); font-weight:750; margin:1.7em 0 .5em; }
body.dhp-article .entry-content a{ color:var(--da-blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
body.dhp-article .entry-content a:hover{ color:#2563eb; }
body.dhp-article .entry-content strong, body.dhp-article .entry-content b{ color:var(--da-ink); font-weight:700; }
body.dhp-article .entry-content ul, body.dhp-article .entry-content ol{ margin:0 0 1.4em; padding-left:1.35em; }
body.dhp-article .entry-content li{ margin:.5em 0; padding-left:.2em; }
body.dhp-article .entry-content ul li::marker{ color:var(--da-blue); }
body.dhp-article .entry-content ol li::marker{ color:var(--da-muted); font-weight:700; }
body.dhp-article .entry-content blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 22px; border-left:3px solid var(--da-blue);
  color:var(--da-ink); font-style:italic; font-size:1.06em;
}
body.dhp-article .entry-content :not(pre) > code{
  background:#16161f; color:var(--da-code); border:1px solid #2a2a33;
  border-radius:6px; padding:.12em .4em; font-size:.88em;
}
body.dhp-article .entry-content pre{
  background:#0c0c12; border:1px solid #23232c; border-radius:12px;
  padding:16px 18px; overflow:auto; font-size:14px; line-height:1.6; margin:1.6em 0;
}
body.dhp-article .entry-content pre code{ background:none; border:0; padding:0; color:#d7d7e0; }
body.dhp-article .entry-content img{ border-radius:12px; border:1px solid var(--da-line); height:auto; }
body.dhp-article .entry-content hr{ border:0; border-top:1px solid var(--da-line); margin:2.4em 0; }
body.dhp-article .entry-content :is(table){ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:15px; }
body.dhp-article .entry-content :is(th,td){ border:1px solid var(--da-line); padding:10px 13px; text-align:left; }
body.dhp-article .entry-content th{ background:var(--da-surface); color:var(--da-ink); font-weight:700; }

/* author-built colored callout / CTA groups: round + guarantee readable text */
body.dhp-article .entry-content .wp-block-group.has-background,
body.dhp-article .entry-content .wp-block-columns.has-background,
body.dhp-article .entry-content .wp-block-column.has-background{ border-radius:16px; }
body.dhp-article .entry-content .has-background :is(h2,h3,h4,p,li,strong){ color:#fff !important; }
body.dhp-article .entry-content .has-background a{ color:#cfe0ff; }

/* ======================= reading progress ======================= */
body.dhp-article .dhp-a-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:9999; background:transparent; pointer-events:none;
}
body.dhp-article .dhp-a-progress > span{
  display:block; height:100%; width:0; background:linear-gradient(90deg,var(--da-blue-strong),var(--da-blue));
  transition:width .08s linear;
}

/* ========================= end matter ========================= */
body.dhp-article .dhp-a-end{ margin:56px auto 0; }
body.dhp-article .dhp-a-endbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--da-line); border-bottom:1px solid var(--da-line); padding:18px 0; margin:0 0 44px;
}
body.dhp-article .dhp-a-back{ color:var(--da-ink); font-weight:650; font-size:14.5px; text-decoration:none; }
body.dhp-article .dhp-a-back:hover{ color:var(--da-blue); }
body.dhp-article .dhp-a-share{ display:flex; align-items:center; gap:8px; }
body.dhp-article .dhp-a-share-lbl{ font-size:13px; color:var(--da-muted); margin-right:2px; }
body.dhp-article .dhp-a-share a,
body.dhp-article .dhp-a-copy{
  display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:34px; padding:0 12px;
  border:1px solid var(--da-line); border-radius:9px; background:var(--da-surface); color:var(--da-ink);
  font-size:13.5px; font-weight:650; text-decoration:none; cursor:pointer; transition:border-color .15s,color .15s;
}
body.dhp-article .dhp-a-share a:hover,
body.dhp-article .dhp-a-copy:hover{ border-color:var(--da-blue); color:var(--da-blue); }
body.dhp-article .dhp-a-copy.is-copied{ color:#5cd0a4; border-color:#5cd0a4; }

/* related */
body.dhp-article .dhp-a-related-h{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--da-muted); margin:0 0 18px; }
body.dhp-article .dhp-a-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:720px){ body.dhp-article .dhp-a-related-grid{ grid-template-columns:1fr; } }
body.dhp-article .dhp-a-rcard{
  display:flex; flex-direction:column; background:var(--da-surface); border:1px solid var(--da-line);
  border-radius:14px; overflow:hidden; text-decoration:none; transition:border-color .15s, transform .15s;
}
body.dhp-article .dhp-a-rcard:hover{ border-color:var(--da-blue); transform:translateY(-2px); }
body.dhp-article .dhp-a-rthumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--da-tint); }
body.dhp-article .dhp-a-rthumb img{ width:100%; height:100%; object-fit:cover; border:0; border-radius:0; }
body.dhp-article .dhp-a-rtitle{ padding:14px 15px 6px; color:var(--da-ink); font-weight:700; font-size:15px; line-height:1.35; }
body.dhp-article .dhp-a-rmeta{ padding:0 15px 15px; color:var(--da-muted); font-size:12.5px; margin-top:auto; }

/* ========================= comments (kept, dark) ========================= */
body.dhp-article #comments,
body.dhp-article .comment-respond{ max-width:var(--da-read); margin-left:auto; margin-right:auto; padding:0 20px; color:var(--da-body); }
body.dhp-article :is(.comments-title,.comment-reply-title){ color:var(--da-ink); }
body.dhp-article .comment-form :is(input,textarea){
  background:var(--da-surface); border:1px solid var(--da-line); color:var(--da-ink); border-radius:10px; padding:11px 13px;
}
body.dhp-article .comment-form :is(input,textarea):focus{ border-color:var(--da-blue-strong); outline:none; }
body.dhp-article .comment-form label{ color:var(--da-muted); }
body.dhp-article .comment-list :is(.comment-body,.comment-meta,.comment-author){ color:var(--da-body); }
body.dhp-article .form-submit .submit,
body.dhp-article .comment-respond .submit{ background:var(--da-blue-strong) !important; color:#fff !important; border:0 !important; border-radius:10px; padding:12px 24px; font-weight:700; }