/**
 * "Most Recent" feed list in the left column.
 *
 * Feeds and category archives have no headings, so the left column lists the
 * articles instead of a table of contents. It reuses the table-of-contents
 * container so the sticky behaviour, scrolling and the video docking beneath it all
 * work unchanged — only the list styling differs.
 */

.cloudflare-feed-items {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
}

.cloudflare-feed-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #eee;
}

.cloudflare-feed-item:last-child {
	border-bottom: 0;
}

.cloudflare-feed-item a {
	display: block;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.cloudflare-feed-item a:hover,
.cloudflare-feed-item a:focus {
	background: #f5f8fb;
	color: #0b5cab;
}

.cloudflare-feed-item a:focus-visible {
	outline: 2px solid #0b5cab;
	outline-offset: -2px;
}

/* Archive intro text sits above the listing in the centre column. */
.cloudflare-archive-description {
	font-size: 18px;
	line-height: 1.6;
	color: #616161;
	margin: 0 0 1.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.cloudflare-feed-item a { transition: none; }
}

/*
 * The columns container is opened before archive.php prints the heading, so the
 * title, the breadcrumb, the term description, the opt-in and the pagination all
 * land inside the posts grid as flex items. Being narrower than a column they sat
 * on one line together, which put the breadcrumb beside the title rather than
 * under it. Anything in there that is not an article takes a full row.
 */
body.ga-layout-archive .generate-columns-container > *:not(article) {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}