/* Make the navbar background exactly match the card background.
   We override Bootstrap's bg utilities and set the navbar bg variable
   so the theme can't revert it. */

:root {
    /* Fallback if --bs-card-bg isn't set by the theme. */
    --navbar-bg: var(--bs-card-bg, #2b2b2b);
}

/* High-specificity targets to beat .bg-dark / .navbar-dark combos used by Quarto. */
header#quarto-header,
header#quarto-header .navbar,
#quarto-header>nav.navbar,
.navbar,
.navbar.bg-dark,
.navbar.navbar-dark,
.navbar.navbar-dark.bg-dark,
.quarto-navbar {
    --bs-navbar-bg: var(--navbar-bg);
    --bs-bg-opacity: 1;
    background-color: var(--bs-navbar-bg) !important;
    background-image: none !important;
    box-shadow: none;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Keep link colors readable and consistent. */
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: var(--bs-body-color) !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-brand:hover {
    color: var(--bs-primary) !important;
}

/* Toggler & dropdowns on the same surface. */
.navbar .navbar-toggler {
    border-color: var(--bs-border-color-translucent);
}

.navbar .dropdown-menu {
    background-color: var(--navbar-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color-translucent);
}

.navbar .dropdown-item {
    color: var(--bs-body-color);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--bs-primary);
    background-color: transparent;
}