/* Sidebar — matches legacy sidebar.scss aside pattern */

/* Sidebar background */
.sd-sidebar {
}

/* Sidebar widget containers */
.sd-sidebar > div {
    border: 1px solid var(--border-color);
    border-image: linear-gradient(to bottom,var(--border-color) 0%,var(--border-color-gradient) 100%) 1;
    background: linear-gradient(to bottom,var(--alternate-background) 0%,var(--background) 100%);
    box-sizing: border-box;
    color: var(--text-color);
    width: 100%;
}

    .sd-sidebar > div:not(:last-child) {
        margin: 0 0 15px 0;
    }

/* Two-column sidebar on mid-width screens */
@media(min-width:680px) and (max-width:1199px) {
    .sd-sidebar > div {
        width: 49%;
    }
}

@media(min-width:1200px) {
    .sd-sidebar > div {
        width: 100%;
    }
}

/* Widget headings */
.sd-sidebar h3 {
    border-bottom: 1px solid var(--border-color);
    background: var(--accent-color);
    color: var(--accent-color-text);
    display: block;
    font-size: 1rem;
    font-weight: normal;
    margin: 0 0 .5em;
    padding: .285em 0;
    text-align: center;
}

/* Category list in sidebar — cap the widget at a sensible vertical slice
   of the sidebar so expanding many branches doesn't push every following
   sidebar widget off the page. The scrollbar lives on the <ul> (not the
   widget wrapper) so the "Categories" heading stays anchored at the top
   while the rows scroll underneath. */
.sd-sidebar-categories .sd-category-list {
    list-style: none;
    padding: 0 0 0 10px;
    margin: 0;
    text-align: left;
    max-height: 870px;
    overflow-y: auto;
}

    .sd-sidebar-categories .sd-category-list li {
        font-size: .875rem;
        position: relative;
        padding: .25rem 0 .25rem 1em;
    }

        .sd-sidebar-categories .sd-category-list li a {
            color: var(--text-color);
            text-decoration: none;
        }

            .sd-sidebar-categories .sd-category-list li a:hover {
                text-decoration: underline;
            }

.sd-sidebar-categories .sd-category-count {
    color: var(--secondary-text-color);
    font-size: .75rem;
    margin-left: .35em;
}

/* Expand-all / collapse-all control — lives inside the first root <li>
   and is pulled to the right edge of that row. The hosting <li> is
   already `position: relative` (set on every .sd-category-list li above),
   so absolute positioning here anchors to that row's box. Anchored to
   the TOP of the <li>, not vertically centered, because once that root
   is expanded the <li> grows to contain its whole subtree — a centered
   button would drift halfway down the expanded list and stop being
   clickable on the actual root row. Right offset leaves room for the
   scrollbar so the icon isn't covered when the list overflows. */
.sd-sidebar-categories .sd-category-tree-control {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--link-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    line-height: 0;
    position: absolute;
    top: 0;
    right: 4px;
}

    .sd-sidebar-categories .sd-category-tree-control:hover,
    .sd-sidebar-categories .sd-category-tree-control:focus-visible {
        background: rgba(0, 0, 0, .04);
        border-color: rgba(0, 0, 0, .12);
        outline: none;
    }

    /* "Collapse all" state — flip the chevrons-down icon vertically so
       the same SVG serves both states without a second markup block.
       Combined with translateY so the absolute centering still holds. */
    .sd-sidebar-categories .sd-category-tree-control[data-action="collapse-all"] svg {
        transform: scaleY(-1);
    }

/*
 * Collapsible category tree
 * -------------------------
 * The arrow that used to render as a static `li::before` CSS triangle is
 * now an actual <button> (.sd-category-toggle) for nodes that have
 * children, so it can take a click and toggle .sd-expanded. Leaves get a
 * non-interactive <span> with the same arrow so vertical alignment stays
 * consistent across siblings — only the rotation/aria-expanded behavior
 * differs.
 */
.sd-sidebar-categories .sd-category-tree .sd-category-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 0;
    width: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: .65em;
    border-color: transparent var(--link-color);
    border-style: solid;
    border-width: .35em 0 .35em .45em;
    transition: transform 120ms ease;
    transform-origin: .15em 50%;
}

