/* publisher-content.css — token-driven styles for publisher-generated content
 *
 * Auto-themed per client: every color/radius/spacing value references a CSS
 * custom property from the client's :root token set (brief v4 §1.4). So the
 * same stylesheet looks correct on any client site — forest/cream on Pearl,
 * navy/gold on a legal-services client, black/orange on a tech-startup,
 * etc.
 *
 * Covers:
 *   - .blog-index, .post-card    — the /blog/ listing page
 *   - .blog-post                  — single /blog/<slug>.html
 *   - .sidebar-news, .sidebar-recent — dynamic sidebar partials
 *   - .post-tags, .byline          — shared article chrome
 *
 * Conventions:
 *   - All colors via var(--…); fall back to sensible greys if the token isn't set.
 *   - Spacing via var(--spacing-block) / --spacing-section where available.
 *   - No hard-coded fonts — inherits the client's --font-body / --font-heading.
 *   - Respects prefers-reduced-motion.
 *
 * Managed by publisher.py — do not edit per-client. To restyle one client,
 * override specific rules in that client's assets/css/<page>.css.
 */

/* ── Blog post (single) ─────────────────────────────────────────────── */

.blog-post {
  max-width: var(--content-width, 720px);
  margin: 0 auto;
  padding: var(--spacing-section, 3rem) var(--spacing-inline, 1.25rem);
}

