/* Brand color fixes for dark theme (override Bootstrap's navbar-light defaults) */
.navbar.navbar-light .navbar-brand,
.navbar .navbar-brand {
  color: var(--color-text) !important;                 /* keep light text */
  transition: color .15s ease-in-out;
}

.navbar.navbar-light .navbar-brand:hover,
.navbar.navbar-light .navbar-brand:focus,
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--color-accent) !important;               /* red on hover */
}

/* Optional: when the whole navbar goes "active/hover" red, keep brand red too */
.navbar:hover .navbar-brand,
.navbar:focus-within .navbar-brand {
  color: var(--color-accent) !important;
}

/* Keep visited state from turning weird */
.navbar .navbar-brand:visited {
  color: var(--color-text) !important;
}

/* Make the mobile toggler icon readable on dark backgrounds */
.navbar-light .navbar-toggler {
  border-color: var(--color-border);
}
.navbar-light .navbar-toggler-icon {
  background-image: linear-gradient(
    to bottom,
    var(--color-text) 0%,
    var(--color-text) 20%,
    transparent 20%,
    transparent 40%,
    var(--color-text) 40%,
    var(--color-text) 60%,
    transparent 60%,
    transparent 80%,
    var(--color-text) 80%,
    var(--color-text) 100%
  ) !important;
}