/* ───────── базове ───────── */
html, body { margin: 0 !important; overflow-x: hidden; }

/* налаштовувані розміри (можете підкрутити цифри під себе) */
:root{
    --sidebar-width: 19rem;  /* ширша ліва панель */
    --gutter-left: 40px;     /* відстань зліва всередині main (видима) */
    --gutter-right: 10px;    /* відступ справа всередині main */
    --sidebar-pad: 40px;     /* трохи повітря для логотипа/контенту в сайдбарі */
}

/* не обмежуємо контент штучними max-width */
.page, .page-content, .main-content, .content,
.docs-content, .td-content, .td-main { max-width: none !important; }

/* ───────── лівий сайдбар ───────── */
@media (min-width: 50rem){
    .side-bar{
        align-items: flex-start !important;          /* тема ставила flex-end */
        width: var(--sidebar-width) !important;      /* фіксована ширина панелі */
        padding-left: var(--sidebar-pad) !important; /* повітря біля логотипа */
        background: none !important;
    }
    .side-bar .site-header,
    .side-bar .site-title,
    .side-bar .site-logo,
    .side-bar nav, .side-bar nav ul{
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    .side-bar .nav-list .nav-list-item > .nav-list-link{
        padding-left: .5rem !important;
    }
}

/* ───────── основна колонка + пошук ───────── */
@media (min-width: 50rem){
    /* резервуємо місце під сайдбар і ЗАДАЄМО фактичну ширину main,
       щоб справа не лишалося порожнього простору */
    .main{
        margin-left: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* симетричні відступи для заголовка (з пошуком) і основного контенту */
    .main-header,
    .main-content,
    #main-content{
        padding-inline: var(--gutter) !important;  /* лівий = правий */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* пошук не виступає за межі основного контенту */
    .main-header .search,
    .main-header .search-input-wrap{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .main-header input[type="search"]{
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ───────── запобіжники ───────── */
img, video, canvas, svg { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
table { width: 100%; display: block; overflow-x: auto; }

/* якщо десь лишився старий full-bleed клас */
.full-width-content { width: auto !important; margin: 0 !important; max-width: none !important; }

body {
    font-family: 'Inter', sans-serif;
    color: #111117;
}

/* Звичайні посилання */
a {
    color: #473982;           /* або будь-який інший колір */
    text-decoration: none;    /* (опціонально) прибрати підкреслення */
}

/* Посилання при наведенні */
a:hover {
    color: #312759;
    text-decoration: underline; /* (опціонально) повернути підкреслення */
}

/* Брендові кольори */
:root{
    --brand: #473982;       /* основний */
    --brand-hover: #312759; /* ховер/active темніший */
}

/* Узагальнений таргет для типових класів кнопок */
a.btn, .btn, a.button, .button, .cta {
    background: var(--brand) !important;
    background-image: none !important;   /* прибрати градієнт теми */
    border-color: var(--brand) !important;
    color: #fff !important;
}
a.btn:hover, .btn:hover, a.button:hover, .button:hover, .cta:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    color: #fff !important;
}
a.btn:focus, .btn:focus, a.button:focus, .button:focus {
    outline: 2px solid var(--brand-hover);
    outline-offset: 2px;
}

/* Якщо тема має власні стилі, таргетимо контентну область теж */
h1, h2, h3,
.main-content h1, .main-content h2, .main-content h3 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;     /* трохи щільніше, виглядає «важче» */
}
h1, .main-content h1 { font-weight: 700; }
h2, .main-content h2 { font-weight: 700; }
h3, .main-content h3 { font-weight: 600; }  /* або 800, якщо хочеш ще товстіше */

/* За замовчуванням робимо всі зображення у контенті меншими */
.main-content img:not(.no-resize) {
    display: block;
    margin: 12px auto;
    max-width: 75%;   /* було 100%, тепер займає 75% ширини колонки */
    height: auto;
}

/* На мобільних повертаємо повну ширину */
@media (max-width: 768px){
    .main-content img:not(.no-resize){ max-width: 100%; }
}

/* 1) Масштабування тільки для «контентних» зображень, а не для іконок у H1–H3 */
.main-content p > img:not(.no-resize),
.main-content figure > img:not(.no-resize){
    display: block;
    margin: 12px auto;
    max-width: 75%;
    height: auto;
}
@media (max-width: 768px){
    .main-content p > img:not(.no-resize),
    .main-content figure > img:not(.no-resize){ max-width: 100%; }
}

/* 2) Іконки в заголовках — завжди в одному рядку з текстом */
h1 > img.icon, h2 > img.icon, h3 > img.icon{
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 .5rem 0 0;     /* відступ справа від іконки */
    width: 1.6em !important; /* масштабується разом із розміром заголовка */
    height: auto !important;
    float: none !important;  /* на випадок, якщо десь стоїть float */
    border: 0 !important; box-shadow: none !important; background: transparent !important;
}

/* рамка всім картинкам з каталогу readme-assets */
.main-content img[src*="readme-assets/"]{
    box-sizing: border-box;
    border: 1.5px solid #dfe6ed;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.06);
}

/* Більша відстань після заголовків тільки в контенті */
:root{
    --h-mb-lg: 1.25rem; /* H1–H2 */
    --h-mb:    1.0rem;  /* H3 */
    --h-mb-sm: 0.75rem; /* H4–H6 */
}

.main-content h1 { margin-bottom: var(--h-mb-lg) !important; }
.main-content h2 { margin-bottom: var(--h-mb-lg) !important; }
.main-content h3 { margin-bottom: var(--h-mb) !important; }
.main-content h4,
.main-content h5,
.main-content h6 { margin-bottom: var(--h-mb-sm) !important; }

/* На вузьких екранах трохи щільніше */
@media (max-width: 768px){
    .main-content h1,
    .main-content h2 { margin-bottom: 1rem !important; }
}

/* H4 — більше за body, менше за H3; без «бейджа» */
.main-content h4,
.page-content h4,
.markdown h4,
.markdown-body h4,
article h4{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;       /* ≈ 18px — точно не менше за body */
    line-height: 1.4 !important;
    color: #111117 !important;


    /* скинути стиль «бейджа», який ставить тема */
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    margin-top: 1.1rem !important;
    margin-bottom: .7rem !important;
}

/* якщо всередині H4 є span/label, які додають «рамку» — скидаємо їх */
.main-content h4 > span,
.main-content h4 > .label,
.main-content h4 > .badge{
    all: unset;                /* скинути все від теми */
    font: inherit !important;  /* підхопити розмір/вагу H4 */
}

.grid{display:grid;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{
    background:#fff;border:1px solid #e6e8ef;border-radius:16px;
    padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.04)
}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b7280}
.card h3{margin:.25rem 0 0;font-size:20px;line-height:1.2}
.card p{margin:.5rem 0 0;color:#4b5563}
.actions{display:flex;gap:8px;align-items:center;margin-top:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;text-decoration:none}
.btn-primary{background:#5b5bd6;color:#fff}
.btn-primary:hover{background:#4d4dc2}
.btn-secondary{border:1px solid #e6e8ef;color:#111827}
.btn-secondary:hover{background:#f8fafc}
.badge{font-size:11px;border:1px solid #e6e8ef;border-radius:999px;padding:4px 8px;color:#374151}