/* ---------- Layout tweaks (desktop only) ---------- */
@media (min-width: 992px) {
    .row--tight.g-lg-0 {
        --bs-gutter-x: 0;
    }
    /* zero gutters on lg+ */
    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 10px !important;
    }
    .px-lg-3 {
        padding-left: 10px !important;
        padding-right: 0px !important;
        z-index:0;
    }
    .mx-lg-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ---------- Comfortable surface + standard shadow ---------- */
:root {
    --sb-surface: #ffffff;
    --sb-surface-soft: #f7f9fb;
    --sb-border: rgba(0,0,0,.06);
    --sb-shadow: 0 6px 22px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
    --sb-shadow-sm: 0 2px 10px rgba(0,0,0,.06);
    --sb-accent: #0d6efd; /* fallback to Bootstrap primary */
}

.surface {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: .75rem;
    box-shadow: var(--sb-shadow);
}

/* Main CMS content box (optional, if you want a soft bg behind text) */
.cms-surface {
    background: var(--sb-surface-soft);
    border: 1px solid var(--sb-border);
    border-radius: .5rem;
    padding: 1.25rem;
    box-shadow: var(--sb-shadow-sm);
}

/* ---------- Sidebar: sticky card + hover effects ---------- */
.category-sidebar {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: .75rem;
    box-shadow: var(--sb-shadow);
}

.category-subtree .card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.category-subtree .list-unstyled > li > a {
    display: block;
    padding: .4rem .5rem;
    border-radius: .5rem;
    transition: background-color .15s ease, color .15s ease, transform .06s ease;
}

    .category-subtree .list-unstyled > li > a:hover,
    .category-subtree .list-unstyled > li > a:focus {
        background: rgba(13,110,253,.08); /* uses --sb-accent tint */
        color: #0a58ca;
        text-decoration: none;
        transform: translateX(2px);
    }

/* deeper nodes */
.category-subtree ul li > a {
    padding: .35rem .5rem;
    border-radius: .5rem;
}

.category-subtree i.bi {
    opacity: .75;
    margin-right: .25rem;
}

/* ---------- Content overflow safety ---------- */
.prose, .content, .cms-body {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .prose img, .content img, .cms-body img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .prose table, .content table, .cms-body table {
        width: 100%;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
    }

    .prose iframe, .content iframe, .cms-body iframe {
        width: 100% !important;
        max-width: 100% !important;
    }