/**
 * Lisensio Knowledge Base — default frontend styles.
 *
 * Every rule is scoped to `.lisensio-kb`, so nothing here can reach the rest of
 * the theme. Everything the settings control is read from a custom property
 * declared on `.lisensio-kb` by Lisensio_KB_Templates::inline_css(); the
 * declarations below are only the fallbacks used before that runs, so changing
 * a setting never needs a rule-level override.
 *
 * The fixed tokens are declared as `var(--theme-token, lisensio-default)`, so a
 * theme that already publishes a design system takes the knowledge base with it,
 * and the plugin still stands alone on a theme that publishes nothing. The one
 * exception is `--lisensio-kb-brand`, which the settings layer owns outright: it
 * is written on this element by the inline block and must not defer to a theme.
 */

.lisensio-kb {
	/* Overridden by the settings-driven inline block. */
	--lisensio-kb-brand: #2ba377;
	--lisensio-kb-brand-rgb: 43, 163, 119;
	--lisensio-kb-brand-contrast: #ffffff;
	--lisensio-kb-max-width: 72rem;
	--lisensio-kb-card-shadow: 0 4px 14px rgba(30, 122, 90, 0.08);
	--lisensio-kb-card-border: 1px solid transparent;
	--lisensio-kb-card-bg: var(--lisensio-kb-surface);

	/* Fixed design tokens. */
	--lisensio-kb-gradient: var(--gradient, linear-gradient(120deg, #1e7a5a 0%, #2ba377 45%, #40b58a 100%));
	--lisensio-kb-text: var(--ink, #10231b);
	--lisensio-kb-muted: var(--muted, #8b86a0);
	--lisensio-kb-surface: #ffffff;
	--lisensio-kb-soft: var(--bg-soft, #f6fbf8);
	--lisensio-kb-line: var(--border, #dcefe4);
	--lisensio-kb-tint: rgba(var(--lisensio-kb-brand-rgb), 0.08);
	--lisensio-kb-shadow-md: var(--shadow-md, 0 14px 40px rgba(30, 122, 90, 0.14));
	--lisensio-kb-radius: var(--radius, 18px);
	--lisensio-kb-font-head: var(--font-head, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
	--lisensio-kb-font-body: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	--lisensio-kb-gap: 1.5rem;
	--lisensio-kb-space: 2.5rem;

	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--lisensio-kb-max-width);
	padding: var(--lisensio-kb-space) 1rem;
	width: 100%;
	color: var(--lisensio-kb-text);
	font-family: var(--lisensio-kb-font-body);
	line-height: 1.6;
}

.lisensio-kb h1,
.lisensio-kb h2,
.lisensio-kb h3,
.lisensio-kb h4 {
	color: var(--lisensio-kb-text);
	font-family: var(--lisensio-kb-font-head);
	font-weight: 800;
	line-height: 1.2;
}

.lisensio-kb *,
.lisensio-kb *::before,
.lisensio-kb *::after {
	box-sizing: inherit;
}

.lisensio-kb a {
	color: var(--lisensio-kb-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.lisensio-kb a:hover,
.lisensio-kb a:focus {
	color: var(--lisensio-kb-brand);
}

.lisensio-kb :focus-visible {
	outline: 2px solid var(--lisensio-kb-brand);
	outline-offset: 2px;
}

.lisensio-kb img,
.lisensio-kb video,
.lisensio-kb iframe,
.lisensio-kb table {
	max-width: 100%;
}

.lisensio-kb img,
.lisensio-kb video {
	height: auto;
}

.lisensio-kb pre,
.lisensio-kb table {
	overflow-x: auto;
}

.lisensio-kb__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Breadcrumbs. */

.lisensio-kb__breadcrumbs {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
}

.lisensio-kb__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	min-width: 0;
	color: var(--lisensio-kb-muted);
	overflow-wrap: anywhere;
}

.lisensio-kb__crumb + .lisensio-kb__crumb::before {
	content: "/";
	color: var(--lisensio-kb-line);
}

/* Page header and search. */

.lisensio-kb__header {
	margin: 0 0 var(--lisensio-kb-space);
}

/*
 * The hero and the theme seam sit in their own wrapper, outside the contained
 * one, so a theme override can render a band that reaches the viewport edges
 * the way the rest of the site does. It still carries `.lisensio-kb`, because
 * the design tokens and the settings-driven inline block are both scoped to
 * that class - dropping it would leave the hero with no brand colour.
 *
 * The class is doubled so this wins over `.lisensio-kb` whatever the order.
 */
.lisensio-kb.lisensio-kb--bleed {
	max-width: none;
	padding: 0;
}

/*
 * The plugin's own hero stays a contained band. Only a theme knows it wants a
 * full-bleed one; a plugin that breaks out of its theme's content column by
 * default is wrong everywhere except the one site it was written against.
 *
 * Both halves of the containment are self-supplied, because the wrapper that
 * used to provide them is no longer a parent. `max-width` restores the measure,
 * and the `width` calculation restores the 1rem gutter - without it the band
 * runs edge to edge below `--lisensio-kb-max-width` and presses its own corner
 * radius flat against the viewport, which is not what it looked like before.
 */
.lisensio-kb--bleed > .lisensio-kb__hero {
	width: calc(100% - 2rem);
	max-width: var(--lisensio-kb-max-width);
	margin-left: auto;
	margin-right: auto;
}

.lisensio-kb__hero {
	margin: 0 0 var(--lisensio-kb-space);
	padding: var(--lisensio-kb-space) 1.5rem;
	border-radius: var(--lisensio-kb-radius);
	background:
		radial-gradient(900px 420px at 80% -10%, var(--lisensio-kb-tint), transparent),
		var(--lisensio-kb-soft);
	text-align: center;
}

.lisensio-kb__hero .lisensio-kb__crumbs {
	justify-content: center;
}

.lisensio-kb__hero .lisensio-kb__description {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

/*
 * The search form is a sibling of the hero, not a child of it. A theme that
 * overrides `lisensio-kb/hero.php` renders its own markup there, so nothing the
 * plugin owns can be nested inside the hero and still survive the override.
 *
 * Matched two ways on purpose. The hero may sit in the same wrapper as the form
 * or in a full-bleed wrapper of its own above it, and the form has to keep its
 * measure either way — an adjacency selector alone silently stops matching the
 * moment the hero moves out of the wrapper.
 */

.lisensio-kb__hero + .lisensio-kb__search,
.lisensio-kb--archive > .lisensio-kb__search,
.lisensio-kb--search > .lisensio-kb__search {
	max-width: 38rem;
	margin: 0 auto var(--lisensio-kb-space);
}

.lisensio-kb__title-accent {
	background: var(--lisensio-kb-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lisensio-kb__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.lisensio-kb__description {
	margin: 0 0 1rem;
	color: var(--lisensio-kb-muted);
}


.lisensio-kb__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
}

/*
 * On a wide screen a full-width search bar reads as a page-wide input rather
 * than as one thing to fill in, so it is held to a share of the hero.
 *
 * Centred, with the breadcrumb and the heading above it. The reference design
 * centres all three, and the hero is the one band on the page where that is
 * the rule - mixing a left-aligned form under a centred heading makes whichever
 * one differs look like the mistake.
 *
 * Applied unscoped because the form renders in two places: inside the plugin's
 * own hero, and inside a theme hero through the `after` slot, where no
 * `.lisensio-kb` ancestor exists to scope to.
 */
@media (min-width: 62rem) {
	.lisensio-kb__search {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
}

.lisensio-kb__search-field {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--lisensio-kb-line);
	border-radius: var(--lisensio-kb-radius);
	background: var(--lisensio-kb-surface);
	color: inherit;
	font: inherit;
}

.lisensio-kb__search-field:focus {
	border-color: var(--lisensio-kb-brand);
}

.lisensio-kb__button {
	flex: 0 0 auto;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--lisensio-kb-brand);
	border-radius: var(--lisensio-kb-radius);
	background: var(--lisensio-kb-brand);
	color: var(--lisensio-kb-brand-contrast);
	font: inherit;
	cursor: pointer;
}

/* Sections, grids and lists. */

.lisensio-kb__section {
	margin: var(--lisensio-kb-space) 0 0;
}

/*
 * A section's top margin is separation from the section above it. The first
 * section in a column has nothing above it, so that margin is dead space, and
 * the container's own padding has already provided the gap.
 *
 * Invisible until the sidebar arrived: with one column it read as slightly
 * generous top padding, but beside a sidebar that starts at the top of the row
 * it became a visible empty block pushing the main column down on its own.
 * Reported on a category archive whose term has no sub-categories, where the
 * article list is the first thing in the column.
 */
.lisensio-kb__section:first-child {
	margin-top: 0;
}

.lisensio-kb__section-title {
	margin: 0 0 var(--lisensio-kb-gap);
	font-size: 1.25rem;
}

.lisensio-kb__grid {
	display: grid;
	gap: var(--lisensio-kb-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Explicit column counts. The shared grid fills automatically; a caller says how
   many columns it wants, and the grid steps down on a narrow screen. */

.lisensio-kb .lisensio-kb__grid--cols-1 {
	grid-template-columns: 1fr;
}

.lisensio-kb .lisensio-kb__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lisensio-kb .lisensio-kb__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lisensio-kb .lisensio-kb__grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 56rem) {
	.lisensio-kb .lisensio-kb__grid--cols-3,
	.lisensio-kb .lisensio-kb__grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.lisensio-kb .lisensio-kb__grid--cols-2,
	.lisensio-kb .lisensio-kb__grid--cols-3,
	.lisensio-kb .lisensio-kb__grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

.lisensio-kb__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

/* Cards. */

.lisensio-kb-card {
	min-width: 0;
	padding: 1.75rem;
	border: var(--lisensio-kb-card-border);
	border-radius: var(--lisensio-kb-radius);
	background: var(--lisensio-kb-card-bg);
	box-shadow: var(--lisensio-kb-card-shadow);
	transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.lisensio-kb-card:hover,
.lisensio-kb-card:focus-within {
	transform: translateY(-6px);
	border-color: var(--lisensio-kb-brand);
	box-shadow: var(--lisensio-kb-shadow-md);
}

.lisensio-kb-card--article {
	padding: 1rem 1.25rem;
}

/* Category icons. */

.lisensio-kb .lisensio-kb-card__icon {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--lisensio-kb-brand);
	font-size: 1.5rem;
	line-height: 1;
}

/*
 * The wrapper carries the brand colour and the size; the SVG inside carries
 * neither. Nothing here sets `fill` or `stroke` on the icon, because a CSS
 * declaration always beats a presentation attribute, so a rule for the icons
 * that need a colour would repaint the ones that already have one. An icon
 * drawn with `currentColor` picks the brand colour up from here instead.
 */

.lisensio-kb .lisensio-kb-card__icon--svg {
	width: 3rem;
	height: 3rem;
	margin: 0 0 0.75rem;
	font-size: 0;
}

.lisensio-kb .lisensio-kb-card__icon--svg svg {
	width: 100%;
	height: 100%;
}

.lisensio-kb .lisensio-kb-card__icon-image {
	display: block;
	width: auto;
	max-width: 3rem;
	height: auto;
	margin: 0 0 0.75rem;
}

/*
 * The icon sits beside the category name rather than stacked above it: the
 * name is what a reader scans for, and a block icon pushed it a line down for
 * no gain. `align-items: center` rather than `baseline` because the icon is a
 * fixed 3rem box, not text with a baseline of its own.
 */
.lisensio-kb-card__heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* The icon has margins for the stacked layout it no longer uses. */
.lisensio-kb-card__heading .lisensio-kb-card__icon,
.lisensio-kb-card__heading .lisensio-kb-card__icon--svg {
	flex: 0 0 auto;
	margin: 0;
}

.lisensio-kb-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/*
 * The card title takes the heading colour rather than the link colour. A card
 * whose title, articles and sub-categories were all painted brand would have no
 * hierarchy left; in the reference design the green is spent on the arrows.
 */

.lisensio-kb .lisensio-kb-card__link {
	color: inherit;
	text-decoration: none;
}

.lisensio-kb .lisensio-kb-card__link:hover,
.lisensio-kb .lisensio-kb-card__link:focus {
	color: var(--lisensio-kb-brand);
}

.lisensio-kb-card__link:hover,
.lisensio-kb-card__link:focus {
	text-decoration: underline;
}

.lisensio-kb-card__meta {
	margin: 0.375rem 0 0;
	color: var(--lisensio-kb-muted);
	font-size: 0.8125rem;
}

/*
 * The whole article card is clickable.
 *
 * Done by stretching a pseudo-element from the title's own link rather than
 * wrapping the card in an `a`. Wrapping would fold the excerpt into the link's
 * accessible name, so a screen reader would announce the entire card as the
 * link text; this way there is still exactly one link per card, named by the
 * title, and the keyboard focus ring stays on the title where it belongs.
 *
 * The tradeoff is that the overlay sits above the excerpt, so excerpt text is
 * not selectable by dragging. That is the accepted cost of this pattern and
 * the reason the alternative - a second, hidden link - is not used: two links
 * to one destination is worse for a screen reader than unselectable summary
 * text is for a mouse.
 */
.lisensio-kb-card--article {
	position: relative;
}

.lisensio-kb-card--article .lisensio-kb-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.lisensio-kb-card--article:hover {
	transform: translateY(-2px);
	border-color: var(--lisensio-kb-brand);
}

.lisensio-kb-card__excerpt {
	margin: 0.625rem 0 0;
	color: var(--lisensio-kb-muted);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.lisensio-kb-card__children {
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb-card__child {
	margin: 0;
	padding: 0.25rem 0;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

/* The articles a category card lists. */

.lisensio-kb-card__articles {
	display: grid;
	gap: 0.125rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb-card__article {
	margin: 0;
	min-width: 0;
}

.lisensio-kb .lisensio-kb-card__article-link {
	display: flex;
	gap: 0.625rem;
	align-items: baseline;
	padding: 0.625rem 0.875rem;
	border-radius: 0.625rem;
	color: var(--lisensio-kb-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 0.2s, color 0.2s;
}

.lisensio-kb .lisensio-kb-card__article-link::before {
	content: "\2192";
	color: var(--lisensio-kb-brand);
	font-weight: 800;
}

.lisensio-kb .lisensio-kb-card__article-link:hover,
.lisensio-kb .lisensio-kb-card__article-link:focus {
	background: var(--lisensio-kb-soft);
	color: var(--lisensio-kb-brand);
}

/* Article. */

.lisensio-kb-article {
	min-width: 0;
}

.lisensio-kb-article__header {
	margin: 0 0 var(--lisensio-kb-gap);
	padding: 0 0 var(--lisensio-kb-gap);
	border-bottom: 1px solid var(--lisensio-kb-line);
}

.lisensio-kb-article__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.lisensio-kb-article__meta {
	margin: 0;
	color: var(--lisensio-kb-muted);
	font-size: 0.875rem;
}

.lisensio-kb-article__body {
	overflow-wrap: break-word;
}

.lisensio-kb-article__body > * {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.lisensio-kb-article__body h2,
.lisensio-kb-article__body h3,
.lisensio-kb-article__body h4 {
	margin-top: 2rem;
	line-height: 1.25;
}

.lisensio-kb-article__body blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 0.5rem 1.25rem;
	border-left: 3px solid var(--lisensio-kb-brand);
	background: var(--lisensio-kb-tint);
}

.lisensio-kb-article__body pre {
	padding: 1rem;
	border-radius: var(--lisensio-kb-radius);
	background: var(--lisensio-kb-tint);
}

.lisensio-kb-article__body table {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.lisensio-kb-article__footer {
	margin: var(--lisensio-kb-space) 0 0;
	padding: var(--lisensio-kb-gap) 0 0;
	border-top: 1px solid var(--lisensio-kb-line);
}

.lisensio-kb-article__tags {
	margin: 0;
	color: var(--lisensio-kb-muted);
	font-size: 0.875rem;
}

.lisensio-kb-article__tags-label {
	margin-right: 0.25rem;
}

/* Sidebar layout.
 *
 * The side is carried by a modifier class on the wrapper rather than by the
 * order of the markup, so the article always comes first in the document and a
 * reader on a narrow screen or a screen reader meets the content before the
 * navigation. On a wide screen the grid places the sidebar, and `order` moves
 * it into the first track when the setting asks for a sidebar on the left.
 *
 * The proportions are the reference implementation's: 70% for the article, 27%
 * for the sidebar, and the remaining 3% as the gutter between them.
 */

.lisensio-kb__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lisensio-kb-space);
}

.lisensio-kb__main {
	min-width: 0;
}

.lisensio-kb__sidebar {
	min-width: 0;
	align-self: start;
}

@media (min-width: 62rem) {
	.lisensio-kb--sidebarright > .lisensio-kb__layout {
		grid-template-columns: 70% 27%;
		gap: 3%;
	}

	.lisensio-kb--sidebarleft > .lisensio-kb__layout {
		grid-template-columns: 27% 70%;
		gap: 3%;
	}

	.lisensio-kb--sidebarleft > .lisensio-kb__layout > .lisensio-kb__sidebar {
		order: -1;
	}

	/*
	 * Sticky needs `align-self: start` above to have any effect: a grid item
	 * stretches to the row height by default, and an element that is already
	 * as tall as its container has nothing to stick within.
	 */
	.lisensio-kb__sidebar--sticky {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

/* Sidebar widgets. */

.lisensio-kb-widget {
	padding: 1.5rem 1.375rem;
	border: 1px solid var(--lisensio-kb-line);
	border-radius: var(--lisensio-kb-radius);
	background: var(--lisensio-kb-card-bg);
	box-shadow: var(--lisensio-kb-card-shadow);
	font-size: 0.9375rem;
}

.lisensio-kb-widget + .lisensio-kb-widget {
	margin-top: var(--lisensio-kb-gap);
}

/*
 * The title is set apart by a hairline rather than by size alone. Three
 * stacked panels of similar text need a visible boundary between "what this
 * list is" and "the list", and at 1rem the heading is not big enough to do
 * that on its own.
 */
.lisensio-kb-widget__title {
	margin: 0 0 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lisensio-kb-line);
	font-family: var(--lisensio-kb-font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.lisensio-kb-widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb-widget__item + .lisensio-kb-widget__item {
	margin-top: 0.125rem;
}

/*
 * Each row is the full width of the panel so the hover target matches what the
 * reader sees, rather than being only as wide as the words.
 */
.lisensio-kb-widget__link {
	display: block;
	padding: 0.4375rem 0.625rem;
	border-radius: 0.5rem;
	color: var(--lisensio-kb-text);
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.lisensio-kb-widget__link:hover,
.lisensio-kb-widget__link:focus {
	background: var(--lisensio-kb-soft);
	color: var(--lisensio-kb-brand);
}

/*
 * The category being read.
 *
 * Marked three ways on purpose, because any one of them alone fails somebody:
 * the tint is invisible to a reader who cannot distinguish it from the panel,
 * the weight is subtle at this size, and the bar carries in a high-contrast or
 * forced-colours mode where backgrounds are dropped. The markup also sets
 * `aria-current`, which is what actually announces it.
 */
.lisensio-kb-widget__item.is-current > .lisensio-kb-widget__link {
	position: relative;
	background: var(--lisensio-kb-tint);
	color: var(--lisensio-kb-brand);
	font-weight: 600;
}

.lisensio-kb-widget__item.is-current > .lisensio-kb-widget__link::before {
	content: "";
	position: absolute;
	inset: 0.375rem auto 0.375rem 0;
	width: 3px;
	border-radius: 999px;
	background: var(--lisensio-kb-brand);
}

/* Table of contents. */

.lisensio-kb-toc {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb-toc__item {
	margin: 0;
}

.lisensio-kb-toc__item + .lisensio-kb-toc__item {
	margin-top: 0.125rem;
}

/*
 * A rail down the left rather than indentation alone: a contents list is read
 * as a shape, and the line makes the nesting legible without pushing deeper
 * levels so far right that long headings wrap every line.
 */
.lisensio-kb-toc {
	border-left: 2px solid var(--lisensio-kb-line);
}

.lisensio-kb-toc__link {
	display: block;
	padding: 0.3125rem 0.625rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--lisensio-kb-muted);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.15s, border-color 0.15s;
}

.lisensio-kb-toc__link:hover,
.lisensio-kb-toc__link:focus {
	border-left-color: var(--lisensio-kb-brand);
	color: var(--lisensio-kb-brand);
	text-decoration: none;
}

.lisensio-kb-toc--nested {
	margin: 0.5rem 0 0;
	padding-left: 0.875rem;
	border-left: 1px solid var(--lisensio-kb-line);
}

/*
 * A heading the table of contents links to must not sit flush against the top
 * of the viewport when it is jumped to. How far down it should land is the one
 * thing the plugin cannot know: it depends on how tall the theme's fixed header
 * is, if it has one at all. So the offset is a custom property with a small
 * default, and a theme with a sticky header sets
 * `--lisensio-kb-anchor-offset: <its own height>` rather than overriding a rule.
 */
.lisensio-kb-article__body h2[id],
.lisensio-kb-article__body h3[id] {
	scroll-margin-top: var(--lisensio-kb-anchor-offset, 1.5rem);
}

/* Tag list. */

.lisensio-kb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lisensio-kb-tags__item {
	margin: 0;
}

.lisensio-kb .lisensio-kb-tag {
	display: inline-block;
	padding: 0.3125rem 0.6875rem;
	border: 1px solid var(--lisensio-kb-line);
	border-radius: 999px;
	background: var(--lisensio-kb-surface);
	color: var(--lisensio-kb-muted);
	font-size: 0.8125rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/*
 * Bordered rather than filled, so a dense cloud does not read as a solid block
 * of colour, and the fill is kept for the hover state where it marks one chip
 * out of many.
 */
.lisensio-kb .lisensio-kb-tag:hover,
.lisensio-kb .lisensio-kb-tag:focus {
	border-color: var(--lisensio-kb-brand);
	background: var(--lisensio-kb-tint);
	color: var(--lisensio-kb-brand);
}

/* Empty state and pagination. */

.lisensio-kb__empty {
	padding: var(--lisensio-kb-space) 1.25rem;
	border: 1px dashed var(--lisensio-kb-line);
	border-radius: var(--lisensio-kb-radius);
	text-align: center;
}

.lisensio-kb__empty-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.lisensio-kb__empty-body {
	margin: 0.5rem 0 0;
	color: var(--lisensio-kb-muted);
}

.lisensio-kb .lisensio-kb__pagination {
	margin: var(--lisensio-kb-space) 0 0;
}

.lisensio-kb .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

@media (max-width: 30rem) {
	.lisensio-kb {
		--lisensio-kb-space: 1.75rem;
		--lisensio-kb-gap: 1rem;

		padding-left: 1rem;
		padding-right: 1rem;
	}

	.lisensio-kb__hero {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.lisensio-kb__button {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lisensio-kb-card,
	.lisensio-kb .lisensio-kb-card__article-link {
		transition: none;
	}

	.lisensio-kb-card:hover,
	.lisensio-kb-card:focus-within {
		transform: none;
	}
}