/* ==========================================================================
   Honeypot SG blog stylesheet  |  version 1.0
   --------------------------------------------------------------------------
   SCOPE
   Every rule starts with .hpb-article, so nothing outside a blog post is
   affected. No element selectors, no global resets, no !important.
   Load this file on the blog entry template AND in the editor, otherwise
   the classes will not style the published page.

   USAGE
   Wrap each post in <div class="hpb-article"> ... </div>. Do not add an H1,
   the entry title supplies it.

   BRAND
   Button pink  #ee6dc1   buttons, pills, icons, callout edge
   Light pink   #FDF0F5   box backgrounds, table stripe
   Deep magenta #b3197e   labels, links, table header, hover

   EXTENDING
   Add new classes at the end of the matching section and bump the version.
   Never change what an existing class does, older posts rely on it.
   ========================================================================== */

/* Wrapper and tokens */
.hpb-article{--hpb-pink:#ee6dc1;--hpb-light:#FDF0F5;--hpb-deep:#b3197e;--hpb-line:#f4cfe0;--hpb-head:#1f2a37;--hpb-black:#000000;--hpb-body:#374151;--hpb-rule:#e4e7eb;--hpb-muted:#6b7280;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.72;color:var(--hpb-body);max-width:740px;margin:0 auto;}
.hpb-article,.hpb-article *,.hpb-article *::before,.hpb-article *::after{box-sizing:border-box;}

/* Text */
.hpb-article .hpb-lead{font-size:1.05rem;color:var(--hpb-head);line-height:1.65;margin:0 0 1.25rem;}
.hpb-article .hpb-p{margin:0 0 1.2rem;}
.hpb-article .hpb-note{font-size:.82rem;color:var(--hpb-muted);line-height:1.6;margin:0 0 1.2rem;}
.hpb-article .hpb-strong{font-weight:700;color:var(--hpb-head);}
.hpb-article .hpb-h2{font-size:1.2rem;font-weight:700;color:var(--hpb-head);margin:3rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--hpb-rule);line-height:1.3;}
.hpb-article .hpb-h3{font-size:1.05rem;font-weight:700;color:var(--hpb-black);margin:2.25rem 0 .75rem;line-height:1.3;}
.hpb-article .hpb-h4{font-size:.98rem;font-weight:700;color:var(--hpb-black);margin:1.5rem 0 .4rem;line-height:1.3;}
.hpb-article .hpb-link{color:var(--hpb-deep);text-decoration:underline;}
.hpb-article .hpb-link:visited{color:var(--hpb-deep);}
.hpb-article .hpb-link:hover{color:var(--hpb-pink);}

/* Lists */
.hpb-article .hpb-ul{margin:0 0 1.2rem;padding-left:1.4rem;list-style:disc;}
.hpb-article .hpb-ol{margin:0 0 1.2rem;padding-left:1.4rem;list-style:decimal;}
.hpb-article .hpb-li{margin:0 0 .5rem;padding-left:.25rem;}
.hpb-article .hpb-li::marker{color:var(--hpb-pink);font-weight:700;}

