/**
 * Knowva front-end styles — premium knowledge-base look.
 * Theme-agnostic, scoped to .knowva* classes, fully responsive.
 * Override any --knowva-* variable from your theme to rebrand.
 */

:root {
	--knowva-accent: #4338ca;
	--knowva-accent-rgb: 67, 56, 202;
	--knowva-accent-strong: color-mix( in srgb, var( --knowva-accent ), #000 16% );
	--knowva-accent-2: #6366f1;
	--knowva-accent-ink: #ffffff;
	--knowva-accent-soft: color-mix( in srgb, var( --knowva-accent ) 10%, transparent );
	--knowva-ink: #1f2937;
	--knowva-ink-2: #374151;
	--knowva-muted: #6b7280;
	--knowva-faint: #9ca3af;
	--knowva-border: #e7e9ee;
	--knowva-bg: #ffffff;
	--knowva-bg-soft: #f8f9fc;
	--knowva-kbd: #eef0f5;
	--knowva-radius: 12px;
	--knowva-radius-sm: 12px;
	--knowva-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 12px 28px -12px rgba( 16, 24, 40, 0.14 );
	--knowva-shadow-sm: 0 1px 2px rgba( 16, 24, 40, 0.06 );
	--knowva-toc-width: 16rem;
}

/* Neutralise theme link underlines inside Knowva components (compound
   selectors so they beat theme rules like .entry-content a). */
.knowva-toc .knowva-toc__item a,
.knowva-catnav .knowva-catnav__link,
.knowva-catnav .knowva-catnav__head,
.knowva-breadcrumbs .knowva-breadcrumbs__item a,
.knowva-related .knowva-related__item a,
.knowva .knowva-card__item a,
.knowva .knowva-card__title a,
.knowva-popular .knowva-popular__item a,
.knowva-search .knowva-search__item a { text-decoration: none !important; }

.knowva-toc .knowva-toc__item a:hover,
.knowva-related .knowva-related__item a:hover,
.knowva .knowva-card__item a:hover,
.knowva .knowva-card__title a:hover,
.knowva-popular .knowva-popular__item a:hover { text-decoration: none; }

/* ================================================================= */
/* Breadcrumbs                                                       */
/* ================================================================= */

.knowva-breadcrumbs {
	margin: 0 0 1.5rem;
	font-size: 0.84rem;
	line-height: 1.4;
}

.knowva-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.knowva-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var( --knowva-muted );
}

.knowva-breadcrumbs__item a {
	color: var( --knowva-accent );
	text-decoration: none;
	transition: color 0.15s ease;
}

.knowva-breadcrumbs__item a { display: inline-flex; align-items: center; }
.knowva-breadcrumbs__item a:hover { text-decoration: underline; }
.knowva-breadcrumbs__home { margin-right: 4px; }
.knowva-vote__btn .knowva-icon { margin-right: 1px; }
.knowva-breadcrumbs__item [aria-current="page"] { color: var( --knowva-muted ); font-weight: 600; }
.knowva-breadcrumbs__sep { color: var( --knowva-faint ); }

/* Copy-link anchors on headings */
.knowva-anchor {
	margin-left: 0.35em;
	color: var( --knowva-faint );
	text-decoration: none !important;
	font-weight: 400;
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.knowva-has-anchor:hover .knowva-anchor, .knowva-anchor:focus { opacity: 1; }
.knowva-anchor:hover { color: var( --knowva-accent ); }
.knowva-anchor.is-copied { opacity: 1; color: var( --knowva-accent ); }
.knowva-anchor.is-copied::after { content: " link copied"; font-size: 0.55em; letter-spacing: 0.03em; text-transform: uppercase; }

/* Offset jump targets so TOC/anchor links don't land under a sticky header */
.single-knowva_article h2[id], .single-knowva_article h3[id] { scroll-margin-top: 90px; }
body.admin-bar .single-knowva_article h2[id], body.admin-bar .single-knowva_article h3[id] { scroll-margin-top: 122px; }

/* ================================================================= */
/* Table of contents — sticky side rail on desktop                  */
/* ================================================================= */

.knowva-rail {
	float: right;
	width: var( --knowva-toc-width );
	margin: 0.2rem 0 1.5rem 2.25rem;
	padding: 1.15rem 1.25rem;
	position: sticky;
	top: 2rem;
	max-height: calc( 100vh - 4rem );
	overflow-y: auto;
	box-sizing: border-box;
	background: var( --knowva-bg-soft );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	-webkit-overflow-scrolling: touch;
}

/* "In this category" sibling navigation */
.knowva-toc + .knowva-catnav {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var( --knowva-border );
}

.knowva-catnav__head {
	display: block;
	margin-bottom: 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --knowva-faint );
	text-decoration: none;
}

