/*
 * Learn view presentation.
 *
 * Loaded after the shared Product Knowledge stylesheet, and every rule is
 * scoped to `.authherb-product-knowledge--learn` so the base Knowledge styling
 * and the Product page's horizontal navigation are untouched.
 *
 * The shell is one two-column grid: a single sticky sidebar holding the
 * Contents navigation and, below a divider, the Product Category navigation,
 * beside the Knowledge content column.
 */

.authherb-product-knowledge--learn {
	--authherb-accent: #88ad99;
	--authherb-accent-strong: #244a34;
	--authherb-accent-tint: #f2f6f0;
	--authherb-sidebar-width: 320px;

	display: grid;
	grid-template-columns: minmax(0, var(--authherb-sidebar-width)) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
	padding: 0 1rem;
}

/* ---------------------------------------------------------------------------
 * The single sticky sidebar
 * ------------------------------------------------------------------------ */

.authherb-learn-sidebar {
	position: sticky;
	top: calc(var(--wd-sticky-nav-height, 0px) + 1.25rem);
	align-self: start;
	max-height: calc(100vh - var(--wd-sticky-nav-height, 0px) - 2.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/*
 * The single sidebar control.
 *
 * A wide viewport has room for the whole Contents and Category navigation, so
 * the control does not exist there and the region is an ordinary pass-through
 * wrapper. The narrow viewport folds the whole sidebar behind the control, and
 * the rules for that live with the rest of the narrow-viewport presentation.
 */
.authherb-learn-sidebar__heading,
.authherb-learn-sidebar__current,
.authherb-learn-sidebar__toggle .authherb-product-toc__indicator {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Contents navigation
 *
 * Resets the horizontal strip geometry the shared stylesheet defines for the
 * hash-state navigation, then rebuilds the vertical hierarchy.
 * ------------------------------------------------------------------------ */

.authherb-product-toc--learn {
	position: static;
	top: auto;
	align-self: auto;
	display: block;
	width: auto;
	background: transparent;
	border-bottom: 0;
	overflow: visible;
	isolation: auto;
	z-index: auto;
}

.authherb-product-toc--learn .authherb-product-toc__heading,
.authherb-learn-categories__heading {
	margin: 0 0 0.5rem;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.authherb-product-toc--learn .authherb-product-toc__toggle,
.authherb-learn-categories__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #242424;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	cursor: default;
}

.authherb-learn-categories__toggle {
	cursor: pointer;
}

.authherb-product-toc--learn .authherb-product-toc__indicator,
.authherb-learn-categories__toggle .authherb-product-toc__indicator {
	display: none;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.authherb-product-toc--learn .authherb-product-toc__toggle[aria-expanded="true"] .authherb-product-toc__indicator,
.authherb-learn-categories__toggle[aria-expanded="true"] .authherb-product-toc__indicator {
	transform: rotate(225deg);
}

.authherb-product-toc--learn .authherb-product-toc__list {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
	white-space: normal;
}

.authherb-product-toc--learn .authherb-product-toc__item {
	display: block;
	flex: none;
	margin: 0;
	border-left: 3px solid transparent;
	border-radius: 0 4px 4px 0;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.authherb-product-toc--learn .authherb-product-toc__item + .authherb-product-toc__item {
	margin-top: 0.1rem;
}

.authherb-product-toc--learn .authherb-product-toc__row {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
}

/* H2 level: the dominant tier. */
.authherb-product-toc--learn .authherb-product-toc__link {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	border: 0;
	border-bottom: 0;
	color: #242424;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	white-space: normal;
	text-decoration: none;
	transition: color 0.2s ease;
}

.authherb-product-toc--learn .authherb-product-toc__link:hover {
	color: var(--authherb-accent-strong);
	background: transparent;
}

.authherb-product-toc--learn .authherb-product-toc__link:focus-visible,
.authherb-product-toc--learn .authherb-product-toc__disclosure:focus-visible,
.authherb-product-toc--learn .authherb-product-toc__sublink:focus-visible,
.authherb-learn-category__name:focus-visible,
.authherb-learn-category__disclosure:focus-visible,
.authherb-learn-category__products a:focus-visible,
.authherb-learn-share__link:focus-visible {
	outline: 2px solid var(--authherb-accent-strong);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Active section: the strongest treatment in the sidebar. */
.authherb-product-toc--learn .authherb-product-toc__item.is-active {
	border-left-color: var(--authherb-accent);
	background: var(--authherb-accent-tint);
}

.authherb-product-toc--learn .authherb-product-toc__item.is-active > .authherb-product-toc__row > .authherb-product-toc__link,
.authherb-product-toc--learn .authherb-product-toc__item.is-active > .authherb-product-toc__link {
	color: var(--authherb-accent-strong);
	font-weight: 800;
}

.authherb-product-toc--learn .authherb-product-toc__disclosure {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 4px 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #555;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.authherb-product-toc--learn .authherb-product-toc__item--has-children > .authherb-product-toc__row > .authherb-product-toc__disclosure {
	display: flex;
}

.authherb-product-toc--learn .authherb-product-toc__disclosure:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #242424;
}

.authherb-product-toc__chevron {
	display: block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
}

.authherb-product-toc__item.is-expanded .authherb-product-toc__chevron,
.authherb-learn-category.is-expanded .authherb-product-toc__chevron {
	transform: rotate(45deg);
}

/* Animated disclosure: the wrapper animates, the list holds the content. */
.authherb-product-toc--learn .authherb-product-toc__subwrap,
.authherb-learn-category__subwrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.authherb-product-toc__item.is-expanded > .authherb-product-toc__subwrap,
.authherb-learn-category.is-expanded > .authherb-learn-category__subwrap {
	grid-template-rows: 1fr;
}

.authherb-product-toc--learn .authherb-product-toc__sublist,
.authherb-learn-category__products {
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	transition: opacity 0.25s ease;
	opacity: 0;
}

.authherb-product-toc__item.is-expanded > .authherb-product-toc__subwrap > .authherb-product-toc__sublist,
.authherb-learn-category.is-expanded > .authherb-learn-category__subwrap > .authherb-learn-category__products {
	opacity: 1;
}

/* H3 level: the secondary tier. */
.authherb-product-toc--learn .authherb-product-toc__sublink {
	display: block;
	padding: 0.35rem 0.6rem 0.35rem 1.15rem;
	color: #5d6761;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.authherb-product-toc--learn .authherb-product-toc__sublink:hover {
	color: var(--authherb-accent-strong);
	border-left-color: var(--authherb-accent);
}

.authherb-product-toc--learn .authherb-product-toc__sublink.is-active {
	color: var(--authherb-accent-strong);
	font-weight: 500;
	border-left-color: var(--authherb-accent);
}

.authherb-product-toc--learn .authherb-product-toc__sublist {
	padding-bottom: 0.4rem;
}

/* ---------------------------------------------------------------------------
 * Product Category navigation
 *
 * Kept visually distinct from Contents: separated by a rule and by spacing,
 * with its own section heading. Every entry is a WooCommerce Product shown in
 * Learn mode.
 * ------------------------------------------------------------------------ */

.authherb-learn-categories {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--authherb-border);
}

.authherb-learn-categories__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.authherb-learn-category {
	border-left: 3px solid transparent;
	transition: border-color 0.2s ease;
}

.authherb-learn-category + .authherb-learn-category {
	margin-top: 0.1rem;
}

.authherb-learn-category__row {
	display: flex;
	align-items: flex-start;
	gap: 0.25rem;
}

.authherb-learn-category__name {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.45rem 0.6rem;
	color: #242424;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease;
}

a.authherb-learn-category__name:hover {
	color: var(--authherb-accent-strong);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.authherb-learn-category__disclosure {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 3px 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #555;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.authherb-learn-category__disclosure:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #242424;
}

.authherb-learn-category__products {
	padding-bottom: 0.35rem;
}

.authherb-learn-category__products a {
	display: block;
	padding: 0.35rem 0.6rem 0.35rem 1.15rem;
	color: #5d6761;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.authherb-learn-category__products a:hover {
	color: var(--authherb-accent-strong);
	border-left-color: var(--authherb-accent);
}

/* ---------------------------------------------------------------------------
 * Content column: Product header, update date and share row
 * ------------------------------------------------------------------------ */

.authherb-product-knowledge--learn > .authherb-product-knowledge__content {
	margin-top: 0;
}

/* The narrow viewport shows the shorter trigger label. */
.authherb-product-toc__label--narrow {
	display: none;
}

.authherb-learn-breadcrumb {
	margin: 0 0 0.85rem;
}

/*
 * One line at every width: the trail never wraps, so a separator can never be
 * orphaned at the start of a line. Earlier crumbs ellipsize instead, while the
 * current Product keeps its full name.
 */
.authherb-learn-breadcrumb__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #5d6761;
	font-size: 13px;
	line-height: 1.4;
}

.authherb-learn-breadcrumb__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
}

/*
 * Only the last crumb gives way, because the Product name is repeated as the
 * page H1 directly beneath the trail. The parent levels are never reduced to a
 * stub the reader cannot recognise.
 */
.authherb-learn-breadcrumb__item:last-child {
	flex: 0 1 auto;
}

/*
 * The theme types every list item with `:is(ul, ol) li { margin-bottom: ... }`
 * and then clears it again on `:is(ul, ol) li:last-child`. That pair is meant
 * for stacked prose lists, but the trail is a flex row centred on the cross
 * axis, so the one item without the bottom margin rides 5px below its
 * siblings and the current Product reads as misaligned.
 *
 * The trail is navigation, not prose, so it opts out of the list rhythm. The
 * selector is scoped to the Learn view because the Shop trail is a separate
 * presentation and must keep its current rendering.
 */
body.authherb-view-learn .authherb-learn-breadcrumb__item,
body.authherb-view-learn .authherb-learn-breadcrumb__item:last-child {
	margin-bottom: 0;
}

.authherb-learn-breadcrumb__item + .authherb-learn-breadcrumb__item::before {
	flex: 0 0 auto;
	content: "/";
	color: #b6c0b9;
}

.authherb-learn-breadcrumb__link {
	display: block;
	overflow: hidden;
	color: #5d6761;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.authherb-learn-breadcrumb__link:hover {
	color: var(--authherb-accent-strong);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.authherb-learn-breadcrumb__link:focus-visible {
	outline: 2px solid var(--authherb-accent-strong);
	outline-offset: 2px;
	border-radius: 2px;
}

.authherb-learn-breadcrumb__current {
	overflow: hidden;
	color: #242424;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * The Product name and its route back to commerce, and nothing else: the
 * breadcrumb above and the provenance row below are rendered outside this
 * element. That is what lets this row — and only this row — pin to the top of
 * the viewport for the whole article on a wide viewport, without carrying a
 * breadcrumb the reader has already used along with it.
 */
.authherb-learn-header {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--authherb-border);
}

/*
 * Product name and the route back to commerce. The name takes whatever room is
 * left so a long one wraps inside its own column instead of pushing the link
 * off the row.
 */
.authherb-learn-header__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.authherb-learn-header__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.15;
}

/*
 * The one Shop Now the Learn view offers on a viewport wide enough to reach it.
 * It sits in the header row, beside the name it belongs to, and that row pins to
 * the top of the viewport — so the route stays in reach for the whole article
 * without a bar taking the bottom edge. The narrow viewport, which cannot hold
 * the row, carries the same link in the fixed bar instead.
 */
.authherb-learn-header__cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.6rem;
	border-radius: 6px;
	background: var(--authherb-accent-strong);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.authherb-learn-header__cta:hover,
.authherb-learn-header__cta:focus-visible {
	background: #1b3a28;
	color: #fff;
}

.authherb-learn-header__cta:focus-visible {
	outline: 2px solid var(--authherb-accent-strong);
	outline-offset: 2px;
}

/*
 * Provenance and sharing, at the end of the article. The date trails the share
 * controls, so the row reads left to right as "pass this on" and then "here is
 * how current it is". The rule above it closes the article rather than opening
 * it, which is what the header's own rule used to do.
 */
.authherb-learn-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--authherb-border);
}

.authherb-learn-footer__updated {
	margin: 0;
	color: var(--authherb-muted);
	font-size: 14px;
	line-height: 1.4;
}

/*
 * The fixed Shop Now bar belongs to the narrow viewport, where the header's own
 * Shop Now is not on screen. Above the breakpoint that header row is pinned and
 * carries the same route, so showing this bar as well would put two controls for
 * one journey on the page. It is hidden here and brought back inside the mobile
 * block, which is the only place it is styled.
 *
 * The two tokens are declared here rather than inherited, because this bar is
 * rendered at the end of the document — outside `.authherb-product-knowledge`,
 * which is the element the rest of the Learn styling reads them from. Without
 * them the bar's own colours resolve to nothing, which leaves white text on a
 * transparent background over a white page: a control that measures correctly
 * and cannot be seen.
 */
.authherb-learn-shop-cta {
	--authherb-accent-strong: #244a34;
	--authherb-border: #d9dedb;

	display: none;
}

.authherb-learn-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.authherb-learn-share__label {
	color: var(--authherb-muted);
	font-size: 14px;
	font-weight: 600;
}

.authherb-learn-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 6px 11px;
	border: 1px solid var(--authherb-border);
	border-radius: 999px;
	background: #fff;
	color: #242424;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.authherb-learn-share__link:hover {
	border-color: var(--authherb-accent);
	background: var(--authherb-accent-tint);
	color: var(--authherb-accent-strong);
}

