/* ==========================================================================
   POST.CSS — Post page layout + Markdown prose styles for dbellerive.ca

   Covers everything that was previously split across .blog-section and
   #post in the global stylesheet, plus all markdown-rendered content.
   Scoped to #post (layout shell) and .post-content (prose body).

   This file is loaded only on /stories/<slug>/ pages.

   Organization:
     0) Post page layout  (#post shell, title, meta, pager, iframes)
     1) Rhythm & flow
     2) Headings
     3) Inline elements
     4) Blockquote
     5) Code & pre
     6) Lists
     7) Definition lists  (python-markdown def_list)
     8) Footnotes          (python-markdown extra)
     9) Abbreviations      (python-markdown abbr)
    10) Tables
    11) Images & figures
    12) Horizontal rules
    13) TOC               (python-markdown toc)
    14) Anchor permalinks (python-markdown toc permalink)
    15) Media queries
    16) Dark mode
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Post page layout
   Replaces the .blog-section + #post .blog-section rules from global CSS.
   The #post section already gets card chrome (padding / bg / shadow) from
   .body-section — we only need to add the content-column constraints here.
   -------------------------------------------------------------------------- */

/* Constrain all post-page sections to a readable column */
#post,
#syndication,
#social {
  max-width: 900px;
  margin-inline: auto;
  color: var(--ink);
}

/* Post title */
#post-title {
  font-size: clamp(1.9rem, 2.2vw + 1rem, 2.5rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
  color: var(--ink);
  max-width: 72ch;
}

/* Post meta (date · reading time) */
.post-meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.25rem 0 1.5rem;
  line-height: 1.4;
}

/* Iframes inside post (e.g. embedded maps, videos outside .post-content) */
#post iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  margin-inline: auto;
}

/* Post pager — inherits global .post-pager chrome, this just adds top spacing */
#post .post-pager {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   1) Rhythm & flow
   -------------------------------------------------------------------------- */
.post-content {
  /* Readable measure — 72ch matches the #post override in global CSS */
  max-width: 72ch;
  margin-inline: auto;

  color: var(--ink);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.1rem);
  line-height: 1.85;

  /* Prevent long URLs / inline code from breaking layout */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Vertical rhythm: every direct child gets bottom margin,
   first child never gets top margin. */
.post-content > * {
  margin-block: 0 1.1rem;
}

.post-content > *:first-child {
  margin-top: 0;
}

.post-content > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2) Headings
   Scale: H4 = body size, each level ~10–15% larger, H1 ~50% larger.
   Margins are tight — hierarchy comes from size, not whitespace.
   -------------------------------------------------------------------------- */

.post-content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-block: 2rem 0.4rem;
  color: var(--ink);
}

.post-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  margin-block: 1.6rem 0.35rem;
  color: var(--ink);
}

.post-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-block: 1.25rem 0.3rem;
  color: var(--ink);
}

.post-content h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  margin-block: 1rem 0.25rem;
  color: var(--ink);
}

.post-content h5,
.post-content h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  margin-block: 0.85rem 0.2rem;
  color: var(--muted);
}

/* Scroll offset for fixed header */
.post-content h1[id],
.post-content h2[id],
.post-content h3[id],
.post-content h4[id],
.post-content h5[id],
.post-content h6[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* --------------------------------------------------------------------------
   3) Inline elements
   -------------------------------------------------------------------------- */
.post-content a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--fast) var(--ease),
              text-decoration-thickness var(--fast) var(--ease);
}

.post-content a:hover,
.post-content a:focus-visible {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
  outline: none;
}

.post-content strong {
  font-weight: 700;
  color: var(--ink);
}

.post-content em {
  font-style: italic;
}

.post-content mark {
  background: rgba(185, 0, 0, 0.12);
  color: inherit;
  padding: 0.05em 0.2em;
  border-radius: 3px;
}

.post-content s,
.post-content del {
  opacity: 0.6;
}