.knowva-catnav__head:hover { color: var( --knowva-accent ); }
.knowva-catnav__list { margin: 0; padding: 0; list-style: none; }

.knowva-catnav__link {
	display: block;
	padding: 0.34rem 0 0.34rem 0.85rem;
	border-left: 2px solid var( --knowva-border );
	color: var( --knowva-muted );
	text-decoration: none;
	font-size: 0.875rem;
	line-height: 1.35;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.knowva-catnav__link:hover { color: var( --knowva-ink ); }

.knowva-catnav__link.is-current {
	color: var( --knowva-accent );
	border-left-color: var( --knowva-accent );
	font-weight: 600;
	background: var( --knowva-accent-soft );
	border-radius: 0 6px 6px 0;
}

.knowva-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc( 100% + 14px );
	margin: -5px -7px 0.7rem;
	padding: 6px 7px;
	background: none;
	border: 0;
	border-radius: var( --knowva-radius );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --knowva-faint );
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.knowva-toc__toggle:hover { background: var( --knowva-accent-soft ); color: var( --knowva-accent ); }
.knowva-toc__chev { flex: none; color: var( --knowva-faint ); transition: transform 0.25s ease, color 0.15s ease; }
.knowva-toc__toggle:hover .knowva-toc__chev { color: var( --knowva-accent ); }
.knowva-toc__toggle[aria-expanded="false"] .knowva-toc__chev { transform: rotate( -90deg ); }

.knowva-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var( --knowva-border );
}

.knowva-toc__item { margin: 0; line-height: 1.35; }

.knowva-toc__item a {
	display: block;
	padding: 0.34rem 0 0.34rem 0.85rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var( --knowva-muted );
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.knowva-toc__item--h3 a { padding-left: 1.7rem; font-size: 0.83rem; }

.knowva-toc__item a:hover { color: var( --knowva-ink ); }

.knowva-toc__item a.is-active {
	color: var( --knowva-accent );
	border-left-color: var( --knowva-accent );
	font-weight: 600;
}

/* ================================================================= */
/* Helpful voting                                                    */
/* ================================================================= */

.knowva-vote {
	clear: both;
	margin: 2.75rem 0 1rem;
	padding: 1.6rem;
	text-align: center;
	background: var( --knowva-bg-soft );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
}

.knowva-vote__q { margin: 0 0 1rem; font-weight: 600; color: var( --knowva-ink ); }
.knowva-vote__buttons { display: inline-flex; gap: 0.75rem; }

.knowva-vote__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --knowva-ink-2 );
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.knowva-vote__btn:hover:not(:disabled) {
	border-color: var( --knowva-accent );
	background: var( --knowva-accent-soft );
	color: var( --knowva-accent );
	box-shadow: var( --knowva-shadow-sm );
}

.knowva-vote__btn:active:not(:disabled) { transform: translateY( 1px ); }
.knowva-vote__btn:disabled { opacity: 0.6; cursor: default; }
.knowva-vote__count { font-size: 0.8rem; color: var( --knowva-faint ); }
.knowva-vote__thanks { margin: 1rem 0 0; color: #15803d; font-weight: 600; }

/* ================================================================= */
/* Related articles                                                  */
/* ================================================================= */

.knowva-related {
	clear: both;
	margin: 2.75rem 0 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var( --knowva-border );
}

.knowva-related__title { margin: 0 0 1.1rem; font-size: 1.25rem; color: var( --knowva-ink ); }

.knowva-related__list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
}

