/* =============================================================================
   BootHack Aside Module: Sidebar Styles
============================================================================= */

/* =============================================================================
   1. NATIVE WP LISTS (Recent Posts, Categories, etc.)
   Instead of using PHP str_replace to inject Bootstrap classes, we use CSS
   to mimic the .list-group-flush appearance for all native WordPress widgets.
============================================================================= */

.bh-sidebar .widget ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.bh-sidebar .widget ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pico-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.125)));
}

/* Remove the bottom border and padding from the very last item in the list */
.bh-sidebar .widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bh-sidebar .widget ul li a {
    text-decoration: none;
    /*
     * Do not use var(--pico-color) on anchors — Pico v2 sets
     * --pico-color: var(--pico-primary) on :where(a:not([role=button])).
     */
    color: var(--bs-body-color, var(--bh-body-color, inherit));
    transition: color 0.2s ease;
}

.bh-sidebar .widget ul li a:hover {
    color: var(--bh-content-link-color, var(--pico-primary, var(--bs-primary)));
}

/* Safely handle nested lists (e.g., child categories) without double-borders */
.bh-sidebar .widget ul ul {
    padding-left: 1rem;
    margin-top: 0.5rem;
}

.bh-sidebar .widget ul ul li {
    border-bottom: none;
    padding: 0.25rem 0;
}


/* =============================================================================
   2. NATIVE WP DROPDOWNS (Categories, Archives)
   Prevents long option names from breaking the select box out of the card container,
   and applies native Bootstrap 5 .form-select styling safely without PHP edits.
============================================================================= */

.bh-sidebar .widget select {
    display: block;
    width: 100%;
    max-width: 100%;
    
    /* Ensure long text truncates gracefully before hitting the dropdown caret */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    /* Mimic Bootstrap 5 form-control padding to match the Search widget */
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pico-color, var(--bs-body-color, inherit));
    background-color: var(--pico-background-color, var(--bs-body-bg, #fff));
    background-clip: padding-box;
    border: 1px solid var(--pico-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
    border-radius: var(--bs-border-radius, 0.375rem);
}

/* Match Bootstrap's focus state for accessibility and visual consistency */
.bh-sidebar .widget select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/*
 * Links outside classic list markup (calendar nav, block widgets, etc.).
 * `.widget ul li a` above stays more specific for list rows. When this
 * stylesheet loads after a framework bridge, Pico tokens still win over
 * a static `--bs-body-color` so dark mode sidebars stay legible.
 */
.bh-sidebar .widget a {
    color: var(--bs-body-color, var(--bh-body-color, inherit));
    text-decoration: none;
}

.bh-sidebar .widget a:hover,
.bh-sidebar .widget a:focus {
    color: var(--bh-content-link-color, var(--pico-primary, var(--bs-primary)));
}