/*
 * Header menu on tablet-width screens (701-1023px).
 *
 * The full menu needs ~800px in English and ~920px in Spanish, but the pages'
 * own rules only switch to the phone-style menu at 700-1000px (each page picks
 * a different width). In between, the menu ran off the right edge of the
 * screen. Below 1024px every page now uses the same phone-style dropdown menu.
 */
@media (min-width: 701px) and (max-width: 1023px) {
  .site-header { padding-left: 28px; padding-right: 28px; }
  .nav-toggle { display: block !important; width: 42px; height: 42px; padding: 8px; border: 0; background: transparent; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; margin: 6px 0; background: #fff; }
  .site-nav {
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    left: 0;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 28px;
    background: var(--black, #1a1a1a);
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  }
  .site-nav.is-open { display: flex !important; }
  .site-nav a { padding: 10px 0; }
  .site-nav .nav-cta { padding: 14px 18px; text-align: center; }
}