/* Leaf rows can't expand, so the triangle becomes a small dot — same
   slot as the toggle so vertical alignment matches branch siblings,
   but visually distinct so users don't mistake it for a collapsed
   expandable node. */
.sd-sidebar-categories .sd-category-tree .sd-category-toggle--leaf {
    cursor: default;
    pointer-events: none;
    border: 0;
    width: .35em;
    height: .35em;
    background: var(--link-color);
    border-radius: 50%;
    top: .85em;
    left: .05em;
}

.sd-sidebar-categories .sd-category-tree .sd-category-node.sd-expanded > .sd-category-toggle {
    transform: rotate(90deg);
}

/* Hover/focus feedback on the toggle arrow. The triangle is drawn by the
   button's right border, so brightening that border (rather than e.g. the
   button background, which is 0×0) is what the user actually sees. Works
   across every theme without needing a per-theme hover color variable. */
.sd-sidebar-categories .sd-category-tree .sd-category-toggle:not(.sd-category-toggle--leaf):hover,
.sd-sidebar-categories .sd-category-tree .sd-category-toggle:not(.sd-category-toggle--leaf):focus-visible {
    filter: brightness(2);
    outline: none;
}

.sd-sidebar-categories .sd-category-tree .sd-category-children {
    list-style: none;
    margin: .15rem 0 0;
    padding: 0 0 0 .5em;
}

    .sd-sidebar-categories .sd-category-tree .sd-category-children li {
        padding: .2rem 0 .2rem 1em;
    }

/* Active discussions in sidebar */
.sd-sidebar-active-discussions .sd-discussion-list {
    list-style: none;
    padding: 0 0 0 10px;
    margin: 0;
    text-align: left;
}

    .sd-sidebar-active-discussions .sd-discussion-list li {
        font-size: .875rem;
        position: relative;
        padding: .25rem 0 .25rem 1em;
    }

        .sd-sidebar-active-discussions .sd-discussion-list li::before {
            background: var(--link-color);
            border-radius: 50%;
            content: '';
            display: block;
            height: .35em;
            width: .35em;
            position: absolute;
            left: .05em;
            top: .85em;
        }

        .sd-sidebar-active-discussions .sd-discussion-list li a {
            color: var(--text-color);
            text-decoration: none;
            display: block;
            word-wrap: break-word;
            max-width: 300px;
        }

            .sd-sidebar-active-discussions .sd-discussion-list li a:hover {
                text-decoration: underline;
            }

.sd-sidebar-active-discussions .sd-discussion-meta {
    display: block;
    color: var(--secondary-text-color);
    font-size: .75rem;
}

/* Empty state */
.sd-sidebar-empty {
    color: var(--secondary-text-color);
    font-size: .85rem;
    text-align: center;
    padding: .5rem 0;
}

/* Active Discussion Tooltip Previews */
.sd-sidebar-active-discussions .sd-discussion-list li {
    position: relative;
}

