/* =============================================================================
   KNOWLEDGE BASE  (se încarcă doar pe paginile KB: arhivă, categorie, articol,
   căutare în KB)

   Pluginul chill-kb dă structura și o așezare minimă; aici o îmbrăcăm în stilul
   restului site-ului, cu aceleași piese: eticheta numerotată (`.mh-rule`) și bara
   de căutare (`.mc-search`) din site.css, cardurile albe cu ramă fină (ca
   review-urile de pe pricing), rândurile cu fundal la hover și săgeată (ca
   panoul Features din meniu). Culorile, rotunjimile și umbra sunt variabilele
   `--mc-*` din site.css. Template-urile sunt generate de
   ~/modula-ollie-build/gen_kb.py.

   CUPRINS
     1. Variabile și bază
     2. Pagina principală: hero, carduri de categorii
     3. Caseta „Still stuck?”
     4. Articol / categorie / căutare: coloane
     5. Navigarea din stânga
     6. Capul articolului și conținutul
     7. „Was this page helpful?”
     8. Lista de articole (categorie, căutare)
     9. Telefon
   -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   1. VARIABILE ȘI BAZĂ
   Variabilele pluginului (--wpchill-kb-*) primesc valorile site-ului, ca regulile
   lui de bază să folosească aceeași linie, același gri și aceleași colțuri.
   -------------------------------------------------------------------------- */

.mkb {
	/* Scara de text, din presetările temei: textul secundar (descrieri, liste, navigare)
	   e „small”, cel mai mărunt (meta, contoare) „x-small”, etichetele „xx-small”. */
	--mkb-fs-label: var(--wp--preset--font-size--xx-small);
	--mkb-fs-xs: var(--wp--preset--font-size--x-small);
	--mkb-fs-sm: var(--wp--preset--font-size--small);
	--mkb-fs-base: var(--wp--preset--font-size--base);
	--mkb-fs-title: clamp(1.2rem, 1.05rem + .45vw, 1.4rem);
	--mkb-fs-row: clamp(1.08rem, 1rem + .25vw, 1.22rem);
	--wpchill-kb-line: var(--mc-line);
	--wpchill-kb-muted: var(--mc-muted);
	--wpchill-kb-radius: var(--mc-radius-card);
	--wpchill-kb-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 28px);
}

.mkb-section { margin-top: var(--wp--preset--spacing--xx-large) !important; }
.mkb-section > * { margin: 0 !important; }
.mkb-section > * + * { margin-top: 32px !important; }


/* -----------------------------------------------------------------------------
   2. PAGINA PRINCIPALĂ: HERO, CARDURI DE CATEGORII
   Fiecare card are titlul, descrierea, primele patru articole și „View all”.
   -------------------------------------------------------------------------- */

