/**
 * Branike KB — docs layout. Scoped .bkb, farby z Blocksy palety (color-1) so solídnym
 * fallbackom. GPU-only animácie, CLS 0, WCAG AA, :focus-visible.
 */
.bkb {
	--bkb-primary: var( --theme-palette-color-1, #6d28d9 );
	--bkb-primary-2: var( --theme-palette-color-2, #4c1d95 );
	/* Odkazy v texte: tmavší značkový odtieň (paleta color-2) pre WCAG kontrast na svetlom pozadí. */
	--bkb-link: var( --theme-palette-color-2, #5b21b6 );
	--bkb-hero-text: #ffffff;
	--bkb-text: #1e293b;
	--bkb-muted: #475569;
	--bkb-border: #e5e7eb;
	--bkb-soft: #f8fafc;
	--bkb-card: #ffffff;
	--bkb-radius: 14px;
	--bkb-shadow: 0 10px 30px rgba( 15, 23, 42, .07 );
	color: var( --bkb-text );
}
.bkb-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.bkb-hero {
	position: relative;
	background: linear-gradient( 135deg, var( --bkb-primary ), var( --bkb-primary-2 ) );
	color: var( --bkb-hero-text );
	text-align: center;
	overflow: hidden;
	padding: clamp( 2.5rem, 7vw, 5rem ) 22px;
}
.bkb-hero--sm, .bkb-hero--article { padding: clamp( 2rem, 5vw, 3.25rem ) 22px; }
.bkb-hero__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.bkb-hero__title { color: var( --bkb-hero-text ); margin: .3rem 0 .5rem; font-size: clamp( 1.7rem, 4.2vw, 2.75rem ); line-height: 1.15; }
.bkb-hero__sub { margin: 0 auto; max-width: 40rem; opacity: .9; font-size: 1.05rem; }
.bkb-hero__search { margin-top: 1.6rem; }
/* jemný bodkovaný ornament (ako docs), GPU-neutrálny */
.bkb-hero__dots {
	position: absolute; inset: 0; z-index: 1; opacity: .18;
	background-image: radial-gradient( currentColor 1.4px, transparent 1.5px );
	background-size: 22px 22px;
	color: #fff;
	-webkit-mask-image: radial-gradient( ellipse at center, #000 30%, transparent 72% );
	mask-image: radial-gradient( ellipse at center, #000 30%, transparent 72% );
}

/* ── Breadcrumbs + updated ────────────────────────────────────────────────── */
.bkb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 0 .3rem; padding: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.bkb-crumbs li + li::before { content: "›"; margin-right: .35rem; opacity: .7; }
.bkb-crumbs a { color: inherit; text-decoration: none; opacity: .9; }
.bkb-crumbs a:hover { opacity: 1; text-decoration: underline; }
.bkb-updated { margin: 0 0 .2rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

/* ── Search ───────────────────────────────────────────────────────────────── */
.bkb-search { position: relative; max-width: 44rem; margin: 0 auto; text-align: left; }
.bkb-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bkb-search__row { display: flex; gap: .5rem; background: #fff; padding: 6px; border-radius: 12px; box-shadow: var( --bkb-shadow ); }
.bkb-search__input { flex: 1 1 auto; min-width: 0; padding: .7rem .9rem; font-size: 1rem; border: 0; border-radius: 8px; background: #fff; color: #1e293b; }
.bkb-search__input::placeholder { color: #94a3b8; opacity: 1; }
.bkb-search__input:focus { outline: none; }
.bkb-search__hint { margin: .5rem 0 0; font-size: .82rem; opacity: .85; text-align: center; }
.bkb-search__submit { flex: 0 0 auto; }

.bkb-btn {
	display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
	padding: .72rem 1.2rem; font-size: 1rem; font-weight: 600; line-height: 1;
	color: #fff; background: var( --bkb-primary ); border: 1px solid transparent; border-radius: 9px;
	text-decoration: none; transition: transform .15s ease, opacity .15s ease; will-change: transform;
}
.bkb-btn:hover { color: #fff; opacity: .93; transform: translateY( -1px ); }
.bkb-admin-link .ti { font-size: 1.15rem; }
.bkb-admin-link .bkb-admin-link__txt { color: #fff; }

/* live results */
.bkb-search__results { position: absolute; z-index: 30; left: 0; right: 0; top: calc( 100% + .5rem ); background: #fff; border: 1px solid var( --bkb-border ); border-radius: 12px; box-shadow: var( --bkb-shadow ); overflow: hidden; text-align: left; }
.bkb-search__status { margin: 0; padding: .9rem 1rem; color: var( --bkb-muted ); }
.bkb-search__list { list-style: none; margin: 0; padding: 0; }
.bkb-search__item + .bkb-search__item { border-top: 1px solid var( --bkb-border ); }
.bkb-search__item a { display: block; padding: .7rem 1rem; text-decoration: none; color: var( --bkb-text ); }
.bkb-search__item a:hover, .bkb-search__item a:focus-visible { background: var( --bkb-soft ); }
.bkb-search__item-title { display: block; font-weight: 600; }
.bkb-search__item-cat { display: inline-block; margin-top: .12rem; font-size: .74rem; color: var( --bkb-primary ); }
.bkb-search__item-ex { display: block; margin-top: .12rem; font-size: .85rem; color: var( --bkb-muted ); }
.bkb-search__item--cat a { background: var( --bkb-soft ); }
.bkb-search__item--cat .bkb-search__item-title { color: var( --bkb-primary ); font-weight: 700; }

/* ── Sekcie ───────────────────────────────────────────────────────────────── */
.bkb-section { padding: clamp( 2rem, 5vw, 3.25rem ) 0 1rem; }
.bkb-section__title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: #334155; margin: 0 0 1.1rem; }

/* ── Karty kategórií (domov) ──────────────────────────────────────────────── */
.bkb-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) ); }
.bkb-card2 {
	display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var( --bkb-text );
	background: var( --bkb-card ); border: 1px solid var( --bkb-border ); border-radius: var( --bkb-radius );
	padding: 2rem 1.5rem 0; overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; will-change: transform;
}
.bkb-card2:hover { transform: translateY( -4px ); box-shadow: var( --bkb-shadow ); border-color: transparent; }
.bkb-card2__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 16px; background: color-mix( in srgb, var( --bkb-primary ) 12%, #fff ); color: var( --bkb-primary ); margin: 0 auto 1.1rem; }
.bkb-card2__icon .ti { font-size: 40px; }
.bkb-card2__icon .bkb-emoji { font-size: 40px; line-height: 1; }
.bkb-card2__title { margin: 0 0 .5rem; font-size: 1.22rem; }
.bkb-card2__desc { margin: 0 0 1.25rem; color: var( --bkb-muted ); font-size: .92rem; line-height: 1.55; flex: 1 1 auto; }
.bkb-card2__meta { display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var( --bkb-border ); margin: 0 -1.5rem; padding: .9rem 1.5rem; font-size: .85rem; color: var( --bkb-muted ); }
.bkb-card2__more { color: var( --bkb-primary ); font-weight: 600; }

/* ── Layout so sidebarom (kategória / single) ─────────────────────────────── */
.bkb-layout { display: grid; grid-template-columns: 288px minmax( 0, 1fr ); gap: 2.5rem; padding: clamp( 1.75rem, 4vw, 2.75rem ) 22px clamp( 2.5rem, 6vw, 4rem ); align-items: start; }

.bkb-sidebar { position: sticky; top: 24px; align-self: start; max-height: calc( 100vh - 48px ); overflow-y: auto; padding-right: .35rem; scrollbar-width: thin; scrollbar-color: var( --bkb-border ) transparent; }
.bkb-sidebar::-webkit-scrollbar { width: 8px; }
.bkb-sidebar::-webkit-scrollbar-thumb { background: var( --bkb-border ); border-radius: 8px; }
/* signál „dá sa rolovať" — jemný fade dole, kým nie si na konci */
.bkb-sidebar--more { -webkit-mask-image: linear-gradient( to bottom, #000 84%, transparent ); mask-image: linear-gradient( to bottom, #000 84%, transparent ); }
.bkb-tree__head { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var( --bkb-muted ); margin: 0 0 .6rem; padding: 0 .2rem; }
.bkb-tree__head a { color: inherit; text-decoration: none; }
.bkb-tree__group { margin-bottom: .25rem; }
.bkb-tree__row { display: flex; align-items: stretch; border-radius: 8px; }
.bkb-tree__row:hover, .bkb-tree__group.is-open > .bkb-tree__row { background: var( --bkb-soft ); }
.bkb-tree__cat { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: var( --bkb-text ); font-weight: 600; padding: .5rem .5rem; border-radius: 8px; }
.bkb-tree__cat .ti { color: var( --bkb-primary ); font-size: 19px; flex: 0 0 auto; }
.bkb-tree__cat .bkb-emoji { font-size: 16px; }
.bkb-tree__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkb-tree__cat.is-current { color: var( --bkb-primary ); }
.bkb-tree__count { font-size: .72rem; color: var( --bkb-muted ); background: #fff; border: 1px solid var( --bkb-border ); padding: .05rem .45rem; border-radius: 999px; flex: 0 0 auto; }
.bkb-tree__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; background: none; border: 0; cursor: pointer; color: var( --bkb-muted ); border-radius: 8px; }
.bkb-tree__toggle .bkb-tree__chev { transition: transform .18s ease; }
.bkb-tree__group.is-open > .bkb-tree__row .bkb-tree__toggle .bkb-tree__chev { transform: rotate( 180deg ); }
.bkb-tree__toggle:hover { color: var( --bkb-primary ); }
.bkb-tree__articles { list-style: none; margin: .15rem 0 .5rem; padding: 0 0 0 1.7rem; border-left: 1px solid var( --bkb-border ); margin-left: 1.15rem; }
.bkb-tree__articles[hidden] { display: none; }
.bkb-tree__articles a { display: block; padding: .32rem .5rem; font-size: .9rem; text-decoration: none; color: var( --bkb-muted ); border-radius: 6px; }
.bkb-tree__articles a:hover { color: var( --bkb-text ); background: var( --bkb-soft ); }
.bkb-tree__articles a.is-current { color: var( --bkb-primary ); font-weight: 600; background: color-mix( in srgb, var( --bkb-primary ) 8%, #fff ); }

/* ── Zoznam článkov (kategória) ───────────────────────────────────────────── */
.bkb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.bkb-list__link { display: block; text-decoration: none; color: var( --bkb-text ); background: var( --bkb-card ); border: 1px solid var( --bkb-border ); border-radius: 12px; padding: 1.1rem 1.25rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; will-change: transform; }
.bkb-list__link:hover { transform: translateY( -2px ); box-shadow: var( --bkb-shadow ); border-color: transparent; }
.bkb-list__title { display: block; font-weight: 600; font-size: 1.05rem; }
.bkb-list__ex { display: block; margin-top: .25rem; color: var( --bkb-muted ); font-size: .92rem; }

/* ── Článok ───────────────────────────────────────────────────────────────── */
.bkb-article__content { max-width: 760px; font-size: 1.06rem; line-height: 1.75; color: var( --bkb-text ); }
.bkb-article__content h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.bkb-article__content h3 { margin-top: 1.6rem; font-size: 1.2rem; }
.bkb-article__content p { margin: 0 0 1.1rem; }
.bkb-article__content ul, .bkb-article__content ol { margin: 0 0 1.1rem 1.3rem; }
.bkb-article__content li { margin: .3rem 0; }
.bkb-article__content img { border-radius: 10px; height: auto; }
/* WCAG 1.4.1: odkazy v texte rozlíšiteľné aj inak než farbou (podčiarknutie) + tmavšia
   značková farba (paleta color-2) pre dostatočný kontrast na svetlom pozadí. */
.bkb-article__content a { color: var( --bkb-link ); text-decoration: underline; text-underline-offset: 2px; }
.bkb-article__content a:hover { text-decoration-thickness: 2px; }

/* ── Súvisiace ────────────────────────────────────────────────────────────── */
.bkb-related { margin-top: 2.5rem; border-top: 1px solid var( --bkb-border ); padding-top: 1.5rem; max-width: 760px; }
.bkb-related h2 { font-size: 1.15rem; margin: 0 0 .8rem; color: var( --bkb-text ); }
.bkb-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); }
.bkb-related a { text-decoration: underline; text-underline-offset: 2px; color: var( --bkb-link ); font-weight: 600; }
.bkb-related a:hover { text-decoration-thickness: 2px; }

/* ── Support CTA ──────────────────────────────────────────────────────────── */
.bkb-support { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 0; max-width: 760px; background: var( --bkb-soft ); border: 1px solid var( --bkb-border ); border-radius: var( --bkb-radius ); padding: 1.25rem 1.5rem; }
.bkb-home .bkb-support, .bkb-cat .bkb-support { margin: clamp( 2rem, 5vw, 3rem ) 0 clamp( 2.5rem, 6vw, 4rem ); max-width: none; }
.bkb-support__icon { color: var( --bkb-primary ); flex: 0 0 auto; }
.bkb-support__body { flex: 1 1 auto; color: var( --bkb-text ); }
.bkb-support__body span { color: var( --bkb-muted ); }

/* ── Locked ───────────────────────────────────────────────────────────────── */
.bkb-locked { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border: 1px dashed var( --bkb-primary ); border-radius: var( --bkb-radius ); background: var( --bkb-soft ); max-width: 760px; }
.bkb-locked__icon { color: var( --bkb-primary ); flex: 0 0 auto; }
.bkb-locked__teaser { margin: 0 0 1rem; color: var( --bkb-text ); }

/* ── Pagination / empty ───────────────────────────────────────────────────── */
.bkb-pagination { margin-top: 1.75rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; }
.bkb-pagination .page-numbers { padding: .4rem .8rem; border: 1px solid var( --bkb-border ); border-radius: 8px; text-decoration: none; color: var( --bkb-text ); }
.bkb-pagination .page-numbers.current { background: var( --bkb-primary ); color: #fff; border-color: transparent; }
.bkb-empty { color: var( --bkb-muted ); padding: 1.5rem 0; }

/* ── Plná šírka (nastavenie) ──────────────────────────────────────────────── */
.bkb--full .bkb-container { max-width: min( 1600px, 94vw ); }

/* ── Callout boxy v článkoch (tip / info / úspech / upozornenie / chyba) ──── */
.bkb-article__content .bkb-callout { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 10px; margin: 0 0 1.3rem; border: 1px solid; font-size: 1rem; line-height: 1.65; }
.bkb-article__content .bkb-callout .ti { font-size: 1.35rem; flex: 0 0 auto; margin-top: .1rem; }
.bkb-article__content .bkb-callout p { margin: 0; }
.bkb-callout--tip { background: #f5f3ff; border-color: #ddd6fe; }
.bkb-callout--tip .ti { color: #7c3aed; }
.bkb-callout--info { background: #eff6ff; border-color: #bfdbfe; }
.bkb-callout--info .ti { color: #2563eb; }
.bkb-callout--success { background: #ecfdf5; border-color: #a7f3d0; }
.bkb-callout--success .ti { color: #059669; }
.bkb-callout--warn { background: #fffbeb; border-color: #fde68a; }
.bkb-callout--warn .ti { color: #d97706; }
.bkb-callout--danger { background: #fef2f2; border-color: #fecaca; }
.bkb-callout--danger .ti { color: #dc2626; }

/* ── A11y ─────────────────────────────────────────────────────────────────── */
.bkb :focus-visible { outline: 2px solid var( --bkb-primary ); outline-offset: 2px; }
.bkb-hero :focus-visible { outline-color: #fff; }
.bkb .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Shortcode fallbacky (mimo docs šablón) ───────────────────────────────── */
.bkb-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); }
.bkb-cats__item a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.1rem; text-decoration: none; background: var( --bkb-card ); border: 1px solid var( --bkb-border ); border-radius: 12px; color: var( --bkb-text ); }
.bkb-cats__count { font-size: .8rem; color: var( --bkb-muted ); background: var( --bkb-soft ); padding: .1rem .5rem; border-radius: 999px; }
.bkb-card { background: var( --bkb-card ); border: 1px solid var( --bkb-border ); border-radius: 12px; }
.bkb-card__link { display: block; padding: 1.1rem 1.25rem; text-decoration: none; color: var( --bkb-text ); }
.bkb-card__cat { display: inline-block; font-size: .74rem; font-weight: 600; color: var( --bkb-primary ); margin-bottom: .3rem; }
.bkb-card__title { margin: 0 0 .4rem; font-size: 1.05rem; }
.bkb-card__excerpt { margin: 0 0 .5rem; font-size: .9rem; color: var( --bkb-muted ); }
.bkb-card__more { font-size: .85rem; font-weight: 600; color: var( --bkb-primary ); }
.bkb-grid { display: grid; gap: 1rem; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 900px ) {
	.bkb-layout { grid-template-columns: 1fr; gap: 1.5rem; }
	.bkb-sidebar { position: static; max-height: none; order: 2; border-top: 1px solid var( --bkb-border ); padding-top: 1.25rem; }
}
@media ( prefers-reduced-motion: reduce ) {
	.bkb-btn, .bkb-card2, .bkb-list__link { transition: none; }
}