/* Same title band as the other pages (Blog, Plans, ...) but with a solid brand color
   instead of a header image. */
.docs-title {
    background-color: #0096FA;
    padding: 2.5rem 2rem;
}

    .docs-title h1 {
        margin: 0;
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-shadow: 2px 2px rgba(0, 0, 0, 0.7);
    }

.docs-container {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1.5rem 2rem 3rem;
}

.docs-nav {
    flex: 0 0 230px;
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e4e4e4;
    padding-right: 1rem;
    font-size: 0.95rem;
}

    .docs-nav .docs-nav-checkbox,
    .docs-nav .docs-nav-toggle {
        display: none;
    }

    .docs-nav .docs-nav-links {
        display: flex;
        flex-direction: column;
    }

    .docs-nav .docs-search {
        margin-bottom: 0.8rem;
    }

        .docs-nav .docs-search input {
            width: 100%;
            padding: 0.4rem 0.6rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: inherit;
            font-size: 0.95rem;
        }

            .docs-nav .docs-search input:focus {
                outline: none;
                border-color: #0096FA;
            }

    .docs-nav a {
        text-decoration: none;
        padding: 0.3rem 0.5rem;
        border-radius: 4px;
        color: #333;
    }

        .docs-nav a:hover {
            background-color: #f0f7fc;
        }

        .docs-nav a.selected {
            background-color: #e2f1fb;
            color: #0076c8;
            font-weight: 700;
        }

    .docs-nav .docs-nav-header {
        margin-top: 1rem;
        padding: 0 0.5rem 0.2rem;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        color: #888;
    }

.docs-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    line-height: 1.6;
}

    .docs-content > h2:first-child {
        margin-top: 0;
    }

    .docs-content h2 {
        margin-top: 2rem;
        padding-bottom: 0.3rem;
        border-bottom: 1px solid #e4e4e4;
        font-size: 1.5rem;
    }

    .docs-content h3 {
        margin-top: 1.5rem;
        font-size: 1.2rem;
    }

    .docs-content a {
        color: #0076c8;
    }

    .docs-content img {
        max-width: 100%;
        height: auto;
    }

    /* Screenshots — inline icon images stay inline, larger images get a frame */
    .docs-content p > img:only-child {
        display: block;
        margin: 1rem 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.08) 0 2px 6px;
    }

    .docs-content table {
        border-collapse: collapse;
        margin: 1rem 0;
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }

    .docs-content th,
    .docs-content td {
        border: 1px solid #ddd;
        padding: 0.4rem 0.8rem;
        text-align: left;
    }

    .docs-content th {
        background-color: #f5f5f5;
    }

    .docs-content code {
        background-color: #f5f5f5;
        border-radius: 3px;
        padding: 0.1rem 0.3rem;
    }

    .docs-content blockquote {
        margin: 1rem 0;
        padding: 0.5rem 1rem;
        border-left: 4px solid #0096FA;
        background-color: #f0f7fc;
    }

        .docs-content blockquote p {
            margin: 0.3rem 0;
        }

.docs-search-count {
    color: #666;
}

.docs-search-result {
    margin-bottom: 1.5rem;
}

    .docs-search-result h3 {
        margin: 0 0 0.3rem;
    }

    .docs-search-result p {
        margin: 0;
        color: #444;
    }

    .docs-search-result mark {
        background-color: #ffe89e;
        border-radius: 2px;
    }

@media (max-width: 800px) {
    .docs-title {
        padding: 1.5rem 1rem;
    }

        .docs-title h1 {
            font-size: 24px;
        }

    .docs-container {
        flex-direction: column;
        padding: 1rem;
    }

    .docs-nav {
        position: static;
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e4e4e4;
        padding: 0 0 1rem;
    }

        /* Collapse the link list behind a "Съдържание" toggle so the content
           starts right below the search box. */
        .docs-nav .docs-nav-toggle {
            display: block;
            padding: 0.4rem 0.6rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
        }

            .docs-nav .docs-nav-toggle::before {
                content: "▸ ";
            }

        .docs-nav .docs-nav-checkbox:checked ~ .docs-nav-toggle::before {
            content: "▾ ";
        }

        .docs-nav .docs-nav-links {
            display: none;
            margin-top: 0.5rem;
        }

        .docs-nav .docs-nav-checkbox:checked ~ .docs-nav-links {
            display: flex;
        }
}