/* sanz.consulting — resume/bio site custom styles.
   Builds on the shared default theme (kernel/design/tokens.css +
   core/public/css/style.css) — reuses its tokens, doesn't redefine them. */

/* ── Keep the header site-title visible on the hero page — the shared
   `body:has(.home-hero) .site-title { visibility: hidden; }` rule assumes
   the hero fully replaces the header, but this page still wants the
   header title showing (e.g. while scrolling past the hero to the resume
   content below it). Scoped here, not in core, so other kernel sites'
   hero-only home pages keep the original hidden-title behavior. ───────── */
body:has(.home-hero) .site-title { visibility: visible; }

/* ── Section headings — a small accent rule instead of plain bold text,
   so "What I do" / "Professional History" etc. read as dividers, not
   just bigger paragraphs. ───────────────────────────────────────────── */
.post-body h2 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.post-body h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Core Capabilities — bold labels pick up the accent so the list scans
   as a set of named capabilities, not a wall of text. ──────────────────── */
.post-body > ul > li > strong:first-child {
  color: var(--accent-h);
}

/* ── Professional History — each role gets a quiet left rule with the
   date range as a small kicker above the company, echoing the platform's
   existing .post-kicker treatment (date + tags above a title). Requires
   the heading to be written as
   ### <span class="role-dates">2023 – 2026</span><span class="role-company">Company</span>
   in content/pages/home.md — markdown-it passes inline HTML through. ──── */
.post-body h3 {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-8) 0 var(--s-1);
  padding-left: var(--s-4);
  border-left: 3px solid var(--quote-bar);
}
.post-body h3:first-of-type { margin-top: var(--s-5); }

.role-dates {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.role-company {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
}

.post-body h3 + p {
  padding-left: calc(var(--s-4) + 3px);
  margin-top: 0;
}
.post-body h3 + p strong:first-child {
  color: var(--text);
}

.post-body h3 + p + ul {
  padding-left: calc(var(--s-4) + 3px + 1.75rem);
}

@media (prefers-color-scheme: dark) {
  .post-body h2::after { background: var(--border); }
}