.site-header.wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav actions";
  align-items: center;
  gap: 14px 28px;
  padding-block: 17px;
}

.site-header.wrap > a:first-child {
  grid-area: brand;
}

.site-header.wrap .logo,
.site-header--equipment .brand img {
  display: block;
  width: clamp(148px, 16vw, 212px);
  height: auto;
}

.site-header.wrap > nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  overflow: visible;
  gap: 4px clamp(12px, 1.25vw, 21px);
  padding: 0;
  font-size: 15px;
  line-height: 1.25;
}

.site-header.wrap nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  white-space: nowrap;
}

.site-header-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 17px;
}

.site-header-actions .header-link {
  order: 0;
  font-size: 15px;
  white-space: nowrap;
}

.site-header .site-theme-toggle {
  order: 0;
  flex: none;
  margin: 0 5px 0 0;
  min-height: 42px;
  font-size: 13px;
}

.site-header--equipment {
  gap: 13px 22px;
}

.site-header--equipment .brand img {
  width: clamp(148px, 18vw, 238px);
}

.site-header--equipment > a:not(.brand) {
  font-size: 15px;
}

.site-header--equipment .site-theme-toggle {
  margin-inline-start: auto;
}

@media (max-width: 1250px) {
  .site-header.wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
  }

  .site-header.wrap > nav {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .site-header.wrap {
    gap: 10px 12px;
    padding-block: 13px;
  }

  .site-header-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }

  .site-header-actions .header-link {
    margin-right: 5px;
    padding-block: 3px;
  }

  .site-header.wrap > nav {
    gap: 2px 14px;
  }
}