/* ═══════════════════════════════════════════════════════════════════════════
   single-post.css — VSHR blog single post · MODERN HR-SaaS resource article
   Rebuilt 2026-06-22 to match the bar set by Gusto / ADP / Paychex: clean sans
   system, two-column layout with a sticky table-of-contents + product CTA
   sidebar, professional navy/blue/orange palette, generous whitespace, strong
   conversion path. No literary flourish. Poppins (headings) + Inter (body).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bp-navy:   #07192E;
  --bp-blue:   #1E6FB8;
  --bp-blue-d: #14507f;
  --bp-accent: #F97316;
  --bp-ink:    #25313f;
  --bp-soft:   #51606f;
  --bp-muted:  #6c7886;
  --bp-faint:  #9aa6b4;
  --bp-line:   #e6eaf0;
  --bp-surf:   #f5f8fb;
  --bp-tint:   #eaf2fb;
  --bp-wrap:   74rem;
  --bp-measure:46rem;
  --bp-aside:  20rem;
  --bp-sans:   var(--font-sans, 'Inter', system-ui, sans-serif);
  --bp-head:   'Poppins', var(--font-sans, 'Inter'), system-ui, sans-serif;
}

.bp-article { background: #fff; }
::selection { background: #cfe4f7; color: var(--bp-navy); }

/* ──── HEADER ──────────────────────────────────────────────────────────── */
.bp-head { max-width: var(--bp-wrap); margin: 0 auto; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); }
.bp-head-inner { max-width: 52rem; }
.bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--bp-muted); }
.bp-crumbs a { color: var(--bp-blue); text-decoration: none; }
.bp-crumbs a:hover { text-decoration: underline; }
.bp-crumb-sep { color: var(--bp-faint); }
.bp-head h1 {
  font-family: var(--bp-head);
  font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3rem); line-height: 1.12;
  font-weight: 700; letter-spacing: -.02em; color: var(--bp-navy);
  margin: 1rem 0 0; text-wrap: balance;
}
.bp-dek { font-size: clamp(1.12rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--bp-soft); margin: 1rem 0 0; max-width: 44rem; }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin-top: 1.5rem; color: var(--bp-muted); font-size: .92rem; }
.bp-byline { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--bp-navy); }
.bp-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: #c5cdd6; }
.bp-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--bp-navy); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; overflow: hidden; }
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ──── FEATURED IMAGE ──────────────────────────────────────────────────── */
.bp-hero-img { max-width: var(--bp-wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem); }
.bp-hero-img img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px; display: block; }

/* ──── TWO-COLUMN LAYOUT ───────────────────────────────────────────────── */
.bp-layout { max-width: var(--bp-wrap); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 2rem) 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 1024px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr) var(--bp-aside); gap: clamp(2.5rem, 4vw, 4rem); align-items: start; }
  .bp-aside { position: sticky; top: 5.75rem; }
}
.bp-main { min-width: 0; }

