/* ===== Help page (scoped) ===== */
html {
    scroll-behavior: smooth;
}

:root {
    --header-height: 0px;
}

/* override-ни глобално, ако имаш фиксиран header */

.help-page {
    font-size: 0.95rem;
    color: var(--txt);
    padding: 12px;
}

/* Важно: да не режем overflow нагоре по веригата */
.help-page, .card-base, .help-layout {
    overflow: visible;
}

.help-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
}

@media (max-width: 980px) {
    .help-layout {
        grid-template-columns: 1fr;
    }
}

/* TOC: grid item, който ще съдържа вътрешния „лепкав“ блок */
.help-toc {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    align-self: start; /* важно при grid */
    position: relative; /* за да работи .is-bottom (absolute) */
    height: auto; /* JS ще синхронизира височината с .help-main */
}

/* Истинското съдържание на TOC, което лепим/фиксираме */
.help-toc-sticky {
    position: sticky; /* първо пробваме чист CSS sticky */
    top: calc(var(--header-height, 0px) + 10px);
    max-height: calc(100svh - var(--header-height, 0px) - 20px);
    overflow: auto;
}

/* Fallback: когато sticky е блокиран -> фиксираме */
.help-toc-sticky.is-fixed {
    position: fixed;
    top: calc(var(--header-height, 0px) + 10px);
    left: var(--toc-left, 12px);
    width: var(--toc-width, 280px);
    max-height: calc(100svh - var(--header-height, 0px) - 20px);
    overflow: auto;
    z-index: 20;
}

/* Край на колоната: закрепяме го за дъното на aside (симулираме sticky края) */
.help-toc-sticky.is-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto; /* по ширината на aside */
    max-height: none;
    overflow: auto;
}

/* Търсачка / елементи в TOC */
.help-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.help-input {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
}

.help-input:focus {
    outline: none;
    border-color: hsl(var(--p-h) 60% 55%);
    box-shadow: 0 0 0 3px hsl(var(--p-h) 90% 85% / .7);
}

.help-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #c00;
    text-decoration: none;
}

.toc-title {
    font-weight: 800;
    margin: 4px 0 6px;
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.toc-list a {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--txt);
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}

.toc-list a:hover {
    background: hsl(var(--p-h) var(--p-s) 96%);
    border-color: hsl(var(--p-h) 50% 60%);
}

.toc-empty {
    color: var(--txt-dim);
    font-style: italic;
}

/* Активният линк (scrollspy) */
.toc-list a.is-active {
    background: hsl(var(--p-h) var(--p-s) 96%);
    border-color: hsl(var(--p-h) 50% 60%);
    font-weight: 700;
}

/* Main */
.help-main {
    display: grid;
    gap: 14px;
}

.help-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    scroll-margin-top: calc(var(--header-height, 0px) + 14px); /* да не влиза под фиксирания header */
}

.help-h2 {
    margin: 0 0 8px;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--txt);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.help-body {
    color: var(--txt);
    line-height: 1.55;
}

.help-body h3 {
    margin-top: 14px;
    font-size: 1.05rem;
}

.help-body p {
    margin: 8px 0;
}

.help-body ul, .help-body ol {
    margin: 8px 0 8px 18px;
}

.help-updated {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--txt-dim);
}

/* Separator над списъка с книги (ако е на същата страница) */
.help-section + .catalog-list {
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

.card-base h3 {
    text-align: left !important;
}

/* Мобилно: без лепнене */
@media (max-width: 980px) {
    .help-toc-sticky,
    .help-toc-sticky.is-fixed,
    .help-toc-sticky.is-bottom {
        position: static;
        max-height: none;
        overflow: visible;
        left: auto;
        width: auto;
    }

    .help-toc {
        height: auto !important;
    }
}


/* ===== Help page — anti-overflow & tiny-screen fixes ===== */

/* Критично: позволи свиване на grid контейнера и колоните */
.help-layout,
.help-toc,
.help-main,
.help-toc-sticky {
    min-width: 0;
    box-sizing: border-box;
}

/* Текст/линкове да могат да се пренасят; дълги URL-и да не чупят картата */
.help-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Медии вътре в съдържанието – никога над 100% от картата */
.help-body img,
.help-body video,
.help-body svg,
.help-body canvas,
.help-body iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Таблици – хор. скрол вътре, а не извън картата */
.help-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse; /* по избор */
}

/* Код блокове – скрол вътре, без да разтягат ширината */
.help-body pre {
    max-width: 100%;
    overflow: auto;
    white-space: pre; /* пази формат; wrap не е нужно */
}

.help-body code {
    word-break: normal;
}

/* TOC: линкове с много дълъг текст да се пренасят вместо да бутат */
.toc-list a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Търсачката в TOC – стабилен layout на тесно */
.help-search {
    display: grid;
    grid-template-columns: 1fr auto; /* инпут | бутон X */
    gap: 6px;
}

.help-input {
    min-width: 0;
    box-sizing: border-box;
}

.help-clear {
    flex: 0 0 auto;
}

/* Под 480px – дребни уплътнявания, без промяна на визията */
@media (max-width: 480px) {
    .help-page {
        padding: 10px;
    }

    .help-toc,
    .help-section {
        padding: 10px;
    }

    /* ако някои секции имат огромни заглавия/думи */
    .help-h2 {
        overflow-wrap: anywhere;
    }
}


.help-body p[class^="MsoListParagraph"],
.help-body p[class*=" MsoListParagraph"],
.help-body p[class^="MsoListParagraph"] span,
.help-body p[class*=" MsoListParagraph"] span {
    text-indent: 0 !important;
}