/* Top navigation for the landing page.
   The markup and look mirror the header in site.css so Home matches the other pages. It lives in its
   own file because loading site.css here would apply its page-level rules (flex body, line height, ...)
   to the full-screen scene that home.css has tuned. */

:root {
  --nav-h: 64px;
  --gutter: clamp(18px, 4vw, 56px);
  --signal: #9b88ff;
  --blue: #61baff;
  --serif: Georgia, 'Times New Roman', serif;
}

a { color: inherit; text-decoration: none; }

/* Same reserved scrollbar space as the other pages, so the header lines up with theirs. */
html { scrollbar-gutter: stable; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0710;
  font: 500 10px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: top .2s;
}

.skip-link:focus { top: 14px; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(3, 3, 3, .6);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}

.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark { width: 26px; height: 26px; object-fit: contain; opacity: .95; }
.brand-name { font: 400 13px var(--serif); letter-spacing: .34em; }

/* The nav sits in the middle grid column, so it is centred in the page whatever the side columns hold. */
.site-nav { display: flex; justify-content: center; gap: 2px; }

.site-nav a {
  position: relative;
  padding: 10px 13px;
  font: 500 10px var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--fg); }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--blue));
  box-shadow: 0 0 8px rgba(115, 144, 255, .55);
}

.header-actions { display: flex; align-items: center; justify-self: end; gap: 8px; }

/* ---------- Buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(225, 223, 230, .08);
  color: var(--fg);
  font: 500 10px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .24s, border-color .24s, transform .24s, color .24s;
}

.pill:hover {
  background: rgba(235, 231, 245, .16);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}

.pill-quiet { border-color: rgba(255, 255, 255, .1); background: transparent; color: var(--muted); }
.pill-quiet:hover { color: var(--fg); }

.pill-solid { background: var(--accent); border-color: var(--accent); color: #0b0710; }
.pill-solid:hover { background: #ebdff5; border-color: #ebdff5; }
.pill[hidden] { display: none; }

/* Staff login is dropped where it would no longer share a row with the brand (set after measuring). */
@media (max-width: 399px) {
  .pill-staff { display: none; }
}

/* ---------- Scene edges ---------- */

/* The scene's content uses the same gutter as the header (and as every other page), so the brand, the title and the right-hand buttons share one left and right edge. */
.masthead,
.intro,
.edge-left,
.corner-index { left: var(--gutter); }

.discord-link,
.mode-toggle,
.edition { right: var(--gutter); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .site-nav a { padding: 10px 9px; letter-spacing: .14em; }
  .site-nav a[aria-current="page"]::after { left: 9px; right: 9px; }
}

/* The header wraps onto two rows: brand + actions, then the page links. */
@media (max-width: 860px) {
  :root { --nav-h: 88px; }

  .site-header { display: flex; height: auto; min-height: var(--nav-h); flex-wrap: wrap; align-content: flex-start; gap: 6px 16px; padding-top: 12px; padding-bottom: 0; }
  .header-actions { margin-left: auto; }

  .site-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 calc(var(--gutter) - 9px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; }
  .site-nav a[aria-current="page"]::after { bottom: 0; }
}

/* Very narrow phones: keep the brand and the login button on one row. */
@media (max-width: 360px) {
  .brand-name { letter-spacing: .24em; }
  .site-header { column-gap: 10px; }
}