.blog-post .post-header {
  margin-bottom: var(--spacing-block, 2rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border, #e5e5e5);
}

.blog-post .post-header h1 {
  margin: 0 0 0.5em;
  color: var(--text-heading, inherit);
  font-family: var(--font-heading, inherit);
  font-size: var(--size-h1, 2.25rem);
  line-height: var(--lh-h1, 1.15);
}

.blog-post .byline {
  color: var(--text-muted, #737373);
  font-size: var(--size-small, 0.9rem);
  margin: 0;
}
.blog-post .byline a { color: var(--text-body, inherit); }
.blog-post .byline a:hover { color: var(--primary, currentColor); }

.blog-post .post-hero {
  margin: 0 0 var(--spacing-block, 2rem);
}
.blog-post .post-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
}
.blog-post .post-hero figcaption {
  margin-top: 0.5rem;
  color: var(--text-muted, #737373);
  font-size: var(--size-small, 0.9rem);
  text-align: center;
}

.blog-post .post-body {
  color: var(--text-body, inherit);
  font-family: var(--font-body, inherit);
  font-size: var(--size-body, 1rem);
  line-height: var(--lh-body, 1.65);
}

.blog-post .post-body h2 {
  margin-top: 2.5em;
  font-family: var(--font-heading, inherit);
  color: var(--text-heading, inherit);
  font-size: var(--size-h2, 1.6rem);
  line-height: var(--lh-h2, 1.2);
}
.blog-post .post-body h3 {
  margin-top: 2em;
  font-family: var(--font-heading, inherit);
  color: var(--text-heading, inherit);
  font-size: var(--size-h3, 1.3rem);
}

.blog-post .post-body p { margin: 1em 0; }
.blog-post .post-body ul, .blog-post .post-body ol { padding-left: 1.5em; }
.blog-post .post-body li { margin: 0.4em 0; }
.blog-post .post-body blockquote {
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  background: var(--surface-alt, #f5f5f5);
  border-left: 4px solid var(--accent, var(--primary, #999));
  border-radius: var(--radius-base, 6px);
  color: var(--text-muted, #555);
  font-style: italic;
}

.blog-post .post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-base, 6px);
  margin: 1.5em 0;
}

.blog-post .post-body pre {
  background: var(--neutral-800, #1f1d1a);
  color: var(--neutral-50, #fafafa);
  padding: 1em 1.25em;
  border-radius: var(--radius-base, 6px);
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.5;
}
.blog-post .post-body code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.9em;
  background: var(--surface-alt, #f5f5f5);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm, 3px);
}
.blog-post .post-body pre code { background: transparent; padding: 0; }

.blog-post .post-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.blog-post .post-body th, .blog-post .post-body td {
  border: 1px solid var(--border, #e5e5e5);
  padding: 0.5em 0.75em;
  text-align: left;
}
.blog-post .post-body th {
  background: var(--surface-alt, #f5f5f5);
  font-weight: 600;
}

.blog-post .post-body a {
  color: var(--primary, inherit);
  text-decoration: underline;
  text-decoration-color: var(--accent, currentColor);
  text-underline-offset: 2px;
}
.blog-post .post-body a:hover {
  color: var(--primary-dark, var(--primary, inherit));
  text-decoration-color: currentColor;
}

.blog-post .post-tags {
  list-style: none;
  padding: 0;
  margin: 2em 0 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.blog-post .post-tags li {
  font-size: var(--size-small, 0.85rem);
  padding: 0.25em 0.75em;
  background: var(--surface-alt, #f5f5f5);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-full, 9999px);
  color: var(--text-muted, #555);
}

.blog-post .post-nav {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border, #e5e5e5);
}
.blog-post .post-nav a {
  color: var(--primary, inherit);
  text-decoration: none;
  font-weight: 500;
}

.blog-post .post-source {
  margin-top: 1.5em;
  color: var(--text-muted, #999);
  font-style: italic;
}


/* ── Blog index (listing page) ──────────────────────────────────────── */

.blog-index {
  max-width: var(--site-width, 1100px);
  margin: 0 auto;
  padding: var(--spacing-section, 3rem) var(--spacing-inline, 1.25rem);
}

.blog-index .page-header {
  margin-bottom: var(--spacing-block, 2rem);
}

.blog-index .page-header h1 {
  font-family: var(--font-heading, inherit);
  color: var(--text-heading, inherit);
  font-size: var(--size-h1, 2.25rem);
  margin: 0;
}

.blog-index .page-header p {
  color: var(--text-muted, #777);
  font-size: var(--size-small, 0.9rem);
}
.blog-index .page-header a {
  color: var(--primary, inherit);
  margin-right: 0.75em;
}

.blog-index .post-card {
  display: block;
  padding: 1.5em;
  margin-bottom: 1em;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-index .post-card:hover {
  box-shadow: var(--shadow-base, 0 4px 12px rgba(0,0,0,0.08));
  border-color: var(--accent, var(--primary, #999));
}

.blog-index .post-card h2 {
  margin: 0 0 0.4em;
  font-size: var(--size-h3, 1.3rem);
  font-family: var(--font-heading, inherit);
  color: var(--text-heading, inherit);
  line-height: var(--lh-h3, 1.25);
}
.blog-index .post-card h2 a {
  color: inherit;
  text-decoration: none;
}
.blog-index .post-card h2 a:hover { color: var(--primary, inherit); }

.blog-index .post-card .card-meta {
  color: var(--text-muted, #777);
  font-size: var(--size-small, 0.85rem);
  margin: 0 0 0.75em;
}

.blog-index .post-card .card-summary {
  color: var(--text-body, inherit);
  margin: 0 0 1em;
  line-height: var(--lh-body, 1.6);
}

.blog-index .post-card .card-link {
  color: var(--primary, inherit);
  font-weight: 500;
  text-decoration: none;
}
.blog-index .post-card .card-link:hover { text-decoration: underline; }


/* ── Sidebar partials (_sidebar-news, _sidebar-recent) ─────────────── */

.sidebar-news,
.sidebar-recent {
  background: var(--surface-alt, #f5f5f5);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-base, 6px);
  padding: 1.25em 1.5em;
  margin: 0 0 1.5em;
}

.sidebar-news h3,
.sidebar-recent h3 {
  margin: 0 0 0.75em;
  font-family: var(--font-heading, inherit);
  color: var(--text-heading, inherit);
  font-size: var(--size-h4, 1.1rem);
  border-bottom: 2px solid var(--accent, var(--primary, currentColor));
  padding-bottom: 0.4em;
}

.sidebar-news ul,
.sidebar-recent ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-news li,
.sidebar-recent li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--border, #e5e5e5);
  font-size: var(--size-small, 0.9rem);
  line-height: 1.4;
}
.sidebar-news li:last-child,
.sidebar-recent li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-news a,
.sidebar-recent a {
  color: var(--text-body, inherit);
  text-decoration: none;
  font-weight: 500;
}
.sidebar-news a:hover,
.sidebar-recent a:hover {
  color: var(--primary, inherit);
  text-decoration: underline;
}

.sidebar-news small,
.sidebar-recent small {
  color: var(--text-muted, #999);
  font-size: 0.85em;
  font-weight: normal;
}


/* ── Prefers reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .blog-index .post-card { transition: none; }
}