/*
 * Article links on course articles (single-course-article.php, 2026-10-19): larger hit areas for the
 * breadcrumb's links, and the "Keep reading" section that inc/blog-hub/library-article.php renders.
 *
 * A file of its own, enqueued right after course-article.css: WP Rocket serves it whole
 * (inc/wp-rocket-exclusions.php lists it in rocket_exclude_css and rocket_rucss_external_exclusions,
 * as it does css/blog-library.css), so the articles' stored used CSS doesn't have to be rebuilt for it.
 *
 * Two-class selectors outrank course-article.css's .main-content element rules and the theme kit's
 * link and h2 rules in base.css, which loads after this file; style.css sizes every phone h2 with
 * !important, so the section heading's size carries it too. The --article-* color variables come
 * from course-article.css. Neutral surfaces, as on the author card: a blue fill would read as a
 * content callout. Nothing here animates or waits on script.
 */

/* The trail. course-article.css resets its list, but .main-content's list rules come later there
   and win: the trail was set in the 17px body serif, indented 2rem from the title. These rules
   put it flush with the title, in the byline's sans face at 14px. The separators and link colors
   stay as course-article.css sets them. */
.course-article-breadcrumbs.course-article-breadcrumbs ol {
	margin: 0;
	padding: 0;
	row-gap: 24px;
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
}

.course-article-breadcrumbs.course-article-breadcrumbs li {
	margin: 0;
}

/* The separator's glyph, size and color are unchanged; a line height of 1 keeps its box within
   the 21px row. */
.course-article-breadcrumbs.course-article-breadcrumbs li + li::before {
	line-height: 1;
}

/* Each link gets a hit area at least 44px each way that moves nothing: an empty ::before centered
   on it, 4px wider than the link on both sides (the separators keep 8px either side). Rows are
   21px, so when the trail wraps, the 24px row gap keeps those areas from overlapping. */
.course-article-breadcrumbs.course-article-breadcrumbs a {
	position: relative;
}

.course-article-breadcrumbs.course-article-breadcrumbs a::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -4px;
	left: -4px;
	height: 44px;
	margin-top: -22px;
}

/* Below 768px the current page, which the title right under the trail repeats, is visually hidden;
   screen readers still read it, with aria-current. Its separator is its own ::before, so it hides
   with it and the trail ends on the last link. */
@media (max-width: 767.98px) {
	.course-article-breadcrumbs.course-article-breadcrumbs li.active {
		position: absolute;
		width: 1px;
		max-width: none;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* "Keep reading": after the article, before the author card. */
.course-article-content .roc-an-links {
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--article-gray-200);
}

.roc-an-links .roc-an-links__title {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.5rem !important;
	font-weight: 700;
	line-height: 1.3 !important;
	color: #1a1a1a;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.roc-an-links .roc-an-block + .roc-an-block,
.roc-an-links .roc-an-done + .roc-an-block {
	margin-top: 2rem;
}

.roc-an-links .roc-an-block__title {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--article-gray-600);
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
}

/* Cards: the next part, each related article and the end-of-series line. The link's ::after
   covers the card, so the whole card is the target and carries the focus ring. */
.roc-an-links .roc-an-next,
.roc-an-links .roc-an-item,
.roc-an-links .roc-an-done {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--article-gray-200);
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.roc-an-links .roc-an-next:hover,
.roc-an-links .roc-an-item:hover,
.roc-an-links .roc-an-done:hover {
	border-color: #93c5fd;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.1);
}

.roc-an-links .roc-an-next__link,
.roc-an-links .roc-an-item__link,
.roc-an-links .roc-an-done__link {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
	border-bottom: 0;
}

.roc-an-links .roc-an-next__link::after,
.roc-an-links .roc-an-item__link::after,
.roc-an-links .roc-an-done__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 12px;
}

.roc-an-links .roc-an-next:hover .roc-an-next__link,
.roc-an-links .roc-an-item:hover .roc-an-item__link,
.roc-an-links .roc-an-done:hover .roc-an-done__link {
	color: var(--article-primary-dark);
	text-decoration: underline !important;
	text-underline-offset: 0.16em;
}

/* One ring, on the card: the link's own outline (base.css) is replaced by its ::after's. */
.roc-an-links .roc-an-next__link.roc-an-next__link:focus-visible,
.roc-an-links .roc-an-item__link.roc-an-item__link:focus-visible,
.roc-an-links .roc-an-done__link.roc-an-done__link:focus-visible {
	outline: none !important;
}

.roc-an-links .roc-an-next__link:focus-visible::after,
.roc-an-links .roc-an-item__link:focus-visible::after,
.roc-an-links .roc-an-done__link:focus-visible::after {
	outline: 3px solid var(--article-primary);
	outline-offset: 2px;
}

/* Next in this series: the series line, the next title and its reading time, with an arrow. */
.roc-an-links .roc-an-next {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	padding: 1rem 1.25rem 1rem 1.375rem;
	border-left: 4px solid var(--article-primary);
}

.roc-an-links .roc-an-next:hover {
	border-left-color: var(--article-primary);
}

.roc-an-links .roc-an-next > :not(.roc-an-next__arrow) {
	grid-column: 1;
}

.roc-an-links .roc-an-next__part {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--article-primary-dark);
	margin: 0 0 0.25rem;
}

.roc-an-links .roc-an-next__link {
	font-size: 1.1875rem;
	line-height: 1.35;
}

.roc-an-links .roc-an-next__arrow {
	grid-column: 2;
	grid-row: 1 / span 3;
	width: 22px;
	height: 22px;
	color: var(--article-primary);
}

/* More in the topic: one card per article. The excerpt keeps to one line. The list resets
   .main-content's serif list type, whose line box would outgrow the titles'. */
.roc-an-links .roc-an-list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.4;
}

.roc-an-links .roc-an-item {
	margin: 0;
	padding: 0.875rem 1.25rem;
}

.roc-an-links .roc-an-item__link {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.roc-an-links .roc-an-item__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--article-gray-600);
	margin: 0.25rem 0 0;
}

.roc-an-links .roc-an-next__meta,
.roc-an-links .roc-an-item__meta {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--article-gray-600);
	margin: 0.25rem 0 0;
}

/* The last part: the series is finished, and its topic page is one tap away. */
.roc-an-links .roc-an-done {
	font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--article-gray-800);
	background: var(--article-gray-50);
	margin: 0;
	padding: 0.875rem 1.25rem;
}

.roc-an-links .roc-an-done__link {
	color: var(--article-primary-dark);
	text-decoration: underline !important;
	text-underline-offset: 0.16em;
}

@media (max-width: 576px) {
	.roc-an-links .roc-an-links__title {
		font-size: 1.375rem !important;
	}

	.roc-an-links .roc-an-next {
		padding: 0.875rem 1rem 0.875rem 1.125rem;
	}

	.roc-an-links .roc-an-item,
	.roc-an-links .roc-an-done {
		padding: 0.75rem 1rem;
	}
}