/* Happy Popper — Journal2 blog post typography (added 2026-09-15)
   Why: journal.css zeroes every h1-h6/p margin and the skin forces
   `.post-details { line-height:20px !important }`, so raw semantic HTML
   (h2/h3/p/ul/table) pasted into a blog post renders squashed with no
   spacing, overlapping heading lines and unstyled tables.
   Scope: only the single-post body (.blog-post .post-details). Mirrors the
   homepage article palette (#hp-article in home_article.tpl). */

.blog-post .post-details{
  padding:24px 30px 18px !important;
  font-size:15px;
  line-height:1.75 !important;
  color:#3a3d47;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:3px;
}
.blog-post .post-details > *:first-child{margin-top:0 !important;}

/* headings — override the 20px !important line-height from the skin */
.blog-post .post-details h1,
.blog-post .post-details h2,
.blog-post .post-details h3,
.blog-post .post-details h4{
  line-height:1.35 !important;
  text-transform:none;
  color:#333745;
  font-family:'Oswald',Arial,sans-serif;
  font-weight:600;
}
/* a post that repeats its title as an in-body h1: the theme already prints
   the title in .heading-title, so keep this one modest, not a second banner */
.blog-post .post-details h1{font-size:23px;margin:0 0 14px;}
.blog-post .post-details h2{
  font-size:19px;margin:30px 0 12px;padding-left:12px;border-left:4px solid #dd0016;
}
.blog-post .post-details h3{
  font-size:15.5px;margin:22px 0 8px;font-family:Helvetica,Arial,sans-serif;font-weight:700;color:#262a35;
}
.blog-post .post-details h4{font-size:15px;margin:18px 0 6px;font-family:Helvetica,Arial,sans-serif;font-weight:700;}

/* text */
.blog-post .post-details p{margin:0 0 16px;line-height:1.75 !important;}
.blog-post .post-details p:last-child{margin-bottom:0;}
.blog-post .post-details a{color:#dd0016;text-decoration:none;border-bottom:1px solid rgba(221,0,22,.35);}
.blog-post .post-details a:hover{border-bottom-color:#dd0016;}
.blog-post .post-details strong,.blog-post .post-details b{color:#262a35;}
.blog-post .post-details blockquote{
  margin:0 0 16px;padding:14px 18px;background:#f7f9fb;border-left:3px solid #333745;border-radius:0 3px 3px 0;font-size:14.5px;
}
.blog-post .post-details hr{border:0;border-top:1px solid #e3e3e3;margin:24px 0;}
.blog-post .post-details img{max-width:100%;height:auto;margin:6px 0 16px;}

/* lists */
.blog-post .post-details ul,
.blog-post .post-details ol{margin:0 0 16px;padding-left:22px;list-style-position:outside;}
.blog-post .post-details ul{list-style:disc;}
.blog-post .post-details ol{list-style:decimal;}
.blog-post .post-details li{margin-bottom:7px;line-height:1.7 !important;}
.blog-post .post-details li > ul,.blog-post .post-details li > ol{margin:6px 0 0;}

/* tables — bare <table> has zero styling in Journal2 */
.blog-post .post-details table{
  border-collapse:collapse;width:100%;margin:0 0 20px;font-size:13.5px;line-height:1.5 !important;
  background:#fff;border:1px solid #e3e3e3;
}
.blog-post .post-details table th{
  background:#f4f6f8;text-align:left;padding:9px 11px;border-bottom:2px solid #e3e3e3;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#6b7078;
  font-family:'Oswald',Arial,sans-serif;font-weight:600;vertical-align:bottom;
}
.blog-post .post-details table td{padding:9px 11px;border-bottom:1px solid #e3e3e3;vertical-align:top;}
.blog-post .post-details table tr:last-child td{border-bottom:0;}
.blog-post .post-details table tbody tr:nth-child(even) td{background:#fafbfc;}
.blog-post .post-details table td:first-child{font-weight:600;color:#262a35;min-width:120px;}

/* phones: tables scroll instead of crushing, tighter padding */
@media (max-width:640px){
  .blog-post .post-details{padding:18px 16px 12px !important;}
  .blog-post .post-details h1{font-size:20px;}
  .blog-post .post-details h2{font-size:17px;}
  .blog-post .post-details table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}