/* Спільне для всіх сторінок бази знань: фон, контейнер, градієнтна рамка,
   герой, пошук, кнопка. Розкладка конкретних сторінок — у kb-archive.css,
   kb-category.css і далі. */

/* Фон УСІЄЇ сторінки, а не лише блока контенту. Макет заливає весь фрейм
   grayscale/900_Black, а тема тримає на body #1B1B2C. .kb-page цього не
   закриває: вона коротша за .site-wrapper (заміряно 1024 проти 1214), плюс
   глобальний .footer { margin-top: 140px } — разом 210px світлішої смуги під
   контентом і 120px над ним.
   Це ЄДИНЕ, що лишилось від перефарбування хрому: шапку й футер під розділ
   більше не стилізуємо (у новому макеті це штатні компоненти сайту), а тло
   сторінки макет задає прямо. Клас ставить godlike_kb_body_class(). */
.kb-page-scope {
  background-color: var(--kb-bg);
}

/* Носій фонового світіння — .site-wrapper, а не body і не .kb-page.
   Він охоплює РАЗОМ шапку й контент і закінчується перед футером, тобто це
   рівно та зона, яку в макеті займає фон фрейма. Плюс у теми на ньому вже є
   overflow: hidden — саме він і обрізає плями по краях вьюпорта, без чого на
   вузькому екрані вони давали б горизонтальну прокрутку.

   isolation: isolate — щоб z-index: -1 плям не провалився під непрозорий фон
   body. Саме -1, а не 0: пляма мусить лежати ПІД контентом, і при цьому нікому
   не доводиться роздавати z-index. Попередня версія цього блоку піднімала
   .site-header, .footer і .kb-page на z-index: 1 — і ламала мобільне меню:
   .kb-page іде в DOM після шапки, тож при рівному z-index перекривала її, а
   бургер-оверлей опинявся під контентом. */
.kb-page-scope .site-wrapper {
  position: relative;
  isolation: isolate;
}

/* Фон .kb-page ПРОЗОРИЙ. Раніше вона мала свій background-color, і це закривало
   плями: у макеті світіння — фон усього фрейма, а не блока контенту.
   Ні z-index, ні isolation тут немає свідомо — див. коментар до .site-wrapper. */
.kb-page {
  position: relative;
  color: var(--kb-text);
  font-family: "Gilroy", "Helvetica Neue", Arial, sans-serif;
}

/* --- Фонове світіння ---
   Малюємо на BODY (.kb-page-scope), а не на .kb-page, і це головне тут. На
   .kb-page плями обрізались двома межами: сама вона починається під шапкою
   (заміряно 120px від верху при адмін-барі, 88 без нього) і мала overflow:
   clip, а знизу між нею й футером лежить 140px від глобального
   .footer { margin-top: 140px }. Виходили дві чорні плити — над контентом і під
   ним — яких у макеті немає: там світіння — фон УСЬОГО фрейма, шапка й футер
   стоять поверх нього. На body жодної з цих меж немає.

   Через це й координати тепер простіші: у макеті центри плям заміряні від верху
   фрейма, тобто ВКЛЮЧНО із шапкою — рівно те, чим є верх body. Поправка
   «мінус висота шапки», яка стояла тут раніше, більше не потрібна.

   У КОЖНОГО екрана макета свій набір плям (постановник указував саме на це).
   Прочитано пошарово у файлі (шари «BG Gradient», Properties), заливка всюди
   Gradient/Main Default:

     Knowlege_base (хаб):   1072.16 x 208.11, rotation -179.72, blur 200
                            860 x 232,                          blur 240
     Game_servers:          744.46 x 364.68,  rotation  34.49,  blur 200
                            878.31 x 410.92,  rotation -30.64,  blur 240
                            860 x 232,                          blur 240
     Minecraft_page (кат.): 533.73 x 261.45,  rotation  34.49,  blur 200
                            585.15 x 273.77,  rotation -30.64,  blur 240

   У CSS blur вдвічі менший за фігмівський: layer blur там задається діаметром,
   а CSS blur() — стандартним відхиленням (звірено рендером із макетом).

   Смуга 860x232 лишається на .kb-hero: у макеті вона світить рівно за героєм, а
   герой є тільки на хабі й на Game Servers — так вона й зʼявляється саме там.
   Тепер вона ще й видима повністю: .kb-page її не обрізає. */
.kb-page-scope .site-wrapper::before,
.kb-page-scope .site-wrapper::after,
.kb-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--kb-gradient-brand);
}

