/* =====================================================================
   TOKENY MARKI JDM (z /website/jdm_website/assets/css/*.css)
   ===================================================================== */
:root{
	--jdm-turkus:        #1eb1b4; /* turkus podstawowy */
	--jdm-turkus-2:      #19ccc2; /* jasny turkus (koniec gradientu) */
	--jdm-turkus-dark:   #12888b; /* ciemny turkus (gradient / hover) */
	--jdm-turkus-hover:  #13a8a1;
	--jdm-navy:          #1a1a2e; /* granat — nagłówki, mocny tekst */
	--jdm-bg-light:      #f8fafc; /* jasne tło sekcji */
	--jdm-bg:            #fafbfc;
	--jdm-border:        #e2e8f0; /* subtelne obramowania */
	--jdm-amber:         #fbbf24; /* akcent CTA */
	--jdm-amber-dark:    #f59e0b;
	--jdm-text:          #4a5568; /* tekst podstawowy */
	--jdm-muted:         #64748b; /* tekst drugorzędny */
	--jdm-r-card:        16px;
	--jdm-r-sm:          10px;
	--jdm-r-pill:        50px;
	--jdm-font-head:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--jdm-font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =====================================================================
   GLOBALNE — fonty i kolory linków (spójność całego serwisu)
   ===================================================================== */
body,
.ht-sitecontainer,
.hkb-article__content,
p, li, td, input, textarea, button, select{
	font-family: var(--jdm-font-body);
}
h1, h2, h3, h4, h5, h6,
.site-header__title,
.hkb-archive__title,
.hkb-category__title,
.site-logo__title{
	font-family: var(--jdm-font-head);
	color: var(--jdm-navy);
}
body{ color: var(--jdm-text); }

/* Linki w tokenach marki (globalnie, delikatnie) */
a{ color: var(--jdm-turkus); }
a:hover, a:focus{ color: var(--jdm-turkus-hover); }

.site-logo{ max-width: none; }
.site-logo a{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.site-logo img{ max-width:110px; display:block; }
.site-logo__title{ font-size: 0; }
/* Dopisek POMOC przy logo: od razu wiadomo, że to serwis pomocy, nie jdm.pl */
.jdm-logo-pomoc{
	color:#fff;
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:1rem;
	line-height:1;
	letter-spacing:.16em;
	text-transform:uppercase;
	border-left:1px solid rgba(255,255,255,.45);
	padding-left:14px;
	position:relative;
	top:2px; /* optyczne wyrównanie do dolnej linii logotypu */
}
/* Link powrotny do serwisu głównego (prawa strona belki nagłówka) */
.site-header .jdm-header-back{
	margin-left:auto;
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 18px;
	border-radius: var(--jdm-r-pill);
	background:#fff;
	color: var(--jdm-navy);
	font-family: var(--jdm-font-body);
	font-size:.92rem;
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
	box-shadow:0 1px 2px rgba(15,23,42,.10);
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-header .jdm-header-back::after{ content:'\2192'; }
.site-header .jdm-header-back:hover{
	background:#f1f5f9;
	color: var(--jdm-navy);
	box-shadow:0 4px 10px rgba(15,23,42,.16);
	transform:translateY(-1px);
}
/* Dekoracyjny okrąg w węższym nagłówku podstron (na głównej okręgi rysuje hero) */
body:not(.home) .site-header .site-header__banner::after{
	content:''; position:absolute; top:-130px; right:-70px;
	width:240px; height:240px; background:rgba(255,255,255,.08);
	border-radius:50%; pointer-events:none;
}

/* =====================================================================
   HERO — strona główna bazy wiedzy (.site-header__search)
   ===================================================================== */
/* Jeden ciągły gradient obejmuje belkę logo i hero (bez szwu).
   !important bije inline .site-header{background:#19ccc2} z Kirki. */
.ht-sitecontainer .site-header{
	background: linear-gradient(135deg, var(--jdm-turkus) 0%, var(--jdm-turkus-2) 100%) !important;
	position: relative;
	overflow: hidden;
}
.site-header .site-header__banner{
	background: transparent !important;
	position: relative;
	z-index: 1;
}
.site-header .site-header__search{
	background: transparent !important;
	padding: 56px 0 76px;
	position: relative;
}
/* dekoracyjne okręgi jak w cta-box jdm.pl (przycinane do nagłówka) */
.site-header .site-header__search::before{
	content:''; position:absolute; top:-120px; right:-90px;
	width:340px; height:340px; background:rgba(255,255,255,.08);
	border-radius:50%; pointer-events:none;
}
.site-header .site-header__search::after{
	content:''; position:absolute; bottom:-140px; left:-80px;
	width:300px; height:300px; background:rgba(255,255,255,.06);
	border-radius:50%; pointer-events:none;
}
.site-header .site-header__search .ht-container{ position:relative; z-index:1; }

.site-header__title{
	color:#fff !important;
	font-family: var(--jdm-font-head);
	font-weight:700;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	line-height:1.2;
	text-align:center;
	margin:0 0 28px;
	letter-spacing:-.01em;
}

/* Wyszukiwarka — duża pigułka */
.hkb-site-search{ max-width:680px; margin:0 auto; position:relative; }
.hkb-site-search .hkb-site-search__field{
	width:100%;
	box-sizing:border-box;
	border:none;
	border-radius: var(--jdm-r-pill);
	background:#fff;
	box-shadow: 0 18px 45px rgba(18,18,32,.20), 0 4px 12px rgba(18,18,32,.10);
	font-family: var(--jdm-font-body);
	font-size:1.05rem;
	color: var(--jdm-navy);
	padding: 22px 132px 22px 54px;
	transition: box-shadow .2s ease;
}
.hkb-site-search .hkb-site-search__field::placeholder{ color:#94a3b8; }
/* Na podstronach (pasek pod nagłówkiem) pigułka bez ciężkiego cienia hero — subtelna ramka */
.ht-pageheader .hkb-site-search .hkb-site-search__field{
	box-shadow:none;
	border:1px solid var(--jdm-border);
}
.ht-pageheader .hkb-site-search .hkb-site-search__field:focus{
	border-color: var(--jdm-turkus);
	box-shadow:0 0 0 3px rgba(30,177,180,.15);
}
.hkb-site-search .hkb-site-search__field:focus{
	outline:none;
	box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 18px 45px rgba(18,18,32,.22);
}
.hkb-site-search .hkb-site-search__button{
	display:flex !important;            /* motyw ukrywa przycisk (display:none) — przywracamy widoczny CTA */
	align-items:center; justify-content:center;
	position:absolute; top:8px; right:8px; bottom:8px;
	border:none;
	border-radius: var(--jdm-r-pill);
	background: var(--jdm-navy);
	color:#fff;
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:.9rem;
	padding:0 30px;
	cursor:pointer;
	transition: background .2s ease, transform .2s ease;
}
/* etykieta „Szukaj" zamiast domyślnego „Search" z szablonu hkb-searchbox */
.hkb-site-search .hkb-site-search__button span{
	position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
.hkb-site-search .hkb-site-search__button::after{ content:'Szukaj'; }
.hkb-site-search .hkb-site-search__button:hover{
	background:#2a2a44; transform: translateY(-1px);
}
.hkb-site-search .hkb-site-search__loader{ right:130px; }
.mobile .hkb-site-search .hkb-site-search__field{ padding-top:16px; padding-bottom:16px; }

/* Rząd „Popularne:" — wstrzykiwany w functions.php */
.jdm-hero-popular{
	max-width:680px; margin:22px auto 0;
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	gap:10px;
	position:relative; z-index:1;
}
.jdm-hero-popular__label{
	color:rgba(255,255,255,.9);
	font-weight:600; font-size:.85rem;
	font-family: var(--jdm-font-head);
	margin-right:2px;
}
.jdm-hero-popular a{
	display:inline-block;
	background:rgba(255,255,255,.16);
	color:#fff;
	text-decoration:none;
	font-size:.82rem;
	font-weight:500;
	padding:7px 15px;
	border-radius: var(--jdm-r-pill);
	border:1px solid rgba(255,255,255,.28);
	transition: background .18s ease, transform .18s ease;
}
.jdm-hero-popular a:hover{
	background:rgba(255,255,255,.30);
	color:#fff;
	transform: translateY(-1px);
}

/* =====================================================================
   Strona treści strony głównej
   ===================================================================== */
.home .ht-page{
	background: var(--jdm-bg-light);
	padding: 40px 0 88px;
}

/* =====================================================================
   SEKCJA „Najczęstsze problemy" (mu-plugin jdm-home-problems.php)
   Podniesiona specyficzność (.ht-sitecontainer …) bije inline <style> mu-pluginu.
   ===================================================================== */
.ht-sitecontainer .jdm-common-problems{
	background:#fff;
	padding: 52px 0 24px;
}
.ht-sitecontainer .jdm-cp__title{
	font-family: var(--jdm-font-head);
	font-size:1.6rem; font-weight:700;
	color: var(--jdm-navy);
	line-height:1.25;
	margin:0 0 32px; padding:0;
	border-left:none;
}
/* Zwarta lista pigułek zamiast dużych kart (oszczędność miejsca, decyzja Pawła) */
.ht-sitecontainer .jdm-cp__grid{
	display:flex; flex-wrap:wrap;
	gap:10px;
	margin:0; padding:0; list-style:none;
}
.ht-sitecontainer .jdm-cp__grid > li{ display:inline-flex; width:auto; margin:0; padding:0; }
.ht-sitecontainer .jdm-cp__card{
	display:inline-flex; align-items:center; gap:9px;
	background:#fff;
	border:1px solid var(--jdm-border);
	border-radius: var(--jdm-r-pill);
	box-shadow:none;
	padding:10px 18px;
	color: var(--jdm-navy);
	font-family: var(--jdm-font-body);
	font-weight:500;
	font-size:.92rem;
	line-height:1.35;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.ht-sitecontainer .jdm-cp__card:hover,
.ht-sitecontainer .jdm-cp__card:focus{
	color: var(--jdm-turkus-hover);
	border-color: var(--jdm-turkus);
	background:#f0fbfa;
}
.ht-sitecontainer .jdm-cp__arrow{ color: var(--jdm-turkus); width:7px; height:11px; flex:0 0 auto; }
.ht-sitecontainer .jdm-cp__card:hover .jdm-cp__arrow{ transform: translateX(3px); }

/* =====================================================================
   SIATKA „Tematy" (archiwum kategorii KnowAll)
   ===================================================================== */
.hkb-archive__title{
	font-family: var(--jdm-font-head);
	font-weight:700;
	font-size:1.6rem;
	line-height:1.25;
	color: var(--jdm-navy);
	margin:0 0 32px;
	padding:0;
	border-bottom:none;
}

/* Siatka CSS z równymi wysokościami kart */
.ht-sitecontainer ul.hkb-archive--3cols{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:22px;
	list-style:none;
	margin:0; padding:0;
	float:none; width:auto;
}
.ht-sitecontainer ul.hkb-archive--3cols > li{
	float:none; width:auto; margin:0; padding:0; list-style:none;
	display:flex;
}
/* Boksy Tematów: płaskie (bez ramki, tła i cienia), decyzja Pawła */
.ht-sitecontainer .hkb-category.hkb-category--style9{
	background:transparent;
	border:none;
	border-radius:0;
	box-shadow:none;
	overflow:visible;
	width:100%;
	display:flex;
}
.ht-sitecontainer .hkb-category.hkb-category--style9:hover{
	transform:none;
	box-shadow:none;
}
/* fallback: stary wariant karty-linku (gdy brak jdm_render_category_card) */
.ht-sitecontainer .hkb-category--style9 .hkb-category__link{
	display:flex; flex-direction:column;
	height:100%; width:100%;
	padding:26px 26px 28px;
	text-decoration:none;
}
.ht-sitecontainer .hkb-category__title{
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:1.18rem;
	color: var(--jdm-navy);
	line-height:1.3;
	margin:0 0 8px;
	transition: color .18s ease;
}
.ht-sitecontainer .hkb-category__title a{
	color: inherit;
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:10px;
}
/* Okrągły przycisk-strzałka przy tytule kategorii: sygnalizuje, że tytuł jest klikalny */
.ht-sitecontainer .jdm-cat__go{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:19px; height:19px;
	border-radius:50%;
	flex:0 0 auto;
	background:rgba(30,177,180,.12);
	color: var(--jdm-turkus);
	transition: background .18s ease, color .18s ease;
}
.ht-sitecontainer .jdm-cat__go svg{ margin-left:1px; width:6px; height:10px; }
.ht-sitecontainer .hkb-category__title a:hover .jdm-cat__go,
.ht-sitecontainer .hkb-category--style9:hover .jdm-cat__go{
	background: var(--jdm-turkus);
	color:#fff;
}
.ht-sitecontainer .hkb-category--style9:hover .hkb-category__title,
.ht-sitecontainer .hkb-category--style9:hover .hkb-category__title a{ color: var(--jdm-turkus); }
.ht-sitecontainer .hkb-category__description{
	font-family: var(--jdm-font-body);
	font-size:.92rem;
	line-height:1.6;
	color: var(--jdm-muted);
	margin:0;
}

/* Wnętrze karty JDM: tytuł, opis, wyróżnione wpisy, licznik u dołu */
.ht-sitecontainer .hkb-category--style9 .jdm-cat{
	display:flex; flex-direction:column;
	width:100%;
	padding:0;
	text-align:left;
}
/* płaskie kolumny potrzebują większych odstępów siatki niż karty */
.ht-sitecontainer ul.hkb-archive--3cols{ column-gap:44px; row-gap:44px; }
/* skrócony opis kategorii: pełny tekst przycięty do 2 linii */
.ht-sitecontainer .jdm-cat__desc{
	font-family: var(--jdm-font-body);
	font-size:.88rem;
	line-height:1.55;
	color: var(--jdm-muted);
	margin:0 0 14px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
/* rodzic centruje tytuł/opis w style9; w kaflu JDM wszystko do lewej */
.ht-sitecontainer .hkb-category--style9 .jdm-cat .hkb-category__title,
.ht-sitecontainer .hkb-category--style9 .jdm-cat .hkb-category__description{ text-align:left; }
.ht-sitecontainer .jdm-cat .hkb-category__description{ margin:0 0 16px; }
.jdm-cat__list{
	list-style:none;
	margin:0 0 18px;
	padding:14px 0 0;
	border-top:1px solid var(--jdm-border);
}
.ht-sitecontainer .jdm-cat__list li{ margin:0; padding:0; list-style:none; }
.jdm-cat__list a{
	display:flex; align-items:flex-start; gap:9px;
	padding:6px 0;
	color: var(--jdm-navy);
	font-family: var(--jdm-font-body);
	font-size:.9rem;
	font-weight:500;
	line-height:1.45;
	text-decoration:none;
	transition: color .15s ease;
}
.jdm-cat__list a:hover{ color: var(--jdm-turkus); }
.jdm-cat__list a svg{
	flex:0 0 auto;
	margin-top:5px;
	color: var(--jdm-turkus);
	transition: transform .15s ease;
}
.jdm-cat__list a:hover svg{ transform: translateX(3px); }
.jdm-cat__all{
	margin-top:auto;
	align-self:flex-start;
	color: var(--jdm-turkus);
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:.85rem;
	text-decoration:none;
}
.jdm-cat__all:hover{
	color: var(--jdm-turkus-hover);
	text-decoration:underline;
}

/* =====================================================================
   STOPKA-CTA (banda) — wstrzykiwana w functions.php na stronie głównej KB
   ===================================================================== */
.jdm-home-cta{
	background: var(--jdm-navy);
	padding:56px 0;
}
.jdm-home-cta__inner{
	max-width:820px; margin:0 auto; text-align:center;
	padding:0 20px;
}
.jdm-home-cta__title{
	font-family: var(--jdm-font-head);
	font-weight:700;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	color:#fff;
	margin:0 0 12px;
	line-height:1.25;
}
.jdm-home-cta__text{
	font-family: var(--jdm-font-body);
	font-size:1rem;
	color:rgba(255,255,255,.72);
	line-height:1.7;
	margin:0 auto 28px;
	max-width:560px;
}
.jdm-home-cta__btn{
	display:inline-block;
	background: var(--jdm-amber);
	color: var(--jdm-navy);
	font-family: var(--jdm-font-head);
	font-weight:700;
	font-size:.95rem;
	text-decoration:none;
	padding:15px 38px;
	border-radius: var(--jdm-r-pill);
	box-shadow: 0 8px 22px rgba(251,191,36,.30);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.jdm-home-cta__btn:hover{
	background: var(--jdm-amber-dark);
	color: var(--jdm-navy);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(245,158,11,.38);
}

/* =====================================================================
   RESPONSYWNOŚĆ
   ===================================================================== */
@media screen and (max-width: 900px){
	.ht-sitecontainer ul.hkb-archive--3cols{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px){
	.ht-sitecontainer ul.hkb-archive--3cols{ grid-template-columns: 1fr; }
	.site-header .site-header__search{ padding:44px 0 72px; }
	/* zostawiamy miejsce na lupę po lewej */
	.hkb-site-search .hkb-site-search__field{ padding:16px 20px 16px 46px; }
	.hkb-site-search .hkb-site-search__button{ position:static; width:100%; margin-top:10px; padding:14px; }
	.hkb-site-search .hkb-site-search__loader{ display:none; }
	/* Lupa (::after motywu) ma top:50% liczone od CAŁEGO formularza. Tu przycisk wraca do
	   przepływu, więc formularz jest wyższy i 50% wypadało pod polem. Kotwiczymy ikonę
	   do środka samego pola (wysokość pola = 16px + 16px paddingu + ~26px treści). */
	.hkb-site-search::after{ top:19px; margin-top:0; left:18px; }
	/* Belka: logo z dopiskiem POMOC (~193px) i przycisk (~172px) nie mieszczą się w jednym
	   wierszu na 375px. .site-logo jako element flex kurczył się do szerokości obrazka,
	   przez co napis POMOC wylewał się pod przycisk. Nie ściskamy logo, przycisk łamiemy
	   do drugiego wiersza i wyrównujemy do lewej linii logotypu. */
	.site-header .site-header__banner .ht-container{ flex-wrap:wrap; row-gap:14px; }
	.site-header .site-logo{ flex:0 0 auto; width:max-content; margin-right:0; }
	.site-header .jdm-header-back{ margin-left:0; }
}

/* Wspólna sztywna szerokość wszystkich sekcji CAŁEGO serwisu (nagłówek z logo,
   Najczęstsze problemy, Tematy, podstrony wpisów i kategorii, stopka):
   jedna lewa i prawa linia w całym layoucie. */
.ht-sitecontainer .ht-container,
.ht-sitecontainer .jdm-common-problems__inner,
.site-header .site-header__banner .ht-container{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:clamp(20px, 3vw, 40px);
	padding-right:clamp(20px, 3vw, 40px);
}

/* =====================================================================
   CTA POD ARTYKUŁEM — zachęta dla czytelników spoza jdm.pl (SEO/AI)
   ===================================================================== */
.jdm-article-cta{
	display:flex;
	align-items:center;
	gap:28px;
	flex-wrap:wrap;
	margin:44px 0 8px;
	padding:28px 32px;
	border-radius: var(--jdm-r-card);
	background: linear-gradient(135deg, var(--jdm-turkus) 0%, var(--jdm-turkus-2) 100%);
	color:#fff;
}
.jdm-article-cta__text{ flex:1 1 380px; }
.jdm-article-cta__title{
	font-family: var(--jdm-font-head);
	font-size:1.25rem !important;
	font-weight:700;
	color:#fff !important;
	margin:0 0 10px !important;
	padding:0 !important;
	border:none !important;
}
.jdm-article-cta p{
	margin:0;
	color:rgba(255,255,255,.92);
	font-size:.95rem;
	line-height:1.6;
}
.jdm-article-cta__btn{
	display:inline-block;
	flex:0 0 auto;
	background:#ffd73c; /* firmowy żółty CTA (jeden kolor, bez gradientu) */
	color: var(--jdm-navy) !important;
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:.98rem;
	text-decoration:none !important;
	padding:14px 26px;
	border-radius: var(--jdm-r-pill);
	box-shadow: 0 8px 22px rgba(255,215,60,.32);
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
	white-space:nowrap;
}
.jdm-article-cta__btn:hover{
	background:#f8cd25;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(255,215,60,.40);
	color: var(--jdm-navy) !important;
}

/* =====================================================================
   BLOG — listing kart i pojedynczy wpis (prototyp: blog + pomoc w jednym WP)
   ===================================================================== */
body.blog .ht-page.ht-page--sidebaroff .ht-page__content{ max-width:none; width:100%; } /* pełna szerokość kontenera (motyw zwęża treść do ~780px) */
.blog .ht-postlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:36px 0 56px; padding:0; list-style:none; }
.blog .ht-postlist::before, .blog .ht-postlist::after{ content:none; } /* clearfix motywu zjada pierwszą komórkę gridu */
.blog .ht-postlist > li{ margin:0; padding:0; display:flex; }
.blog .ht-postmini{
	background:#fff;
	border:1px solid var(--jdm-border);
	border-radius: var(--jdm-r-card);
	padding:26px 26px 22px;
	margin:0;
	width:100%;
	box-sizing:border-box;
	transition: box-shadow .18s ease, transform .18s ease;
}
.blog .ht-postmini:hover{ box-shadow:0 14px 34px rgba(26,26,46,.08); transform:translateY(-2px); }
.ht-post__metacategory a{
	color: var(--jdm-turkus);
	font-family: var(--jdm-font-head);
	font-weight:600; font-size:.78rem;
	text-transform:uppercase; letter-spacing:.07em;
	text-decoration:none;
}
.ht-post__title{ font-family: var(--jdm-font-head); font-size:1.12rem; line-height:1.35; margin:8px 0 10px; }
.ht-post__title a{ color: var(--jdm-navy); text-decoration:none; }
.ht-post__title a:hover{ color: var(--jdm-turkus); }
.ht-post__meta{ color: var(--jdm-muted); font-size:.84rem; }
.ht-post__excerpt{ color: var(--jdm-text); font-size:.93rem; line-height:1.62; }
.ht-post__excerpt p{ margin:10px 0 0; }
@media (max-width:1000px){ .blog .ht-postlist{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog .ht-postlist{ grid-template-columns:1fr; } }

/* pasek tytułu sekcji (Blog) w gradientowym nagłówku */
.site-header__posts{ background:transparent !important; padding:24px 0 42px; position:relative; z-index:1; }
.site-header__posts .site-header__title{ text-align:left; margin:0; font-size:1.9rem; }

/* pojedynczy wpis blogowy: wąska, czytelna kolumna */
.single-post .ht-post{ max-width:860px; margin:36px auto 56px; }
.single-post .ht-post__title{ font-size:1.9rem; line-height:1.25; margin:6px 0 12px; }
.single-post .ht-post__content{ font-size:1.0rem; line-height:1.75; color: var(--jdm-text); }
.single-post .ht-post__content h2, .single-post .ht-post__content h3{ margin-top:34px; }
.single-post .ht-post__content img{ max-width:100%; height:auto; border-radius: var(--jdm-r-sm); }

/* =====================================================================
   DOCS NAV — stały lewy pasek kategorii (układ à la Kinsta docs)
   na stronach artykułów i kategorii bazy wiedzy
   ===================================================================== */
/* Cała szyna (logo + kategorie) przypięta do lewej krawędzi okna, pełna
   wysokość viewportu (jak Kinsta Docs). Szynę renderuje header.php
   (.jdm-docs-rail), strona układa się w dwie kolumny na .ht-sitecontainer. */
.single-ht_kb .ht-sitecontainer,
.tax-ht_kb_category .ht-sitecontainer{
	display:grid;
	grid-template-columns:300px minmax(0,1fr);
}
.single-ht_kb .ht-sitecontainer > *,
.tax-ht_kb_category .ht-sitecontainer > *{ grid-column:2; }
.single-ht_kb .ht-sitecontainer > .jdm-docs-rail,
.tax-ht_kb_category .ht-sitecontainer > .jdm-docs-rail{ grid-column:1; grid-row:1 / span 20; }

/* gradientowy nagłówek znika na stronach docs: logo mieszka w szynie */
.single-ht_kb .site-header,
.tax-ht_kb_category .site-header{ display:none; }

.jdm-docs-rail{
	background: var(--jdm-navy);
	min-height:100vh;
}
.jdm-docs-rail__in{
	position:sticky;
	top:0;
	max-height:100vh;
	overflow:auto;
	display:flex;
	flex-direction:column;
	padding:22px 14px 24px 18px;
	box-sizing:border-box;
	scrollbar-width:thin;
}
.jdm-docs-rail__logo{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
	margin:4px 6px 26px;
}
.jdm-docs-rail__logo img{ max-width:96px; display:block; }
.jdm-docs-rail__site{
	/* auto u góry: nadal dosunięty do dołu szyny; 12px z lewej wyrównuje
	   krawędź pigułki do linii tekstu pozycji menu (padding linku w nawigacji) */
	margin:auto 0 2px 12px;
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:9px 16px;
	border-radius: var(--jdm-r-pill);
	background:#fff;
	color: var(--jdm-navy);
	font-size:.85rem;
	font-weight:600;
	text-decoration:none;
	box-shadow:0 1px 2px rgba(0,0,0,.25);
	transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.jdm-docs-rail__site::after{ content:'\2192'; }
.jdm-docs-rail__site:hover{
	background:#e2e8f0;
	color: var(--jdm-navy);
	box-shadow:0 4px 12px rgba(0,0,0,.35);
	transform:translateY(-1px);
}

/* nawigacja kategorii w ciemnej szynie */
/* odstęp pod nawigacją: przy długiej liście przycisk „Przejdź na jdm.pl" nie klei się do ostatniej pozycji */
.jdm-docs-nav{ font-family: var(--jdm-font-body); margin-bottom:18px; }
.jdm-docs-nav__list{ list-style:none; margin:0; padding:0; }
.jdm-docs-nav__cat{ margin:0 0 2px; padding:0; }
.jdm-docs-nav__cat > a{
	display:block;
	padding:8px 12px;
	border-radius: var(--jdm-r-sm);
	color:#e2e8f0;
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:.9rem;
	text-decoration:none;
	transition: background .15s ease, color .15s ease;
}
.jdm-docs-nav__cat > a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.jdm-docs-nav__cat.is-open > a{ color:#4dd7d5; background:rgba(30,177,180,.12); }
.jdm-docs-nav__sub{
	list-style:none;
	margin:4px 0 12px 14px;
	padding:0 0 0 10px;
	border-left:1px solid rgba(255,255,255,.14);
}
.jdm-docs-nav__subcat > a,
.jdm-docs-nav__article > a{
	display:block;
	padding:5px 10px;
	border-radius: var(--jdm-r-sm);
	color:#94a3b8;
	font-size:.85rem;
	line-height:1.4;
	text-decoration:none;
	transition: background .15s ease, color .15s ease;
}
.jdm-docs-nav__subcat > a{ font-weight:600; color:#cbd5e1; }
.jdm-docs-nav__subcat > a:hover,
.jdm-docs-nav__article > a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.jdm-docs-nav__subcat.is-current > a{ color:#4dd7d5; }
.jdm-docs-nav__article.is-current > a{
	color:#4dd7d5;
	font-weight:600;
	background:rgba(30,177,180,.14);
}

/* treść w prawej kolumnie: wyśrodkowana, z opcjonalnym TOC po prawej */
.single-ht_kb .ht-page > .ht-container,
.tax-ht_kb_category .ht-page > .ht-container{
	display:grid;
	max-width:none;
	padding-left:0;
	padding-right:0;
	grid-template-columns:minmax(32px,1fr) minmax(0,900px) minmax(32px,1fr);
	column-gap:0;
	align-items:start;
}
.single-ht_kb .ht-page > .ht-container > .ht-page__content,
.tax-ht_kb_category .ht-page > .ht-container > .ht-page__content{ grid-column:2; }
.single-ht_kb .ht-page.ht-page--sidebarright > .ht-container,
.tax-ht_kb_category .ht-page.ht-page--sidebarright > .ht-container{
	grid-template-columns:minmax(32px,1fr) minmax(0,780px) 300px minmax(32px,1fr);
}
.single-ht_kb .ht-page.ht-page--sidebarright > .ht-container > aside.sidebar,
.tax-ht_kb_category .ht-page.ht-page--sidebarright > .ht-container > aside.sidebar{ grid-column:3; margin-left:48px; }
/* elementy siatki: neutralizacja floatow i szerokosci motywu */
.single-ht_kb .ht-page__content,
.tax-ht_kb_category .ht-page__content,
.single-ht_kb aside.sidebar,
.tax-ht_kb_category aside.sidebar{
	float:none !important;
	width:auto !important;
	max-width:none !important;
}
.single-ht_kb aside.sidebar,
.tax-ht_kb_category aside.sidebar{ position:sticky; top:24px; }

/* mobile/tablet: szyna znika, wraca zwykly naglowek i jedna kolumna */
@media (max-width: 1080px){
	.jdm-docs-rail{ display:none; }
	.single-ht_kb .site-header,
	.tax-ht_kb_category .site-header{ display:block; }
	.single-ht_kb .ht-sitecontainer,
	.tax-ht_kb_category .ht-sitecontainer{ display:block; }
	.single-ht_kb .ht-page > .ht-container,
	.tax-ht_kb_category .ht-page > .ht-container,
	.single-ht_kb .ht-page.ht-page--sidebarright > .ht-container,
	.tax-ht_kb_category .ht-page.ht-page--sidebarright > .ht-container{
		display:block;
		max-width:1280px;
		padding-left:clamp(20px, 3vw, 40px);
		padding-right:clamp(20px, 3vw, 40px);
	}
}

/* Szyna docs także na stronie głównej pomocy i stronie wyników wyszukiwania.
   Na głównej zostaje gradientowe hero z wyszukiwarką (bez belki z logo,
   bo logo mieszka w szynie), jak na kinsta.com/docs. */
.home .ht-sitecontainer,
.search .ht-sitecontainer{
	display:grid;
	grid-template-columns:300px minmax(0,1fr);
}
.home .ht-sitecontainer > *,
.search .ht-sitecontainer > *{ grid-column:2; }
.home .ht-sitecontainer > .jdm-docs-rail,
.search .ht-sitecontainer > .jdm-docs-rail{ grid-column:1; grid-row:1 / span 20; }
.home .site-header .site-header__banner{ display:none !important; }
.search .site-header{ display:none; }

@media (max-width: 1080px){
	.home .ht-sitecontainer,
	.search .ht-sitecontainer{ display:block; }
	/* przywracamy belkę jako block (nie flex) — flex robił z .ht-container
	   kurczący się element i logo nachodziło na link powrotny */
	.home .site-header .site-header__banner{ display:block !important; }
	.search .site-header{ display:block; }
}

/* =====================================================================
   PODKATEGORIE na stronie kategorii (.hkb-subcats) — karty docs
   (naprawa: domyślnie renderują się jako tekst z kreską border-bottom)
   ===================================================================== */
.tax-ht_kb_category .hkb-subcats{
	display:grid !important;
	grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:16px;
	align-items:start;               /* bez rozciągania — wysokość = treść karty */
	margin:0 0 40px;
	padding:0;
	list-style:none;
}
.tax-ht_kb_category .hkb-subcats > li{ margin:0; padding:0; align-self:start; }
.tax-ht_kb_category .hkb-subcats .hkb-category,
.tax-ht_kb_category .hkb-subcats .hkb-category--style9{
	background:#fff;
	border:1px solid var(--jdm-border);
	border-radius: var(--jdm-r-card);
	box-shadow:none;
	height:100%;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tax-ht_kb_category .hkb-subcats .hkb-category:hover,
.tax-ht_kb_category .hkb-subcats .hkb-category--style9:hover{
	border-color: var(--jdm-turkus);
	box-shadow:0 6px 18px rgba(18,18,32,.06);
	transform: translateY(-1px);
}
.tax-ht_kb_category .hkb-subcats .hkb-category__link{
	display:flex !important;
	flex-direction:row !important;   /* style9 wymusza kolumnę — prostujemy do rzędu */
	align-items:center !important;
	justify-content:flex-start !important;
	flex-wrap:nowrap !important;      /* bez zawijania folder/tytuł/chevron do osobnych wierszy */
	text-align:left !important;
	gap:12px;
	height:auto !important;          /* style9 daje height:100% — kasujemy rozdmuchanie */
	min-height:62px;
	padding:14px 18px !important;
	border:none !important;          /* zdejmujemy border-bottom robiący "kreskę" */
	text-decoration:none;
}
/* ikona-folder w turkusie po lewej */
.tax-ht_kb_category .hkb-subcats .hkb-category__link::before{
	content:'';
	flex:0 0 auto;
	width:34px; height:34px;
	border-radius:9px;
	background:
		rgba(30,177,180,.12)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231eb1b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/></svg>")
		center / 18px 18px no-repeat;
	transition: background-color .16s ease;
}
.tax-ht_kb_category .hkb-subcats .hkb-category__content{ flex:1 1 auto; min-width:0; }
.tax-ht_kb_category .hkb-subcats .hkb-category__title{
	margin:0 !important;
	padding:0 !important;
	font-family: var(--jdm-font-head);
	font-weight:600;
	font-size:1rem !important;
	line-height:1.3;
	color: var(--jdm-navy);
}
/* chevron po prawej, przesuwa się na hover */
.tax-ht_kb_category .hkb-subcats .hkb-category__link::after{
	content:'';
	flex:0 0 auto;
	width:7px; height:11px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='11' viewBox='0 0 7 11' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 4.5-5 4.5'/></svg>") center / contain no-repeat;
	transition: transform .16s ease;
}
.tax-ht_kb_category .hkb-subcats .hkb-category:hover .hkb-category__link::after{ transform: translateX(3px); }
.tax-ht_kb_category .hkb-subcats .hkb-category:hover .hkb-category__title{ color: var(--jdm-turkus); }

/* =====================================================================
   TABELE w treści artykułu — nowoczesny, zaokrąglony wygląd
   ===================================================================== */
.hkb-article__content table{
	border-collapse:separate;
	border-spacing:0;
	width:100%;
	margin:26px 0;
	border:1px solid var(--jdm-border);
	border-radius:var(--jdm-r-sm);
	overflow:hidden;               /* przycina rogi wierszy do zaokrąglenia ramki */
	font-size:.95rem;
	font-family:var(--jdm-font-body);
}
.hkb-article__content th,
.hkb-article__content td{
	padding:12px 16px;
	text-align:left;
	vertical-align:top;
	border:none;
	border-bottom:1px solid var(--jdm-border);
	line-height:1.5;
}
.hkb-article__content thead th{
	background:var(--jdm-bg-light);
	font-family:var(--jdm-font-head);
	font-weight:600;
	font-size:.9rem;
	color:var(--jdm-navy);
	white-space:nowrap;
}
.hkb-article__content tbody tr:nth-child(even) td{ background:rgba(248,250,252,.6); }
.hkb-article__content tbody tr:hover td{ background:rgba(30,177,180,.05); }
.hkb-article__content tbody tr:last-child td{ border-bottom:none; }
/* pierwsza kolumna wyróżniona jako etykieta wiersza */
.hkb-article__content tbody td:first-child{ font-weight:600; color:var(--jdm-navy); }

/* wąskie ekrany: tabela przewija się w poziomie zamiast rozpychać stronę */
@media (max-width: 600px){
	.hkb-article__content table{ display:block; overflow-x:auto; }
}