/* =====================================================================
   Header — Web3 Ledger theme layer

   header-unitok.css is the Unitok template's header, lifted verbatim so
   it stays easy to diff against the original. Everything that makes it
   *ours* lives here.

   Plain and flat by intent: no rule under it, no glass, no glow, no
   shadows on buttons. The bar carries its own tone — a step lighter than
   the page ground — so its edge reads without needing a border. The
   surfaces step up from there: bar, then chips, then dropdowns, each
   lighter than the one behind it. Content is capped to the site's 1200px
   wrap so the logo and nav line up with everything below.

   Selectors are scoped under `body.wl-site` because site-modern.css
   styles bare elements (a, span, p, img) at that weight; a single-class
   rule from the template would otherwise lose to it.
   ===================================================================== */

body.wl-site {
  padding-top: 72px;
}

/* ---- resets the template keeps in its common section ---- */
body.wl-site .header button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
body.wl-site .header ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.wl-site .header p {
  margin: 0;
}

/* ---- type ---- */
body.wl-site .header,
body.wl-site .header a,
body.wl-site .header p,
body.wl-site .header span,
body.wl-site .header button {
  font-family: var(--font-site);
  letter-spacing: -.008em;
}

/* ---- the bar ----
   Dark, over a light hero. --hdr is --g1, the same tone as .wl-strip,
   the coin band below the hero, so the bar and that section bracket the
   hero in one colour. The chip and dropdown tones step up from it, so
   nothing in the header needs an outline to separate.

   The ink tokens are the :root dark-page values; they are named here
   anyway so the whole subtree is re-pointed from one place if the bar's
   tone ever changes again. */
body.wl-site .header {
  --hdr: var(--g1);
  --hdr-2: #17171a;
  --hdr-3: #212127;
  --ink: #f2f2f3;
  --ink-2: #8d8d94;
  --ink-3: #5d5d64;
  height: 72px;
  background-color: var(--hdr);
  border: none;
  box-shadow: none;
}
body.wl-site .header__content {
  height: 72px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  background: none;
  border: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  body.wl-site {
    padding-top: 64px;
  }
  body.wl-site .header,
  body.wl-site .header__content {
    height: 64px;
  }
  body.wl-site .header__content {
    padding: 0 16px;
  }
}

/* ---- logo: the mark alone. The source is 1536x1024, so it is capped on
   both axes and centred rather than scaled off one dimension. ---- */
