/* Site navigation bar, restyled for the Bulma blog pages.
 *
 * The homepage bar is navy (#002D72), fixed to the viewport and set in
 * Crimson Pro. Dropped unchanged onto a post it reads as a slab from a
 * different site, cutting across Bulma's white/grey surfaces.
 *
 * This overrides assets/css/nav.css (loaded first) with a light, static
 * bar in Bulma's own palette:
 *   background  #fafafa   between Bulma's $white-bis and $white-ter
 *   border      #ededed   the hairline Bulma uses under a navbar
 *   text        #4a4a4a   Bulma $text
 *   hover       #3273dc   Bulma $link
 *   height      3.25rem   Bulma $navbar-height
 * and in Google Sans, the face the blog's headings already use.
 *
 * It stays static rather than fixed, matching the Bulma navbar the
 * standalone pages had, so the hero below it is never overlapped.
 *
 * The horizontal padding is inherited from nav.css and already resolves
 * to the same 960px column as Bulma's .container.is-max-desktop, so the
 * logo lines up with the post title without further adjustment.
 */

.topnav {
  position: static;
  background-color: #fafafa;
  border-bottom: 1px solid #ededed;
  min-height: 3.25rem;
  font-family: "Google Sans", "Noto Sans", sans-serif;
}

.topnav a.normal {
  color: #4a4a4a;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.topnav a.normal:hover {
  background-color: #f0f0f0;
  color: #3273dc;
}

.topnav a:focus-visible,
.topnav button:focus-visible {
  outline: 2px solid #3273dc;
  outline-offset: 2px;
}

/* The logo is a red wordmark sized for the navy bar. On a light
   background it needs no recolouring, only the same crop the homepage
   applies via overflow:hidden. */
.topnav .icon {
  color: #4a4a4a;
}

@media print, screen and (max-width: 960px) {
  .topnav {
    position: static;
  }

  .topnav a.normal {
    color: #4a4a4a;
    border-radius: 0;
  }

  .topnav #myLinks.is-open {
    padding-bottom: 0.5rem;
    border-top: 1px solid #ededed;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topnav a.normal { transition: none; }
}