.knowva-related__item a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem 1.15rem;
	text-decoration: none;
	color: inherit;
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius-sm );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.knowva-related__item a:hover {
	border-color: var( --knowva-accent );
	box-shadow: var( --knowva-shadow );
	transform: translateY( -2px );
}

.knowva-related__item a { position: relative; }
.knowva-related__item a::after { content: "→"; position: absolute; right: 14px; bottom: 11px; color: var( --knowva-accent ); opacity: 0; transform: translateX( -4px ); transition: opacity 0.15s ease, transform 0.15s ease; }
.knowva-related__item a:hover::after { opacity: 1; transform: translateX( 0 ); }
.knowva-related__link-title { display: block; font-weight: 600; color: var( --knowva-ink ); padding-right: 1rem; }
.knowva-related__excerpt { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var( --knowva-muted ); line-height: 1.5; }

/* ================================================================= */
/* Knowledge base landing (shortcode / block)                       */
/* ================================================================= */

.knowva { color: var( --knowva-ink ); font-size: 16px; line-height: 1.6; }

.knowva-hero { text-align: center; margin: 0 auto 2rem; max-width: 720px; }
.knowva-hero__title { margin: 0 0 0.55rem; font-size: clamp( 1.8rem, 4vw, 2.6rem ); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var( --knowva-ink ); }
.knowva-hero__intro { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var( --knowva-muted ); }

.knowva-search { position: relative; max-width: 680px; margin: 0 auto 2.75rem; }

.knowva-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 1.05rem 4.4rem 1.05rem 3.1rem;
	font-size: 1.05rem;
	color: var( --knowva-ink );
	background: var( --knowva-bg ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 1rem center;
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	box-shadow: var( --knowva-shadow-sm );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.knowva-search__input:focus {
	outline: none;
	border-color: var( --knowva-accent );
	box-shadow: 0 0 0 4px var( --knowva-accent-soft );
}

.knowva-search__hint {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 0.72rem;
	font-weight: 600;
	color: var( --knowva-muted );
	background: var( --knowva-kbd );
	border: 1px solid var( --knowva-border );
	border-radius: 6px;
	padding: 3px 8px;
	pointer-events: none;
}

.knowva-icon { display: inline-block; vertical-align: middle; flex: none; }

.knowva-search__results {
	position: absolute;
	z-index: 50;
	top: calc( 100% + 8px );
	left: 0;
	right: 0;
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	box-shadow: var( --knowva-shadow );
	overflow: hidden;
	max-height: 60vh;
	overflow-y: auto;
}

.knowva-search__list { margin: 0; padding: 0; list-style: none; }
.knowva-search__item + .knowva-search__item { border-top: 1px solid var( --knowva-border ); }
.knowva-search__item a { display: block; padding: 0.9rem 1.15rem; text-decoration: none; color: inherit; }
.knowva-search__item a:hover, .knowva-search__item a:focus { background: var( --knowva-accent-soft ); }
.knowva-search__title { display: block; font-weight: 600; }
.knowva-search__cat { display: inline-block; margin-top: 0.2rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var( --knowva-accent ); }
.knowva-search__excerpt { display: block; margin-top: 0.25rem; font-size: 0.86rem; color: var( --knowva-muted ); }
.knowva-search__loading, .knowva-search__empty { padding: 1rem 1.15rem; color: var( --knowva-muted ); font-size: 0.92rem; }

.knowva-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( var( --knowva-cols, 3 ), minmax( 0, 1fr ) );
}

.knowva--cols-1 .knowva-grid { --knowva-cols: 1; }
.knowva--cols-2 .knowva-grid { --knowva-cols: 2; }
.knowva--cols-3 .knowva-grid { --knowva-cols: 3; }
.knowva--cols-4 .knowva-grid { --knowva-cols: 4; }
.knowva--cols-5 .knowva-grid { --knowva-cols: 5; }
.knowva--cols-6 .knowva-grid { --knowva-cols: 6; }

