/* SHIFT KnowHouse — المان‌های صفحه‌ی دانش‌کده — طبق DESIGN.md (2026-10-22) */

.kh-page, .kh-el, .kh-hero {
	--kh-ink: #0C0C0C;
	--kh-primary: #212121;
	--kh-text: #23254E;
	--kh-body: #4D4D4D;
	--kh-muted: #666666;
	--kh-accent: #3366FF;
	--kh-alt: #F6F7F9;
	--kh-line: #ECECEC;
	--kh-border: #E3E6EC;
	--kh-r-sm: 5px;
	--kh-r-md: 10px;
}
.kh-el, .kh-el *, .kh-el *::before, .kh-el *::after { box-sizing: border-box; }
.kh-el { color: var(--kh-text); }
.kh-el a { text-decoration: none; }
.kh-el a:focus-visible { outline: 2px solid var(--kh-accent); outline-offset: 3px; }
ul.kh-el, .kh-el ul, .kh-el ol { list-style: none; margin: 0; padding: 0; }
.kh-el li { margin: 0; }
.kh-el p { margin: 0; text-align: start !important; }
.kh-muted { font-size: 14px; color: var(--kh-muted); }

/* ---------- Hero (سکشن UX Builder با کلاس kh-hero) ---------- */
.kh-hero { border-bottom: 1px solid var(--kh-line); }
.kh-hero .kh-hero__title {
	margin: 0 0 18px; display: inline-block !important; width: auto !important; max-width: 100%;
	background: var(--kh-ink); color: #fff !important; font-size: 38px; font-weight: 700; line-height: 1.4; padding: 6px 20px;
}
.kh-hero .kh-hero__lead { max-width: 660px; margin: 0 auto 8px; font-size: 17px; line-height: 1.9; color: var(--kh-body); text-align: center !important; }
.kh-hero .img img { margin-inline: auto; }

/* ---------- Search ---------- */
.kh-search { width: 100%; max-width: 680px; margin: 12px auto 0; }
.kh-search .betterdocs-live-search { width: 100%; }
.kh-search .betterdocs-searchform {
	background: #fff !important; border: 1px solid var(--kh-border) !important;
	border-radius: var(--kh-r-md) !important; box-shadow: none !important; padding: 10px !important;
}
.kh-search .betterdocs-search-field { font-family: inherit !important; font-size: 15px !important; color: var(--kh-text) !important; }
.kh-search .search-submit,
.kh-search .betterdocs-search-submit { border-radius: var(--kh-r-sm) !important; font-family: inherit !important; font-weight: 700 !important; }

