/**
 * Header navigation breakpoint (jobbmat).
 *
 * The primary menu carries nine items. Measured on the live header, they are
 * 718px of text on their own, and the bar must also hold the wordmark (110px)
 * and the CTA (181px). The bar is constrained to 76rem, so it never exceeds
 * 1216px however wide the window gets — which means nine items plus wordmark
 * plus CTA did not fit at ANY viewport width. The menu wrapped onto a second
 * row everywhere, pushing "Så matchar vi" and "Kontakt" down beside the CTA.
 *
 * Tightening the gap alone does not fix it. At a 1024px viewport the bar is
 * 942px, which leaves 619px for a 718px menu: it wraps even at zero gap. The
 * only honest fix below that point is the overlay the block already ships.
 *
 * So the navigation block's overlay breakpoint is moved from core's 600px up
 * to 1320px. 1320 is where the bar first reaches its 1216px cap, and 1216 is
 * the width at which the nine items fit on one row at the gap set below.
 *
 *   <= 1319px   burger + overlay (all nine items, one tap)
 *   >= 1320px   one horizontal row
 *
 * The two rules below are core's own responsive-container rules inverted; they
 * are scoped to .dw-nav so no other navigation block on the site is affected.
 *
 * If a tenth item is ever added, re-measure: the 1320px figure is derived from
 * the current labels, not chosen for its roundness.
 */

@media (max-width: 1319px) {
  .dw-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  .dw-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }

  /*
   * The burger now appears on tablets too, not just phones. 96-mobil.css only
   * grows the hit area below 46rem, which would have left a 24x24 target on a
   * 1024px touch device — the one control that gets the site navigated.
   */
  .dw-nav .wp-block-navigation__responsive-container-open {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/*
 * Above the breakpoint the row fits, but only just: at the 1216px cap the
 * default 22.4px gap overflows by ~28px. 0.85rem clears it with room to spare
 * and still reads as deliberate spacing rather than a cramped list.
 */
@media (min-width: 1320px) {
  .dw-header__bar,
  .dw-header__nav {
    column-gap: 0.85rem;
  }

  .dw-nav ul.wp-block-navigation__container {
    column-gap: 0.85rem;
  }
}