/*
 * Mobile bottom quick-nav (#mobile-bottom-nav in fragments/nav.html).
 * The bar itself is shown only below the Bootstrap `lg` breakpoint via `d-lg-none`; this file
 * adds the content offset so the fixed bar never hides page content, plus item colouring and the
 * active-item highlight. Desktop (>=992px) is unaffected.
 */
@media (max-width: 991.98px) {
  /* Clear the fixed bar so the last content / toasts are not hidden behind it. */
  body {
    padding-bottom: 4rem;
  }
}

#mobile-bottom-nav .mobile-bottom-nav__link {
  color: var(--bs-secondary-color);
  line-height: 1.1;
}

#mobile-bottom-nav .mobile-bottom-nav__link.active {
  color: var(--bs-primary);
  font-weight: 600;
}

/* Prominence: lift the bar off the page so it reads as a dedicated action surface. Theme-aware —
   a black drop-shadow is invisible on a dark page, so dark mode elevates the surface + border and
   uses a stronger upward shadow. Shadow offset is negative-Y (upward) because the bar is fixed to
   the bottom; a downward shadow would render off-screen. The nav element carries no Bootstrap
   `bg-*` utility (removed in nav.html), so this owns the background with no !important. */
#mobile-bottom-nav {
  background-color: rgb(236, 245, 255);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}
[data-bs-theme="dark"] #mobile-bottom-nav {
  background-color: var(--bs-secondary-bg);
  border-top-color: var(--bs-border-color);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}