/*
 * Blog views only.
 *
 * The site's stylesheet was written for the marketing pages and defines
 * nothing the post templates use - entry-title, entry-content and the rest
 * match no rule in css/style.css, so a post rendered as full-bleed unstyled
 * text. This covers the markup template-parts/content.php actually emits and
 * nothing else.
 *
 * Loaded from header.php behind is_home() / is_singular('post'), so the
 * marketing pages neither download it nor are affected by it.
 */

.site-main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.site-main .entry-title {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: #1f1f1f;
  margin: 0 0 .5rem;
}

.site-main .entry-title a { color: inherit; text-decoration: none; }
.site-main .entry-title a:hover { color: #5bbe6f; }

.site-main .entry-meta {
  font-size: .875rem;
  color: #767676;
  margin-bottom: 1.5rem;
}

/* Roughly 65 characters a line, which is where running text stops being work. */
.site-main .entry-content {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #2e2e2e;
}

.site-main .entry-content p { margin: 0 0 1.25rem; }

.site-main .entry-content h2,
.site-main .entry-content h3 {
  font-family: Montserrat, sans-serif;
  margin: 2.5rem 0 .75rem;
  line-height: 1.3;
}

.site-main .entry-content a { color: #4e8f2f; }

.site-main .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.site-main .entry-content blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid #5bbe6f;
  color: #585858;
}

/* Posts in the index are separated by a rule rather than cards: there is one
   post today and a card grid of one looks like a mistake. */
.site-main article + article {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e1e1e1;
}

.site-main .post-navigation,
.site-main .posts-navigation {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e1e1e1;
  font-size: .9375rem;
}

.site-main .post-navigation a,
.site-main .posts-navigation a { color: #4e8f2f; text-decoration: none; }

.site-main .nav-previous,
.site-main .nav-next { margin-bottom: .5rem; }

/* _s hides these visually but expects the class to exist. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/*
 * The empty state, from template-parts/content-none.php.
 *
 * Its markup uses page-title / page-content, which the site's stylesheet also
 * does not define - the heading had no bottom margin and sat on top of the
 * paragraph below it, and the search form rendered as raw browser controls.
 */
.site-main .no-results .page-title {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.3;
  color: #1f1f1f;
  margin: 0 0 .75rem;
}

.site-main .no-results .page-content p {
  margin: 0 0 1.5rem;
  color: #585858;
  line-height: 1.6;
}

.site-main .search-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.site-main .search-form label { flex: 1 1 16rem; margin: 0; }

.site-main .search-form .search-field {
  width: 100%;
  padding: .625rem .875rem;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  font-size: 1rem;
  color: #2e2e2e;
}

.site-main .search-form .search-field:focus {
  outline: none;
  border-color: #5bbe6f;
  box-shadow: 0 0 0 3px rgba(91, 190, 111, .2);
}

.site-main .search-form .search-submit {
  padding: .625rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: #5bbe6f;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

.site-main .search-form .search-submit:hover { background: #4e8f2f; }

/* ---------------------------------------------------------------------------
 * The listing (home.php).
 *
 * Wider than the reading column above: a single post wants ~44rem so the line
 * length stays readable, a grid of cards wants the room.
 * ------------------------------------------------------------------------- */

.site-main.blog-listing {
  max-width: 76rem;
  padding-top: 4rem;
}

.blog-hero { margin-bottom: 2.5rem; }

.blog-hero__title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #1f1f1f;
  margin: 0 0 .5rem;
}

.blog-hero__tagline {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #585858;
  margin: 0;
  max-width: 34rem;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 3rem;
}

.blog-filters__chip {
  display: inline-block;
  padding: .5rem 1.125rem;
  border: 1px solid #cfe8d4;
  border-radius: 999px;
  font-size: .9375rem;
  color: #2e2e2e;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}

.blog-filters__chip:hover { border-color: #5bbe6f; }
.blog-filters__chip.is-active { background: #e8f5ea; border-color: #cfe8d4; }

/* auto-fit rather than a fixed three: two posts should not leave a visible
   empty third column, and the same rule handles tablet and phone. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.5rem 2rem;
}

.blog-card { display: flex; flex-direction: column; }

/* Reserve the image's space before it loads so the titles below do not jump. */
.blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f2f2;
  margin-bottom: 1rem;
}

.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #63bf6e 0%, #4e8f2f 100%);
}

.blog-card__placeholder img { width: 110px; height: 41px; object-fit: contain; opacity: .9; }

.blog-card__meta {
  font-size: .875rem;
  color: #767676;
  margin: 0 0 .5rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.blog-card__title {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 .625rem;
}

.blog-card__title a { color: #1f1f1f; text-decoration: none; }
.blog-card__title a:hover { color: #4e8f2f; }

.blog-card__excerpt {
  font-size: .9375rem;
  line-height: 1.6;
  color: #585858;
  margin: 0;
}

/* The listing separates posts into cards, so the single-column rule from the
   reading styles above must not also draw a line between them. */
.blog-listing .blog-grid article + article {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.blog-listing .pagination {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e1e1e1;
  font-size: .9375rem;
}

.blog-listing .pagination .page-numbers {
  display: inline-block;
  padding: .375rem .75rem;
  color: #2e2e2e;
  text-decoration: none;
  border-radius: 6px;
}

.blog-listing .pagination .page-numbers.current { background: #e8f5ea; color: #1f1f1f; }
.blog-listing .pagination .page-numbers:hover { background: #f2f7f3; }

@media (max-width: 40rem) {
  .site-main.blog-listing { padding-top: 2.5rem; }
  .blog-grid { gap: 2rem; }
}

/* ---------------------------------------------------------------------------
 * The article (single.php).
 * ------------------------------------------------------------------------- */

.site-main.article {
  max-width: 68rem;
  padding-top: 3rem;
}

.article__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #767676;
  text-decoration: none;
}

.article__back:hover { color: #4e8f2f; }

.article__header { max-width: 46rem; margin-bottom: 2rem; }

.article__title {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #1f1f1f;
  margin: 0 0 1rem;
}

.article__meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .9375rem;
  color: #767676;
  margin: 0;
}

.article__hero { margin: 0 0 3rem; }

.article__hero img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.article__hero figcaption {
  margin-top: .625rem;
  text-align: right;
  font-size: .8125rem;
  color: #999;
}

/* Contents beside the body. The column is narrow on purpose: it is a map, not
   a second article. */
.article__layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.article__toc { position: sticky; top: 7rem; }

.article__toc-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 .75rem;
}

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

.article__toc li + li { border-top: 1px solid #ececec; }

.article__toc a {
  display: block;
  padding: .75rem 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: #2e2e2e;
  text-decoration: none;
}

.article__toc a:hover { color: #4e8f2f; }

.article__content { font-size: 1.0625rem; line-height: 1.75; color: #2e2e2e; }
.article__content > p { margin: 0 0 1.375rem; }

/* The opening paragraph carries the weight of the piece, so it is set larger
   with a drop cap - the same move the reference page makes. */
.article__content > p:first-of-type { font-size: 1.25rem; line-height: 1.6; color: #1f1f1f; }

.article__content > p:first-of-type::first-letter {
  float: left;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 3.5em;
  line-height: .82;
  padding: .06em .08em 0 0;
  color: #4e8f2f;
}

.article__content h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.75rem 0 .875rem;
  color: #1f1f1f;
  /* so an anchor jump does not hide the heading under the fixed navbar */
  scroll-margin-top: 6rem;
}

.article__content h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 1.1875rem;
  margin: 2rem 0 .625rem;
  scroll-margin-top: 6rem;
}

.article__content a { color: #4e8f2f; }
.article__content img { max-width: 100%; height: auto; border-radius: 10px; }

.article .post-navigation {
  margin-top: 4rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e1e1e1;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: .9375rem;
}

.article .post-navigation a { color: #4e8f2f; text-decoration: none; }

@media (max-width: 60rem) {
  /* Below this the contents column would be a narrow strip of wrapped words,
     so it moves above the body and stops sticking. */
  .article__layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .article__toc { position: static; padding-bottom: 1.5rem; border-bottom: 1px solid #ececec; }
  .article__content > p:first-of-type { font-size: 1.125rem; }
}