/* ==========================================================================
   buddybet-ukraine.net.ua — типографіка статті поверх захопленої теми.

   Підключається ОСТАННІМ, після override.css. Кожне правило нижче закриває
   дефект, зміряний на рендері через getComputedStyle, а не підібраний на око:

   1. H1 внутрішніх сторінок: тема дає color:var(--surface_default) = #fff
      на білій картці (._2HaG4y1pNTy4M55l9CQ0YP{background:var(--surface_default)})
      -> білий по білому, заголовок не видно взагалі.
   2. Той самий H1 стоїть під text-transform:uppercase. Під короткий підпис
      оригіналу («Правила та умови») це виглядало дизайном, але наш H1 несе
      ключ, і капс читається як його виділення.
   3. H1 головної тема рендерить як 12px/400 — це стиль підпису згорнутої
      панелі, а не заголовка сторінки.
   4. Уся стаття (і на головній, і на внутрішніх) — 12px/16px.
   5. <img> у статті мали width:1200px і max-width:none -> горизонтальне
      переповнення на мобільному.
   6. Посилання в статті успадковували #2f8fc7 (--text-outcome, службовий
      колір коефіцієнтів), а не колір бренду.

   Палітра — з логотипу бренду (images/logo.svg, fill="#F2FF00") і токенів
   теми: акцент #e1f038, темна поверхня #292621 / #171716. На білій картці
   лаймовий акцент не може бути текстом (контраст ~1.1:1), тому він працює
   як плашка/лінійка, а текстові посилання беруть затемнений зелений із тієї
   ж родини, що й --text-link:#00d68f.
   ========================================================================== */

:root {
    --bb-accent: #e1f040;
    --bb-accent-ink: #2a2c07;
    --bb-dark: #292621;
    --bb-darker: #171716;
    --bb-ink: #1c1a17;
    --bb-body: #3b3730;
    --bb-muted: #6c665b;
    --bb-link: #0b6b46;
    --bb-link-hover: #085138;
    --bb-rule: #e3e0d9;
    --bb-note-bg: #fbfbf6;
}

/* --- 1+2. H1 внутрішньої сторінки ---------------------------------------
   Зміряно ланцюжком предків: H1 лежить НЕ на білій картці статті, а в лівій
   темній колонці (.eY5RKCoZlIBKT970SJ-sR, background:var(--primary)=#000).
   Тобто світлий колір заголовка — задум теми, і чіпати його не треба:
   темний H1 тут дав би контраст 1.21:1. Прибираємо рівно те, що ламається, —
   капс, який на короткому підписі оригіналу виглядав дизайном, а на нашому
   H1 з ключем читається як його виділення.
   Колонку зводимо з #000 до брендового #171716 (той самий, що в хедері
   й нижньому таб-барі), щоб темні поверхні сайту не розходились. */
.eY5RKCoZlIBKT970SJ-sR {
    background-color: var(--bb-darker);
}

h1._1H4-SuwGhIPTiVJ_rffcTc.bb-h1 {
    color: #faf9f8;
    text-transform: none;
    font-weight: 700;
    letter-spacing: -0.01em;
    max-width: 100%;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--bb-accent);
}

/* --- 3. H1 головної в шапці SEO-панелі ---------------------------------- */
.seo-kit_styles_header-FBHurWWWzocPX-G_ h1.bb-h1,
h1.seo-kit_styles_title-28vkPXIstrkdW9P8.bb-h1 {
    color: var(--bb-ink);
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: none;
    padding: 8px 0;
}

@media (max-width: 767px) {
    .seo-kit_styles_header-FBHurWWWzocPX-G_ h1.bb-h1,
    h1.seo-kit_styles_title-28vkPXIstrkdW9P8.bb-h1 {
        font-size: 21px;
    }
    h1._1H4-SuwGhIPTiVJ_rffcTc.bb-h1 {
        font-size: 22px;
        line-height: 30px;
    }
}

/* --- 4. Тіло статті ------------------------------------------------------ */
.bb-article {
    color: var(--bb-body);
    font-size: 16px;
    line-height: 1.65;
}

.bb-article p,
.bb-article li,
.bb-article td,
.bb-article th {
    font-size: 16px;
    line-height: 1.65;
}

.bb-article > p {
    margin: 0 0 14px;
}

.bb-article h2,
.bb-article h3 {
    color: var(--bb-ink);
    text-transform: none;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bb-article h2 {
    font-size: 23px;
    line-height: 1.3;
    margin: 34px 0 12px;
    padding-left: 12px;
    border-left: 4px solid var(--bb-accent);
}

.bb-article h3 {
    font-size: 18px;
    line-height: 1.35;
    margin: 24px 0 8px;
}

@media (max-width: 767px) {
    .bb-article,
    .bb-article p,
    .bb-article li,
    .bb-article td,
    .bb-article th {
        font-size: 15px;
    }
    .bb-article h2 { font-size: 20px; }
    .bb-article h3 { font-size: 17px; }
}

/* --- списки -------------------------------------------------------------- */
.bb-article ul,
.bb-article ol {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style-position: outside;
}

.bb-article li {
    margin: 0 0 7px;
}

.bb-article ul > li::marker { color: var(--bb-accent-ink); }
.bb-article ol > li::marker { color: var(--bb-accent-ink); font-weight: 700; }

/* --- таблиці ------------------------------------------------------------- */
.bb-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    background: #fff;
}

