/* CLT Series Table of Contents — Frontend Styles
   Tuned for criticallegalthinking.com (Divi / Elegant Themes) */

.clt-series-toc {
	margin: 2.25em 0;
	border: 1px solid #d6d6d6;
	border-top: 3px solid #1a1a1a;
	background-color: #f9f9f9;
	font-family: 'Hind', Helvetica, Arial, Lucida, sans-serif;
	font-size: 0.95em;
	line-height: 1.55;
	color: #1a1a1a;
}

/* ── Header  ─────────────────────────────────────────────────────────────── */

.clt-series-toc__header {
	padding: 13px 18px 12px;
	border-bottom: 1px solid #d6d6d6;
	background-color: #f2f2f2;
}

.clt-series-toc__heading {
	display: block;
	font-family: 'Hind', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
	color: #000;
	font-size: 1.05em;
	line-height: 1.4;
}

.clt-series-toc__series-name {
	font-style: italic;
	font-weight: 700;
	color: #000;
}

/* ── List  ───────────────────────────────────────────────────────────────── */

/* The list itself has the same left padding (18px) as the header so that
   each row's number lines up vertically with the heading "S" of "Series:".
   Native list markers are replaced with a CSS counter rendered via ::before,
   placed in a fixed-width grid column for pixel-precise alignment.

   !important is used selectively on layout properties to defeat Divi /
   Elegant Themes base styles that otherwise add their own margin and
   padding to <ol> and <li> elements.                                       */
.clt-series-toc .clt-series-toc__list,
.clt-series-toc ol.clt-series-toc__list {
	counter-reset: clt-toc-counter;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 8px 18px 12px 18px !important;
	background: transparent;
}

.clt-series-toc .clt-series-toc__list > .clt-series-toc__item,
.clt-series-toc ol.clt-series-toc__list > li.clt-series-toc__item {
	counter-increment: clt-toc-counter;
	display: grid;
	grid-template-columns: 1.8em minmax(0, 1fr);
	column-gap: 4px;
	margin: 0 !important;
	padding: 7px 0 !important;
	border-bottom: 1px solid #ebebeb;
	list-style: none !important;
	list-style-type: none !important;
	background: transparent;
}

.clt-series-toc .clt-series-toc__item::marker,
.clt-series-toc ol.clt-series-toc__list > li::marker {
	content: none;
}

.clt-series-toc .clt-series-toc__item::before {
	content: counter(clt-toc-counter) ".";
	grid-column: 1;
	grid-row: 1;
	font-weight: 600;
	color: #555;
	line-height: inherit;
	text-align: left;
}

.clt-series-toc .clt-series-toc__list > .clt-series-toc__item:last-child {
	border-bottom: none;
	padding-bottom: 4px !important;
}

/* ── Entry  ──────────────────────────────────────────────────────────────── */

.clt-series-toc__entry {
	grid-column: 2;
	grid-row: 1;
	display: block;
	min-width: 0;
}

/* Current post: thick black left bar, sits to the left of the title  */
.clt-series-toc__item--current > .clt-series-toc__entry {
	padding-left: 10px;
	border-left: 4px solid #1a1a1a;
}

.clt-series-toc__item--current .clt-series-toc__post-title {
	font-weight: 700;
	color: #000;
	cursor: default;
}

/* ── Post title (linked or current)  ─────────────────────────────────────── */

/* Base link colour — !important + every link state Divi might target so
   the theme's blue link colour cannot override. */
.clt-series-toc .clt-series-toc__post-title,
.clt-series-toc a.clt-series-toc__post-title,
.clt-series-toc a.clt-series-toc__post-title:link,
.clt-series-toc a.clt-series-toc__post-title:visited {
	display: inline;
	font-weight: 600;
	color: #1a1a1a !important;
	text-decoration: none;
	transition: color 0.15s ease;
	-webkit-tap-highlight-color: rgba(171, 169, 17, 0.18);
}

.clt-series-toc a.clt-series-toc__post-title:hover,
.clt-series-toc a.clt-series-toc__post-title:focus,
.clt-series-toc a.clt-series-toc__post-title:active {
	color: #aba911 !important;
	text-decoration: underline !important;
	outline: none;
}

/* ── Meta (author · date) on its own line beneath the title  ─────────────── */

.clt-series-toc__meta {
	display: block;
	font-size: 0.85em;
	color: #666;
	margin-top: 1px;
}

.clt-series-toc__sep {
	margin: 0 0.35em;
	color: #bbb;
	user-select: none;
}

.clt-series-toc__date {
	white-space: nowrap;
}

/* ── Responsive  ─────────────────────────────────────────────────────────── */

/* Divi applies its own list padding at multiple mobile breakpoints
   (~980px and ~767px). We re-declare alignment under both with !important
   so the numbers stay flush with the heading on every viewport.            */
@media (max-width: 980px) {
	.clt-series-toc .clt-series-toc__list,
	.clt-series-toc ol.clt-series-toc__list {
		margin: 0 !important;
		padding: 8px 18px 12px 18px !important;
	}
	.clt-series-toc .clt-series-toc__list > .clt-series-toc__item,
	.clt-series-toc ol.clt-series-toc__list > li.clt-series-toc__item {
		margin: 0 !important;
		padding: 7px 0 !important;
		grid-template-columns: 1.8em minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.clt-series-toc .clt-series-toc__header { padding: 12px 14px 10px; }
	.clt-series-toc .clt-series-toc__list,
	.clt-series-toc ol.clt-series-toc__list {
		padding: 8px 14px 12px 14px !important;
	}
	.clt-series-toc .clt-series-toc__list > .clt-series-toc__item,
	.clt-series-toc ol.clt-series-toc__list > li.clt-series-toc__item {
		grid-template-columns: 1.6em minmax(0, 1fr);
		column-gap: 3px;
	}
}

/* ── Print  ──────────────────────────────────────────────────────────────── */

@media print {
	.clt-series-toc {
		border: 1px solid #999;
		background: #fff;
		page-break-inside: avoid;
	}
	a.clt-series-toc__post-title::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
	}
}