:root {
    --secondary-color: #AAAEB1;
    --dropdown-top-border-color: #383B3D;
    --hover-color: white;
    --active-link-color: white;
    --bg-color: #212529;
    --font-size: 0.9rem;
    --top-nav-link-size: clamp(0.8rem, 1rem, 2rem);
    --font-size-mobile: 150%;
}

.responsive-navbar {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
}

.show-in-small-screen {
    display: none;
}

.nbbi-button {
    margin: 0;
    font-size: var(--top-nav-link-size);
}

.nbbi-wire-nav {
    position: relative;
    font-size: var(--font-size);
    line-height: 1.3;
    height: 100%;
    display: block;
    padding-block: 0.5rem;
    background: var(--bg-color);
}

    .nbbi-wire-nav *,
    .nbbi-wire-nav li {
        box-sizing: border-box;
        list-style: none;
    }

    .nbbi-wire-nav > ul {
        margin: 0;
        padding: 0;
    }

        .nbbi-wire-nav > ul > li {
            position: relative;
        }

    .nbbi-wire-nav a {
        display: block;
        text-decoration: none;
        color: var(--secondary-color);
        margin: 0;
        line-height: 1; /* avoid tall baseline issues */
    }

        .nbbi-wire-nav a:hover,
        .nbbi-wire-nav > ul > .btn-group:hover > ul {
            color: var(--hover-color);
        }

    .nbbi-wire-nav > ul > .btn-group a.active-link {
        color: var(--active-link-color);
        font-weight: bold;
    }

    /*Dropdown parent*/
    .nbbi-wire-nav > ul > .btn-group {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        /* Dropdown Panel */
        .nbbi-wire-nav > ul > .btn-group > ul {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 50 !important;
            background: var(--bg-color);
            transform: translateX(-5rem);
            border-radius: 8px;
            padding: 0.5rem;
     
            border-top: 1px solid var(--dropdown-top-border-color);
        }


.avoid-break-inside {
    break-inside: avoid !important;
}

/* Children Links (Inside Dropdown) */
.nbbi-wire-nav > ul > .btn-group > ul a {
    color: var(--secondary-color);
    font-weight: 400;
    margin-inline-start: 0px;
    padding-inline-start: 0px;
}

    .nbbi-wire-nav > ul > .btn-group > ul a:hover {
        color: white;
    }

/* Section Styling */
.nbbi-wire-nav .section {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--bg-color);
}

ul.col {
    margin-inline-start: 0.6rem;
    padding-inline-start: 0.5rem;
    border-left: 1px solid var(--secondary-color);
}
.dropdown-menu {
    border: 1px solid #525252;
}

ul.dropdown-menu li.dropdown a.dropdown-item {
    padding-block: 0.4rem;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
    border-radius: 0.5rem;
    transition: all 0.05s ease-in-out;
}
/* Second+ levels inside the dropdown */
.col {
    break-inside: avoid;
}

.dropdown-toggle {
    font-size: var(--top-nav-link-size);
}

a.show {
    color: white;
}

@media only screen and (max-width: 800px) {
    .btn-group > a.btn {
        min-width: 100%;
    }
    .multi-col {
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
    }

    .nbbi-wire-nav {
        margin: 0;
        padding: 0;
    }

    .responsive-navbar {
        display: block;
        flex-direction: column;
    }

    .hide-navbar {
        display: none;
    }

    .show-in-small-screen {
        display: flex;
        align-items: center;
        background: var(--bg-color);
        gap: 0.25rem;
        color: white;
        font-size: var(--top-nav-link-size);
    }


    .btn-group {
        padding-block-start: 1rem;
        padding-inline: 0.15rem;
    }

        .btn-group > a {
            flex: 2;
            border: 1px solid var(--secondary-color);
            font-size: var(--font-size-mobile);
            height: 100%;
        }

    .dropdown-toggle {
        max-width: 10%;
        font-size: var(--font-size-mobile);
        border: 1px solid var(--secondary-color);
    }

    a.show {
        background: black;
    }

    .nbbi-wire-nav > ul > li > ul {
        padding: 0;
    }

    .add-second-column {
        column-count: 1;
        column-gap: 32px;
    }

    .nbbi-wire-nav > ul > .btn-group > ul {
        width: 100%;
    }

        .nbbi-wire-nav > ul > .btn-group > ul a {
            font-size: var(--font-size-mobile);
            text-wrap: wrap;
            margin-block: 0.5rem;
        }
}