/* Jump nav */
.hpb-article .hpb-nav{background:var(--hpb-light);border:1px solid var(--hpb-line);border-radius:8px;padding:.9rem 1.2rem;margin:1.5rem 0 2rem;}
.hpb-article .hpb-nav-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--hpb-deep);margin-bottom:.55rem;}
.hpb-article .hpb-nav-links{display:flex;flex-wrap:wrap;gap:.4rem;}
.hpb-article .hpb-pill{display:inline-block;background:var(--hpb-pink);color:#fff;border-radius:20px;padding:.28rem .75rem;font-size:.8rem;font-weight:500;text-decoration:none;}
.hpb-article .hpb-pill:visited{color:#fff;}
.hpb-article .hpb-pill:hover{background:var(--hpb-deep);color:#fff;}

/* Callouts */
.hpb-article .hpb-callout{border-left:4px solid var(--hpb-pink);background:var(--hpb-light);padding:.95rem 1.2rem;border-radius:0 8px 8px 0;margin:1.5rem 0;}
.hpb-article .hpb-callout-label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hpb-deep);margin-bottom:.35rem;}
.hpb-article .hpb-callout-text{margin:0;font-size:.93rem;line-height:1.6;color:var(--hpb-body);}
.hpb-article .hpb-callout--section{padding:1.3rem 1.4rem;margin:3rem 0 1.5rem;}
.hpb-article .hpb-h2--in-box{margin:0 0 1rem;}
.hpb-article .hpb-callout-note{margin-top:1.25rem;}
.hpb-article .hpb-callout--strong{background:var(--hpb-pink);border-left-color:var(--hpb-deep);}
.hpb-article .hpb-callout--strong .hpb-callout-label,.hpb-article .hpb-callout--strong .hpb-callout-text{color:#fff;}

/* Checklist */
.hpb-article .hpb-check{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:.85rem;}
.hpb-article .hpb-check-icon{flex-shrink:0;width:20px;height:20px;background:var(--hpb-pink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:900;margin-top:4px;}
.hpb-article .hpb-check-title{display:block;font-size:.95rem;font-weight:700;color:var(--hpb-head);margin-bottom:.15rem;}
.hpb-article .hpb-check-desc{font-size:.88rem;color:var(--hpb-body);line-height:1.55;}

/* Table (div grid, five columns by default) */
.hpb-article .hpb-table-wrap{border:1.5px solid var(--hpb-line);border-radius:10px;overflow-x:auto;margin:1.25rem 0;background:#fff;}
.hpb-article .hpb-table{min-width:640px;}
.hpb-article .hpb-tr{display:grid;grid-template-columns:1.3fr 1.1fr 1.2fr 1fr 1.1fr;}
.hpb-article .hpb-table--3 .hpb-tr{grid-template-columns:repeat(3,1fr);}
.hpb-article .hpb-table--4 .hpb-tr{grid-template-columns:repeat(4,1fr);}
.hpb-article .hpb-table--6 .hpb-tr{grid-template-columns:repeat(6,1fr);}
.hpb-article .hpb-tr--head{background:var(--hpb-deep);}
.hpb-article .hpb-tr--body{background:#fff;}
.hpb-article .hpb-tr--body:nth-child(odd){background:var(--hpb-light);}
.hpb-article .hpb-th{padding:.7rem .9rem;font-size:.85rem;line-height:1.5;color:#fff;font-weight:700;}
.hpb-article .hpb-td{padding:.7rem .9rem;font-size:.86rem;line-height:1.5;color:var(--hpb-body);}
.hpb-article .hpb-td:first-child{font-weight:700;color:var(--hpb-head);}

/* Table (real table markup, optional, use only if the field keeps table tags) */
.hpb-article .hpb-rtable{width:100%;min-width:640px;border-collapse:collapse;margin:0;}
.hpb-article .hpb-rtable th{background:var(--hpb-deep);color:#fff;text-align:left;padding:.7rem .9rem;font-size:.85rem;font-weight:700;line-height:1.5;}
.hpb-article .hpb-rtable td{padding:.7rem .9rem;font-size:.86rem;line-height:1.5;color:var(--hpb-body);vertical-align:top;background:#fff;}
.hpb-article .hpb-rtable td:first-child{font-weight:700;color:var(--hpb-head);}
.hpb-article .hpb-rtable tbody tr:nth-child(even) td{background:var(--hpb-light);}

/* Call to action and buttons */
.hpb-article .hpb-cta{background:var(--hpb-light);border:1.5px solid var(--hpb-line);border-radius:10px;padding:1.4rem 1.5rem;margin:2.5rem 0 0;}
.hpb-article .hpb-cta-title{margin:0 0 .5rem;font-size:1rem;font-weight:700;color:var(--hpb-black);line-height:1.3;}
.hpb-article .hpb-cta-text{margin:0 0 1rem;font-size:.9rem;color:var(--hpb-body);}
.hpb-article .hpb-btn{display:inline-block;background:var(--hpb-pink);color:#fff;padding:.6rem 1.2rem;border-radius:6px;font-size:.875rem;font-weight:600;text-decoration:none;margin:0 .6rem .6rem 0;}
.hpb-article .hpb-btn:visited{color:#fff;}
.hpb-article .hpb-btn:hover{background:var(--hpb-deep);color:#fff;}
.hpb-article .hpb-btn--deep{background:var(--hpb-deep);}
.hpb-article .hpb-btn--deep:hover{background:var(--hpb-pink);}
.hpb-article .hpb-btn--outline{background:transparent;color:var(--hpb-deep);border:1.5px solid var(--hpb-deep);padding:.5rem 1.1rem;}
.hpb-article .hpb-btn--outline:visited{color:var(--hpb-deep);}
.hpb-article .hpb-btn--outline:hover{background:var(--hpb-deep);color:#fff;}

/* Numbered steps (not used yet) */
.hpb-article .hpb-steps{margin:1.25rem 0;}
.hpb-article .hpb-step{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.85rem;}
.hpb-article .hpb-step-num{flex-shrink:0;width:32px;height:32px;background:var(--hpb-pink);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;margin-top:4px;}
.hpb-article .hpb-step-body{flex:1;padding-top:6px;}
.hpb-article .hpb-step-title{display:block;font-size:.95rem;font-weight:700;color:var(--hpb-head);margin-bottom:.15rem;}
.hpb-article .hpb-step-text{font-size:.88rem;line-height:1.55;color:var(--hpb-body);margin:0;}

/* Cards (not used yet) */
.hpb-article .hpb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.25rem 0;}
.hpb-article .hpb-card{background:var(--hpb-light);border:1px solid var(--hpb-line);border-radius:10px;padding:1rem 1.2rem;}
.hpb-article .hpb-card--accent{border-top:4px solid var(--hpb-pink);}
.hpb-article .hpb-card-title{font-size:.95rem;font-weight:700;color:var(--hpb-black);margin:0 0 .35rem;line-height:1.35;}
.hpb-article .hpb-card-text{font-size:.88rem;line-height:1.55;color:var(--hpb-body);margin:0;}

/* Pull quote (not used yet) */
.hpb-article .hpb-quote{border-left:4px solid var(--hpb-pink);margin:1.75rem 0;padding:.25rem 0 .25rem 1.25rem;font-size:1.15rem;line-height:1.55;color:var(--hpb-head);font-style:italic;}
.hpb-article .hpb-quote-source{display:block;margin-top:.5rem;font-size:.82rem;font-style:normal;color:var(--hpb-muted);}

/* Stat bar (not used yet) */
.hpb-article .hpb-stat{display:flex;align-items:center;gap:1.5rem;background:var(--hpb-deep);border-radius:10px;padding:1.2rem 1.5rem;margin:1.5rem 0;}
.hpb-article .hpb-stat-num{font-size:2.4rem;font-weight:800;color:#fff;line-height:1;white-space:nowrap;flex-shrink:0;letter-spacing:-.03em;}
.hpb-article .hpb-stat-text{font-size:.875rem;color:#fff;line-height:1.5;margin:0;}

/* FAQ (not used yet) */
.hpb-article .hpb-faq{margin:1.25rem 0;}
.hpb-article .hpb-faq-item{background:var(--hpb-light);border:1px solid var(--hpb-line);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.75rem;}
.hpb-article .hpb-faq-q{font-size:.98rem;font-weight:700;color:var(--hpb-black);margin:0 0 .4rem;line-height:1.35;}
.hpb-article .hpb-faq-a{margin:0;font-size:.93rem;line-height:1.6;color:var(--hpb-body);}

/* Images and layout helpers (not used yet) */
.hpb-article .hpb-figure{margin:1.75rem 0;}
.hpb-article .hpb-img{display:block;max-width:100%;height:auto;border-radius:10px;}
.hpb-article .hpb-caption{margin-top:.5rem;font-size:.82rem;color:var(--hpb-muted);text-align:center;}
.hpb-article .hpb-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0;}

/* Small screens */
@media (max-width:580px){
  .hpb-article .hpb-two-col{grid-template-columns:1fr;}
  .hpb-article .hpb-stat{flex-direction:column;align-items:flex-start;gap:.5rem;}
}