/* Article-detail tweaks layered on top of Webflow's bundled CSS.

   These rules complement the bundled `lttrink.webflow.shared.*.min.css` —
   filling in things Webflow handled either via per-page inline `<style>`
   blocks (like the TOC list reset on every blog post) or via richtext-block
   <figure> wrapping that html2text doesn't preserve. Keep this file small
   and targeted; layout itself is the bundled CSS's job. */


/* ---------------------------------------------------------------------------
   Body images — Webflow constrains `.w-richtext figure` to max-width: 60%,
   but bare <img> tags from html2text-converted Markdown have no constraint
   and render at native dimensions (often 2000+px). Cap to article column
   width and preserve aspect ratio.
   --------------------------------------------------------------------------- */
.article-wrap.w-richtext img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ---------------------------------------------------------------------------
   TOC list reset — Webflow's canonical blog post HTML included an inline
   <style> block (lines 9–39 of every captured blog page) that zeroed out
   list-style/padding/margin on the sticky TOC's <ul>/<li>. Their `[TOC]`
   was JS-built and emitted bare items. We use markdown.extensions.toc
   which emits a `<div class="toc"><ul>...` so we replicate the reset here.
   --------------------------------------------------------------------------- */
.wrap-nav-article-headings-navigation .toc,
.wrap-nav-article-headings-navigation ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wrap-nav-article-headings-navigation li {
  list-style: none;
  margin-bottom: var(--size-xs, 0.5rem);
}

.wrap-nav-article-headings-navigation ul ul {
  padding-left: var(--size-xs, 0.5rem);
}

.wrap-nav-article-headings-navigation a {
  background: none;
  text-decoration: none;
  font-size: var(--text-2xs, 0.875rem);
}

.wrap-nav-article-headings-navigation a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Author chip — small avatar + linked author name. Webflow renders this on
   blog post pages; we replicate the visual via a Pelican-side lookup of the
   author's page by slug-derived match (article_blog.html).
   --------------------------------------------------------------------------- */
.article-author-chip {
  display: flex;
  align-items: center;
  margin: var(--size-xs, 0.5rem) 0 0 0;
  font-size: var(--text-xs, 0.875rem);
}

.article-author-chip a {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2xs, 0.5rem);
  text-decoration: none;
  background: none;
}

.article-author-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
}