.knowva-card {
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	padding: 1.4rem 1.5rem;
	box-shadow: var( --knowva-shadow-sm );
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.knowva-card:hover { box-shadow: var( --knowva-shadow ); transform: translateY( -2px ); border-color: #d9dce4; }

.knowva-card__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.knowva-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var( --knowva-accent ); background: var( --knowva-accent-soft ); border-radius: var( --knowva-radius ); transition: transform 0.18s ease, background 0.18s ease; }
.knowva-card:hover .knowva-card__icon { transform: scale( 1.07 ); background: color-mix( in srgb, var( --knowva-accent ) 14%, transparent ); }
.knowva-card__title { flex: 1; min-width: 0; margin: 0; font-size: 1.12rem; line-height: 1.3; }
.knowva-card__title a { color: inherit; text-decoration: none; }
.knowva-card__title a:hover { color: var( --knowva-accent ); }

.knowva-card__count {
	flex: none; min-width: 1.7rem; height: 1.7rem; padding: 0 0.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.78rem; font-weight: 600; color: var( --knowva-accent );
	background: var( --knowva-accent-soft ); border-radius: var( --knowva-radius );
}

.knowva-card__list { margin: 0; padding: 0; list-style: none; }
.knowva-card__item { padding: 0.4rem 0; border-bottom: 1px solid var( --knowva-border ); }
.knowva-card__item:last-child { border-bottom: 0; }
.knowva-card__item a { color: var( --knowva-ink-2 ); text-decoration: none; display: flex; gap: 0.55rem; align-items: center; }
.knowva-card__item-icon { flex: none; color: var( --knowva-faint ); transition: color 0.15s ease; }
.knowva-card__item a:hover .knowva-card__item-icon { color: var( --knowva-accent ); }
.knowva-card__item a:hover { color: var( --knowva-accent ); }
.knowva-card__more { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: var( --knowva-accent ); text-decoration: none; }
.knowva-card__more:hover { text-decoration: underline; }
.knowva__empty { color: var( --knowva-muted ); font-style: italic; }

/* ================================================================= */
/* Popular articles                                                  */
/* ================================================================= */

.knowva-popular__title { margin: 0 0 0.8rem; font-size: 1.15rem; }
.knowva-popular__list { margin: 0; padding: 0; list-style: none; counter-reset: kv-pop; }

.knowva-popular__item {
	counter-increment: kv-pop;
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var( --knowva-border );
}

.knowva-popular__item:last-child { border-bottom: 0; }
.knowva-popular__item::before { content: counter( kv-pop ); flex: none; width: 1.4rem; font-size: 0.8rem; font-weight: 700; color: var( --knowva-accent ); }
.knowva-popular__item a { color: var( --knowva-ink-2 ); text-decoration: none; }
.knowva-popular__item a:hover { color: var( --knowva-accent ); }
.knowva-popular__views { margin-left: auto; font-size: 0.78rem; color: var( --knowva-faint ); white-space: nowrap; }

/* ================================================================= */
/* Responsive — collapse the TOC rail on tablets / phones           */
/* ================================================================= */

@media ( max-width: 980px ) {
	.knowva-rail {
		float: none;
		width: auto;
		position: static;
		max-height: none;
		margin: 0 0 1.75rem;
	}
}

@media ( max-width: 880px ) {
	.knowva-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.knowva-grid { grid-template-columns: minmax( 0, 1fr ); }
	.knowva-related__list { grid-template-columns: minmax( 0, 1fr ); }
	.knowva-vote__buttons { flex-direction: column; align-items: stretch; }
	.knowva-search { max-width: 100%; }
	.knowva-hero__title { font-size: 1.7rem; }
	.knowva { width: 100%; }
}

/* The theme's default prev/next post nav has clunky arrows and duplicates the
   rail + related cards — hide it on KB articles for a cleaner page. */
.single-knowva_article .post-navigation,
.single-knowva_article .ast-single-post-order,
.single-knowva_article nav.post-navigation { display: none; }

/* ================================================================= */
/* Print — drop the interactive chrome                              */
/* ================================================================= */

/* Reading progress bar + back-to-top */
.knowva-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9997;
	pointer-events: none;
	background: transparent;
}

.knowva-progress span { display: block; height: 100%; width: 0; background: var( --knowva-accent ); }