.authherb-learn-share__icon {
	display: block;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.authherb-learn-share__copy.is-copied {
	border-color: var(--authherb-accent);
	background: var(--authherb-accent-tint);
	color: var(--authherb-accent-strong);
}

/* ---------------------------------------------------------------------------
 * Wide viewports: the Product name row pins below the theme's own header
 *
 * The pinned row carries the Product name and the one route back to commerce, so
 * a reader deep in the article can still see what they are reading and buy it
 * without scrolling back. It is one row: the breadcrumb above it and the
 * provenance row below it are outside the element and scroll away as usual. The
 * narrow viewport keeps the row in normal flow: it would take too much of a
 * short viewport, and the Contents control already reports position there.
 *
 * The row occupies the article column only, never the sidebar column, so the
 * Contents can still pin as close to the top of the viewport as the theme's own
 * header allows — the two sit side by side rather than one below the other.
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	/*
	 * How far the pinned row sits from the top of the viewport. The theme pins
	 * its own header when the reader scrolls up, and it publishes that height as
	 * `--wd-header-general-sticky-h`; the row takes its offset from that variable
	 * rather than guessing a value of its own, so the two can never overlap.
	 * While the theme header is not pinned, nothing is above this one.
	 */
	body.authherb-view-learn {
		--authherb-learn-header-top: 0px;
	}

	body.authherb-view-learn:has(.whb-header.whb-sticked) {
		--authherb-learn-header-top: var(--wd-header-general-sticky-h, 0px);
	}

	.authherb-learn-header {
		position: sticky;
		top: var(--authherb-learn-header-top);
		/* Above the article, so sections pass behind it rather than over it. */
		z-index: 30;
		/*
		 * Opaque, because the sections scroll behind this element. It matches
		 * the page background the header sits on.
		 */
		background-color: #fff;
	}

	/*
	 * The sidebar keeps the offset it always had. The pinned row is in the other
	 * column, so it is not in the sidebar's way: the Contents pins directly under
	 * the theme's header, which is as close to the top of the viewport as
	 * anything on this page can get. Its bound leaves the pinned row's own height
	 * out of the sum for the same reason.
	 */
	.authherb-learn-sidebar {
		top: calc(var(--authherb-learn-header-top, 0px) + 1.25rem);
		max-height: calc(100vh - var(--authherb-learn-header-top, 0px) - 2.5rem);
	}
}

