/* Canonical shared site header — single source of truth.
   Rendered STATICALLY into both aqueductfluidics.com (Astro) and
   docs.aqueductfluidics.com (mdBook) at build time, so there is no runtime JS
   injection and no flash on load or navigation.
   Edit here, then run scripts/sync-header.mjs to copy into the aq-docs repo. */

#aq-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #1e2733;
  background: rgba(11, 15, 20, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* force our font regardless of host page (mdBook uses Open Sans) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* pin font smoothing so the header renders identically regardless of host
     page (the marketing site sets antialiased on <body>; mdBook does not) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#aq-site-header * {
  box-sizing: border-box;
  font-family: inherit;
  font-style: normal;
}
#aq-site-header .aqh-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#aq-site-header .aqh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #e6edf3;
  font-size: 17px;
  text-decoration: none;
  line-height: 1;
}
#aq-site-header .aqh-brand span {
  font-weight: 700;
}
#aq-site-header .aqh-brand img {
  width: 28px;
  height: 28px;
  display: block;
}
#aq-site-header nav {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
#aq-site-header nav a {
  color: #9aa7b4;
  font-size: 15px;
  text-decoration: none;
  font-weight: 400;
}
#aq-site-header nav a:hover {
  color: #e6edf3;
}
#aq-site-header nav a.aqh-cta {
  color: #e6edf3;
  border: 1px solid #1e2733;
  padding: 7px 14px;
  border-radius: 8px;
}
#aq-site-header nav a.aqh-cta:hover {
  border-color: #3aa0ff;
}
@media (max-width: 560px) {
  #aq-site-header .aqh-inner {
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #aq-site-header nav {
    width: 100%;
    gap: 16px;
    font-size: 14px;
  }
}
