/*
 * knowhow: theme overrides layered on top of the vendored Sandbox build.
 * Loaded after dist/assets/css/style.css (and the optional color palette), so
 * rules here win without touching the compiled vendor CSS.
 */

/*
 * Pagination — clearly highlight the page the visitor is currently on.
 *
 * The Sandbox build renders the active page as primary-coloured text on a WHITE
 * background (--bs-pagination-active-bg is white), which is indistinguishable
 * from the hover state — so users can't tell which page they're on. Fill the
 * current page with the primary colour instead, and keep that fill on hover.
 */
.pagination .page-item.active > .page-link,
.pagination .page-item.active > .page-link:hover,
.pagination .page-item.active > .page-link:focus,
.pagination .page-link.current {
	color: var(--bs-white);
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/*
 * Circle icons — keep them perfectly round next to long text.
 *
 * .btn-circle has a fixed width/height but is a flex ITEM inside the archive
 * headers' `.d-flex align-items-center`. Its default flex-shrink:1 lets the
 * browser squeeze the width when the sibling tagline wraps to two lines, so the
 * circle collapses to an oval (topics with a long tagline showed this). Pin the
 * flex basis and forbid shrinking so it stays a circle regardless of neighbours.
 */
.btn-circle {
	flex-shrink: 0 !important;
	aspect-ratio: 1 / 1;
}

/*
 * Live search — dropdown of as-you-type article suggestions (assets/js/livesearch.js).
 * Anchored to the search form; colours use Bootstrap CSS vars so palettes carry.
 */
.knowhow-livesearch {
	position: relative;
}
.knowhow-livesearch-results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: .5rem;
	background: var(--bs-white);
	border-radius: .5rem;
	box-shadow: 0 .5rem 1.5rem rgba(30, 34, 40, .12);
	max-height: 22rem;
	overflow-y: auto;
	z-index: 1050;
	padding: .35rem;
	text-align: left;
}
.knowhow-ls-item,
.knowhow-ls-more {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .55rem .75rem;
	border-radius: .4rem;
	color: var(--bs-gray-800, #343f52);
	text-decoration: none;
	font-size: .85rem;
	line-height: 1.35;
}
.knowhow-ls-item .uil {
	color: var(--bs-primary);
	font-size: 1.1rem;
	flex-shrink: 0;
	margin-top: .1rem;
}
.knowhow-ls-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.knowhow-ls-title {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knowhow-ls-excerpt {
	color: var(--bs-gray-500, #aab0bc);
	font-size: .75rem;
	margin-top: .1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knowhow-ls-mark {
	background: var(--bs-primary-bg-subtle, #eaf0ff);
	color: var(--bs-primary);
	padding: 0 .12em;
	border-radius: .15rem;
}
.knowhow-ls-topic {
	color: var(--bs-gray-500, #aab0bc);
	font-size: .72rem;
	flex-shrink: 0;
	margin-top: .1rem;
	white-space: nowrap;
}
.knowhow-ls-item:hover,
.knowhow-ls-item.is-active,
.knowhow-ls-more:hover,
.knowhow-ls-more.is-active {
	background: var(--bs-gray-100, #f5f6f7);
	color: var(--bs-primary);
}
.knowhow-ls-more {
	justify-content: center;
	font-weight: 600;
	color: var(--bs-primary);
	border-top: 1px solid var(--bs-gray-100, #f0f1f3);
	margin-top: .25rem;
}
.knowhow-ls-empty {
	padding: .75rem;
	color: var(--bs-gray-500, #aab0bc);
	font-size: .85rem;
	text-align: center;
}

/*
 * Search inputs — replace the browser's default clear (×) button with a clean,
 * consistent one (muted → primary on hover). Recoloured via CSS mask so the same
 * glyph works across palettes; the native decoration/IE clear are removed.
 */
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	height: 1.05em;
	width: 1.05em;
	margin-left: .5em;
	cursor: pointer;
	background-color: var(--bs-gray-400, #cbd0dd);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .15s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover {
	background-color: var(--bs-primary);
}
input[type="search"]::-ms-clear {
	display: none;
}