/*
 * Site overrides, loaded after BaseLayout.css.
 */

/* ─── Header ──────────────────────────────────────────────────────────────────
 * The primary navigation carries eight items, which does not fit the header
 * at the 1280px container width using the base sizing. These rules tighten the
 * lockup and raise the point at which the nav collapses to the mobile menu.
 */

.site-header .rw-logo {
  width: 220px;
  height: 46px;
}

.site-header__inner {
  gap: var(--space-4);
}

.nav {
  gap: 2px;
}

.nav__link {
  padding-inline: var(--space-2);
  font-size: 0.8125rem;
}

.nav__link::after {
  left: var(--space-2);
  right: var(--space-2);
}

@media (max-width: 1260px) {
  .nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: flex;
  }
}

/* ─── Responsive images ───────────────────────────────────────────────────────
 * The base styles size these images with height: 100%, which resolves against
 * the nearest sized ancestor. A <picture> wrapper is inline and unsized, so it
 * has to be made to fill its container for that to keep working.
 */

.hero__bg picture,
.editorial-split__media picture {
  display: block;
  width: 100%;
  height: 100%;
}