/* ─── Blog article pages ──────────────────────────────────────────────────
   Loaded by pagerender.rs for all pages with the BLOG flag set.
   Design language matches the index page (hero-overlay.css):
     accent:      #00d4aa  teal
     body text:   #cdd / #dde
     muted text:  #9ab / #7a9baa
     dark bg:     rgba(0, 15, 35, 0.7) / rgba(0, 30, 60, 0.6)
     max-width:   52em, centered
   ──────────────────────────────────────────────────────────────────────── */

/* ── Header chrome (title / description / image / info bar) ── */

.BlogTitle
{
  text-align:     center;
  font-size:      clamp(1.6em, 4vw, 2.8em);
  font-weight:    300;
  color:          #e0f7f4;
  padding:        0.5em 1em 0.2em;
  letter-spacing: -0.01em;
}

.BlogDescription
{
  text-align: center;
  font-size:  clamp(0.9em, 1.5vw, 1.05em);
  color:      #9ab;
  max-width:  52em;
  margin:     0 auto 0.5em;
  padding:    0 2em;
}

.BlogImage
{
  text-align: center;
}

.BlogImage img
{
  width:         min(60vw, 52em);
  border-radius: 0.4em;
}

.BlogInfoBar
{
  text-align:     center;
  font-size:      0.82em;
  color:          #445566;
  letter-spacing: 0.04em;
  padding:        0.5em;
}

.BlogAuthor
{
  max-width: 52em;
  margin:    2em auto;
  padding:   0 1em;
}

.BlogAuthor h4
{
  text-align: center;
  color:      #00d4aa;
}

.BlogAuthor td
{
  padding: 0.5em;
}

.PostsNavBar
{
  max-width: 52em;
  margin:    1em auto;
  padding:   0 1em;
  color:     #7a9baa;
}

/* ── Markdown content body ── */

.BlogMarkdownContent
{
  max-width:   52em;
  margin:      0 auto;
  padding:     0 1.5em 3em;
  line-height: 1.75;
  font-size:   clamp(0.9em, 1.4vw, 1.05em);
}

/* h1 is already rendered as .BlogTitle above the image — hide it in body */
.BlogMarkdownContent h1:not([class])
{
  display: none;
}

.BlogMarkdownContent h2:not([class]),
.BlogMarkdownContent h3:not([class])
{
  color:            #fff;
  background-color: #040;
  background-image: linear-gradient(#040, #080, #040);
  text-shadow:
    -0.01em -0.01em 0 #0a0,
     0.01em -0.01em 0 #0a0,
    -0.01em  0.01em 0 #0a0,
     0.01em  0.01em 0 #0a0;
  padding:      0.5em;
  display:      block;
  margin-top:   1em;
  margin-bottom: 0;
}

.BlogMarkdownContent p
{
  color:         #cdd;
  margin:        0 0 0.8em;
}

.BlogMarkdownContent ul,
.BlogMarkdownContent ol
{
  color:         #cdd;
  padding-left:  1.4em;
  margin-bottom: 0.8em;
}

.BlogMarkdownContent li
{
  padding:     0.15em 0;
  line-height: 1.7;
}

.BlogMarkdownContent hr
{
  border:     none;
  border-top: 1px solid rgba(0, 212, 170, 0.25);
  margin:     1.5em 0;
}

.BlogMarkdownContent strong
{
  color: #00d4aa;
}

.BlogMarkdownContent a
{
  color: #7ad4c4;
}

.BlogMarkdownContent a:hover
{
  color: #00d4aa;
}

.BlogMarkdownContent blockquote
{
  padding:          0.75em 1.2em;
  border-left:      4px solid #00d4aa;
  background:       rgba(0, 30, 60, 0.6);
  margin:           1em 0;
  border-radius:    0 0.3em 0.3em 0;
  color:            #dde;
  font-style:       italic;
}

.BlogMarkdownContent code
{
  background-color: rgba(0, 15, 35, 0.9);
  padding:          0.1em 0.4em;
  border-radius:    0.2em;
  font-family:      monospace;
  color:            #9ef;
  font-size:        0.9em;
  border:           1px solid rgba(0, 212, 170, 0.15);
}

.BlogMarkdownContent pre
{
  background:    rgba(0, 15, 35, 0.9);
  border:        1px solid rgba(0, 212, 170, 0.2);
  border-radius: 0.4em;
  padding:       1.2em;
  overflow-x:    auto;
  margin:        1em 0;
}

.BlogMarkdownContent pre code
{
  background-color: transparent;
  padding:          0;
  border:           none;
  color:            #9ef;
}

.BlogMarkdownContent img
{
  max-width:     100%;
  height:        auto;
  display:       block;
  margin:        1.2em auto;
  border-radius: 0.4em;
}