/*
 * Anchor landing distance.
 *
 * A Contents link scrolls its target to the top of the viewport, so the space
 * the target must leave clear is however much of the top is already spoken for.
 * On a wide viewport that is the pinned Learn header plus whatever of the
 * theme's own header is pinned above it; below the breakpoint the Learn header
 * scrolls away normally and only a reading gap is needed.
 *
 * The header's height is measured and published by the Learn script, because it
 * depends on how the Product name wraps. The fallback covers the moment before
 * that script runs.
 *
 * The theme header's pinned height is reserved whether or not it is pinned at
 * the moment of the click, because a jump down the page is itself a scroll the
 * theme answers by pinning: reading the current state here would reserve the
 * space the header is about to take, and the target would land underneath it.
 *
 * A Reference entry is a landing target in its own right — the Evidence section
 * links to entries, not to the section — so it reserves the same distance the
 * sections do. It carries a scroll margin of its own from the shared Knowledge
 * stylesheet, written for a view with nothing pinned above it; this one answers
 * for this view, and overrides it by being the more specific selector.
 */
.authherb-product-knowledge--learn {
	--authherb-anchor-offset: 1rem;
}

.authherb-product-knowledge--learn .authherb-product-section,
.authherb-product-knowledge--learn .authherb-product-section h3[id],
.authherb-product-knowledge--learn .authherb-reference {
	scroll-margin-top: var(--authherb-anchor-offset);
}

