/*
 * Blog-page bespoke sections — MSEED Education
 *
 * Covers home.php (blog archive) and single.php (blog post).
 * Blog-card component styles live in _blog-card.css.
 * This file: section wrappers + pagination.
 *
 * All values via var(--*). Breakpoints use raw px.
 */

/* ══════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE SECTION
═══════════════════════════════════════════════════════════════════════ */

.blog-archive {
  padding-block: var(--sp-9) var(--sp-7);
  background-color: var(--c-white);
}

@media (max-width: 768px) {
  .blog-archive {
    padding-block: var(--sp-7) var(--sp-5);
  }
}

.blog-archive__inner {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: var(--sp-9);
  align-items: start;
}

@media (max-width: 768px) {
  .blog-archive__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

.blog-archive__sidebar-title {
  font-size: var(--fs-h4, var(--fs-h3));
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin: 0 0 var(--sp-4);
}

.blog-archive__widget + .blog-archive__widget {
  margin-top: var(--sp-8);
}

.blog-archive__categories,
.blog-archive__recent {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-archive__categories li {
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-sm);
}

.blog-archive__categories a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-ink-700);
  text-decoration: none;
}

.blog-archive__categories a:hover,
.blog-archive__categories a:focus-visible {
  color: var(--c-blue-500);
}

.blog-archive__recent-link {
  color: var(--c-ink-700);
  text-decoration: none;
  line-height: var(--lh-snug, 1.35);
}

.blog-archive__recent-link:hover,
.blog-archive__recent-link:focus-visible {
  color: var(--c-blue-500);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════════ */

.pagination-wrap {
  padding-block: var(--sp-6) var(--sp-9);
  background-color: var(--c-white);
}

/* WP outputs .nav-links wrapper inside .pagination nav */

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-ink-700);
  text-decoration: none;
  border: 1px solid var(--c-line-200);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease);
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
  background-color: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: var(--c-white);
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.pagination .page-numbers.current {
  background-color: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: var(--c-white);
  pointer-events: none;
  aria-current: page; /* descriptive only; set in HTML by WP */
}

.pagination .page-numbers.dots {
  border: none;
  pointer-events: none;
  color: var(--c-ink-400);
}

/* ══════════════════════════════════════════════════════════════════════
   SINGLE POST — blog-post article wrapper (used in single.php)
═══════════════════════════════════════════════════════════════════════ */

.blog-post {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

@media (max-width: 768px) {
  .blog-post {
    padding-block: var(--sp-7);
  }
}

.blog-post__header {
  margin-bottom: var(--sp-7);
}

.blog-post__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}

.blog-post__meta {
  font-size: var(--fs-small);
  color: var(--c-ink-400);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.blog-post__content {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}

.blog-post__content h2,
.blog-post__content h3,
.blog-post__content h4 {
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.blog-post__content p {
  margin: 0 0 var(--sp-5);
}

.blog-post__content ul,
.blog-post__content ol {
  margin: 0 0 var(--sp-5);
  padding-inline-start: var(--sp-5);
}

.blog-post__content li {
  margin-bottom: var(--sp-2);
}

.blog-post__content a {
  color: var(--c-blue-500);
  text-decoration: underline;
}

.blog-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin-block: var(--sp-5);
}

/* Related posts section */

.blog-related {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-50);
}

@media (max-width: 768px) {
  .blog-related {
    padding-block: var(--sp-7);
  }
}

.blog-related__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-7);
}

/* ══════════════════════════════════════════════════════════════════════
   SINGLE POST — featured image + tags
═══════════════════════════════════════════════════════════════════════ */

.blog-post__featured-image {
  margin: 0 0 var(--sp-7);
}

.blog-post__featured-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
}

.blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}

.blog-post__tag {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background-color: var(--c-bg-50);
  border: 1px solid var(--c-line-200);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-600);
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.blog-post__tag:hover,
.blog-post__tag:focus-visible {
  background-color: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: var(--c-white);
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}