/* The nav sits on a dark blue, so every colour Bootstrap puts in it has to be
   overridden. Bootstrap 5.3 derives them from --bs-emphasis-color, which is
   near-black on a light theme.

   These are set as Bootstrap's own custom properties rather than as colour
   declarations on .nav-link, because a plain `.nav-link { color: #fff }` is
   0,1,0 and loses to 5.3's `.navbar-nav .nav-link.active` at 0,3,0 - so the
   link for the current page, the one that most needs to read, was the one
   left dark on the blue. Under 5.1.3 that rule was gated behind
   .navbar-light / .navbar-dark, neither of which this nav carries, so it
   never applied and the plain override was enough.

   Going through the variables wins on the element itself and covers the base,
   hover, active and disabled states together, plus the brand and the collapse
   toggler, whose icon takes its stroke colour from --bs-navbar-color. */
#navbar {
    background-color: #1e5799;

    --bs-navbar-color: rgba(255, 255, 255, .75);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, .4);
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .3);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    /* .container's gutter, so the brand lines up with the page content in
       <main> rather than merely clearing the window edge. */
    --bs-navbar-padding-x: .75rem;
}

/* Active and hover are both white now, so the current page needs something
   other than colour to mark it. */
#navbar .nav-link.active {
    text-decoration: underline;
}

#navbar .nav-link:focus,
#navbar .nav-link:hover {
    text-decoration: underline;
}

/* "Signed in as ..." in the nav is .text-body-secondary, a grey meant for a
   light background. Bootstrap's utilities carry !important, so overriding one
   needs !important too. */
#navbar .text-body-secondary {
    color: rgba(255, 255, 255, .75) !important;
}