/**
 * Universal Blog — archive injected components.
 *
 * SSOT chain (per project rule 21 — Flatsome owns design):
 *   --fs-color-base / --fs-color-primary  (Flatsome customizer)
 *      ↓ chained via var(--fs-*, fallback)
 *   --ublog-text / --ublog-accent etc.    (this file)
 *      ↓ used by
 *   .ublog-archive-* components           (banner / top / bottom)
 *
 * Hex literals appear ONLY inside `var(... , #fallback)` second argument
 * — never as direct values. This means a theme switch (or Flatsome
 * customizer change) retones the archive without touching this CSS.
 *
 * Loads only on WP category and tag archives via
 * Universal_Blog_Term_SEO::enqueue_frontend.
 */

:root {
	--ublog-radius: 8px;
	/* Surface — chains to Flatsome body color, mixed for muted background */
	--ublog-surface-muted: color-mix(in srgb, var(--fs-color-base, #4a4a4a) 4%, transparent);
	/* Text — chains to Flatsome's body color */
	--ublog-text:          var(--fs-color-base, #4a4a4a);
	/* Muted text — same source, lower alpha */
	--ublog-text-muted:    color-mix(in srgb, var(--fs-color-base, #4a4a4a) 60%, transparent);
	/* Accent — chains to Flatsome's primary brand color */
	--ublog-accent:        var(--fs-color-primary, #446084);
	--ublog-space-sm: 0.75rem;
	--ublog-space-md: 1rem;
	--ublog-space-lg: 1.5rem;
}

/* ───── Banner (LCP hero, page 1 only) ───── */
.ublog-archive-banner {
	margin: 0 0 var(--ublog-space-md);
	border-radius: var(--ublog-radius);
	overflow: hidden;
	background: var(--ublog-surface-muted);
}
.ublog-archive-banner img {
	display: block;
	width: 100%;
	height: auto;
}
.ublog-archive-banner a {
	display: block;
	transition: opacity 0.18s ease;
}
.ublog-archive-banner a:hover,
.ublog-archive-banner a:focus-visible {
	opacity: 0.9;
	outline: none;
}

/* ───── Top intro (under H1, before first post) ───── */
.ublog-archive-top-content {
	max-width: 65ch;
	margin: 0 auto var(--ublog-space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ublog-text);
}
.ublog-archive-top-content > *:first-child { margin-top: 0; }
.ublog-archive-top-content > *:last-child { margin-bottom: 0; }
.ublog-archive-top-content h2 {
	font-size: 1.25rem;
	margin: var(--ublog-space-md) 0 var(--ublog-space-sm);
}
.ublog-archive-top-content h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: var(--ublog-space-md) 0 var(--ublog-space-sm);
}
.ublog-archive-top-content p {
	margin: 0 0 var(--ublog-space-sm);
}
.ublog-archive-top-content a {
	color: var(--ublog-accent);
	text-decoration: underline;
}

/* ───── Bottom long-form (under last post, page 1 only) ───── */
.ublog-archive-bottom-content {
	margin: var(--ublog-space-lg) 0;
	padding: 2rem clamp(1rem, 4vw, 2rem) 2.5rem;
	background: var(--ublog-surface-muted);
	border-radius: var(--ublog-radius);
	line-height: 1.7;
	color: var(--ublog-text);
}
.ublog-archive-bottom-content > * {
	max-width: 65ch;
	margin-left: auto;
	margin-right: auto;
}
.ublog-archive-bottom-content > *:first-child { margin-top: 0; }
.ublog-archive-bottom-content > *:last-child { margin-bottom: 0; }
.ublog-archive-bottom-content h2 {
	font-size: 1.375rem;
	margin: var(--ublog-space-lg) auto var(--ublog-space-sm);
}
.ublog-archive-bottom-content h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: var(--ublog-space-md) auto var(--ublog-space-sm);
}
.ublog-archive-bottom-content h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: var(--ublog-space-md) auto var(--ublog-space-sm);
}
.ublog-archive-bottom-content p {
	margin: 0 auto var(--ublog-space-sm);
}
.ublog-archive-bottom-content ul,
.ublog-archive-bottom-content ol {
	margin: 0 auto var(--ublog-space-sm);
	padding-left: 1.5rem;
}
.ublog-archive-bottom-content li {
	margin-bottom: 0.35rem;
}
.ublog-archive-bottom-content a {
	color: var(--ublog-accent);
	text-decoration: underline;
}
.ublog-archive-bottom-content blockquote {
	border-left: 3px solid var(--ublog-accent);
	padding-left: 1rem;
	color: var(--ublog-text-muted);
	margin: var(--ublog-space-md) auto;
}