@media (min-width: 1024px) {
	.authherb-product-knowledge--learn {
		--authherb-anchor-offset: calc(var(--authherb-learn-header-h, 190px) + var(--wd-header-general-sticky-h, 0px) + 1rem);
	}
}

/*
 * A Reference entry that a reader has just been sent to.
 *
 * A citation carries identifiers — a DOI, and whatever URL the citation itself
 * printed — and an identifier is one unbreakable word. Some of them are wider
 * than a phone's column, and a page wider than the viewport is answered by the
 * browser shrinking the whole page to fit, so a reader who asked to read one
 * Reference would get the entire article zoomed out instead.
 *
 * The long word is allowed to break rather than widen the page. Prose is
 * untouched: a word that fits its column is never broken.
 */
.authherb-reference__content,
.authherb-reference__citation {
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.authherb-product-knowledge--learn .authherb-product-toc__subwrap,
	.authherb-learn-category__subwrap,
	.authherb-product-toc--learn .authherb-product-toc__sublist,
	.authherb-learn-category__products,
	.authherb-product-toc__chevron,
	.authherb-product-toc--learn .authherb-product-toc__indicator,
	.authherb-learn-categories__toggle .authherb-product-toc__indicator,
	.authherb-learn-sidebar__region {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Narrow viewports: one column, no sticky sidebar, both blocks collapsible
 * ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.authherb-product-knowledge--learn {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.authherb-learn-sidebar {
		position: static;
		top: auto;
		max-height: none;
		overflow-y: visible;
	}
}

@media (max-width: 767px) {
	.authherb-product-knowledge--learn {
		margin: 2rem auto;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/*
	 * Mobile reads breadcrumb, Product header, Contents, Categories, then the
	 * Knowledge sections. The content wrapper is dissolved into the grid so those
	 * blocks can be ordered without moving them in the DOM, which keeps the
	 * desktop column layout and the section markup unchanged. The breadcrumb is
	 * ordered ahead of the header because the header is pulled ahead of the
	 * sidebar; both are negative so the trail still opens the page.
	 */
	.authherb-product-knowledge--learn {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.authherb-product-knowledge--learn > .authherb-product-knowledge__content {
		display: contents;
	}

	.authherb-product-knowledge--learn .authherb-learn-breadcrumb {
		order: -2;
	}

	/* The Contents block supplies the rule that separates it from the header. */
	.authherb-product-knowledge--learn .authherb-learn-header {
		order: -1;
		margin-bottom: 1.75rem;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/*
	 * The header stacks rather than wrapping into whatever the width allows, so
	 * the name keeps its own row at every phone width. The route back to commerce
	 * is not carried here on this viewport: it is the fixed bar at the bottom of
	 * the viewport below, which the reader's thumb can reach without scrolling
	 * back to the top of a long article.
	 */
	.authherb-learn-header__main {
		flex-direction: column;
		align-items: stretch;
		gap: 0.85rem;
	}

	.authherb-learn-header__cta {
		display: none;
	}

	.authherb-learn-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}

	.authherb-product-knowledge--learn .authherb-learn-sidebar {
		order: 0;
		margin-bottom: 1.75rem;
		padding-top: 0.35rem;
		border-top: 1px solid var(--authherb-border);
	}

	/*
	 * Room for the fixed bar below, so the last line of the article and the
	 * provenance row after it are not left underneath it. The reserve is the
	 * bar's own height plus one step of slack: the bar's padding and its link's
	 * height are what the token restates, so the two cannot drift apart without
	 * the bar's own rules being the thing that changed.
	 */
	body.authherb-view-learn {
		--authherb-learn-shop-cta-h: calc(1.5rem + 48px + env(safe-area-inset-bottom, 0px));

		padding-bottom: calc(var(--authherb-learn-shop-cta-h) + 1rem);
	}

	.authherb-learn-shop-cta {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		display: flex;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--authherb-border);
		background-color: #fff;
	}

	/*
	 * The theme floats its own scroll-to-top button above the toolbar this view
	 * has just removed, and it keeps that offset — which now lands on the new
	 * bar's top edge, where it would sit on a control it has nothing to do with.
	 * It is lifted clear of the bar by the bar's own height instead. The theme
	 * sizes it for the toolbar, so the class that reserves the toolbar's space is
	 * the one this answers.
	 */
	body.authherb-view-learn.sticky-toolbar-on .scrollToTop {
		bottom: calc(var(--authherb-learn-shop-cta-h) + 0.5rem);
	}

	.authherb-learn-shop-cta__link {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 1.6rem;
		border-radius: 6px;
		background: var(--authherb-accent-strong);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.35;
		text-align: center;
		text-decoration: none;
	}

	.authherb-learn-shop-cta__link:hover,
	.authherb-learn-shop-cta__link:focus-visible {
		background: #1b3a28;
		color: #fff;
	}

	/*
	 * The bar takes the bottom edge, so the site navigation toolbar steps aside
	 * while the reader is on this view. One bar at the bottom edge, not two.
	 */
	body.authherb-view-learn .wd-toolbar {
		display: none;
	}

	/* -----------------------------------------------------------------------
	 * Narrow viewport: the whole sidebar folds behind one control.
	 *
	 * The bar names the section the reader is currently in, so the sidebar can
	 * stay closed while the scroll position keeps updating it. Opening it shows
	 * the Contents and the Category navigation together.
	 * -------------------------------------------------------------------- */

	.authherb-learn-sidebar__heading {
		display: block;
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
	}

	.authherb-learn-sidebar__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
		margin: 0;
		padding: 0.7rem 0;
		border: 0;
		background: transparent;
		color: #242424;
		font: inherit;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.3;
		text-align: left;
		text-transform: uppercase;
		cursor: pointer;
	}

	/*
	 * A tapped flat button keeps its hover state on touch devices, so the
	 * theme's generic button hover would leave this bar shaded for the rest of
	 * the visit. The control declares its own states instead, and the indicator
	 * already reports whether the sidebar is open.
	 */
	.authherb-learn-sidebar__toggle:hover,
	.authherb-learn-sidebar__toggle:active,
	.authherb-learn-sidebar__toggle:focus {
		background: transparent;
		color: #242424;
	}

	.authherb-learn-sidebar__label {
		flex: 0 0 auto;
	}

	/* The current section, which the closed sidebar keeps up to date. */
	.authherb-learn-sidebar__current {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		color: var(--authherb-accent-strong);
		font-weight: 600;
		letter-spacing: 0;
		text-overflow: ellipsis;
		text-transform: none;
		white-space: nowrap;
	}

	.authherb-learn-sidebar__current::before {
		margin: 0 0.35rem;
		content: "·";
		color: #b6c0b9;
	}

	.authherb-learn-sidebar__current:empty {
		display: none;
	}

	.authherb-learn-sidebar__toggle .authherb-product-toc__indicator {
		display: block;
	}

	.authherb-learn-sidebar__toggle[aria-expanded="true"] .authherb-product-toc__indicator {
		transform: rotate(225deg);
	}

	.authherb-learn-sidebar__region {
		display: grid;
		grid-template-rows: 1fr;
	}

	.authherb-learn-sidebar__region-inner {
		min-height: 0;
		overflow: hidden;
	}

	.authherb-learn-sidebar.is-collapsed .authherb-learn-sidebar__region {
		grid-template-rows: 0fr;
	}

	/*
	 * The transition is armed only once the script has applied its first state,
	 * so the sidebar does not animate itself shut while the page is loading.
	 */
	.authherb-learn-sidebar.is-settled .authherb-learn-sidebar__region {
		transition: grid-template-rows 0.3s ease;
	}

	/*
	 * The Contents block no longer carries its own bar. The control above it
	 * already names the same list with the same indicator, and it now reports
	 * the current section too, so a second bar would only repeat it. Categories
	 * keeps its heading, because it labels a separate group rather than
	 * restating the control.
	 */
	.authherb-product-knowledge--learn .authherb-product-toc__heading {
		display: none;
	}

	.authherb-product-knowledge--learn .authherb-product-toc {
		padding-top: 0;
		border-top: 0;
	}

	/*
	 * One rule above the Contents bar; the Categories block supplies the next
	 * one, so the collapsed sidebar reads as two bands rather than three rules
	 * stacked into a few centimetres.
	 */
	.authherb-product-toc--learn {
		padding: 0.35rem 0;
		border-top: 1px solid var(--authherb-border);
		border-bottom: 0;
	}

	/* The collapsed Contents block is a full-width trigger bar. */
	.authherb-product-toc__label--wide {
		display: none;
	}

	.authherb-product-toc__label--narrow {
		display: inline;
	}

	.authherb-product-toc--learn .authherb-product-toc__toggle {
		padding: 0.7rem 0;
		cursor: pointer;
	}

	.authherb-learn-breadcrumb__list {
		font-size: 12px;
	}

	.authherb-product-toc--learn .authherb-product-toc__indicator,
	.authherb-learn-categories__toggle .authherb-product-toc__indicator {
		display: block;
	}

	.authherb-product-toc--learn .authherb-product-toc__list[hidden] {
		display: none;
	}

	.authherb-product-toc--learn .authherb-product-toc__list {
		margin-top: 0.75rem;
	}

	.authherb-product-toc--learn .authherb-product-toc__link {
		padding: 0.55rem 0.6rem;
	}

	.authherb-learn-categories {
		margin-top: 0.85rem;
		padding-top: 0.85rem;
	}

	.authherb-learn-categories__toggle {
		padding: 0.3rem 0;
	}

	.authherb-learn-categories__list[hidden] {
		display: none;
	}

	.authherb-learn-header__title {
		font-size: 26px;
	}

	.authherb-learn-share__link {
		font-size: 13px;
		padding: 5px 10px;
	}
}

/*
 * There is no bottom bar rule here any more.
 *
 * Learn used to replace WoodMart's site navigation toolbar with a fixed Shop
 * Now bar of its own. The Shop Now now lives in the Learn header, so the
 * replacement has nothing left to carry and the shared toolbar keeps its own
 * behavior on this route exactly as it does everywhere else.
 */