.mkb-hero { text-align: center; }
.mkb-hero > * { max-width: 760px; margin: 0 auto !important; }
.mkb-hero > * + * { margin-top: 20px !important; }
.mkb-hero-title { line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.mkb-hero-lead { max-width: 560px !important; line-height: 1.6; }
.mkb-hero .mkb-search { max-width: 720px; margin-top: 40px !important; text-align: left; }

.mkb-cards .wpchill-kb-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.mkb-cards .wpchill-kb-card {
	gap: 0;
	padding: 28px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	background: var(--mc-card);
	transition: box-shadow .25s ease, border-color .25s ease;
}
.mkb-cards .wpchill-kb-card:hover { box-shadow: var(--mc-shadow-float); }
.mkb-cards .wpchill-kb-card__title {
	margin-bottom: 10px !important;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: var(--mkb-fs-title);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}
.mkb-cards .wpchill-kb-card__title a { color: var(--mc-ink); }
.mkb-cards .wpchill-kb-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mkb-cards .wpchill-kb-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: 22px !important;
	color: var(--mc-muted);
	font-size: var(--mkb-fs-sm);
	line-height: 1.55;
}
.mkb-cards .wpchill-kb-card__articles {
	gap: 0;
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--mc-line);
}
.mkb-cards .wpchill-kb-card__articles a {
	position: relative;
	display: block;
	padding: 9px 22px 9px 0;
	color: var(--mc-ink);
	font-size: var(--mkb-fs-sm);
	line-height: 1.4;
	text-decoration: none;
}
.mkb-cards .wpchill-kb-card__articles a::after {
	content: "→";
	position: absolute;
	right: 0;
	top: 50%;
	opacity: 0;
	transform: translate(-6px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}
.mkb-cards .wpchill-kb-card__articles a:hover::after,
.mkb-cards .wpchill-kb-card__articles a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.mkb-cards .wpchill-kb-card__articles a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mkb-cards .wpchill-kb-card__count {
	padding-top: 20px;
	font-size: var(--mkb-fs-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mc-ink);
}
.mkb-cards .wpchill-kb-card__count a { color: inherit; text-underline-offset: 4px; }
.mkb-cards .wpchill-kb-card__count a::after { content: " →"; }

/* Subcategoriile, pe pagina unei categorii: două coloane, fără liste de articole. */
.mkb-cards.is-sub .wpchill-kb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkb-article .mkb-cards.is-sub { margin-top: 40px !important; }

@media (max-width: 1100px) {
	.mkb-cards .wpchill-kb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* -----------------------------------------------------------------------------
   3. CASETA „STILL STUCK?”
   Pe toate paginile KB, la final: un card alb cu titlu, o frază și două butoane.
   -------------------------------------------------------------------------- */

.mkb-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 40px 44px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
}
.mkb-help > * { margin: 0 !important; }
.mkb-help-copy > * { margin: 0; }
.mkb-help-copy > * + * { margin-top: 12px; }
.mkb-help-title { font-size: var(--wp--preset--font-size--large); line-height: 1.05; }
.mkb-help-text { max-width: 540px; font-size: var(--mkb-fs-sm); line-height: 1.6; }
.mkb-help-btns { flex: 0 0 auto; gap: 12px; }
/* Cele două butoane la aceeași înălțime (stilul outline al temei are alt padding). */
.mkb-help-btns .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 26px;
	box-sizing: border-box;
	font-size: var(--mkb-fs-label);
}
.mkb-help-btns .is-style-outline .wp-block-button__link { border: 1px solid var(--mc-ink); }
/* În coloana articolului textul are nevoie de toată lățimea: butoanele trec dedesubt. */
.mkb-article > .mkb-help { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 24px !important; padding: 32px 36px; }
.mkb-article .mkb-help-title { font-size: var(--wp--preset--font-size--medium); }
.mkb-category .mkb-article > .mkb-help,
.mkb-search-page .mkb-article > .mkb-help { margin-top: 64px !important; }


/* -----------------------------------------------------------------------------
   4. ARTICOL / CATEGORIE / CĂUTARE: COLOANE
   Navigarea în stânga (fixă la derulare), conținutul în dreapta, pe toată
   lățimea rămasă, până la marginea containerului (aceeași cu a header-ului).
   Fără cuprinsul din dreapta.
   -------------------------------------------------------------------------- */

.mkb .mkb-layout {
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
}
.mkb-article { min-width: 0; }
.mkb-article > * { margin: 0 !important; }
.mkb .mkb-side > * + * { margin-top: 24px; }


/* -----------------------------------------------------------------------------
   5. NAVIGAREA DIN STÂNGA
   Categoriile ca rânduri cu săgeată; articolele mai mici, gri, cu fundal la
   hover; articolul curent e un rând alb cu ramă fină.
   -------------------------------------------------------------------------- */

.mkb .wpchill-kb-nav { font-size: var(--mkb-fs-xs); }
.mkb .wpchill-kb-nav__category + .wpchill-kb-nav__category { border-top: 0; }
.mkb .wpchill-kb-nav__category > details > summary {
	padding: 9px 12px;
	border-radius: var(--mc-radius-control);
	color: var(--mc-ink);
	font-weight: 600;
	line-height: 1.35;
	transition: background .2s ease;
}
.mkb .wpchill-kb-nav__category > details > summary:hover { background: var(--mc-tint); }
.mkb .wpchill-kb-nav__articles { padding: 2px 0 10px !important; }
.mkb .wpchill-kb-nav__articles a {
	padding: 6px 12px 6px 24px;
	border-left: 0;
	border-radius: var(--mc-radius-control);
	color: var(--mc-muted);
	font-size: var(--mkb-fs-xs);
	line-height: 1.45;
	transition: background .2s ease, color .2s ease;
}
.mkb .wpchill-kb-nav__articles a:hover { background: var(--mc-tint); color: var(--mc-ink); text-decoration: none; }
.mkb .wpchill-kb-nav__articles a[aria-current="page"] {
	background: var(--mc-card);
	box-shadow: inset 0 0 0 1px var(--mc-line);
	color: var(--mc-ink);
	font-weight: 500;
}
.mkb .wpchill-kb-nav__category .wpchill-kb-nav__list { padding-left: 12px; }