/* Смуга за героєм: центр X 288 у фреймі 1440, тобто 288 - 720 = -432.
   isolation — з тієї ж причини, що на .site-wrapper: тримає пляму з z-index: -1
   у шарі героя, а не під фоном сторінки. */
.kb-hero { position: relative; isolation: isolate; }

.kb-hero::before {
  width: 860px;
  height: 232px;
  left: calc(50% - 432px);
  top: -24px;
  filter: blur(120px);
  z-index: -1;
}

/* --- Хаб: друга смуга, за рядом CTA. Центр X 182 -> 182 - 720 = -538.
   rotate(180deg) — це rotation -179.72 макета: для двоколірного градієнта
   поворот міняє порядок стопів, тобто синій опиняється справа. --- */
/* Нижні плями лишаються на .kb-page і привʼязані до її НИЗУ. Абсолютний top від
   верху body тут не годиться: висота сторінки залежить від кількості статей, і
   пляма з фіксованим top на короткій сторінці опинялась би вже під футером. */
.kb-scope--hub .site-wrapper::after {
  width: 1072px;
  height: 208px;
  left: calc(50% - 538px);
  bottom: 59px;
  transform: rotate(180deg);
  filter: blur(100px);
}

/* --- Категорія, стаття, тег і результати пошуку: пара повернутих плям.
   Центри в макеті — (1065;487) для верхньої правої і (502;959) для нижньої
   лівої, від верху фрейма. --- */
.kb-scope--inner .site-wrapper::before {
  width: 534px;
  height: 261px;
  left: calc(50% + 78px);   /* 1065 - 720 = 345; 345 - 267 = 78 */
  top: 356px;               /* 487 - 131 (півв.) */
  transform: rotate(34.49deg);
  filter: blur(100px);
}

.kb-scope--inner .site-wrapper::after {
  width: 585px;
  height: 274px;
  left: calc(50% - 510px);  /* 502 - 720 = -218; -218 - 292 = -510 */
  bottom: 120px;
  transform: rotate(-30.64deg);
  filter: blur(120px);
}

/* --- Game Servers: та сама пара, більша --- */
.kb-scope--games .site-wrapper::before {
  width: 744px;
  height: 365px;
  left: calc(50% + 28px);
  top: 258px;
  transform: rotate(34.49deg);
  filter: blur(100px);
}

.kb-scope--games .site-wrapper::after {
  width: 878px;
  height: 411px;
  left: calc(50% - 658px);
  bottom: 160px;
  transform: rotate(-30.64deg);
  filter: blur(120px);
}

/* --- Мобільний екран ---
   Плями задані в ПІКСЕЛЯХ із десктопного макета (534-1072px завширшки), і на
   вузькому екрані кожна з них ширша за вьюпорт: замість акценту в куті виходить
   рівна заливка на весь екран. Тому тут вони перераховані у vw зі збереженням
   пропорцій оригіналу, а blur зменшений — на плямі 110vw розмиття 100px
   розмазує її в однотонний фон.

   Це МАСШТАБУВАННЯ, а не заміри: мобільні фрейми макета (Knowlege_base_mobile,
   Game_servers_mobile, Minecraft_page_mobile) мають свої набори плям, і коли до
   них дійдуть руки — значення тут треба звірити з ними.

   Вертикальні привʼязки теж свої: на мобільному колонки складаються в стовпець,
   сторінка стає в 2-3 рази вищою, і десктопні top у пікселях вказували б уже в
   середину списку статей. Верхня пляма тримається шапки, нижня — низу контенту. */
@media screen and (max-width: 767px) {
  .kb-hero::before {
    width: 120vw;
    height: 32vw;        /* пропорція 860x232 */
    left: -10vw;
    top: -12px;
    filter: blur(60px);
  }

  .kb-scope--hub .site-wrapper::after {
    width: 120vw;
    height: 23vw;        /* пропорція 1072x208 */
    left: -10vw;
    bottom: 40px;
    filter: blur(50px);
  }

  .kb-scope--inner .site-wrapper::before,
  .kb-scope--games .site-wrapper::before {
    width: 110vw;
    height: 54vw;        /* пропорція 534x261 */
    left: auto;
    right: -30vw;        /* у макеті ця пляма праворуч-угорі */
    top: 80px;
    filter: blur(60px);
  }

  .kb-scope--inner .site-wrapper::after,
  .kb-scope--games .site-wrapper::after {
    width: 110vw;
    height: 51vw;        /* пропорція 585x274 */
    left: -30vw;         /* а ця — ліворуч, нижче */
    bottom: 60px;
    filter: blur(60px);
  }
}