/* ──── ARTICLE BODY ────────────────────────────────────────────────────── */
.bp-main .e-content { color: var(--bp-ink); font-size: 1.135rem; line-height: 1.75; }
.bp-main .e-content > * + * { margin-top: 1.3rem; }
.bp-main .e-content p { margin: 0; }
.bp-main .e-content > p:first-of-type { font-size: 1.235rem; line-height: 1.65; color: #2b3947; }

.bp-main .e-content h2 {
  font-family: var(--bp-head); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.7rem); line-height: 1.25;
  font-weight: 700; letter-spacing: -.012em; color: var(--bp-navy);
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--bp-line); scroll-margin-top: 6rem;
}
.bp-main .e-content h3 { font-family: var(--bp-head); font-size: clamp(1.18rem, 1.05rem + .5vw, 1.36rem); font-weight: 600; color: var(--bp-navy); margin-top: 2rem; }
.bp-main .e-content h2 + p, .bp-main .e-content h3 + p { margin-top: .85rem; }
.bp-main .e-content strong { font-weight: 700; color: #142231; }
.bp-main .e-content a { color: var(--bp-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(30,111,184,.4); transition: text-decoration-color .15s ease; }
.bp-main .e-content a:hover { text-decoration-color: currentColor; }

.bp-main .e-content ul, .bp-main .e-content ol { padding-left: 1.5rem; margin-top: 1.3rem; }
.bp-main .e-content ul { list-style: none; padding-left: 1.6rem; }
.bp-main .e-content ul > li { position: relative; }
.bp-main .e-content ul > li::before { content: ""; position: absolute; left: -1.25rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bp-blue); }
.bp-main .e-content ol { list-style: decimal; }
.bp-main .e-content li::marker { color: var(--bp-blue); font-weight: 700; }
.bp-main .e-content li + li { margin-top: .5rem; }

.bp-main .e-content img { max-width: 100%; height: auto; border-radius: 12px; }
.bp-main .e-content figure { margin: 2rem 0; }
.bp-main .e-content figcaption { margin-top: .65rem; font-size: .85rem; color: var(--bp-muted); }

/* Clean callout / tip box */
.bp-main .e-content blockquote {
  margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--bp-tint);
  border-radius: 14px; border-left: 4px solid var(--bp-blue); border-top-left-radius: 0; border-bottom-left-radius: 0;
  font-size: 1.12rem; line-height: 1.55; color: var(--bp-navy);
}
.bp-main .e-content blockquote p { margin: 0; }
.bp-main .e-content blockquote p + p { margin-top: .75rem; }

.bp-main .e-content .insight-box, .bp-main .e-content .key-takeaway {
  background: var(--bp-tint); border-radius: 14px; padding: 1.4rem 1.6rem; margin: 2rem 0;
}
.bp-main .e-content .insight-box::before, .bp-main .e-content .key-takeaway::before {
  content: "Key takeaway"; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-blue); margin-bottom: .55rem;
}
/* modern posts ship their own label — don't double it */
.bp-main .e-content .insight-box:has(.label)::before, .bp-main .e-content .key-takeaway:has(.label)::before { content: none; }
.bp-main .e-content .insight-box .label, .bp-main .e-content .key-takeaway .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-blue); margin: 0 0 .55rem;
}
.bp-main .e-content .checklist-card { background: #fff; border: 1px solid var(--bp-line); border-radius: 14px; padding: 1.5rem; margin: 2rem 0; }

.bp-main .e-content table { width: 100%; border-collapse: collapse; font-size: .96rem; margin: 1.75rem 0; display: block; overflow-x: auto; border: 1px solid var(--bp-line); border-radius: 12px; }
.bp-main .e-content th, .bp-main .e-content td { border-bottom: 1px solid var(--bp-line); padding: .7rem .9rem; text-align: left; }
.bp-main .e-content th { background: var(--bp-surf); font-weight: 700; color: var(--bp-navy); font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; }
.bp-main .e-content tr:last-child td { border-bottom: none; }

/* ──── AUTHOR + CLOSING CTA ────────────────────────────────────────────── */
.bp-author { display: flex; gap: 1.1rem; align-items: center; background: var(--bp-surf); border: 1px solid var(--bp-line); border-radius: 16px; padding: 1.4rem; margin-top: 3rem; }
.bp-author-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--bp-navy); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.2rem; overflow: hidden; }
.bp-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-author-name { font-family: var(--bp-head); font-weight: 700; color: var(--bp-navy); margin: 0; }
.bp-author-role { font-size: .88rem; color: var(--bp-muted); margin: .1rem 0 0; }
.bp-author-bio { font-size: .92rem; color: var(--bp-soft); margin: .5rem 0 0; line-height: 1.55; }