.bb-article th,
.bb-article td {
    border: 1px solid var(--bb-rule);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.bb-article th {
    background: var(--bb-dark);
    color: #fff;
    font-weight: 600;
}

.bb-article tr:nth-child(even) td {
    background: #faf9f6;
}

/* Широка таблиця скролиться всередині свого контейнера, а не рве сторінку */
.bb-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .bb-article table { display: table; }
}

/* --- 5. зображення ------------------------------------------------------- */
.bb-article .bb-figure {
    margin: 20px 0 22px;
}

.bb-article .bb-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --- 6. посилання -------------------------------------------------------- */
.bb-article a,
.seo-kit_styles_content-3sWFcZ5Dz3tCOtRY .bb-article a {
    color: var(--bb-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.bb-article a:hover {
    color: var(--bb-link-hover);
    text-decoration-thickness: 2px;
}

/* --- міні-блоки «Важливо знати» / «Примітка» (вимога ТЗ) ----------------- */
.bb-article p.bb-note {
    background: var(--bb-note-bg);
    border: 1px solid var(--bb-rule);
    border-left: 4px solid var(--bb-accent);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 0 18px;
}

.bb-article p.bb-note strong { color: var(--bb-ink); }

/* --- редакційний підпис і джерела ---------------------------------------- */
.bb-article .bb-eeat {
    margin: 28px 0 8px;
    padding: 14px 16px;
    border: 1px solid var(--bb-rule);
    border-radius: 10px;
    background: #fff;
}

.bb-article .bb-eeat p {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--bb-muted);
}

.bb-article .bb-eeat p:last-child { margin-bottom: 0; }
.bb-article .bb-eeat strong { color: var(--bb-ink); }

/* --- SEO-панель головної: прибрати службове обмеження висоти ------------- */
.seo-kit_styles_content-3sWFcZ5Dz3tCOtRY {
    font-size: 16px;
    color: var(--bb-body);
    padding: 4px 12px 20px;
}

.seo-kit_styles_content-wrapper-3z4tPvrXWDqQskP8 {
    max-height: none;
    overflow: visible;
}

/* Без JS панель має лишатись розкритою: інакше при збої скрипта весь текст
   зникає і для читача, і для краулера. */
.seo-kit_styles_wrapper-2J7LW3IKpKWOJnCg:not(.seo-kit_styles_is-expanded-13M1v_ZPc7kaB01S)
.seo-kit_styles_content-3sWFcZ5Dz3tCOtRY {
    position: static;
    height: auto;
    width: auto;
    clip: auto;
    white-space: normal;
    overflow: visible;
}

/* --- горизонтального переповнення бути не має ---------------------------- */
.bb-article pre,
.bb-article code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Верхнє меню несе вісім тематичних сторінок кластера. Тема показує його лише
   ширше за 1280px (.header-nav{display:none} у @media max-width:1280), а сам
   контейнер має overflow:hidden — тому на 1281–1400px останній пункт
   («Дзеркало») зрізало на кілька пікселів. Зміряно: пунктам треба 803px,
   доступно 800. Підтискаємо відступи іконок саме в цьому діапазоні —
   нічого не ховаємо й не викидаємо. */
@media (min-width: 1281px) and (max-width: 1400px) {
    .header-nav .modulor_header-item__icon__1_28_2 {
        margin: 8px 4px;
    }
    .header-nav .modulor_header-item__container__1_28_2 {
        margin-left: 4px;
    }
    .header-nav .modulor_header-item__container__1_28_2:first-child {
        margin-left: 12px;
    }
}

/* Шапка на 375px: зміряно 174 (ліва частина) + 16 (gap) + 232 (кнопки) = 422
   при вікні 375 -> сторінка їде вбік. Дефект самого захопленого шаблону:
   те саме значення виходить і з вимкненим brand.css. Нічого не прибираємо —
   тільки стискаємо відступи й даємо блокам право звужуватись. */
@media (max-width: 767px) {
    .modulor_header2__header__1_28_2 {
        gap: 8px;
        padding-inline: 8px;
    }

    .modulor_header2__left__1_28_2,
    .modulor_header2__right__1_28_2 {
        min-width: 0;
        gap: 6px;
    }

    .modulor_header2__left__1_28_2 .modulor_image__container__1_28_2 {
        width: 84px !important;
    }

    .modulor_header2__right__1_28_2 .modulor_button__button__1_28_2 {
        padding-inline: 10px;
        white-space: nowrap;
    }
}
/* Після цього зміряно: ліва частина 120 + права 224, правий край 367 при
   вікні 375 — влазить, і жоден пункт шапки прибирати не довелось.
   overflow-x:hidden свідомо НЕ ставимо: він ховає переповнення, а не лікує. */