/* Розділ «Знання»: шапка розділу, повний зміст, сторінка комплекту.
   Доповнення до stattya.css і znannya.css. Підключається на всіх сторінках розділу.
   Тільки коротке тире (–). */

/* ---- шапка ----
   shared.css під 860 px ховає nav.top і показує .burger, бо на решті сайту меню
   будує shared.js. У розділі «Знання» бургера немає: пунктів три, вони просто
   переносяться на другий рядок. Без цього на телефоні лишається сам логотип. */
@media (max-width: 860px) {
  header.site .bar { flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px; }
  header.site .logo { font-size: 20px; }
  /* Знято 26.08.2026: раніше в розділі не було бургера, і меню доводилося
     переносити другим рядком. Тепер меню спільне з головною, бургер працює. */
}

/* ---- повний зміст ---- */
.zmist-krok { margin: 24px 0 0; }
.zmist-storinka { margin: 0 0 14px; padding: 14px 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; }
/* ---- Межа безкоштовного і платного показується, а не пояснюється (26.08.2026) ----
   Ігор: «Здатність думати словами виникла в людини на пізньому етапі еволюції.
   Здатність думати образами є в усіх живих істот.» Раніше межу ніс тільки абзац
   тексту – тобто слова, які треба прочитати. Тепер її видно до читання.

   Відкриті сторінки – білі картки з відступом одна від одної, назва-посилання.
   Закриті – суцільна смуга з рейкою ліворуч: 21 сторінка читається як одна
   територія, а не як 21 схожий рядок. */

.zmist-storinka.zakryta {
  background: var(--olive-50);
  border: 1px solid var(--olive-200);
  border-left: 3px solid var(--olive-500);
  border-radius: 0 10px 10px 0;
  margin-bottom: 5px;
}
.zmist-storinka.zakryta .nazva { color: var(--ink-soft); }
.zmist-storinka.zakryta .num { color: var(--olive-600); }
.zmist-storinka.zakryta li { color: #6f7867; }

/* позначка «у комплекті» повторюється 21 раз – це шум.
   Смуга вже сказала те саме, тому позначка стає тихою */
.zakryta .mitka {
  background: none; color: var(--olive-600);
  padding: 0; margin-left: 8px; font-size: 11px; font-weight: 700;
}

/* відкриті картки – навпаки, живі й натискні */
.zmist-storinka:not(.zakryta) { transition: border-color .15s, background .15s; }
.zmist-storinka:not(.zakryta):hover { border-color: var(--olive-500); background: #fffefb; }
.zmist-storinka .nazva { display: block; font-size: 17px; font-weight: 700; color: var(--ink);
  margin: 0 0 8px; }
.zmist-storinka .nazva a { color: var(--olive-700); text-decoration: none; }
.zmist-storinka .nazva a:hover { text-decoration: underline; }
.zmist-storinka .num { color: var(--ink-soft); font-weight: 700; margin-right: 6px; }
.zmist-storinka ul { margin: 0; padding-left: 20px; }
.zmist-storinka li { font-size: 15px; color: var(--ink-soft); margin-bottom: 4px; }
.mitka { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--olive-800); background: var(--olive-100);
  border-radius: 6px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }

/* ---- сторінка комплекту ---- */
.tsina { font-size: 30px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.tsina small { display: block; font-size: 15px; font-weight: 400; color: var(--ink-soft);
  margin-top: 6px; }
.poky { background: #fff8e6; border-left: 4px solid #e0a800; border-radius: 0 12px 12px 0;
  padding: 14px 16px; margin: 24px 0; }
.poky b { display: block; margin-bottom: 6px; font-size: 17px; }
.poky p { font-size: 16px; }
.kanal { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--olive-800);
  background: var(--olive-100); border-radius: 10px; padding: 10px 16px; text-decoration: none; }
.kanal:hover { background: var(--olive-200); }

@media (max-width: 600px) {
  .zmist-storinka { padding: 12px 13px; }
  .zmist-storinka li { font-size: 14px; }
  .tsina { font-size: 26px; }
}


/* ---- Головна розділу: ієрархія контрастом, а не кеглем (26.08.2026) ----
   Було: логотип 20, «Знання про ФОП» 34, «Думаю відкрити ФОП» 23, назва тексту 18.
   Ігор: це розриває ієрархію цінностей – ніщо не має бути «важливішим»
   за «Розумний Помічник».
   Стало: логотип, назва розділу і назви груп – одного кегля 20px.
   Розділ виділяється темним полем, тобто контрастом, а не розміром. */

.rozdil-holovna h1 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--white);
  /* світліше за градієнт шапки: два темні поля поспіль сперечалися */
  background: var(--olive-500);
  border-radius: 12px;
  padding: 14px 20px;
  /* просвіт до шапки – такий самий, як між картками списку (12px) */
  margin: 12px 0 20px;
  letter-spacing: .01em;
}

/* текст під полем рівняється по тексту всередині поля, а не по краю колонки */
.rozdil-holovna > p { padding: 0 20px; margin-bottom: 6px; font-size: 17px; }
.rozdil-holovna > p:first-of-type { font-size: 17px; }
.rozdil-holovna > p.dali { margin-top: 18px; }

.rozdil-holovna h2 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  margin: 40px 0 6px;
  padding-top: 24px;
}
.rozdil-holovna h2 + p { margin-bottom: 14px; }

.rozdil-holovna .spysok b { font-size: 18px; }
.rozdil-holovna .spysok .nom { color: var(--olive-600); font-weight: 700; }

@media (max-width: 600px) {
  .rozdil-holovna h1 { font-size: 19px; padding: 12px 16px; }
  .rozdil-holovna h2 { font-size: 19px; margin-top: 32px; padding-top: 18px; }
  .rozdil-holovna > p { padding: 0 16px; }
}

/* межа безкоштовної і платної частини на сторінці «Зміст» */
.mezha {
  margin: 34px 0 8px;
  padding: 14px 18px;
  background: var(--olive-100);
  border-left: 3px solid var(--olive-700);
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  font-weight: 600;
}

/* блок «Повна база» – перехід у платну частину */
.komplekt { margin-top: 18px; }
.komplekt a { background: var(--olive-50); border-color: var(--olive-200); }
.komplekt a:hover { background: var(--olive-100); border-color: var(--olive-500); }

.tsina-ryadok { padding: 0 20px; margin: 22px 0 18px !important; }
.knopka {
  display: inline-block;
  background: var(--olive-700);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 10px;
}
.knopka:hover { background: var(--olive-600); }

.rozdil-holovna .buh { font-size: 16px; }

/* інструмент серед текстів – виділяється, бо це не читання, а дія */
.instrument { margin: 18px 0 8px; }
.instrument a { background: var(--white); border-color: var(--olive-500); border-width: 2px; }
.instrument a:hover { background: var(--olive-50); }