/* Feldstein Family Law — Blog Archive Styles
   Migrated by Hephaestus from feldstein-source/v1a-round2/templates/blog-archive.html.
   Used by archive.php (category, tag, date archives) and home.php (Posts page index).
   Global tokens, nav, footer, CTA, locations, scrollbar, and theme toggle live in global.css. */

/* =========================================
   PAGE HERO
   ========================================= */
.page-hero {
  padding: 180px 48px 80px;
  background: var(--cream);
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.page-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.page-hero .overline {
  margin-bottom: 24px;
  display: inline-block;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}
.page-hero h1 em { color: var(--wine); font-style: normal; }
.page-hero-sub {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 640px;
  margin: 0 auto;
}
.page-hero-sub p { margin: 0 0 12px; }
.page-hero-sub p:last-child { margin-bottom: 0; }

/* =========================================
   CATEGORY FILTER
   ========================================= */
.cat-filter {
  padding: 48px 0 24px;
  background: var(--cream);
}
.cat-filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 40px;
  background: var(--white);
  transition: color .25s, background .25s, border-color .25s, transform .25s;
}
.cat-pill:hover {
  color: var(--wine);
  border-color: var(--wine);
  transform: translateY(-1px);
}
.cat-pill.active {
  background: var(--wine);
  color: #fff;
  border-color: var(--wine);
}
.cat-pill.active:hover {
  background: var(--wine-deep);
  border-color: var(--wine-deep);
  color: #fff;
}

/* =========================================
   BLOG GRID
   ========================================= */
.blog-grid-section {
  padding: 48px 0 100px;
  background: var(--cream);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  border-color: var(--wine);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  transform: translateY(-3px);
}
.blog-card-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 14px;
  display: block;
}
.blog-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 12px;
}
.blog-card h3 a { color: inherit; transition: color .25s; }
.blog-card h3 a:hover { color: var(--wine); }
.blog-card-excerpt {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 22px;
  flex-grow: 1;
}
.blog-card-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
  letter-spacing: 0.3px;
}
.blog-card-meta span.sep { opacity: 0.5; }
.blog-card-meta .author { font-weight: 600; color: var(--ink-soft); }
.blog-card-meta a.author { text-decoration: none; transition: color .2s; }
.blog-card-meta a.author:hover,
.blog-card-meta a.author:focus-visible { color: var(--wine); outline: none; }

/* Empty state */
.blog-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--ink-soft);
  font-size: 1rem;
}
.blog-empty a { color: var(--wine); font-weight: 600; }
.blog-empty a:hover { color: var(--wine-deep); }

/* =========================================
   PAGINATION
   Confirmed rendered markup:
     <div class="nav-links">
       <span aria-current="page" class="page-numbers current">1</span>
       <a class="page-numbers" href="...">2</a>
       <span class="page-numbers dots">…</span>
       <a class="next page-numbers" href="...">Next</a>
     </div>
   Selectors anchor on .blog-grid-section .nav-links so they don't collide
   with the header's .nav-links menu container.
   ========================================= */
.blog-grid-section .nav-links {
  margin: 80px auto 0 !important;
  padding: 48px 24px 0 !important;
  border-top: 1px solid var(--border);
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  max-width: 1100px;
  width: auto;
}
.blog-grid-section .nav-links .page-numbers {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  padding: 0 16px !important;
  height: 44px !important;
  min-width: 44px !important;
  text-align: center !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  background-color: #fff !important;
  background-image: none !important;
  transition: color .25s, background-color .25s, border-color .25s, transform .25s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(12, 23, 43, 0.04);
}
.blog-grid-section .nav-links a.page-numbers:hover {
  color: var(--wine) !important;
  border-color: var(--wine) !important;
  background-color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(137, 46, 83, 0.08);
}
.blog-grid-section .nav-links .page-numbers.current,
.blog-grid-section .nav-links span[aria-current="page"] {
  background-color: var(--wine) !important;
  color: #fff !important;
  border-color: var(--wine) !important;
  cursor: default;
  box-shadow: 0 4px 12px rgba(137, 46, 83, 0.18);
}
.blog-grid-section .nav-links .page-numbers.dots {
  border-color: transparent !important;
  background-color: transparent !important;
  color: var(--ink-muted) !important;
  cursor: default;
  letter-spacing: 0 !important;
  padding: 0 4px !important;
  min-width: auto !important;
  box-shadow: none !important;
}
.blog-grid-section .nav-links .page-numbers.prev,
.blog-grid-section .nav-links .prev.page-numbers,
.blog-grid-section .nav-links .page-numbers.next,
.blog-grid-section .nav-links .next.page-numbers {
  padding: 0 22px !important;
  letter-spacing: 2px !important;
  font-size: 11px !important;
}

