/* ─── einio blog — generated pages ──────────────────────────────────────── */

/* Navbar on light blog pages: the shared navbar starts in its transparent
   (dark-hero) state — white logo + white login, invisible on the blog's
   white background. Force the "scrolled" appearance here. This file loads
   after styles.css on every generated blog page, so these rules win
   regardless of the scroll-toggle class, and the home page is unaffected. */
.navbar {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(206,212,218,.4);
}
.navbar .navbar__logo--light { display: none; }
.navbar .navbar__logo--dark  { display: block; }
.navbar .navbar__link   { color: var(--brand-darkest); }
.navbar .navbar__login  { border-color: var(--brand-darkest); color: var(--brand-darkest); }
.navbar .navbar__login:hover { background: var(--brand-darkest); color: var(--white); }
.navbar .navbar__burger { color: var(--brand-darkest); }

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-listing,
.blog-article {
  padding: 140px 0 80px;
}

.blog-listing h1 {
  font-size: 2.5rem;
  margin-bottom: 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.blog-card {
  display: block;
  border: 1px solid #e3e9e4;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}

.blog-card:hover {
  box-shadow: 0 8px 24px rgba(26, 46, 26, .08);
  transform: translateY(-2px);
}

.blog-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 16px;
}

.blog-card__category {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #4A7C59;
  font-weight: 600;
  margin: 0 0 6px;
}

.blog-card__title {
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.blog-card__excerpt {
  color: #5b6b5d;
  font-size: .92rem;
  margin: 0;
}

.blog-breadcrumb {
  font-size: .85rem;
  color: #5b6b5d;
  margin-bottom: 24px;
}

.blog-breadcrumb a {
  color: #4A7C59;
  text-decoration: none;
}

.blog-article h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 4px 0 12px;
}

.blog-article__meta {
  color: #5b6b5d;
  font-size: .9rem;
  margin-bottom: 28px;
}

.blog-article__cover {
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-bottom: 32px;
}

.blog-article__body h2 { margin: 2rem 0 .8rem; font-size: 1.5rem; }
.blog-article__body h3 { margin: 1.6rem 0 .6rem; font-size: 1.2rem; }
.blog-article__body p  { line-height: 1.75; margin: 0 0 1rem; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 1rem 1.2rem; line-height: 1.7; }
.blog-article__body img { max-width: 100%; height: auto; border-radius: 12px; }
.blog-article__body a { color: #4A7C59; }
.blog-article__body code { background: #f0f3f0; padding: 2px 6px; border-radius: 6px; font-size: .9em; }

.blog-cta {
  margin-top: 48px;
  padding: 32px;
  border-radius: 16px;
  background: #1A2E1A;
  color: #F8F9FA;
}

.blog-cta h2 { margin: 0 0 8px; font-size: 1.3rem; }
.blog-cta p  { margin: 0 0 20px; color: #cfd8d0; }

.blog-cta__button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #4A7C59;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  margin-right: 12px;
}

.blog-cta__button--secondary {
  background: transparent;
  border: 1px solid #4A7C59;
}

.blog-related { margin-top: 56px; }
.blog-related h2 { font-size: 1.4rem; margin-bottom: 20px; }

@media (max-width: 640px) {
  .blog-listing, .blog-article { padding: 110px 0 60px; }
  .blog-article h1 { font-size: 1.7rem; }
}