html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  margin-top: 80px;
}

/* Keep only top-level dropdown headers in navbar gray; preserve blue dropdown-item links */
.navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle,
.navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:hover,
.navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle:focus,
.navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle.show {
    color: var(--bs-navbar-color);
}

/* Keep all top-level navbar links gray */
.navbar-nav > .nav-item > .nav-link {
    color: var(--bs-navbar-color);
}

/* Keep dropdown menu items blue in light mode */
.navbar .dropdown-menu .dropdown-item {
    color: var(--bs-link-color);
}

/* Make dropdown item text white on hover and when active */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active {
    color: white;
}

/* On mobile the navbar is fixed-top, so an expanded dropdown inside the
   collapsed menu can grow taller than the viewport with no way to scroll
   to the rest of the nav items. Make the collapsed menu scroll internally. */
@media (max-width: 575.98px) {
    .navbar-collapse.show {
        /* 100vh is the fallback for browsers without dvh support; on iOS Safari/Chrome
           it measures the viewport as if the address/toolbar were hidden, so it
           overshoots the visible area and the bottom of the menu ends up hidden
           behind the browser's own bottom toolbar. 100dvh tracks the real, currently
           visible viewport and is overridden below where supported. */
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}