/**
 * Learning Center.
 *
 * Only the parts the blog does not already provide: the breadcrumb, the topic
 * navigation and the article list. Container widths and reading typography come
 * from Salient's blog structure (.container-wrap > .container.main-content >
 * .post-area), which the templates reuse deliberately so this section reads the
 * same way the blog does.
 *
 * Colours are the ones settled during the August accessibility work — #143e54
 * clears 6.69:1 on white, and the muted greys were checked rather than guessed.
 * Focus rings are not defined here: a11y.css sets them globally at priority 999.
 */

/* Declared at the root rather than on .verto-lc, because the page header and the
   breadcrumb sit outside that element on the listing templates — scoping the tokens
   to the row left the title falling back to the theme's grey. The file only loads
   on Learning Center views, and every token is namespaced. */
:root {
	--lc-ink: #143e54;
	--lc-body: #4a5257;
	--lc-muted: #686d6e;
	--lc-rule: #dfe3e4;
	--lc-wash: #f4f6f7;
}

/* ------------------------------------------------------------- breadcrumb */

.verto-lc-breadcrumb {
	margin: 0 0 1.6em;
	font-size: 14px;
	line-height: 1.5;
}

.verto-lc-breadcrumb ol {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .45em;
}

.verto-lc-breadcrumb li {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
}

/* Separator on the marker rather than between elements, so it never renders
   before the first crumb or after the last. */
.verto-lc-breadcrumb li + li::before {
	content: "›";
	color: var(--lc-muted);
	speak: never;
}