.knowva-totop {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 9997;
	width: 42px;
	height: 42px;
	padding: 0;
	min-width: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --knowva-accent );
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	box-shadow: var( --knowva-shadow-sm );
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.knowva-totop[hidden] { display: none; }
.knowva-totop:hover { transform: translateY( -2px ); box-shadow: var( --knowva-shadow ); }
.knowva-totop svg { display: block; flex: none; width: 18px; height: 18px; stroke: var( --knowva-accent ); }

/* Offset the progress bar below the WP admin bar so admins see it too */
body.admin-bar .knowva-progress { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar .knowva-progress { top: 46px; }
}

/* ===== Archive / taxonomy pages (premium, replaces theme default) ===== */
.knowva-archive-wrap { max-width: 1140px; margin: 0 auto; padding: 3rem 20px 4rem; box-sizing: border-box; }
.knowva-archive__hero { margin-bottom: 2.25rem; }
.knowva-archive__title { margin: 0.4rem 0 0.5rem; font-size: clamp( 1.8rem, 4vw, 2.5rem ); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var( --knowva-ink ); }
.knowva-archive__desc { margin: 0 0 1.6rem; font-size: 1.05rem; line-height: 1.6; color: var( --knowva-muted ); max-width: 640px; }
.knowva-archive .knowva-search { margin: 0; max-width: 560px; }

.knowva-arts { display: grid; gap: 0.85rem; }
.knowva-art { display: flex; align-items: center; gap: 14px; padding: 1.1rem 1.25rem; background: var( --knowva-bg ); border: 1px solid var( --knowva-border ); border-radius: var( --knowva-radius ); text-decoration: none !important; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.knowva-art:hover { border-color: var( --knowva-accent ); box-shadow: var( --knowva-shadow ); transform: translateY( -2px ); }
.knowva-art__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var( --knowva-accent ); background: var( --knowva-accent-soft ); border-radius: 12px; transition: transform 0.18s ease; }
.knowva-art:hover .knowva-art__ic { transform: scale( 1.06 ); }
.knowva-art__body { flex: 1; min-width: 0; }
.knowva-art__title { display: block; font-weight: 600; font-size: 1.08rem; color: var( --knowva-ink ); }
.knowva-art__excerpt { display: block; margin-top: 0.28rem; font-size: 0.9rem; line-height: 1.5; color: var( --knowva-muted ); }
.knowva-art__go { flex: none; color: var( --knowva-faint ); opacity: 0; transform: translateX( -4px ); transition: opacity 0.15s ease, transform 0.15s ease; }
.knowva-art:hover .knowva-art__go { opacity: 1; transform: translateX( 0 ); color: var( --knowva-accent ); }