/* ---------- Stats ---------- */
.kh-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 14px; color: var(--kh-muted); margin-top: 18px !important; }
.kh-stats li + li { position: relative; }
.kh-stats li + li::before { content: ""; position: absolute; inset-inline-start: -14px; top: 20%; height: 60%; width: 1px; background: #C9CDD4; }
.kh-stats b { color: var(--kh-ink); font-weight: 700; }

/* ---------- Block heads ---------- */
.kh-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kh-block__head > * { width: auto; }
.kh-el .kh-h2 { margin: 0; width: auto !important; flex: 0 1 auto; font-size: 25.6px; font-weight: 700; line-height: 1.3; color: var(--kh-ink); }
.kh-more { font-size: 14px; font-weight: 600; color: var(--kh-accent); }
.kh-more:hover { color: var(--kh-ink); }

/* ---------- Rule ---------- */
.kh-rule { width: 4px; height: 56px; background: var(--kh-ink); margin: 0 auto; }
.kh-rule--accent { background: var(--kh-accent); }

/* ---------- Section cards ---------- */
.kh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kh-card {
	display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
	border: 1px solid var(--kh-border); border-radius: var(--kh-r-md); background: #fff; color: var(--kh-text);
	transition: border-color .18s ease-out;
}
a.kh-card:hover { border-color: var(--kh-ink); color: var(--kh-text); }
.kh-card--main { border: 1.5px solid var(--kh-ink); }
.kh-card--soon { border-style: dashed; border-color: #C9CDD4; background: var(--kh-alt); }
.kh-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kh-el .kh-card__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--kh-ink); line-height: 1.4; }
.kh-card--soon .kh-card__title { color: var(--kh-body); }
.kh-card__desc { font-size: 14px; line-height: 1.8; color: var(--kh-body); }
.kh-card--soon .kh-card__desc { color: #595959; }
.kh-card__meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--kh-line); display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--kh-muted); }
.kh-card__meta b { color: var(--kh-ink); }
.kh-card--soon .kh-card__meta { border-top-color: var(--kh-border); color: #595959; }

.kh-badge { font-size: 12px; font-weight: 600; line-height: 1.6; padding: 2px 10px; border-radius: 999px; border: 1px solid #C9CDD4; color: var(--kh-text); white-space: nowrap; unicode-bidi: plaintext; }
.kh-badge--ink { background: var(--kh-ink); border-color: var(--kh-ink); color: #fff; font-weight: 700; }
.kh-badge--soon { background: #E9EBEF; border-color: #E9EBEF; color: var(--kh-body); }

/* ---------- Letters ---------- */
.kh-letters { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-letter {
	width: 72px; height: 56px; border: 1px solid var(--kh-ink); border-radius: var(--kh-r-md);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: var(--kh-ink); background: #fff; transition: background-color .18s ease-out, color .18s ease-out;
}
a.kh-letter:hover { background: var(--kh-ink); color: #fff; }
a.kh-letter:hover .kh-letter__n { color: #fff; }
.kh-letter__l { font-size: 20px; font-weight: 700; line-height: 1; }
.kh-letter__n { font-size: 11.5px; color: #595959; line-height: 1; }
.kh-letter--off { border: 1px dashed #D5D9E0; background: var(--kh-alt); color: #8A8F99; }

/* ---------- Popular ---------- */
.kh-popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kh-term { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--kh-r-md); background: var(--kh-alt); color: var(--kh-text); border: 1px solid transparent; transition: border-color .18s ease-out; }
.kh-term:hover { border-color: var(--kh-ink); color: var(--kh-text); }
.kh-term__top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #595959; }
.kh-term__rank { width: 26px; height: 26px; border-radius: 999px; background: var(--kh-ink); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kh-term__en { font-size: 18px; font-weight: 700; color: var(--kh-ink); text-align: right; }
.kh-term__fa { font-size: 15px; font-weight: 700; color: var(--kh-accent); }

/* ---------- Recent ---------- */
.kh-recent { border-top: 1px solid var(--kh-line) !important; }
.kh-recent li { border-bottom: 1px solid var(--kh-line); }
.kh-recent a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; color: var(--kh-text); }
.kh-recent a:hover .kh-recent__t { color: var(--kh-accent); }
.kh-recent__t { font-size: 15px; font-weight: 700; color: var(--kh-ink); transition: color .18s ease-out; }
.kh-recent__d { font-size: 13px; color: var(--kh-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.kh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 549px) {
	.kh-hero .kh-hero__title { font-size: 26px; padding: 4px 14px; }
	.kh-hero .kh-hero__lead { font-size: 15px; }
	.kh-stats { gap: 6px 20px; font-size: 13px; }
	.kh-stats li + li::before { inset-inline-start: -10px; }
	.kh-el .kh-h2 { font-size: 21px; }
	.kh-block__head { margin-bottom: 16px; }
	.kh-rule { height: 40px; }
	.kh-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.kh-card { padding: 20px; gap: 10px; }
	.kh-el .kh-card__title { font-size: 18px; }
	.kh-letters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
	.kh-letter { width: auto; height: 52px; border-radius: 8px; }
	.kh-letter__l { font-size: 17px; }
	.kh-popular { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.kh-term { padding: 16px; }
}