/* Blog-specific styles, layered on top of the site's styles.css. */

/* .lp already adds padding-top to clear the fixed nav; .lp-section adds its
   own large top padding on top of that for rhythm between stacked homepage
   sections. The blog only ever has one .lp-section right under the nav, so
   the two stack into a much bigger gap than intended -- trim it back down. */
.blog-main > .lp-section:first-child {
  padding-top: 1.5rem;
}

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

.blog-list-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-list-item a {
  font-family: "Oswald", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
}

.blog-list-date {
  display: block;
  opacity: 0.6;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.blog-post-meta {
  opacity: 0.6;
  font-size: 0.85rem;
}

/* .lp-body caps the whole block at 66ch for readable paragraph width, but
   that shrinks the box itself -- a child heading can't be wider than its
   own parent just by setting the child's max-width. Un-cap the container
   and apply the 66ch measure to paragraphs only, so headings run the full
   column width like the post's <h1> does. */
.blog-post-body {
  max-width: none;
}
.blog-post-body p,
.blog-post-body ul,
.blog-post-body ol {
  max-width: 66ch;
}
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--sw-text);
  margin-top: 2rem;
}

.blog-post-back {
  margin-bottom: 1.5rem;
}

.blog-post-pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-post-pager-prev,
.blog-post-pager-next {
  max-width: 45%;
}

.blog-post-pager-next {
  text-align: right;
  margin-left: auto;
}

/* Optional second line of a post title (front matter `subtitle`), e.g. the
   weekly "This Week at Six Walls" posts. */
.blog-subtitle {
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.85;
}

/* The series name above a subtitled post ("This Week at Six Walls") in the
   Six Walls orange. */
.blog-series {
  color: var(--sw-orange);
}