body.wl-site .header__logo {
  height: 40px;
  flex: none;
}
body.wl-site .header__logo a {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
body.wl-site .header__logo img {
  height: 38px;
  width: auto;
  max-width: 52px;
  object-fit: contain;
  display: block;
}

/* ---- nav ---- */
body.wl-site .header__nav-link,
body.wl-site .header__nav-menu a,
body.wl-site .header__profile-menu a {
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
body.wl-site .header__nav-link svg,
body.wl-site .header__nav-menu a svg,
body.wl-site .header__profile-menu a svg {
  fill: var(--ink-2);
}
body.wl-site .header__nav-link:hover,
body.wl-site .header__nav-link[aria-expanded="true"],
body.wl-site .header__nav-menu a:hover,
body.wl-site .header__profile-menu a:hover {
  color: var(--ink);
}
body.wl-site .header__nav-link:hover svg,
body.wl-site .header__nav-link[aria-expanded="true"] svg,
body.wl-site .header__nav-menu a:hover svg,
body.wl-site .header__profile-menu a:hover svg {
  fill: var(--ink);
}
/* current page: colour only — no pill, no underline */
body.wl-site .header__nav-link--active,
body.wl-site .header__nav-link--active:hover {
  color: var(--acc) !important;
  font-weight: 600;
}

@media (min-width: 1200px) {
  body.wl-site .header__nav-item {
    height: auto;
    margin-left: 30px;
  }
  body.wl-site .header__menu {
    margin-left: auto;
    margin-right: 32px;
  }
  body.wl-site .header__actions {
    margin-left: 0;
  }
}

/* ---- dropdowns ----
   The template spaces these like a mobile accordion: 20px of dead space
   top and bottom, 15px between every row, and a fixed 200px width. At
   desktop that reads as a huge, half-empty box. Rebuilt as a compact
   menu — the panel's own padding is the only inset, rows are flush and
   sized by their hover target, and the width fits the content. */
body.wl-site .header__nav-menu,
body.wl-site .header__profile-menu {
  background-color: var(--hdr-2);
  border: none;
  border-radius: 16px;
  padding: 10px;
  width: max-content;
  min-width: 180px;
  margin-top: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: opacity .18s ease;
}
body.wl-site .header__nav-menu li,
body.wl-site .header__profile-menu li {
  margin: 0;
  width: 100%;
}
/* a hair of air between rows so two adjacent hovers never touch */
body.wl-site .header__nav-menu li + li,
body.wl-site .header__profile-menu li + li {
  margin-top: 2px;
}
body.wl-site .header__nav-menu li:first-child,
body.wl-site .header__profile-menu li:first-child {
  padding-top: 0;
}
body.wl-site .header__nav-menu li:last-child,
body.wl-site .header__profile-menu li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}
body.wl-site .header__nav-menu a,
body.wl-site .header__profile-menu a {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
body.wl-site .header__nav-menu a:hover,
body.wl-site .header__profile-menu a:hover {
  background-color: var(--hdr-3);
}
body.wl-site .header__profile-menu a svg {
  width: 17px;
  margin-right: 10px;
  flex: none;
}
/* sign out is the one destructive row — set it off with a hairline of
   space rather than another divider line */
body.wl-site .header__profile-menu li:last-child {
  margin-top: 6px;
}

/* ---- mobile drawer ---- */
@media (max-width: 1199px) {
  body.wl-site .header__menu {
    top: 72px;
    background-color: var(--hdr);
    border: none;
    box-shadow: none;
  }
}
@media (max-width: 767px) {
  body.wl-site .header__menu {
    top: 64px;
  }
}

/* ---- burger ---- */
body.wl-site .header__btn span {
  background-color: var(--ink-2);
}
body.wl-site .header__btn:hover span,
body.wl-site .header__btn--active span {
  background-color: var(--acc);
}
@media (max-width: 1199px) {
  body.wl-site .header__btn {
    right: 16px;
    top: 50%;
    margin-top: -11px;
  }
}

/* ---- log in ----
   8px, the same radius the primary buttons across the site now use. ---- */
body.wl-site .header__action-btn--signin {
  background-color: var(--acc);
  border-radius: 8px;
  color: var(--acc-ink);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
}
body.wl-site .header__action-btn--signin:hover {
  background-color: #f0b90b;
  box-shadow: none;
}
body.wl-site .header__action-btn--signin svg,
body.wl-site .header__action-btn--signin:hover svg {
  fill: var(--acc-ink);
}
body.wl-site .header__action-btn--signin span,
body.wl-site .header__action-btn--signin:hover span {
  color: var(--acc-ink);
  text-transform: none;
}
/* the template draws a divider bar before the sign-in action */
body.wl-site .header__action--signin:before {
  display: none !important;
}

/* ---- profile chip ---- */
body.wl-site .header__profile-btn {
  border: none;
  border-radius: 8px;
  background-color: var(--hdr-2);
  height: 46px;
  box-shadow: none;
}
body.wl-site .header__profile-btn:hover,
body.wl-site .header__profile-btn[aria-expanded="true"] {
  background-color: var(--hdr-3);
}
body.wl-site .header__profile-btn p {
  color: var(--ink);
}
body.wl-site .header__profile-btn span {
  color: var(--ink-2);
}
body.wl-site .header__profile-btn svg {
  fill: var(--ink-2);
}
body.wl-site .header__profile-btn--verified:after {
  border-color: var(--hdr);
  background-color: var(--acc);
}

/* ---- skip link + scrim ---- */
.wl-skip {
  position: absolute;
  left: -9999px;
}
.wl-skip:focus {
  left: 16px;
  top: 8px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: 8px;
  background-color: var(--acc);
  color: var(--acc-ink);
  font-size: 14px;
}
.header__scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 98;
}
.header__scrim--active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 1200px) {
  .header__scrim {
    display: none;
  }
}

/* keyboard users get the same blue, everywhere */
body.wl-site .header a:focus-visible,
body.wl-site .header button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 8px;
}