@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

/* Site-wide top nav, shared by every page (markup: site_nav.php; static pages carry a copy).
   Self-contained so it looks the same over Bootstrap pages, the quest shell and the city map. */
:root { --site-nav-h: 50px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--site-nav-h);
  background: rgba(19, 19, 19, .84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #242428;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  height: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
}

.site-nav a {
  position: relative;
  flex: none;
  color: #9a9aa2;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 18px 0 17px;
  transition: color .2s;
}

/* neon underline in the wordmark's colors; grows in on hover, stays on the current page */
.site-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ef50d5, #15f0f2, #f2a415);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.site-nav a:hover, .site-nav a:focus-visible { color: #eaeaea; text-decoration: none; outline: none; }
.site-nav-links a:hover::after, .site-nav-links a:focus-visible::after,
.site-nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav-links a[aria-current="page"] { color: #eaeaea; }

.site-nav .site-brand {
  justify-self: start;
  font-family: Righteous, cursive;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  background: linear-gradient(90deg, #ef50d5, #15f0f2, #f2a415);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-nav .site-brand:hover { color: transparent; filter: brightness(1.2); }
/* the homepage has the big wordmark right below, so its slot stays empty */
.site-nav .site-brand[hidden] { display: block; visibility: hidden; }

.site-nav .site-dm { justify-self: end; color: #15f0f2; }
.site-nav .site-dm:hover { color: #eaeaea; }

@media (max-width: 760px) {
  /* one row that scrolls sideways on phones, fading at the right edge */
  .site-nav {
    display: flex;
    gap: 20px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-links { gap: 20px; }
  .site-nav a { font-size: 12px; letter-spacing: 1px; }
  .site-nav .site-brand { font-size: 18px; }
  .site-nav .site-brand[hidden] { display: none; }
  .site-nav .site-dm { padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav-links a::after { transition: none; }
}