/* Футер у макеті стоїть майже впритул до контенту, а глобальне правило теми
   додає йому 140px відступу — саме ця смуга й читалась як чорна плита між
   розділом і футером. На сторінках розділу прибираємо. */
.kb-page-scope .footer {
  margin-top: 0;
}

/* Паддинг тут ДОДАЄТЬСЯ до максимальної ширини, а не з'їдає її.
   box-sizing у темі border-box, тож max-width: 1080 із padding: 0 16px давав
   контентний бокс 1048, а не 1080 як у макеті. На сторінці категорії це було
   помітніше за все: бокові колонки фіксовані по 310, тож усі 32px різниці
   з'їдала центральна — 608 замість макетних 640 (заміряно).
   Тримаємо жолоб окремою змінною, щоб calc не розходився з padding. */
.kb-shell {
  --kb-gutter: 8px;
  width: 100%;
  max-width: calc(var(--kb-content) + var(--kb-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--kb-gutter);
}

@media screen and (min-width: 768px) {
  .kb-shell { --kb-gutter: 16px; }
}

/* Напівпрозора поверхня з градієнтною рамкою.
   Рамка через ::before з mask, а НЕ через background-clip: padding-box/border-box:
   заливка тут напівпрозора (50%), і при padding-box градієнт рамки просвічував би
   крізь усю панель.

   Рамка ОДНА на всі панелі: 1px Gradient/Main Default, All sides, inner
   alignment. Варіантів (--green/--solid) більше немає — у макеті герой, сітка
   карток і CTA обведені однаково, звірено на шарах hero_content і Frame 2. */
.kb-surface {
  position: relative;
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface-50);
  /* blur_main із макета — 20, не 10 (токен так і називається, стоїть на всіх
     панелях; заміряно на side_bar у фреймі Minecraft_page). */
  backdrop-filter: blur(20px);
}

.kb-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: var(--kb-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* --- Герой --- */

.kb-hero { padding: 24px 0; }

.kb-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--kb-pad-card-mob);
}

.kb-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}

.kb-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: 32px;
  line-height: 36px;
  text-transform: capitalize;
  color: var(--kb-text);
}

.kb-hero__subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--kb-text);
}

@media screen and (min-width: 768px) {
  .kb-hero { padding: 40px 0; }
  .kb-hero__inner { gap: 24px; padding: var(--kb-pad-card); }
  .kb-hero__text { gap: 12px; }
  .kb-hero__title { font-size: 60px; line-height: 60px; }
  .kb-hero__subtitle { font-weight: 500; font-size: 16px; line-height: 20px; }
}

/* --- Пошук --- */

.kb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--kb-search);
  padding: 12px;
  border-radius: var(--kb-radius-inner);
  background: var(--kb-surface);
}

.kb-search__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.kb-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--kb-text);
}

.kb-search__input::placeholder { color: var(--kb-placeholder); }
.kb-search__input:focus { outline: none; }

/* --- Кнопка ---
   Тло — той самий градієнт #007CEE -> #5F39CB, текст БІЛИЙ. Темний текст
   (var(--kb-bg)), який стояв тут раніше, працював лише на світлій заливці; на
   фіолетовому кінці градієнта він майже зливається з тлом. */

/* Кнопка буває <a>, <button> і <span role="link"> — останній там, куди тег <a>
   не пускає вимога (панель, клієнтська зона; godlike_kb_link_tag()). Тому тут
   і нижче селектори тільки класові, а cursor/user-select виставлені явно:
   у <span> вони не такі, як у посилання. */
