/**
 * Shelby Series styles. Loaded only on single posts that belong to a series
 * (see shelby_series_enqueue_assets() in inc/series.php). Scoped to the
 * .series-* classes so it can't affect regular posts.
 */

:root {
	--series-teal: #15807c;
	--series-ink: #1a1a1a;
	--series-muted: #6b7280;
	--series-line: #e5e7eb;

	/* Fonts — change these to use a different family without touching the
	   theme's fonts. */
	--series-related-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--series-banner-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Banner: compact single-line tag ----------------------------------- */
/* Force the banner onto its own full-width row above the article/sidebar. */
.series-banner-wrap {
	flex-basis: 100%;
	width: 100%;
}

.series-banner,
.series-banner__eyebrow,
.series-banner__title {
	font-family: var(--series-banner-font);
}

.series-banner {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	background: var(--series-teal);
	color: #fff;
	border-radius: 3px;
	padding: 0.45rem 0.85rem;
	margin: 0 0 1.25rem;
	text-decoration: none;
	line-height: 1.2;
}

.series-banner:hover {
	text-decoration: none;
	opacity: 0.95;
}

.series-banner__eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.85;
}

.series-banner__sep {
	color: #fff;
	opacity: 0.55;
}

.series-banner__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}

/* --- Series archive header ---------------------------------------------
   Self-contained (does not use the theme's .page-header / .page-title), so
   the theme's gradient + uppercase archive-title styling does not apply. */
.series-archive-header {
	width: 100%;
	box-sizing: border-box;
	background: none;
	border-left: 5px solid var(--series-teal);
	padding: 0.25rem 0 0.25rem 1rem;
	margin-bottom: 2rem;
}

.series-archive-header__eyebrow {
	display: block;
	font-family: var(--series-banner-font);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--series-teal);
	margin-bottom: 0.3rem;
}

.series-archive-header__title {
	font-family: var(--series-banner-font);
	font-size: 2rem;
	line-height: 1.15;
	font-weight: 800;
	text-transform: none;
	color: var(--series-ink);
	margin: 0;
}

.series-archive-header__desc {
	margin-top: 0.6rem;
	color: var(--series-muted);
}

.series-archive-header__desc p {
	margin: 0;
}

/* --- Related coverage (rendered at top of the native sidebar) ---------- */
.series-related {
	margin-bottom: 2rem;
}

/* Custom font for the whole block. Applied to the text elements too, since
   the theme sets font-family directly on headings/links. */
.series-related,
.series-related__heading,
.series-related__title,
.series-related__date {
	font-family: var(--series-related-font);
}

.series-related__heading {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--series-teal);
	border-bottom: 2px solid var(--series-teal);
	padding-bottom: 0.4rem;
	margin: 0 0 0.9rem;
}

.series-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.series-related__item {
	border-bottom: 1px solid var(--series-line);
}

.series-related__link {
	display: flex;
	gap: 0.7rem;
	padding: 0.75rem 0;
	text-decoration: none;
}

.series-related__thumb {
	flex: 0 0 64px;
}

.series-related__thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}

.series-related__title {
	display: block;
	color: var(--series-ink);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
}

.series-related__link:hover .series-related__title {
	color: var(--series-teal);
}

.series-related__date {
	display: block;
	color: var(--series-muted);
	font-size: 0.78rem;
	margin-top: 0.2rem;
}