/* The site header and brand mark, for every page: the React app links this file from index.html, and the
   static pages in public/ link it too and repeat only the markup (see Header in src/client/components/Brand.tsx).
   Change the header's look here and nowhere else. It carries its own colors, width and fonts because the static
   pages have palettes of their own. */
.site-header,
.brand {
  --koth-gold: #e5b453;
  --koth-ink: #0f0d0b;
  --koth-line: #3a3228;
  --koth-white: #f4eee3;
  --koth-muted: #cdc3b3;
}
.site-header {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;
  font-family: "Geist Variable", "Geist", system-ui, sans-serif;
  line-height: normal;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 20;
}
.brand {
  color: var(--koth-white);
  text-decoration: none;
  font-family: "Geist Variable", "Geist", system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-crown {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--koth-gold);
  color: var(--koth-ink);
  clip-path: polygon(8% 12%, 28% 35%, 50% 2%, 72% 35%, 92% 12%, 83% 88%, 17% 88%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-crown {
  transform: translateY(-2px);
}
.brand-crown svg {
  width: 22px;
  stroke-width: 2.5;
}
.brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}
.brand strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.035em;
  font-size: 1.6rem;
}
.brand small {
  color: var(--koth-gold);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  margin-top: 7px;
}
.site-header nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
}
.site-header nav a {
  position: relative;
  text-decoration: none;
  color: var(--koth-muted);
  transition: color 0.2s ease;
}
.site-header nav a:hover,
.site-header nav a.active {
  color: var(--koth-white);
}
.site-header nav a.active:not(.nav-login)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 1px;
  background: var(--koth-gold);
}
.site-header .nav-login {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--koth-line);
  border-radius: 10px;
  padding: 9px 16px;
  color: var(--koth-white);
  transition: border-color 0.2s ease;
}
.site-header .nav-login:hover,
.site-header .nav-login.active {
  border-color: var(--koth-gold);
}

@media (max-width: 680px) {
  .site-header {
    width: min(100% - 32px, 1200px);
    height: 64px;
  }
  .brand-crown {
    width: 36px;
    height: 36px;
  }
  .brand-crown svg {
    width: 19px;
  }
  .brand strong {
    font-size: 1.35rem;
  }
  .site-header nav {
    gap: 14px;
    font-size: 0.85rem;
  }
  .site-header nav > a:not(.nav-login):not([href="/kings"]):not([href="/#apps"]) {
    display: none;
  }
  .site-header .nav-login {
    max-width: 7rem;
    padding: 7px 12px;
  }
}