/* Site header: wordmark, nav and the signed-in user. Collapses to a toggle on small screens. */
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo {
  width: 52px;
  height: auto;
  display: block;
}

.brand-rule {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
}

.brand-name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--track-display);
  color: var(--kk-white);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  font-size: 17px;
}

/* Calibre and Hillside sit high in their line boxes; trim them to cap height
   so they centre on the logo and the mono Log Out button */
.brand-name,
.site-nav a,
.user-name {
  text-box: trim-both cap alphabetic;
}

.on-dark .site-nav a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 8px;
}

.on-dark .site-nav a:hover {
  color: var(--kk-neon-green);
}

.on-dark .site-nav a[aria-current="page"] {
  color: var(--kk-white);
  box-shadow: inset 0 -2px 0 var(--kk-neon-green);
}

.user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.user-name {
  white-space: nowrap;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.avatar-initials {
  display: grid;
  place-items: center;
  background: var(--kk-neon-green);
  color: var(--kk-forest-green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.nav-toggle {
  display: none;
}

/* Not enough room for the name: the avatar alone identifies the user */
@media (max-width: 1240px) {
  .user-name {
    display: none;
  }
}

@media (max-width: 900px) {
  .site-header-inner {
    gap: 12px;
    padding-block: 14px;
    flex-wrap: wrap;
  }

  .site-header .user-name {
    display: inline;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-nav,
  .site-header .user {
    display: none;
    flex-basis: 100%;
  }

  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 8px;
  }

  .site-header.is-open .user {
    display: flex;
    margin-left: 0;
    padding: 14px 0 4px;
    border-top: 1px solid var(--line);
  }
}