.post-content sup,
.post-content sub {
  font-size: 0.78em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.post-content sup { top: -0.5em; }
.post-content sub { bottom: -0.25em; }

/* Inline code */
.post-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15em 0.38em;
  /* Don't wrap inline code mid-token */
  white-space: nowrap;
}

/* Keyboard input */
.post-content kbd {
  font-family: inherit;
  font-size: 0.88em;
  background: var(--kbd-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1em 0.42em;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4) Blockquote
   -------------------------------------------------------------------------- */
.post-content blockquote {
  margin-block: 1.5rem;
  margin-inline: 0;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem;
  border-left: 4px solid var(--brand-red-600);
  background: var(--blockquote-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  font-style: italic;
}

.post-content blockquote > *:first-child { margin-top: 0; }
.post-content blockquote > *:last-child  { margin-bottom: 0; }

/* Nested blockquote */
.post-content blockquote blockquote {
  margin-block: 0.75rem;
  border-left-color: var(--border-2);
}

/* Citation line */
.post-content blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--muted-2);
}

/* --------------------------------------------------------------------------
   5) Code blocks (pre)
   -------------------------------------------------------------------------- */
.post-content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  tab-size: 2;
}

.post-content pre code {
  /* Reset inline-code overrides */
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.92rem;
  white-space: pre;
  display: block;
}

/* --------------------------------------------------------------------------
   6) Lists
   -------------------------------------------------------------------------- */
.post-content ul,
.post-content ol {
  padding-inline-start: 1.6rem;
}

.post-content ul {
  list-style-type: disc;
}

.post-content ol {
  list-style-type: decimal;
}

/* Nested lists */
.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
  margin-block: 0.3rem 0;
}

.post-content li {
  margin-bottom: 0.35rem;
  line-height: 1.75;
}

.post-content li:last-child {
  margin-bottom: 0;
}

/* Loose list (paragraphs inside li, generated by python-markdown) */
.post-content li > p {
  margin-bottom: 0.5rem;
}

.post-content li > p:last-child {
  margin-bottom: 0;
}

/* Task lists (GFM-style via python-markdown extra) */
.post-content ul.task-list {
  list-style: none;
  padding-inline-start: 0.4rem;
}

.post-content .task-list-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.post-content .task-list-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand-red-600);
}

/* --------------------------------------------------------------------------
   7) Definition lists  (python-markdown def_list extension)
   -------------------------------------------------------------------------- */
.post-content dl {
  margin-block: 0 1.1rem;
}

.post-content dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.75rem;
}

.post-content dt:first-child {
  margin-top: 0;
}

.post-content dd {
  margin-inline-start: 1.4rem;
  color: var(--muted);
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   8) Footnotes  (python-markdown extra)
   Markdown-extra wraps footnotes in <div class="footnote"> with an <ol>.
   -------------------------------------------------------------------------- */
.post-content .footnote {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

.post-content .footnote ol {
  padding-inline-start: 1.4rem;
}

.post-content .footnote li {
  margin-bottom: 0.4rem;
}

/* Back-reference arrow */
.post-content .footnote .footnote-backref {
  text-decoration: none;
  color: var(--link);
  margin-left: 0.25rem;
}

/* Superscript footnote reference in body */
.post-content .footnote-ref a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.post-content .footnote-ref a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9) Abbreviations  (python-markdown abbr extension)
   Renders as <abbr title="..."> — just style the element.
   -------------------------------------------------------------------------- */
.post-content abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  color: inherit;
}

/* --------------------------------------------------------------------------
   10) Tables  (python-markdown extra / tables extension)
   -------------------------------------------------------------------------- */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
  /* Responsive scroll */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.post-content th {
  background: var(--surface-2);
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}

.post-content th,
.post-content td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.post-content tbody tr:last-child td {
  border-bottom: none;
}

.post-content tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.018);
}

.post-content tbody tr:hover {
  background: var(--chip);
}

/* --------------------------------------------------------------------------
   11) Images & figures
   -------------------------------------------------------------------------- */