.knowva-archive__pager { margin-top: 2.2rem; }
.knowva-archive__pager .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.knowva-archive__pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 0.7rem; border-radius: var( --knowva-radius ); border: 1px solid var( --knowva-border ); color: var( --knowva-ink-2 ); text-decoration: none; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.knowva-archive__pager .page-numbers.current { background: var( --knowva-accent ); border-color: var( --knowva-accent ); color: #fff; }
.knowva-archive__pager .page-numbers:hover:not( .current ) { border-color: var( --knowva-accent ); color: var( --knowva-accent ); }

@media ( max-width: 600px ) {
	.knowva-archive-wrap { padding: 2rem 16px 3rem; }
	.knowva-art { padding: 1rem; gap: 11px; }
	.knowva-art__ic { width: 38px; height: 38px; }
	.knowva-art__go { display: none; }
}

/* FAQ accordion ([knowva_faq]) */
.knowva-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.knowva-faq__item { border: 1px solid var( --knowva-border ); border-radius: var( --knowva-radius ); background: var( --knowva-bg ); overflow: hidden; }
.knowva-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 1.25rem; margin: 0; background: none; border: 0; text-align: left; font-size: 1.02rem; font-weight: 600; color: var( --knowva-ink ); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.knowva-faq__q:hover { background: var( --knowva-accent-soft ); color: var( --knowva-accent ); }
.knowva-faq__chev { flex: none; color: var( --knowva-faint ); transition: transform 0.25s ease, color 0.15s ease; }
.knowva-faq__q[aria-expanded="true"] .knowva-faq__chev { transform: rotate( 180deg ); color: var( --knowva-accent ); }
.knowva-faq__a { border-top: 1px solid var( --knowva-border ); }
.knowva-faq__a[hidden] { display: none; }
.knowva-faq__a-inner { padding: 0.85rem 1.25rem 1.25rem; color: var( --knowva-ink-2 ); line-height: 1.7; }
.knowva-faq__a-inner > :last-child { margin-bottom: 0; }

/* Article meta (Elementor widget) */
.knowva-meta { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; font-size: 0.88rem; color: var( --knowva-muted ); }
.knowva-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.knowva-meta__item .knowva-icon { color: var( --knowva-accent ); }

/* ===== Focus: clean ring on keyboard only, never the ugly dashed/blue on click ===== */
.knowva-vote__btn:focus, .knowva-toc__toggle:focus, .knowva-fab:focus, .knowva-totop:focus,
.knowva-cmdk__row:focus, .knowva-card a:focus, .knowva-card__more:focus, .knowva-catnav__link:focus,
.knowva-catnav__head:focus, .knowva-toc__item a:focus, .knowva-anchor:focus,
.knowva-breadcrumbs__item a:focus, .knowva-related__item a:focus, .knowva-search__item a:focus,
.knowva-popular__item a:focus {
	outline: none !important;
	box-shadow: none !important;
}

.knowva-vote__btn:focus-visible, .knowva-toc__toggle:focus-visible, .knowva-fab:focus-visible,
.knowva-totop:focus-visible, .knowva-cmdk__row:focus-visible, .knowva-card a:focus-visible,
.knowva-card__more:focus-visible, .knowva-catnav__link:focus-visible, .knowva-toc__item a:focus-visible,
.knowva-anchor:focus-visible, .knowva-breadcrumbs__item a:focus-visible, .knowva-related__item a:focus-visible,
.knowva-search__item a:focus-visible, .knowva-popular__item a:focus-visible {
	outline: 2px solid var( --knowva-accent ) !important;
	outline-offset: 2px;
	border-radius: 6px;
}

@media print {
	.knowva-toc, .knowva-vote, .knowva-related, .knowva-search, .knowva-fab, .knowva-cmdk, .knowva-progress, .knowva-totop { display: none !important; }
}

/* ================================================================= */
/* Command palette (Ctrl/Cmd + K, "/", or the floating button)       */
/* ================================================================= */

.knowva-fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	background: var( --knowva-accent );
	border: 0;
	border-radius: var( --knowva-radius );
	box-shadow: 0 8px 24px -6px rgba( var( --knowva-accent-rgb ), 0.5 );
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.knowva-fab:hover { transform: translateY( -2px ); background: var( --knowva-accent-strong ); box-shadow: 0 12px 28px -6px rgba( var( --knowva-accent-rgb ), 0.55 ); }
.knowva-fab__kbd { font-size: 0.7rem; padding: 1px 6px; border-radius: 5px; background: rgba( 255, 255, 255, 0.22 ); }

@media ( max-width: 600px ) { .knowva-fab__label { display: none; } .knowva-fab { padding: 12px; } }

.knowva-cmdk {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 14vh 16px 16px;
}

.knowva-cmdk[hidden] { display: none; }

.knowva-cmdk__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, 0.45 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
	animation: knowva-fade 0.12s ease;
}

.knowva-cmdk__panel {
	position: relative;
	width: 100%;
	max-width: 620px;
	background: var( --knowva-bg );
	border: 1px solid var( --knowva-border );
	border-radius: var( --knowva-radius );
	box-shadow: 0 24px 60px -12px rgba( 16, 24, 40, 0.4 );
	overflow: hidden;
	animation: knowva-pop 0.14s cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

@keyframes knowva-fade { from { opacity: 0; } }
@keyframes knowva-pop { from { opacity: 0; transform: translateY( -8px ) scale( 0.98 ); } }

.knowva-cmdk__head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var( --knowva-border ); }
.knowva-cmdk__head svg { flex: none; color: var( --knowva-faint ); }
.knowva-cmdk__input { flex: 1; border: 0; outline: 0; background: none; font-size: 1.05rem; color: var( --knowva-ink ); }
.knowva-cmdk__input::placeholder { color: var( --knowva-faint ); }
.knowva-cmdk__esc { font-size: 0.7rem; font-weight: 600; color: var( --knowva-muted ); padding: 2px 7px; border-radius: 6px; background: var( --knowva-kbd ); border: 1px solid var( --knowva-border ); }

