/* Blog archive styles — loaded on blog home / category / tag / date / author archives. */

/* ── Archive header ─────────────────────────────────────────────────────────── */
.av-blog-header {
	margin-bottom: 36px;
}


.av-blog-header__title {
	margin: 0 0 12px;
}

.av-blog-header__desc {
	display: block !important;
	max-width: 480px;
	margin: 0 0 24px;
}

/* ── Category filter tabs ───────────────────────────────────────────────────── */
.av-blog-header__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.av-blog-header__tab {
	display: inline-block;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 500;
	color: inherit;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 999px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.av-blog-header__tab:hover {
	color: var(--fs-color-base);
	border-color: rgba(0,0,0,0.15);
	background: rgba(0,0,0,0.02);
}
.av-blog-header__tab--active {
	background: var(--av-cat-accent, var(--primary-color));
	color: #fff;
	border-color: var(--av-cat-accent, var(--primary-color));
}
.av-blog-header__tab--active:hover {
	background: color-mix(in srgb, var(--av-cat-accent, var(--primary-color)) 85%, #000);
	color: #fff;
	border-color: color-mix(in srgb, var(--av-cat-accent, var(--primary-color)) 85%, #000);
}

/* Per-category accent — set on .av-blog-header from the category's "Card color"
   ACF field (index.php). Mirrors the post-card palette in posts.css. */
.av-blog-header--orange { --av-cat-accent: #eeaf53; }
.av-blog-header--coral  { --av-cat-accent: #f58e7d; }
.av-blog-header--green  { --av-cat-accent: #92c096; }
.av-blog-header--blue   { --av-cat-accent: #6ea0d8; }
.av-blog-header--purple { --av-cat-accent: #a78bda; }

/* Hide Flatsome's default blog title / breadcrumbs on archive */
.blog-archive .page-title,
.blog-archive .breadcrumbs {
	display: none !important;
}

.blog-wrapper .nav-pagination {
	margin-top: 1.5rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.av-blog-header__title {
		font-size: 30px;
	}
	.av-blog-header__tabs {
		gap: 6px;
	}
	.av-blog-header__tab {
		padding: 7px 16px;
		font-size: 13px;
	}
}