/* ============================================================
   KNOWALL 2026 - shared skin for /techblog/ (KnowAll v1.15.4)
   and /docs/ (KnowAll v1.12.0).
   Load AFTER wp_head() and AFTER mrc-2026.css (the edited
   header.php files do this): theme CSS loads first, mrc-2026.css
   brings the 2026 navbar/footer components, this file reskins
   the KnowAll knowledge-base UI itself.

   Deliberately untouched: pre/code blocks and syntax highlighting
   (the techblog is full of code samples), plugin behavior, layout
   widths.
   ============================================================ */

/* ---- Inter Tight (self-hosted on main domain, latin subset) ---- */
@font-face {
	font-family: 'Inter Tight';
	src: url('https://www.mrc-productivity.com/fonts/inter/InterTight-Latin-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter Tight';
	src: url('https://www.mrc-productivity.com/fonts/inter/InterTight-Latin-Italic-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--ink: #1a1a1c;
	--body: #5b6470;
	--muted: #8a929c;
	--line: #e8eaef;
	--accent: #006478;
	--accent-dk: #00485a;
	--accent-tint: #e7f2f4;
	--cyan: #2dd4bf;
	--btn-ink: #2046ae;
	--bg-soft: #f4f5f8;
}

/* ---- base typography ---- */
body, button, input, select, textarea {
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	-webkit-font-smoothing: antialiased;
}
body { color: var(--body); }
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter Tight', sans-serif !important;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.2;
}
/* keep code samples exactly as the theme renders them */
pre, code, pre *, code * { font-family: Consolas, Monaco, "Andale Mono", monospace !important; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dk); }
::selection { background: var(--accent); color: #fff; }

/* ---- the 2026 site navbar replaces KnowAll's own banner ----
   (the edited header.php includes /ssi/ navbar above the KnowAll
   container; hide the redundant theme banner. Delete this one rule
   to bring the KnowAll logo/menu bar back.) */
.site-header__banner { display: none !important; }

/* ---- search hero ("How can we help?") + posts banner → 2026 gradient ---- */
.site-header__search,
.site-header__posts {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(58% 55% at 86% -8%, rgba(45,212,191,.32), transparent 60%),
		radial-gradient(52% 50% at 2% 104%, rgba(32,100,174,.16), transparent 62%),
		linear-gradient(180deg, #e4f2f4 0%, #f1f9fa 56%, #e9f5f7 100%) !important;
	border-bottom: 1px solid var(--line);
	padding: 3.5rem 0 !important;
}
.site-header__search::before,
.site-header__posts::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(0,100,120,.15) 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 20%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 85% 80% at 50% 20%, #000 10%, transparent 75%);
}
.site-header__search .ht-container,
.site-header__posts .ht-container { position: relative; z-index: 2; }
.site-header__title {
	color: var(--ink) !important;
	font-weight: 700 !important;
	letter-spacing: -0.035em;
	font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
	text-align: center;
	text-shadow: none !important;
}

/* KB search box → white pill with blue pill button */
.hkb-site-search {
	display: flex; align-items: center; gap: .4rem;
	max-width: 560px; margin: 1.4rem auto 0;
	background: #fff;
	border: 1px solid var(--line) !important;
	border-radius: 999px !important;
	padding: .35rem .35rem .35rem 1.2rem;
	box-shadow: 0 14px 34px rgba(15,30,45,.08) !important;
}
/* The theme paints its magnifier as .hkb-site-search::after at left:15px
   and clears it with padding-left:45px on the field; the pill layout
   removed that padding, so realign the icon and re-indent the text. */
.hkb-site-search::after { left: 1.2rem !important; }
.hkb-site-search__field,
.hkb-site-search input[type="search"],
.hkb-site-search input[type="text"] {
	flex: 1; min-width: 0;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: .98rem;
	color: var(--ink);
	padding: .5rem 0 .5rem 1.9rem !important;
	height: auto !important;
}
.hkb-site-search__button,
.hkb-site-search button[type="submit"] {
	border: none !important;
	background: var(--btn-ink) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: .6rem 1.4rem !important;
	font-weight: 500;
	cursor: pointer;
	height: auto !important;
	flex-shrink: 0;
}

/* legacy-compat's Bootstrap .nav rule (display:flex, wrap) collides with the
   TOC widget's <ol class="nav">, scattering the entries into wrapped chips.
   Restore the theme's vertical list; covers the sidebar widget + mobile TOC. */
.hkb_widget_toc ol.nav,
.ht-mobile-toc ol.nav {
	display: block !important;
}

/* ---- category cards (boxed style) ---- */
.hkb-category.hkb-category--boxed {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: 18px !important;
	box-shadow: none !important;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hkb-category.hkb-category--boxed:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15,30,45,.09) !important;
	border-color: #d8dde4 !important;
}
.hkb-category__title { color: var(--ink) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.hkb-category__description { color: var(--body) !important; font-size: .93rem; }
.hkb-category .hkbiconsvg-stroke { stroke: var(--accent) !important; }
.hkb-category .hkbiconsvg-fill { fill: var(--accent) !important; }
.hkb-category__link { color: var(--accent) !important; font-weight: 600; }

/* archive/section headings */
.hkb-archive__title, .ht-page__title { color: var(--ink) !important; font-weight: 700 !important; }

/* ---- article lists + widgets ---- */
.widget {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
}
.widget__title, .widget .widget__title {
	font-size: .78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--accent-dk) !important;
	margin-bottom: .9em;
}
.hkb-widget__entry-title a { color: var(--body); }
.hkb-widget__entry-title a:hover { color: var(--accent); }

/* "exit" / still-need-help box */
.hkb_widget_exit__content { color: var(--body); }
.hkb_widget_exit__btn {
	background: var(--btn-ink) !important;
	color: #fff !important;
	border-radius: 999px !important;
	border: none !important;
	padding: .7rem 1.5rem !important;
	font-weight: 500;
}

/* ---- single article typography ---- */
.ht-page__content p, .hkb-article__content p {
	font-size: 1.04rem;
	line-height: 1.7;
	color: var(--body);
}
.ht-page__content h2, .hkb-article__content h2 { font-weight: 700 !important; margin-top: 2.2rem; }
.ht-page__content h3, .hkb-article__content h3 { font-weight: 600 !important; margin-top: 1.9rem; }
.ht-page__content img, .hkb-article__content img { border-radius: 12px; }
.hkb-article__content blockquote {
	background: var(--accent-tint);
	border-left: 4px solid var(--accent);
	border-radius: 0 12px 12px 0;
	padding: 1.2rem 1.4rem;
}

/* breadcrumbs: quiet */
.hkb-breadcrumbs, .hkb-breadcrumbs a { color: var(--muted) !important; font-size: .85rem; }
.hkb-breadcrumbs a:hover { color: var(--accent) !important; }

/* voting / meta bits */
.hkb-article-meta, .hkb-article-meta * { color: var(--muted); }

/* ---- footer: let the 2026 footer (footer-2026.html include) run
   full-bleed inside KnowAll's wrapper ---- */
.site-footer {
	background: none !important;
	padding: 0 !important;
	border: none !important;
	margin-top: 3rem;
}
.site-footer > .ht-container { max-width: none !important; padding: 0 !important; }
.site-footer__copyright { display: none; } /* the 2026 footer has its own */

/* soft page background behind content areas */
.ht-sitecontainer { background: #fff; }