/**
 * Licensio Knowledge Base — default frontend styles.
 *
 * Every rule is scoped to `.licensio-kb`, so nothing here can reach the rest of
 * the theme. Everything the settings control is read from a custom property
 * declared on `.licensio-kb` by Licensio_KB_Templates::inline_css(); the
 * declarations below are only the fallbacks used before that runs.
 *
 * The knowledge base sits inside the active theme rather than on top of it, so
 * this file sets no colour and no font of its own. Text, links, headings and
 * the typeface all come from the theme. Panels, cards, widgets, tags and the
 * search field have transparent backgrounds, and they are told apart from the
 * page by hairlines and faint tints mixed from `currentColor`, which is the
 * theme's own text colour wherever the rule lands. That keeps the separation
 * visible on a light theme and a dark one alike.
 *
 * The one colour the plugin can add is the optional brand colour. When it is
 * set, the inline block declares `--licensio-kb-brand` (with its `-rgb` and
 * `-contrast` companions) and colours links with it; when it is empty nothing
 * is declared, and every `var(--licensio-kb-brand, …)` below falls back to the
 * theme's colours.
 *
 * Browsers without `color-mix()` drop the mixed values as invalid at computed
 * time, which leaves a border in the plain text colour and a background
 * transparent — a heavier line, but nothing unreadable.
 */

.licensio-kb {
	/*
	 * Overridden by the settings-driven inline block. The brand colour is not
	 * declared here at all: unset is what "use the theme" means.
	 */
	--licensio-kb-max-width: 72rem;
	--licensio-kb-card-shadow: 0 4px 14px color-mix(in srgb, currentColor 10%, transparent);
	--licensio-kb-card-border: 1px solid transparent;
	--licensio-kb-card-bg: var(--licensio-kb-surface);

	/*
	 * Derived tokens. Each is mixed from `currentColor`, which resolves on the
	 * element that uses it, so a line or a tint always follows the text colour
	 * of the place it is drawn in.
	 */
	--licensio-kb-accent: var(--licensio-kb-brand, currentColor);
	--licensio-kb-muted: color-mix(in srgb, currentColor 80%, transparent);
	--licensio-kb-line: color-mix(in srgb, currentColor 18%, transparent);
	--licensio-kb-surface: color-mix(in srgb, currentColor 4%, transparent);
	--licensio-kb-tint: color-mix(in srgb, var(--licensio-kb-brand, currentColor) 8%, transparent);
	--licensio-kb-shadow-md: 0 14px 40px color-mix(in srgb, currentColor 16%, transparent);
	--licensio-kb-radius: 10px;
	--licensio-kb-gap: 1.5rem;
	--licensio-kb-space: 2.5rem;

	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--licensio-kb-max-width);
	padding: var(--licensio-kb-space) 1rem;
	width: 100%;
	line-height: 1.6;
}

.licensio-kb h1,
.licensio-kb h2,
.licensio-kb h3,
.licensio-kb h4 {
	line-height: 1.2;
}

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

/*
 * No link colour here: links keep the theme's. When a brand colour is set the
 * inline block adds the rule that paints them with it.
 */
.licensio-kb a {
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

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

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

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

.licensio-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;
}

/* Page header. */

/*
 * The one heading band the redesigned archive views open with: a heading and
 * the hairline rule beneath it. Nothing else — the rule is what separates the
 * page header from the grid, and anything more (a gradient, a search box) is a
 * different design than this one.
 *
 * The one addition is the Archive header image. When it is set the header
 * becomes a band with the image behind it. The plugin cannot know the colours
 * of an arbitrary image or theme, so it chooses none: the heading sits on a
 * panel that blurs the image behind it and keeps the theme's text colour.
 * Blur keeps the heading legible over most images, but it cannot guarantee
 * contrast: dark text over a dark image stays dark. A theme that needs more
 * overrides `licensio-kb/page-header.php`.
 */
