/*
 * The blog grid's pager.
 *
 * These are the franchise archives' pager rules from forefind-listings.css.
 * They are repeated rather than shared because those are written behind a
 * .forefind-listings ancestor and shipped in a stylesheet that only the listing
 * pages load — reusing them here would mean either loading a whole listings
 * stylesheet on the blog, or widening a selector that a dozen listing pages
 * depend on. Thirty lines is the cheaper of the three.
 */

.ff-blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 44px;
}

.ff-blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ff-border, rgba(17, 24, 39, .10));
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ff-ink, #111827);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}

.ff-blog-pager a.page-numbers:hover {
  border-color: var(--ff-brand, #30B94A);
  color: var(--ff-brand-dark, #26993D);
}

.ff-blog-pager .page-numbers.current {
  background: var(--ff-brand, #30B94A);
  border-color: var(--ff-brand, #30B94A);
  color: #fff;
}

.ff-blog-pager .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--ff-muted, #6B7280);
}