.sd-sidebar-discussion__tooltip {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1000;
    width: 280px;
    padding: .75em;
    background: var(--tooltip-background-color);
    border: 1px solid var(--tooltip-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    pointer-events: none;
}

.sd-sidebar-active-discussions .sd-discussion-list li:hover .sd-sidebar-discussion__tooltip {
    display: block;
}

.sd-sidebar-discussion__tooltip-title {
    font-weight: 700;
    font-size: .875rem;
    color: var(--tooltip-highlight-color);
    margin: 0 0 .35em;
    line-height: 1.3;
}

.sd-sidebar-discussion__tooltip-preview {
    font-size: .8rem;
    color: var(--tooltip-color);
    line-height: 1.4;
    margin: 0 0 .5em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-sidebar-discussion__tooltip-meta {
    font-size: .7rem;
    color: var(--tooltip-de-emphasize-color);
    margin: 0;
}

/* Social Media Widget Containers */
.sd-sidebar-discord {
    text-align: center;
    border: none !important;
    border-image: none !important;
}

.sd-sidebar-discord__body {
    padding: .5em .75em .75em;
    text-align: center;
}

.sd-sidebar-discord iframe {
    border: none;
}

    .sd-sidebar-discord a {
        color: var(--link-color);
        text-decoration: none;
    }

        .sd-sidebar-discord a:hover {
            text-decoration: underline;
        }

/* Social Links widget */
.sd-sidebar-social-links__body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: .5em .75em .75em;
    max-width: 250px;
    margin: 0 auto;
}

.sd-sidebar-social-links__body a {
    padding: 2px;
}

.sd-sidebar-social-links__body img {
    display: block;
    height: 32px;
    width: 32px;
}

.sd-sidebar-twitter {
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: .75em;
    min-height: 100px;
    overflow: hidden;
}

.sd-sidebar-newsletter__body {
    padding: .5em .75em .75em;
    text-align: center;
}

.sd-sidebar-newsletter__text {
    font-size: .85rem;
    margin: 0 0 .25em;
    color: var(--text-color);
}

.sd-sidebar-newsletter__btn {
    display: inline-block;
    margin-top: .5em;
    padding: .5em 1.25em;
    font-size: .85rem;
    text-decoration: none;
    background: var(--forumhead-button-background);
    color: var(--accent-color-text);
    border: solid 1px #0d4e8d;
    border-radius: 1px;
    box-shadow: inset 0 0 4px #488ed3;
    cursor: pointer;
    width: 100%;
}

.sd-sidebar-newsletter__btn:hover {
    opacity: .85;
    color: var(--accent-color-text);
    text-decoration: none;
}

    .sd-sidebar-newsletter input[type="email"] {
        width: 100%;
        box-sizing: border-box;
        padding: .4em .5em;
        border: 1px solid var(--border-color);
        font-size: .85rem;
        margin: .5em 0;
    }

    .sd-sidebar-newsletter button {
        background: var(--accent-color);
        color: var(--accent-color-text);
        border: none;
        padding: .4em 1em;
        font-size: .85rem;
        cursor: pointer;
    }

        .sd-sidebar-newsletter button:hover {
            opacity: .9;
        }

.sd-sidebar-event {
    background: linear-gradient(to bottom,var(--alternate-background),var(--background));
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: .75em;
}

.sd-sidebar-event__title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-color);
    margin: 0 0 .25em;
}

.sd-sidebar-event__date {
    font-size: .8rem;
    color: var(--secondary-text-color);
    margin: 0 0 .5em;
}

.sd-sidebar-event__description {
    font-size: .8rem;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
}

/* Twitch widget */
.sd-sidebar-twitch {
    background:var(--background);
    border:1px solid #9146FF;
    border-radius:4px;
    padding:.75em;
    text-align:center;
}
.sd-sidebar-twitch iframe {
    border-radius:3px;
}
.sd-sidebar-twitch a {
    color:#9146FF;
    text-decoration:none;
}
.sd-sidebar-twitch a:hover {
    text-decoration:underline;
}

/* Popular Tags widget */
.sd-sidebar-tags__body {
    padding: .5em .75rem .75rem;
}

.sd-sidebar-tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: .75rem;
    margin: 2px;
    color: var(--link-color);
    text-decoration: none;
}

    .sd-sidebar-tag:visited {
        color: var(--link-color);
    }

    .sd-sidebar-tag:hover {
        background: var(--alternate-background);
        text-decoration: none;
    }

/* Leaderboard widget */
.sd-sidebar-leaderboard {
    padding: .75rem;
}

.sd-sidebar-leaderboard__row {
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: .85rem;
}

    .sd-sidebar-leaderboard__row:last-child {
        border-bottom: none;
    }

.sd-sidebar-leaderboard__name {
    color: var(--text-color);
}

.sd-sidebar-leaderboard__score {
    color: var(--secondary-text-color);
    font-weight: 600;
}

/* Featured Articles widget */
.sd-sidebar-featured {
    padding: .75rem;
}

.sd-sidebar-featured__item {
    margin-bottom: .5rem;
}

    .sd-sidebar-featured__item:last-child {
        margin-bottom: 0;
    }

    .sd-sidebar-featured__item a {
        color: var(--link-color);
        text-decoration: none;
        font-size: .85rem;
    }

        .sd-sidebar-featured__item a:hover {
            text-decoration: underline;
        }