/*
 * Custom collapse breakpoint for the Navigation block.
 *
 * WordPress core hard-codes the "Mobile" overlay breakpoint at 600px: below it
 * the menu shows the hamburger toggle, at 600px and up it shows inline. This
 * overrides that breakpoint.
 *
 * To change the width at which the menu collapses, edit the `max-width` /
 * `min-width` values below (they must stay 1px apart, e.g. 781px / 782px).
 *
 * Requires the Navigation block's Overlay Menu setting to be "Mobile" so the
 * responsive toggle markup is rendered.
 */

/* Collapse to the hamburger overlay up to this width. */
@media (max-width: 781px) {
  /* Show the hamburger toggle. */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  /* Hide the inline menu; only show it when opened as an overlay. */
  .wp-block-navigation:not(.has-modal-open)
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
  }
}

/* Show the inline menu (and hide the toggle) at or above this width. */
@media (min-width: 782px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }

  .wp-block-navigation:not(.has-modal-open)
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    background-color: inherit;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    display: none;
  }
}