/* ko-base.css — загальні дрібні правила теми optica.
   Доробка 05.09.2026: якорі не мають ховатися під липким хедером.
   header.header — sticky: 41 px від 1105 px і ширше, 49 px нижче. */

[id] { scroll-margin-top: 60px; }

@media (max-width: 1104px) {
    [id] { scroll-margin-top: 70px; }
}

/* Доробка 09.09.2026 (Задача 1): адмін-бар закривав бургер мобільного меню.
   #wpadminbar — position:fixed, 0–32 px, z-index 99999; бургер теми —
   position:fixed, top 11 px, висота 25 px, z-index 101. Тобто центр бургера
   лежить під баром ЗАВЖДИ, а не лише коли пункт «Привіт, …» переноситься
   на другий рядок (32–64 px) на вузьких ширинах.
   Ставимо бургер під бар і по центру хедера (він займає 32–81 px), а z-index
   піднімаємо вище бара — щоб бургер лишався клікабельним і тоді, коли бар
   у два рядки (поріг переносу залежить від набору пунктів користувача,
   тому на ширину не спираємось).
   Діє лише для залогіненого (body.admin-bar) і лише там, де бургер видно
   (тема: .desctop_hide { display:block } до 1140 px). Анонім, 1440 і 390 —
   без змін. */
@media (min-width: 783px) and (max-width: 1140px) {
    body.admin-bar .burger {
        top: 43px;
        z-index: 100000;
    }
}

/* Доробка 09.09.2026 (Задача 2): центрування хіро на планшеті.
   .ko-hero має max-width 1072 px, але без width:96% на 769–1104 px він
   розтягувався на всю ширину #wrap, тоді як решта блоків (.ko-doors тощо)
   лишалися на 96 %. Через це лівий край хіро не збігався з лівим краєм
   решти сторінки. Правило приїхало з Customizer (блок «KO хіро 09.09»)
   у джерело теми; у Customizer його знято. */
@media (min-width: 769px) and (max-width: 1104px) {
    #wrap > .ko-hero { width: 96%; }
}

/* Доробка 09.09.2026: основне зображення новини на самій сторінці новини.
   Вирівнюємо по тій самій сітці, що й абзаци тексту (ліворуч до колонки 1072),
   ширина 640 — та сама, якою редактори вставляють картинки всередину новин,
   і той самий радіус, що в постера мікрокредитної програми. */
.ko-post-poster {
    margin: 0 0 28px;
    margin-left: max(2%, calc((100% - 1072px) / 2));
    max-width: min(640px, 96%);
}
.ko-post-poster img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}