/* Shared floating pill navigation (matches the homepage header).
   Self-contained: no dependency on site CSS variables, so it can be dropped
   onto any page (incl. the dark WebGL ETS page) with one <link>. */

.header-pill {
  position: fixed;
  top: 0.694vw;
  left: 50%;
  transform: translateX(-50%);
  height: 3.542vw;
  width: 49.514vw;
  max-width: 95vw;
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0.556vw;
  padding-left: 0.833vw;
}
/* The site-wide 44px touch-target minimum (modules/touch-targets.css) inflates
   these anchors and knocks the logo/contact button off-centre versus the
   homepage, which never loads that sheet. Reset it so the pill is identical
   on every page. */
.header-logo,
.header-nav a,
.header-contact {
  min-height: 0;
}
.header-logo {
  display: flex;
  align-items: center;
}
.header-logo img {
  height: 2.258vw;
  width: auto;
  display: block;
}
.header-nav {
  display: flex;
  gap: 2.222vw;
  align-items: center;
}
.header-nav a {
  color: #fdfdfd;
  text-decoration: none;
  font-size: min(1.111vw, 16px);
}
.header-contact {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-inline: 1.111vw;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fdfdfd;
  text-decoration: none;
  font-size: min(1.111vw, 16px);
}
.header-contact .dot {
  width: 0.139vw;
  height: 0.139vw;
  background: #8fd43c;
  margin-left: 0.4vw;
}
.burger {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 1023.98px) {
  .header-pill {
    top: 1rem;
    height: 3.5rem;
    width: calc(100% - 3rem);
  }
  .header-nav,
  .header-contact {
    display: none;
  }
  .burger {
    display: block;
  }
  .header-logo img {
    height: 2.1875rem;
  }
  .header-nav a {
    font-size: 0.9375rem;
  }
}

.hidden {
  display: none !important;
}

/* Hold the pill link colour against the site-wide accessibility reset
   (modules/accessibility.css: `a:visited, a:active, a:focus { color: inherit
   !important }`), which otherwise greys out *visited* nav links on any page
   that loads the full stylesheet. Match it with !important so white wins. */
.header-nav a,
.header-nav a:visited,
.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active,
.header-contact,
.header-contact:visited,
.header-contact:hover,
.header-contact:focus,
.header-contact:active {
  color: #fdfdfd !important;
}