/* Standalone markdown images */
.post-content img {
  display: block;
  max-width: var(--media-width, 70%);
  max-height: 700px;
  height: auto;
  margin-inline: auto;
  margin-block: 1.25rem;
  border-radius: var(--radius);
  object-fit: contain;
}

/* python-markdown attr_list lets you add {.full-width} etc. */
.post-content img.full-width {
  max-width: 100%;
  max-height: none;
}

.post-content img.small {
  max-width: 40%;
}

/* Figures (also used by {% figure %} shortcode) */
.post-content figure {
  margin-block: 1.75rem;
  margin-inline: 0;
  text-align: center;
}

.post-content figure img {
  margin-inline: auto;
  margin-block: 0;
  max-width: 100%;
  max-height: 600px;
}

.post-content figcaption {
  margin-top: 0.55rem;
  font-size: 0.875rem;
  color: var(--muted-2);
  line-height: 1.55;
  font-style: italic;
}

/* Linked images — remove underline */
.post-content a:has(> img) {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   12) Horizontal rules
   -------------------------------------------------------------------------- */
.post-content hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin-block: 2rem;
}

/* Ornamental separator — add {.ornament} via attr_list */
.post-content hr.ornament {
  background: none;
  text-align: center;
  overflow: visible;
}

.post-content hr.ornament::after {
  content: "· · ·";
  display: inline-block;
  position: relative;
  top: -0.6em;
  padding-inline: 0.5em;
  background: var(--surface);
  color: var(--muted-2);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
}

/* --------------------------------------------------------------------------
   13) TOC  (python-markdown toc extension)
   Renders as <div class="toc"><ul>…</ul></div>
   -------------------------------------------------------------------------- */
.post-content .toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem 2rem;
  font-size: 0.92rem;
}

.post-content .toc::before {
  content: "Contents";
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.6rem;
}

.post-content .toc ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.post-content .toc > ul {
  padding-inline-start: 0;
  list-style: none;
}

.post-content .toc li {
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

.post-content .toc a {
  color: var(--muted);
  text-decoration: none;
}

.post-content .toc a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14) Anchor permalinks  (toc permalink=True → <a class="anchor">#</a>)
   Always faintly visible so they're discoverable; full opacity on hover/focus.
   -------------------------------------------------------------------------- */
.post-content .anchor {
  margin-left: 0.4rem;
  font-size: 0.8em;
  color: var(--muted-2);
  text-decoration: none;
  opacity: 0.25;
  transition: opacity var(--fast) var(--ease);
  user-select: none;
}

.post-content h1:hover .anchor,
.post-content h2:hover .anchor,
.post-content h3:hover .anchor,
.post-content h4:hover .anchor,
.post-content h5:hover .anchor,
.post-content h6:hover .anchor,
.post-content .anchor:focus-visible {
  opacity: 1;
  outline: none;
}

/* --------------------------------------------------------------------------
   15) Responsive overrides
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {
  .post-content {
    font-size: 1rem;
    line-height: 1.8;
  }

  .post-content img {
    max-width: 100%;
    max-height: none;
  }

  .post-content figure img {
    max-width: 100%;
    max-height: none;
  }

  .post-content table {
    font-size: 0.875rem;
  }

  .post-content blockquote {
    padding-left: 0.9rem;
  }
}

@media (max-width: 500px) {
  .post-content pre {
    padding: 0.75rem;
    font-size: 0.875rem;
  }

  .post-content h2 {
    font-size: 1.25rem;
  }

  .post-content h3 {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-content a,
  .post-content .anchor {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   16) Dark mode
   All colour values already reference tokens that swap in the global dark
   mode block — nothing extra needed here except a couple hard-coded values.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Odd-row zebra stripe needs to be lighter in dark mode */
  .post-content tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
  }

  /* Ornament hr — match dark surface */
  .post-content hr.ornament::after {
    background: var(--surface);
  }

  /* Mark highlight in dark mode */
  .post-content mark {
    background: rgba(185, 0, 0, 0.25);
  }
}