.bp-cta { margin-top: 2.5rem; background: var(--bp-navy); border-radius: 18px; padding: clamp(1.75rem, 3.5vw, 2.5rem); color: #fff; text-align: center; }
.bp-cta h2 { font-family: var(--bp-head); color: #fff; font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin: 0; line-height: 1.18; font-weight: 700; }
.bp-cta p { color: rgba(226,235,245,.82); margin: .75rem auto 1.4rem; max-width: 34rem; }

/* ──── SIDEBAR ─────────────────────────────────────────────────────────── */
.bp-aside { display: flex; flex-direction: column; gap: 1.5rem; font-size: .92rem; }
.bp-toc { border: 1px solid var(--bp-line); border-radius: 14px; padding: 1.1rem 1.25rem; }
.bp-toc-label, .bp-recent-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-faint); margin: 0 0 .75rem; }
.bp-toc ol { list-style: none; margin: 0; padding: 0; }
.bp-toc li { margin: 0; }
.bp-toc a { display: block; padding: .4rem 0; color: var(--bp-muted); text-decoration: none; line-height: 1.4; transition: color .15s ease; }
.bp-toc a:hover { color: var(--bp-navy); }
.bp-toc a.is-active { color: var(--bp-blue); font-weight: 600; }

.bp-promo { background: var(--bp-navy); border-radius: 16px; padding: 1.5rem; color: #fff; position: relative; overflow: hidden; }
.bp-promo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--bp-accent), var(--bp-blue)); }
.bp-promo-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fb4e6; }
.bp-promo-title { font-family: var(--bp-head); font-weight: 700; font-size: 1.18rem; line-height: 1.25; color: #fff; margin: .5rem 0 0; }
.bp-promo-text { font-size: .9rem; line-height: 1.5; color: rgba(226,235,245,.8); margin: .6rem 0 0; }
.bp-promo-btn { width: 100%; margin-top: 1.1rem; }
.bp-promo-trust { font-size: .76rem; color: rgba(226,235,245,.6); margin: .85rem 0 0; text-align: center; }

.bp-recent ul { list-style: none; margin: 0; padding: 0; }
.bp-recent li + li { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--bp-line); }
.bp-recent a { color: var(--bp-navy); text-decoration: none; font-weight: 600; line-height: 1.35; display: block; transition: color .15s ease; }
.bp-recent a:hover { color: var(--bp-blue); }

.bp-toc a:focus-visible, .bp-recent a:focus-visible, .bp-related-card:focus-visible, .bp-crumbs a:focus-visible { outline: 2px solid var(--brand-secondary-bright, #29ABE2); outline-offset: 2px; }

.bp-progress { position: fixed; top: 72px; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--bp-accent), var(--bp-blue)); z-index: 60; transition: transform .08s linear; }

/* ──── RELATED ─────────────────────────────────────────────────────────── */
.bp-related { max-width: var(--bp-wrap); margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 2rem) 5rem; border-top: 1px solid var(--bp-line); }
.bp-related > h2 { font-family: var(--bp-head); font-size: 1.5rem; font-weight: 700; color: var(--bp-navy); margin: 2rem 0 1.5rem; }
.bp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; }
.bp-related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bp-line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease; }
.bp-related-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -28px rgba(7,25,46,.45); border-color: #d3dde7; }
.bp-related-media { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b3a5c, #25517f); overflow: hidden; }
.bp-related-media img { width: 100%; height: 100%; object-fit: cover; }
.bp-related-body { display: flex; flex-direction: column; padding: 1.1rem 1.2rem 1.3rem; }
.bp-related-cat { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-blue); }
.bp-related-title { font-family: var(--bp-head); font-weight: 600; font-size: 1.06rem; line-height: 1.3; color: var(--bp-navy); margin: .45rem 0 0; }
.bp-related-date { margin-top: .85rem; font-size: .8rem; color: var(--bp-muted); }

.bp-comments { max-width: var(--bp-measure); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2rem) 4rem; }

@media (prefers-reduced-motion: reduce) { .bp-progress, .bp-related-card, .bp-main .e-content a { transition: none; } }