.verto-lc-breadcrumb a {
	color: var(--lc-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.verto-lc-breadcrumb [aria-current="page"] {
	color: var(--lc-muted);
}

/* ----------------------------------------------------------------- header */

.verto-lc__header {
	margin: 0 0 1.8em;
}

.verto-lc__title {
	color: var(--lc-ink);
	margin: 0 0 .35em;
}

.verto-lc__intro {
	color: var(--lc-body);
	max-width: 60ch;
	margin: 0;
}

/* -------------------------------------------------------- topic navigation */

.verto-lc__nav-title {
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lc-muted);
	margin: 0 0 .9em;
	padding-bottom: .6em;
	border-bottom: 1px solid var(--lc-rule);
}

/* Salient and pages-custom-styles.css both declare `ul li { list-style: disc }`,
   setting the marker on the li rather than the list, so clearing it on the ul alone
   never applies. Every list in this section clears it on the li. */
.verto-lc-topics,
.verto-lc-topics ul {
	margin: 0;
	padding: 0;
}

.verto-lc-breadcrumb li,
.verto-lc-topics li,
.verto-lc-articles li {
	list-style: none;
}

/* Nested topics indent with a rule, so depth is visible without relying on
   position alone. */
.verto-lc-topics ul {
	margin: .25em 0 .5em .35em;
	padding-left: .8em;
	border-left: 1px solid var(--lc-rule);
}

/* The indicator is declared transparent on every item and coloured on the current
   one, so marking the position costs no layout shift. Colour and weight alone were
   carrying it before, and a darker shade of the same teal is a weak signal. */
.verto-lc-topic > a {
	display: block;
	padding: .35em 0 .35em .7em;
	color: var(--lc-body);
	text-decoration: none;
	line-height: 1.35;
	box-shadow: inset 2px 0 0 transparent;
}

.verto-lc-topic > a:hover,
.verto-lc-topic > a:focus-visible {
	color: var(--lc-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.verto-lc-topic.is-current > a {
	color: var(--lc-ink);
	font-weight: 600;
	box-shadow: inset 2px 0 0 currentColor;
}

/* --------------------------------------------------------- article listing */

.verto-lc-articles {
	margin: 0;
	padding: 0;
}

.verto-lc-article {
	margin: 0;
	padding: 1.5em 0;
	border-bottom: 1px solid var(--lc-rule);
}

.verto-lc-article:first-child {
	padding-top: 0;
}

.verto-lc-article__title {
	margin: 0 0 .3em;
	font-size: 22px;
	line-height: 1.3;
	text-transform: none; /* `body h2` capitalises, which mangles sentence-case titles. */
}

.verto-lc-article__title a {
	color: var(--lc-ink);
	text-decoration: none;
}

.verto-lc-article__title a:hover,
.verto-lc-article__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.verto-lc-article__topic {
	margin: 0 0 .35em;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lc-muted);
}

.verto-lc-article__excerpt {
	margin: 0;
	color: var(--lc-body);
	max-width: 66ch;
}

.verto-lc-empty {
	color: var(--lc-muted);
	background: var(--lc-wash);
	padding: 1.2em 1.4em;
	margin: 0;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 999px) {
	/* Salient collapses its grid below this width; the topic list moves above
	   the content so the reader still meets the structure first. */
	.verto-lc__nav {
		margin-bottom: 2em;
	}

	.verto-lc__nav-title {
		margin-bottom: .6em;
	}
}

/* ------------------------------------------------------- article reading view

   The overview and topic pages are listings, and the site's listings already use
   the uppercase Josefin heading the theme options set globally — /blog/ looks the
   same way, so those are left alone.

   An article is prose, and should read like a blog post does. The blog gets that
   from `.single .post .post-content .content-inner`, which does not match a `learn`
   post: post_class() emits `learn` and `type-learn`, never a bare `post`. Rather
   than borrow the class and inherit every other blog-card rule attached to `.post`,
   the same resolved values are restated here — Georgia at 16px/26px, title at
   40px/48px, which is what the blog computes to once its cascade settles. */

.verto-lc--article .verto-lc__title {
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	/* `body h1` is Josefin Sans, uppercase, 72px from the theme options. */
	text-transform: none;
	font-size: 40px;
	line-height: 48px;
	font-weight: 400;
	color: rgba(0, 0, 0, .84);
	letter-spacing: -.004em;
}

.verto-lc__content {
	/* The blog reads in a ~700px column. The topic rail takes the width the blog
	   spends on nothing, so cap the measure rather than filling span_9. */
	max-width: 700px;
}

.verto-lc__content,
.verto-lc__content p,
.verto-lc__content ul li,
.verto-lc__content ol li {
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 26px;
	color: rgba(0, 0, 0, .84);
	letter-spacing: -.004em;
}

/* The theme options scope h3–h6 to `.row .col hN` (0,2,1), and the content column
   is a .col inside a .row, so a plain `.verto-lc__content h3` (0,1,1) loses and the
   subheads of a migrated article come back in Roboto. Prefixed to (0,2,2). */
body .container-wrap .verto-lc__content h2,
body .container-wrap .verto-lc__content h3,
body .container-wrap .verto-lc__content h4,
body .container-wrap .verto-lc__content h5,
body .container-wrap .verto-lc__content h6 {
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
	text-transform: none;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(0, 0, 0, .84);
}

/* Salient zeroes heading margins in its reset, so the space above a subhead has to
   be restored or the section runs straight into the paragraph before it. */
body .container-wrap .verto-lc__content h2,
body .container-wrap .verto-lc__content h3,
body .container-wrap .verto-lc__content h4,
body .container-wrap .verto-lc__content h5,
body .container-wrap .verto-lc__content h6 {
	margin: 1.8em 0 .5em;
}

.verto-lc__content > *:first-child {
	margin-top: 0;
}

.verto-lc__content p {
	margin: 0 0 1.4em;
}

body .container-wrap .verto-lc__content h2 { font-size: 26px; line-height: 34px; }
body .container-wrap .verto-lc__content h3 { font-size: 22px; line-height: 30px; }
body .container-wrap .verto-lc__content h4 { font-size: 19px; line-height: 27px; }

/* Body lists keep their markers — this is prose, not navigation. */
.verto-lc__content ul li { list-style: disc; }
.verto-lc__content ol li { list-style: decimal; }

.verto-lc__content ul,
.verto-lc__content ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

@media (max-width: 999px) {
	/* The blog steps its body copy up on narrow screens; match it. */
	.verto-lc__content,
	.verto-lc__content p,
	.verto-lc__content ul li,
	.verto-lc__content ol li {
		font-size: 18px;
		line-height: 29px;
	}

	.verto-lc--article .verto-lc__title {
		font-size: 32px;
		line-height: 40px;
	}
}

/* -------------------------------------------------------------------- CTA

   Self-styled rather than built on the Bootstrap button classes the other block
   templates use — those are scoped to .bootstrap-main-content, which this section
   deliberately is not. */

.verto-lc-cta {
	max-width: 700px;
	margin: 2.8em 0 0;
	padding: 1.6em 1.8em;
	background: var(--lc-wash);
	border-left: 3px solid var(--lc-ink);
}

.verto-lc-cta--body {
	margin: 2.2em 0;
}

.verto-lc-cta__heading {
	margin: 0 0 .4em;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--lc-ink);
	text-transform: none;
}

.verto-lc-cta__body {
	margin: 0 0 1.1em;
	color: var(--lc-body);
	font-size: 16px;
	line-height: 24px;
}

.verto-lc-cta__button {
	display: inline-block;
	padding: .7em 1.5em;
	background: var(--lc-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 4px;
}

.verto-lc-cta__button:hover,
.verto-lc-cta__button:focus-visible {
	background: #0e2c3c; /* 10.6:1 on white, darker than --lc-ink rather than lighter */
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------ related links */

.verto-lc-related {
	max-width: 700px;
	margin: 2.8em 0 0;
	padding-top: 1.6em;
	border-top: 1px solid var(--lc-rule);
}

.verto-lc-related__title {
	margin: 0 0 .8em;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--lc-muted);
}

.verto-lc-related__list {
	margin: 0;
	padding: 0;
}

.verto-lc-related__item {
	list-style: none;
	margin: 0;
	padding: .45em 0;
}

.verto-lc-related__item a {
	color: var(--lc-ink);
	text-decoration: none;
	font-size: 17px;
	line-height: 1.4;
}

.verto-lc-related__item a:hover,
.verto-lc-related__item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 999px) {
	.verto-lc-cta {
		padding: 1.3em 1.4em;
	}
}

/* ---------------------------------------------------------------- link colour

   pages-custom-styles.css sets `body .container-wrap a:not(.nectar-button)` to the
   site's teal. That is specificity (0,2,2) and it loads after this file, so every
   plain class selector here loses to it — which is fine for links in running text,
   because the blog's links are that same teal and matching it is the point.

   It is not fine on the CTA button, where teal on the navy fill is 2.02:1.

   Note the count: `:not(.nectar-button)` contributes the specificity of its argument,
   so their selector is (0,2,2), not (0,1,2). Matching the prefix and adding one class
   only ties, and a tie goes to the file that loads later — which is theirs. Each
   selector below therefore carries two of its own classes to reach (0,3,2), rather
   than reaching for !important. #1e7181 is 5.62:1 on white and 5.19:1 on the CTA
   wash; white on the navy fill is 11.37:1. */

body .container-wrap .verto-lc-cta .verto-lc-cta__button,
body .container-wrap .verto-lc-cta .verto-lc-cta__button:hover,
body .container-wrap .verto-lc-cta .verto-lc-cta__button:focus-visible {
	color: #fff;
}

/* Stated rather than inherited, so the section keeps a passing colour even if the
   rule it currently matches is ever scoped away. */
body .container-wrap .verto-lc-breadcrumb ol a,
body .container-wrap .verto-lc-topics .verto-lc-topic > a,
body .container-wrap .verto-lc-articles .verto-lc-article__title a,
body .container-wrap .verto-lc-related .verto-lc-related__item a {
	color: #1e7181;
}

body .container-wrap .verto-lc-topics .verto-lc-topic.is-current > a {
	color: #14535f; /* 8.63:1 — the current topic reads darker as well as bolder */
}