/* Site header / top navigation, shared by every page (src/_includes/header.njk).
   Relies on the page stylesheet for the colour/type tokens (--ink, --sky, --fs-eyebrow, --wrap)
   and the .wrap utility. */

/* The shadow bleeds 1px of ink below the header so no hairline of the body colour shows
   where it meets an ink hero section at a fractional pixel boundary. */
.site-header {
  background: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}

.top-nav__links {
  display: flex;
  gap: 46px;
}

.top-nav__links a {
  color: var(--sky);
}

.top-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 59px;
  width: 214px;
  border-radius: 999px;
  background: var(--sky);
  color: var(--ink);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Phone layout ---------- */
@media (max-width: 800px) {
  .top-nav {
    flex-direction: column;
    gap: 14px;
    padding-top: 28px;
  }

  .top-nav__links {
    gap: 16px;
  }

  .top-nav__contact {
    min-height: 47px;
    width: 171px;
  }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 360px) {
  .top-nav__links {
    gap: 12px;
  }
}