/* Blog navbar contrast — loaded only by blog_app/blog_home.html and
   blog_detail.html, which paint the shared marketing navbar dark navy.
   The navbar's own colours are built for a white bar (links #0c4a6e measured
   1.58:1 on the navy); these restore readable light-on-dark text. The
   !important flags match the theme/navbar rules being overridden. */

/* Top-level menu links (desktop row; phones use the side drawer). */
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a {
  color: rgba(255, 255, 255, .92) !important;
  text-decoration: none !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a:hover,
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a:focus-visible,
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li.active > a,
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a[aria-current="page"] {
  color: #5eead4 !important;  /* teal-300: 10:1 on the navy, matches the active bar */
}
/* Inline icons follow the link colour. */
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a i,
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a svg { color: inherit !important; }

/* Dropdown carets: the theme draws them with a Font Awesome 5 Pro glyph that
   never loads here (it rendered as an empty box). Draw a CSS chevron instead. */
nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li.dropdown > a::after {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-style: solid !important;     /* the theme zeroes caret borders with !important */
  border-color: currentColor !important;
  border-width: 0 1.5px 1.5px 0 !important;
  vertical-align: middle;
  transform: translateY(-3px) rotate(45deg);
  opacity: .8;
}

/* The logo is dark artwork; give it a white plate so it reads on the navy.
   On the link, not the <img>: the image has a fixed height, so padding on it
   squeezed the artwork. */
nav.navbar-fixed.dark .navbar-brand {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* The drawer (z-index 1045) opened underneath the fixed navbar (9999), which
   covered its header and close button. Lift it above the bar. */
#mobileNav.offcanvas { z-index: 10001 !important; }

/* Phone menu button: its three bars carry an inline #0369a1 background. */
nav.navbar-fixed.dark .navbar-brand img { max-width: none !important; }  /* else 100% of a shrink-wrapped link = 0px */

nav.navbar-fixed.dark button[data-bs-target="#mobileNav"] span { background: #ffffff !important; }

/* "Sign in" outline button: white text and border on the navy. */
nav.navbar.validnavs.navbar-fixed.dark .attr-right .btn.btn-outline-secondary {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .65) !important;
  background: transparent !important;
}
nav.navbar.validnavs.navbar-fixed.dark .attr-right .btn.btn-outline-secondary:hover,
nav.navbar.validnavs.navbar-fixed.dark .attr-right .btn.btn-outline-secondary:focus-visible {
  color: #03112d !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Fit the row. The logo used to be squeezed to 0-40px wide so the links fitted;
   with the logo visible, tighten spacing as the viewport narrows so nothing
   runs off the right edge (it already overflowed below 1280px before). */
nav.navbar-fixed.dark .navbar-brand img { height: 60px !important; }
@media (max-width: 1599.98px) {
  nav.navbar-fixed.dark #navbar-menu > ul.navbar-nav > li > a { padding-left: 9px !important; padding-right: 9px !important; }
}
/* Between the phone breakpoint and 1440px the full row cannot fit (it needs
   ~1400px), so blog pages switch to the phone menu: hide the link row and the
   sign-in buttons, show the ☰ button, and let its off-canvas drawer (which
   carries every link and both buttons) open at these widths too. */
@media (min-width: 992px) and (max-width: 1439.98px) {
  nav.navbar-fixed.dark #navbar-menu,
  nav.navbar-fixed.dark .attr-right { display: none !important; }
  nav.navbar-fixed.dark button[data-bs-target="#mobileNav"] { display: block !important; }
  #mobileNav.offcanvas { display: flex !important; }
}

/* Sticky menu. The theme's sticky script does not engage on the blog, so the
   bar scrolled away. The <nav> cannot stick by itself (its <header> parent is
   exactly its height), so the header sticks; it is a direct child of <body>
   with no overflow clipping. scroll-padding keeps in-page jumps (#comments,
   headings) from landing underneath it. */
body > header:has(> nav.navbar-fixed.dark) {
  position: sticky;
  top: 0;
  z-index: 9999;
}
body > header:has(> nav.navbar-fixed.dark) > nav.navbar-fixed.dark {
  box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
html:has(body > header > nav.navbar-fixed.dark) { scroll-padding-top: 96px; }