/* Main blog navigation remains available on every screen size. */
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    height: auto;
    padding: 11px 20px 0;
    row-gap: 10px;
  }

  .site-header nav {
    order: 3;
    display: flex;
    flex: 0 0 calc(100% + 40px);
    justify-content: flex-start;
    gap: 24px;
    margin-inline: -20px;
    padding: 12px 20px;
    overflow-x: auto;
    border-top: 1px solid #d9e3e8;
    background: #f7fbfb;
    scrollbar-width: none;
  }

  .site-header nav::-webkit-scrollbar {
    display: none;
  }

  .site-header nav a {
    flex: 0 0 auto;
    color: var(--navy);
    white-space: nowrap;
  }

  .site-header nav a:hover,
  .site-header nav a:focus-visible {
    color: var(--teal);
  }
}

@media (max-width: 520px) {
  .site-header {
    padding-inline: 14px;
  }

  .site-header nav {
    flex-basis: calc(100% + 28px);
    margin-inline: -14px;
    padding-inline: 14px;
    gap: 20px;
    font-size: 11px;
  }
}