/* The blog, styled with the main site's own tokens rather than the WordPress
   theme's: #e75023 for links and headings, #646464 for body copy, #DEDEDE for
   rules, Tahoma for everything. The theme it replaces already loaded
   southmedia-style.css off the main site, so this is the same look, minus a
   WordPress. Loaded on blog pages only, via `content_for :head`. */

.blog {
  font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
  color: #646464;
  font-size: 16px;
  line-height: 22px;
}

/* --- masthead ------------------------------------------------------------ */

.blog-masthead {
  border-bottom: 1px solid #DEDEDE;
  margin-bottom: 24px;
  padding-bottom: 12px;
}

.blog-masthead h1 {
  font-size: 26px;
  margin: 0;
  padding-top: 10px;
}

.blog-masthead h1 a:link,
.blog-masthead h1 a:visited { color: #e75023; }

.blog-strapline {
  margin: 4px 0 0;
  color: #909090;
  font-size: 14px;
}

/* --- two columns --------------------------------------------------------- */

.blog-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.blog-main { flex: 1 1 auto; min-width: 0; }

.blog-side {
  flex: 0 0 220px;
  font-size: 14px;
  line-height: 20px;
}

.blog-side h2 {
  font-size: 15px;
  color: #646464;
  border-bottom: 1px solid #DEDEDE;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.blog-side section { margin-bottom: 28px; }
.blog-side ul { list-style: none; margin: 0; padding: 0; }
.blog-side li { margin-bottom: 6px; }

/* --- listings ------------------------------------------------------------ */

.blog-summary {
  border-bottom: 1px solid #DEDEDE;
  margin-bottom: 28px;
  padding-bottom: 20px;
}

.blog-summary h2 { font-size: 20px; margin-bottom: 4px; }
.blog-summary h2 a:link,
.blog-summary h2 a:visited { color: #e75023; }

.blog-meta {
  color: #909090;
  font-size: 13px;
  margin: 0 0 12px;
}

.blog-excerpt { margin: 0 0 12px; }

.blog-archive-list { list-style: none; padding: 0; }

.blog-archive-list li {
  display: flex;
  gap: 12px;
  padding: 3px 0;
}

.blog-archive-list time {
  flex: 0 0 60px;
  color: #909090;
  font-size: 13px;
}

/* --- a single post ------------------------------------------------------- */

.blog-entry h1 { font-size: 24px; }

/* Post bodies are 14 years of WordPress markup, so they are constrained rather
   than restyled: images must not overflow the column, and the wide screenshots
   in the older posts must not push the sidebar sideways. */
.blog-body img {
  max-width: 100%;
  height: auto;
}

.blog-body figure { margin: 20px 0; }

.blog-body figcaption {
  font-size: 13px;
  color: #909090;
  padding-top: 6px;
}

.blog-body iframe {
  max-width: 100%;
  border: 0;
}

.blog-body blockquote {
  border-left: 3px solid #DEDEDE;
  margin-left: 0;
  padding-left: 16px;
  color: #808080;
}

/* Code blocks borrow the main site's .code-box look, so a post's code reads the
   same as a code sample on a product page. The highlight.js theme paints what
   is inside; this is the box around it. */
.blog-body pre {
  background-color: #EEEEEE;
  border: 1px solid #DEDEDE;
  border-radius: 8px;
  overflow-x: auto;
  padding: 4px 12px;
}

.blog-body pre code {
  background: none;
  font-size: 14px;
  line-height: 20px;
}

.blog-body table {
  border-collapse: collapse;
  max-width: 100%;
}

.blog-body td, .blog-body th {
  border: 1px solid #DEDEDE;
  padding: 6px 10px;
}

/* --- moving between posts ------------------------------------------------ */

.blog-pagination,
.blog-neighbours {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #DEDEDE;
  padding-top: 16px;
  margin-top: 8px;
}

.blog-neighbours .newer,
.blog-pagination .newer { margin-left: auto; text-align: right; }

.blog-pagecount {
  color: #909090;
  font-size: 13px;
  text-align: center;
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 767px) {
  .blog-layout { display: block; }

  .blog-side {
    border-top: 1px solid #DEDEDE;
    margin-top: 30px;
    padding-top: 10px;
  }

  .blog-neighbours { display: block; }
  .blog-neighbours a { display: block; padding: 6px 0; }
  .blog-neighbours .newer { text-align: left; }
}