/* -----------------------------------------------------------------------------
   6. CAPUL ARTICOLULUI ȘI CONȚINUTUL
   Breadcrumb-ul e scris ca etichetele de secțiune (litere mici, spațiate); pe
   articol lipsește ultimul element, titlul, care e chiar dedesubt.
   -------------------------------------------------------------------------- */

.mkb .wpchill-kb-breadcrumbs ol {
	gap: 8px;
	color: var(--mc-muted);
	font-size: var(--mkb-fs-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mkb .wpchill-kb-breadcrumbs li + li::before { margin-right: 8px; opacity: .5; }
.mkb .wpchill-kb-breadcrumbs a { text-decoration: none; }
.mkb .wpchill-kb-breadcrumbs a:hover { color: var(--mc-ink); }
.mkb-single .wpchill-kb-breadcrumbs li:last-child { display: none; }

.mkb-title {
	margin-top: 20px !important;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.mkb .wpchill-kb-meta {
	gap: 0;
	margin-top: 20px !important;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--mc-line);
	color: var(--mc-muted);
	font-size: var(--mkb-fs-xs);
}
.mkb .wpchill-kb-meta span + span::before { content: "·"; margin: 0 10px; }
.mkb-lead { margin-top: 18px !important; }
.mkb-lead p { max-width: 620px; margin: 0; color: var(--mc-muted); font-size: var(--mkb-fs-base); line-height: 1.6; }

.mkb-content { margin-top: 36px !important; }
.mkb-content :is(h2, h3) { margin-top: 1.7em; margin-bottom: .5em; scroll-margin-top: 28px; }
.mkb-content h2 { font-size: var(--wp--preset--font-size--large); }
.mkb-content h3 { font-size: var(--wp--preset--font-size--medium); }
.mkb-content :is(h4, h5, h6) {
	margin-top: 1.6em;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: var(--mkb-fs-title);
	font-weight: 600;
	letter-spacing: 0;
}
.mkb-content a { text-underline-offset: 3px; }
.mkb-content img { border-radius: var(--mc-radius-row); }
.mkb-content :is(.wp-block-embed__wrapper, .wp-block-video, .code-block-wrapper) { overflow: hidden; border-radius: var(--mc-radius-row); }
.mkb-content :is(ul, ol) { padding-left: 1.3em; }
.mkb-content li + li { margin-top: .35em; }


/* -----------------------------------------------------------------------------
   7. „WAS THIS PAGE HELPFUL?”
   Card alb; butoanele sunt pastile conturate, scrise ca butoanele site-ului
   (litere mici, spațiate). Cel ales se umple cu negru.
   -------------------------------------------------------------------------- */

.mkb .wpchill-kb-rating-block {
	margin-top: 56px !important;
	padding: 24px 28px;
	border: 1px solid var(--mc-line);
	border-top: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
	background: var(--mc-card);
}
.mkb .wpchill-kb-rating-question { font-size: var(--mkb-fs-base); }
.mkb .wpchill-kb-rating-button,
.mkb .wpchill-kb-feedback-cancel {
	padding: 10px 20px;
	border: 1px solid var(--mc-line);
	border-radius: var(--wp--preset--border-radius--full);
	color: var(--mc-ink);
	font-size: var(--mkb-fs-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.mkb .wpchill-kb-rating-button:hover,
.mkb .wpchill-kb-feedback-cancel:hover { border-color: var(--mc-ink); }
.mkb .wpchill-kb-rating-button.selected {
	border-color: var(--mc-ink);
	background: var(--mc-ink);
	box-shadow: none;
	color: var(--mc-card);
}
.mkb .wpchill-kb-rating-counts { font-size: var(--mkb-fs-xs); }
.mkb .wpchill-kb-feedback-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--mc-line); }
.mkb .wpchill-kb-feedback-option { font-size: var(--mkb-fs-sm); }
.mkb .wpchill-kb-feedback-option input { accent-color: var(--mc-ink); }
.mkb .wpchill-kb-feedback-textarea textarea {
	padding: 12px 14px;
	border: 1px solid var(--mc-line);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--mkb-fs-sm);
}
.mkb .wpchill-kb-feedback-textarea textarea:focus { outline: 2px solid var(--mc-ink); outline-offset: 1px; }
.mkb .wpchill-kb-feedback-thanks,
.mkb .wpchill-kb-rating-thanks { color: var(--mc-muted); font-size: var(--mkb-fs-sm); }


/* -----------------------------------------------------------------------------
   8. LISTA DE ARTICOLE (CATEGORIE, CĂUTARE)
   Rânduri despărțite de linii fine; la hover rândul devine alb (liniile din jur
   dispar) și apare săgeata. Tot rândul e link.
   -------------------------------------------------------------------------- */

.mkb-article > .mh-rule { margin-top: 48px !important; }
.mkb-list { margin-top: 12px !important; }
.mkb .mkb-list .wp-block-post {
	position: relative;
	padding: 18px 56px 18px 20px;
	border-top: 0;
	border-radius: var(--mc-radius-row);
	transition: background .2s ease;
}
/* Linia dintre rânduri e un element separat, drept, retras de la margini (o ramă
   de sus s-ar curba odată cu colțurile rotunjite). Dispare lângă rândul cu hover. */
.mkb .mkb-list .wp-block-post + .wp-block-post::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20px;
	right: 20px;
	height: 1px;
	background: var(--mc-line);
	transition: opacity .2s ease;
}
.mkb .mkb-list .wp-block-post:hover { background: var(--mc-card); }
.mkb .mkb-list .wp-block-post:hover::before,
.mkb .mkb-list .wp-block-post:hover + .wp-block-post::before { opacity: 0; }
.mkb .mkb-list .wp-block-post::after {
	content: "→";
	position: absolute;
	right: 22px;
	top: 50%;
	opacity: 0;
	transform: translate(-6px, -50%);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.mkb .mkb-list .wp-block-post:hover::after { opacity: 1; transform: translate(0, -50%); }
.mkb .mkb-list .wp-block-post-title {
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: var(--mkb-fs-row);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}
.mkb .mkb-list .wp-block-post-title a { color: var(--mc-ink); text-decoration: none; }
.mkb .mkb-list .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mkb .mkb-list .wp-block-post-title a:focus-visible { outline: none; }
.mkb .mkb-list .wp-block-post:focus-within { outline: 2px solid var(--mc-ink); outline-offset: -2px; }
.mkb .mkb-list .wp-block-post-excerpt { margin-top: 8px; }
.mkb .mkb-list .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	color: var(--mc-muted);
	font-size: var(--mkb-fs-sm);
	line-height: 1.55;
}
.mkb .mkb-list .wp-block-query-pagination { margin-top: 28px; font-size: var(--mkb-fs-sm); }
.mkb .mkb-list .wp-block-query-no-results p { margin: 20px 0 0; }