/* Dark-mode pagination */
[data-theme="dark"] .blog-grid-section .nav-links { border-top-color: #1e3549; }
[data-theme="dark"] .blog-grid-section .nav-links .page-numbers {
  background-color: #111f2e !important;
  border-color: #1e3549 !important;
  color: #b8cbd6 !important;
}
[data-theme="dark"] .blog-grid-section .nav-links a.page-numbers:hover {
  background-color: #16263a !important;
  border-color: var(--wine) !important;
  color: #e8b6c6 !important;
}
[data-theme="dark"] .blog-grid-section .nav-links .page-numbers.current,
[data-theme="dark"] .blog-grid-section .nav-links span[aria-current="page"] {
  background-color: var(--wine) !important;
  border-color: var(--wine) !important;
  color: #fff !important;
}
[data-theme="dark"] .blog-grid-section .nav-links .page-numbers.dots {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #7a9aac !important;
}

/* =========================================
   RESPONSIVE — 1024px
   ========================================= */
@media (max-width: 1100px) {
  .page-hero { padding: 160px 32px 64px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cat-filter-inner { padding: 0 32px; }
}

/* =========================================
   RESPONSIVE — 768px
   ========================================= */
@media (max-width: 768px) {
  .page-hero { padding: 140px 24px 56px; }
  .page-hero h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .page-hero-sub { font-size: 1rem; }

  .cat-filter { padding: 32px 0 16px; }
  .cat-filter-inner { padding: 0 24px; gap: 8px; }
  .cat-pill { padding: 9px 16px; font-size: 11px; letter-spacing: 1px; }

  .blog-grid-section { padding: 32px 0 80px; }
  .blog-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 20px; }
  .blog-card-body { padding: 28px 24px; }

  .blog-grid-section .nav-links { margin-top: 56px !important; padding-top: 36px !important; gap: 6px !important; }
  .blog-grid-section .nav-links .page-numbers { padding: 0 12px !important; height: 40px !important; min-width: 40px !important; font-size: 11px !important; }
  .blog-grid-section .nav-links .page-numbers.prev,
  .blog-grid-section .nav-links .prev.page-numbers,
  .blog-grid-section .nav-links .page-numbers.next,
  .blog-grid-section .nav-links .next.page-numbers { padding: 0 16px !important; }
  .blog-grid-section .nav-links .page-numbers.dots { padding: 0 6px !important; min-width: auto !important; }
}

/* =========================================
   RESPONSIVE — 480px
   ========================================= */
@media (max-width: 480px) {
  .page-hero { padding: 130px 20px 48px; }
  .cat-filter-inner { padding: 0 20px; }
  .blog-card-body { padding: 24px 20px; }
}

/* =========================================
   DARK MODE
   ========================================= */
[data-theme="dark"] .page-hero { background: #0a1520; }
[data-theme="dark"] .page-hero h1 { color: #e8f0f5; }
[data-theme="dark"] .page-hero-sub { color: #b8cbd6; }
[data-theme="dark"] .cat-filter { background: #0a1520; }
[data-theme="dark"] .blog-grid-section { background: #0a1520; }
[data-theme="dark"] .blog-card-meta { border-top-color: #1e3549; color: #7a9aac; }
[data-theme="dark"] .blog-card-excerpt { color: #b8cbd6; }
[data-theme="dark"] .blog-empty { color: #b8cbd6; }
[data-theme="dark"] .blog-empty a { color: #d99fb5; }
[data-theme="dark"] .blog-empty a:hover { color: #e8b6c6; }

/* (Pagination dark-mode lives near the pagination block above) */

/* Category pills — dark */
[data-theme="dark"] .cat-pill {
  background: #111f2e;
  border-color: #1e3549;
  color: #b8cbd6;
}
[data-theme="dark"] .cat-pill.active {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}