.knowva-cmdk__results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.knowva-cmdk__row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: var( --knowva-radius ); text-decoration: none; color: inherit; cursor: pointer; }
.knowva-cmdk__row-ic { flex: none; margin-top: 1px; color: var( --knowva-faint ); }
.knowva-cmdk__row.is-active .knowva-cmdk__row-ic { color: var( --knowva-accent ); }
.knowva-cmdk__row-body { flex: 1; min-width: 0; }
.knowva-cmdk__go { flex: none; align-self: center; color: var( --knowva-faint ); opacity: 0; transform: translateX( -4px ); transition: opacity 0.15s ease, transform 0.15s ease; }
.knowva-cmdk__row.is-active .knowva-cmdk__go, .knowva-cmdk__row:hover .knowva-cmdk__go { opacity: 1; transform: translateX( 0 ); color: var( --knowva-accent ); }
.knowva-cmdk__row:hover, .knowva-cmdk__row.is-active { background: var( --knowva-accent-soft ); }
.knowva-cmdk__row-title { display: block; font-weight: 600; font-size: 0.95rem; color: var( --knowva-ink ); }
.knowva-cmdk__row.is-active .knowva-cmdk__row-title { color: var( --knowva-accent ); }
.knowva-cmdk__row-cat { display: inline-block; margin-top: 2px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var( --knowva-accent ); }
.knowva-cmdk__row-excerpt { display: block; margin-top: 3px; font-size: 0.83rem; color: var( --knowva-muted ); }
.knowva-cmdk__empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 34px 16px; text-align: center; color: var( --knowva-muted ); font-size: 0.92rem; }
.knowva-cmdk__empty svg { color: var( --knowva-faint ); }
.knowva-cmdk__loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var( --knowva-muted ); font-size: 0.92rem; }
.knowva-spin { flex: none; width: 16px; height: 16px; border: 2px solid var( --knowva-border ); border-top-color: var( --knowva-accent ); border-radius: 50%; animation: knowva-rotate 0.7s linear infinite; }
@keyframes knowva-rotate { to { transform: rotate( 360deg ); } }

.knowva-cmdk__suggest { padding: 14px 16px; }
.knowva-cmdk__suggest[hidden] { display: none; }
.knowva-cmdk__suggest-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var( --knowva-faint ); margin-bottom: 0.6rem; }
.knowva-cmdk__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.knowva-cmdk__chip { padding: 0.4rem 0.85rem; font-size: 0.85rem; color: var( --knowva-ink-2 ); background: var( --knowva-bg-soft ); border: 1px solid var( --knowva-border ); border-radius: var( --knowva-radius ); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.knowva-cmdk__chip:hover { border-color: var( --knowva-accent ); color: var( --knowva-accent ); background: var( --knowva-accent-soft ); }
mark.knowva-hl { background: var( --knowva-accent-soft ); color: var( --knowva-accent ); border-radius: 3px; padding: 0 1px; font-weight: 600; }

.knowva-cmdk__foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var( --knowva-border ); font-size: 0.74rem; color: var( --knowva-faint ); }
.knowva-cmdk__foot kbd { font-size: 0.72rem; padding: 1px 5px; border-radius: 5px; background: var( --knowva-kbd ); border: 1px solid var( --knowva-border ); color: var( --knowva-muted ); }

/* Dark mode is intentionally NOT auto-applied via prefers-color-scheme:
   most host themes (e.g. Astra) stay light, so an auto-dark component would
   become a dark island on a light page. Dark mode will ship as an explicit
   opt-in (body class / setting) instead. */