/* -----------------------------------------------------------------------------
   9. TELEFON
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.mkb .mkb-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.mkb .wpchill-kb-nav__fold {
		padding: 12px 16px;
		border: 1px solid var(--mc-line);
		border-radius: var(--mc-radius-row);
		background: var(--mc-card);
	}
	.mkb-cards .wpchill-kb-cards,
	.mkb-cards.is-sub .wpchill-kb-cards { grid-template-columns: minmax(0, 1fr); }
	.mkb-cards .wpchill-kb-card { padding: 24px; }
	.mkb-help { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
	.mkb .wpchill-kb-rating-block { padding: 20px; }
	.mkb .mkb-list .wp-block-post { padding: 16px 40px 16px 14px; }
}


/* -----------------------------------------------------------------------------
   10. CUPRINSUL DIN DREAPTA
   Îl construiește toc-scrollspy.js din titlurile articolului; articolele scurte nu îl au.
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) {
	.mkb .mkb-layout.has-toc { grid-template-columns: 250px minmax(0, 1fr) 210px; gap: clamp(32px, 3.4vw, 56px); }
	.mkb .mkb-layout.has-toc:has(> .wpchill-kb-toc-area:empty) { grid-template-columns: 280px minmax(0, 1fr); }
}
.mkb .wpchill-kb-toc-area { font-size: var(--wp--preset--font-size--x-small); }
.mkb .wpchill-kb-toc__title { color: var(--wp--preset--color--main); }
.mkb .wpchill-kb-toc__link { color: var(--wp--preset--color--secondary); }
.mkb .wpchill-kb-toc__link:hover,
.mkb .wpchill-kb-toc__link.is-active { color: var(--wp--preset--color--main); }
.mkb-content h2, .mkb-content h3 { scroll-margin-top: 96px; }