.licensio-kb__pagehead {
	margin: 0 0 2rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--licensio-kb-line);
}

.licensio-kb__pagehead--image {
	padding: clamp(2rem, 8vw, 4.5rem) clamp(1rem, 4vw, 2rem);
	border-radius: var(--licensio-kb-radius);
	background-image: var(--licensio-kb-pagehead-image);
	background-position: center;
	background-size: cover;
}

.licensio-kb__pagehead--image .licensio-kb__pagehead-title,
.licensio-kb__pagehead--image .licensio-kb__pagehead-subtitle {
	display: table;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--licensio-kb-line);
	border-radius: var(--licensio-kb-radius);
	background: var(--licensio-kb-surface);
	-webkit-backdrop-filter: blur(12px) saturate(0.6);
	backdrop-filter: blur(12px) saturate(0.6);
}

.licensio-kb__pagehead-title {
	margin: 0;
	font-size: 1.3125rem;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.licensio-kb__pagehead-subtitle {
	margin: 0.375rem 0 0;
	color: var(--licensio-kb-muted);
	font-size: 0.9375rem;
}

/* Breadcrumbs. */

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

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

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

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

/* Page header and search (hero views: single article, tag, search results). */

.licensio-kb__header {
	margin: 0 0 var(--licensio-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 `.licensio-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 `.licensio-kb` whatever the order.
 */
.licensio-kb.licensio-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 `--licensio-kb-max-width` and presses its own corner
 * radius flat against the viewport, which is not what it looked like before.
 */
.licensio-kb--bleed > .licensio-kb__hero {
	width: calc(100% - 2rem);
	max-width: var(--licensio-kb-max-width);
	margin-left: auto;
	margin-right: auto;
}

.licensio-kb__hero {
	margin: 0 0 var(--licensio-kb-space);
	padding: var(--licensio-kb-space) 1.5rem;
	border: 1px solid var(--licensio-kb-line);
	border-radius: var(--licensio-kb-radius);
	background: var(--licensio-kb-tint);
	text-align: center;
}

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

.licensio-kb__hero .licensio-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 `licensio-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.
 */

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

.licensio-kb__title-accent {
	color: var(--licensio-kb-accent);
}

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

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


.licensio-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
 * `.licensio-kb` ancestor exists to scope to.
 */
@media (min-width: 62rem) {
	.licensio-kb__search {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
}

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

.licensio-kb__search-field:focus {
	border-color: var(--licensio-kb-accent);
}

/*
 * Filled with the brand colour when there is one. Without it the button is
 * outlined in the text colour and keeps the text colour for its label, which
 * is legible on whatever background the theme has.
 */
.licensio-kb__button {
	flex: 0 0 auto;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--licensio-kb-accent);
	border-radius: var(--licensio-kb-radius);
	background: var(--licensio-kb-brand, transparent);
	color: var(--licensio-kb-brand-contrast, currentColor);
	font: inherit;
	cursor: pointer;
}

/* Sections, grids and lists. */

.licensio-kb__section {
	margin: var(--licensio-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.
 */
.licensio-kb__section:first-child {
	margin-top: 0;
}

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

.licensio-kb__grid {
	display: grid;
	gap: var(--licensio-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. */

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

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

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

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

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

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

/*
 * The divided grid: the redesign's category layout, where the cards carry no
 * box of their own and hairline rules between the rows do the separating.
 *
 * Column spacing is a gap and row spacing is padding plus a rule, so a rule
 * hugs the row it closes rather than sitting in dead space. Which cells are in
 * the last row — and so must lose their rule — depends on how many columns are
 * showing, which the breakpoints below step through in step with the column
 * counts above.
 */
.licensio-kb .licensio-kb__grid--divided {
	row-gap: 0;
	column-gap: 3rem;
}

.licensio-kb .licensio-kb__grid--divided > .licensio-kb-card {
	padding: 0 0 1.375rem;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.licensio-kb .licensio-kb__grid--divided > .licensio-kb-card:hover,
.licensio-kb .licensio-kb__grid--divided > .licensio-kb-card:focus-within {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}

.licensio-kb .licensio-kb__grid--divided > .licensio-kb-card {
	border-bottom: 1px solid var(--licensio-kb-line);
}

.licensio-kb .licensio-kb__grid--divided > :last-child {
	border-bottom: none;
}

@media (min-width: 40rem) {
	.licensio-kb .licensio-kb__grid--cols-2.licensio-kb__grid--divided > :nth-last-child(-n+2),
	.licensio-kb .licensio-kb__grid--cols-3.licensio-kb__grid--divided > :nth-last-child(-n+2),
	.licensio-kb .licensio-kb__grid--cols-4.licensio-kb__grid--divided > :nth-last-child(-n+2) {
		border-bottom: none;
	}
}

@media (min-width: 56rem) {
	.licensio-kb .licensio-kb__grid--cols-3.licensio-kb__grid--divided > :nth-last-child(-n+3),
	.licensio-kb .licensio-kb__grid--cols-4.licensio-kb__grid--divided > :nth-last-child(-n+3) {
		border-bottom: none;
	}
}

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

/*
 * The article list a category archive widens into when its sidebar is off:
 * three columns, stepping down on a narrow screen the way the category grid
 * does, so the two never disagree about where the breakpoints sit.
 */
@media (min-width: 56rem) {
	.licensio-kb .licensio-kb__list--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 56rem) and (min-width: 40rem) {
	.licensio-kb .licensio-kb__list--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Cards. */

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

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

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

/* Category icons. */

.licensio-kb .licensio-kb-card__icon {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--licensio-kb-accent);
	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.
 */

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

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

.licensio-kb .licensio-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.
 */
.licensio-kb-card__heading {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

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

.licensio-kb-card__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	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 brand colour is spent on the
 * article icons and the View all link.
 */

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

.licensio-kb .licensio-kb-card__link:hover,
.licensio-kb .licensio-kb-card__link:focus {
	color: var(--licensio-kb-accent);
}

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

/*
 * The article count sits beside the title rather than under the card. It is
 * metadata about the list below it, and in the reference design it reads as
 * part of the heading line: "Getting Started (3 Articles)".
 */
.licensio-kb-card__count {
	color: var(--licensio-kb-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

/*
 * 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.
 */
.licensio-kb-card--article {
	position: relative;
}

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

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

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

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

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

/* The articles a category card lists. */

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

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

/*
 * Each row is a document icon and a title. The icon is an inline SVG carrying
 * `stroke="currentColor"`, so the brand colour arrives from the rule below
 * without the template needing to know it.
 */
.licensio-kb .licensio-kb-card__article-link {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	padding: 0.375rem 0;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s;
}

.licensio-kb .licensio-kb-card__article-icon {
	flex: 0 0 auto;
	align-self: center;
	color: var(--licensio-kb-accent);
}

.licensio-kb .licensio-kb-card__article-title {
	min-width: 0;
}

.licensio-kb .licensio-kb-card__article-link:hover,
.licensio-kb .licensio-kb-card__article-link:focus {
	color: var(--licensio-kb-accent);
}

/* The View all link that closes a category card. */

.licensio-kb .licensio-kb-card__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.licensio-kb .licensio-kb-card__view-all:hover,
.licensio-kb .licensio-kb-card__view-all:focus {
	text-decoration: underline;
}

.licensio-kb .licensio-kb-card__view-all-icon {
	flex: 0 0 auto;
}

/* Article. */

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

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

.licensio-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;
}

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

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

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

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

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

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

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

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

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

.licensio-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.
 */

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

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

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

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

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

	.licensio-kb--sidebarleft > .licensio-kb__layout > .licensio-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.
	 */
	.licensio-kb__sidebar--sticky {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

/* Sidebar widgets.
 *
 * A transparent panel with a hairline border and no shadow, so it sits on the
 * theme's own background. Every widget gets it, so a stack of them reads as
 * one column of the same component rather than two styles of box.
 */

.licensio-kb-widget {
	padding: 1.375rem 1.25rem;
	border: 1px solid var(--licensio-kb-line);
	border-radius: var(--licensio-kb-radius);
	background: transparent;
	box-shadow: none;
	font-size: 0.9375rem;
}

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

.licensio-kb-widget__title {
	margin: 0 0 0.875rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

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

.licensio-kb-widget__item + .licensio-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.
 */
.licensio-kb-widget__link {
	display: block;
	padding: 0.4375rem 0.625rem;
	border-radius: 0.5rem;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.licensio-kb-widget__link:hover,
.licensio-kb-widget__link:focus {
	background: var(--licensio-kb-surface);
	color: var(--licensio-kb-accent);
}

/*
 * 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.
 */
.licensio-kb-widget__item.is-current > .licensio-kb-widget__link {
	position: relative;
	background: var(--licensio-kb-tint);
	color: var(--licensio-kb-accent);
	font-weight: 600;
}

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

/*
 * An article row in a widget: the same document icon and title pairing the
 * category cards use, so the icon means "article" in both columns of the page.
 */
.licensio-kb .licensio-kb-widget__link--article {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	padding: 0.375rem 0;
	color: inherit;
}

.licensio-kb .licensio-kb-widget__article-icon {
	flex: 0 0 auto;
	align-self: center;
	color: var(--licensio-kb-accent);
}

.licensio-kb .licensio-kb-widget__article-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The Need Support card. */

.licensio-kb-widget--support {
	text-align: left;
}

.licensio-kb-widget__support-text {
	margin: 0 0 1rem;
	color: var(--licensio-kb-muted);
	font-size: 0.875rem;
}

/*
 * Scoped under the widget so it outranks the `.licensio-kb a` brand rule,
 * which would otherwise paint the label in the brand colour over the brand
 * background. Outlined in the text colour when no brand colour is set, the
 * same as the search button.
 */
.licensio-kb-widget .licensio-kb-widget__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5625rem 1.125rem;
	border: 1px solid var(--licensio-kb-accent);
	border-radius: 0.5rem;
	background: var(--licensio-kb-brand, transparent);
	color: var(--licensio-kb-brand-contrast, currentColor);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.15s;
}

.licensio-kb-widget .licensio-kb-widget__button:hover,
.licensio-kb-widget .licensio-kb-widget__button:focus {
	color: var(--licensio-kb-brand-contrast, currentColor);
	filter: brightness(1.1);
}

/* Table of contents. */

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

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

.licensio-kb-toc__item + .licensio-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.
 */
.licensio-kb-toc {
	border-left: 2px solid var(--licensio-kb-line);
}

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

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

.licensio-kb-toc--nested {
	margin: 0.5rem 0 0;
	padding-left: 0.875rem;
	border-left: 1px solid var(--licensio-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
 * `--licensio-kb-anchor-offset: <its own height>` rather than overriding a rule.
 */
.licensio-kb-article__body h2[id],
.licensio-kb-article__body h3[id] {
	scroll-margin-top: var(--licensio-kb-anchor-offset, 1.5rem);
}

/* Tag list. */

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

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

.licensio-kb .licensio-kb-tag {
	display: inline-block;
	padding: 0.3125rem 0.6875rem;
	border: 1px solid var(--licensio-kb-line);
	border-radius: 999px;
	background: transparent;
	color: var(--licensio-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.
 */
.licensio-kb .licensio-kb-tag:hover,
.licensio-kb .licensio-kb-tag:focus {
	border-color: var(--licensio-kb-accent);
	background: var(--licensio-kb-tint);
	color: var(--licensio-kb-accent);
}

/* Empty state and pagination. */

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

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

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

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

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

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

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

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

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

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

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