.kb-btn {
  display: inline-flex;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  justify-content: center;
  gap: var(--kb-gap-tiny);
  padding: 12px 16px;
  border: 0;
  border-radius: var(--kb-radius-btn);
  background: var(--kb-gradient-brand);
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--kb-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Ховер — РЕВЕРС градієнта, як у власних кнопок теми
   (css/new/style.scss:927). Було filter: brightness(1.08), і на синьо-фіолетовій
   заливці це майже не читалось — саме на це й скаржився постановник.

   color ТУТ ОБОВʼЯЗКОВИЙ, і це не дублювання .kb-btn. Бандл теми має глобальне
   a:hover{color:#1262b3} (dist/assets/main-*.css), а .kb-btn — це <a>. Поки
   ховер міняв лише тло, колір тексту падав на цей синій і на заливці кнопки
   майже зникав. Еталон — «Admin Panels» у хедері (css/new/header.scss:76):
   ховер міняє ТІЛЬКИ фон. */
.kb-btn:hover,
.kb-btn:focus-visible {
  background: var(--kb-gradient-brand-hover);
  color: var(--kb-text);
}

.kb-btn__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

/* --- Підказки живого пошуку (Heroic hkb-jquery-live-search) ---
   Розмітку й id/класи ставить сам плагін (php/ht-knowledge-base-live-search.php),
   ми лише перестилізовуємо їх під палітру бази знань — hkb-style.css сюди більше
   не завантажується на головній, тож без цього блока підказки безбарвні. */

/* ПОЗИЦІЮ Й ШИРИНУ ЦІЄЇ ПАНЕЛІ ЗАДАЄ JS ПЛАГІНА, НЕ CSS. Читано в
   js/jquery-livesearch.min.js: контейнер створюється як
   jQuery('<div id="hkb-jquery-live-search">').appendTo(document.body), тобто він
   НЕ нащадок .kb-search, а дитина <body>; далі на кожен показ і на кожен resize
   вікна викликається внутрішня n(), яка ставить ІНЛАЙНОМ position: absolute,
   left/top від input.offset() і width від input.outerWidth() мінус власні
   паддінги й рамки панелі.
   Через це тут НЕ ОГОЛОШУЮТЬСЯ top/left/right (чужий батько + інлайн сильніший)
   і margin-top (він не інертний — він зсував панель від поля). Лишається лише
   оформлення: фон, рамка, радіус, тінь, скрол і типографіка.
   z-index лишається як був: панель — дитина body, і власного стека в неї немає. */
#hkb-jquery-live-search {
  z-index: 20;
  max-height: 400px;
  overflow: auto;
  border-radius: var(--kb-radius-inner);
  background: var(--kb-surface);
  border: 1px solid var(--kb-accent);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

#hkb.hkb-searchresults {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--kb-text);
}

#hkb.hkb-searchresults > li {
  position: relative;
  padding: 8px 16px;
}

#hkb.hkb-searchresults > li:hover,
#hkb.hkb-searchresults > li.hkb-searchresults__current {
  background: var(--kb-surface-50);
}

#hkb.hkb-searchresults > li.hkb-searchresults__showall,
#hkb.hkb-searchresults > li.hkb-searchresults__noresults {
  text-align: center;
  font-size: 0.9em;
  color: var(--kb-text-dim);
}

#hkb.hkb-searchresults > li a {
  display: block;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}

#hkb.hkb-searchresults > li a:focus { outline: none; }

#hkb.hkb-searchresults > li .hkb-searchresults__title,
#hkb.hkb-searchresults > li .hkb-searchresults__excerpt {
  display: block;
}

#hkb.hkb-searchresults > li .hkb-searchresults__title {
  font-weight: 600;
  line-height: 1.35;
}

#hkb.hkb-searchresults > li .hkb-searchresults__excerpt {
  margin: 4px 0 0;
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--kb-text-muted);
}

#hkb.hkb-searchresults > li .hkb-searchresults__excerpt span.highlight {
  background-color: var(--kb-accent);
  color: var(--kb-text);
}

/* --- Ширший контейнер (категорія, стаття, сітка Game Servers) --- */

.kb-shell--wide { max-width: calc(var(--kb-content-wide) + var(--kb-gutter) * 2); }

/* --- Хлібні крошки ---
   Шеврон малюється бордерами, а не файлом: іконки в макеті для крошок немає,
   а зовнішній <img> тут не перефарбувався б під колір посилання. */

.kb-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--kb-gap-large);
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--kb-text-dim);
}

.kb-crumbs__item { display: flex; align-items: center; gap: 8px; }

.kb-crumbs__item + .kb-crumbs__item::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.kb-crumbs a { color: inherit; text-decoration: none; }
.kb-crumbs a:hover { color: var(--kb-accent); }
.kb-crumbs__item--current { color: var(--kb-text); }

/* --- Іконка документа (inline SVG у currentColor) ---
   Розмір і колір задає CSS, тому один і той самий партіал працює і в списку
   статей (32px), і в сайдбарі (20px). */

/* Колір — приглушений сірий, а не акцент: у макеті іконки статей і в списку, і
   в сайдбарі світло-сірі, синьою вона там не буває (звірено на панелі Popular
   Articles у фреймі Minecraft_page). */
.kb-doc-icon {
  flex: 0 0 auto;
  display: block;
  width: 32px;
  height: 32px;
  color: var(--kb-text-muted);
}

/* --- Панель-віджет сайдбара --- */

.kb-widget { padding: 16px; }

.kb-widget__title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--kb-text);
}

/* --- Порожній стан (категорія без статей, пошук без результатів) --- */

.kb-empty {
  margin: 0;
  padding: var(--kb-pad-card);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--kb-text-muted);
}