/*
 * The phone menu. Core's navigation opens as a full-screen modal with its own
 * close button; the demo drops a panel out of the bottom of the bar and leaves
 * the badge and the hamburger where they are. The panel is what the client
 * approved, and the modal was also pushing Order Now past the right edge, so
 * this re-points core's overlay at the demo's geometry instead of restyling
 * the modal.
 */
/*
 * Core swaps to the hamburger at 600px; the demo holds the links until 980,
 * which is where everything else in this bar switches over too. Between the
 * two the bar had inline links with Order Now sitting among them as a list
 * item, because the pill had already been swapped out.
 */
@media (600px <= width <= 980px) {
  .rosie-header .wp-block-navigation
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .rosie-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: grid;
  }
}

@media (width <= 980px) {
  /* With the row static, the panel's 100%/0/0 resolve against the sticky bar
     itself, so it starts under the bar and spans the whole screen — the demo
     anchors to .site-header for exactly this reason.
     The class is doubled because theme.css sets the row relative at the same
     weight, and which file is printed last decides a tie: it went the other
     way on the server than it did locally, and the panel came back inset. */
  .rosie-header > .wp-block-group.wp-block-group,
  .rosie-header .wp-block-navigation { position: static; }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open {
    position: absolute;
    inset: 100% 0 auto 0;
    z-index: 3;
    display: block;
    width: auto;
    /* Visible, so the close button can sit above the panel's top edge, in the
       bar. A long menu is capped on the list instead — see below. */
    overflow: visible;
    max-height: none;
    padding: 0.25rem var(--wp--custom--gutter) 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.6);
  }

  /* The bar is about 76px and the panel keeps 1.4rem under the last row. */
  .rosie-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
  }

  /* The badge hangs out of the bottom of the bar, so with the panel open it
     was showing through as a cropped half-sandwich. While the menu is down
     the bar is plain black behind the hamburger; the slot stays, so nothing
     else in the row moves. */
  .rosie-header:has(.wp-block-navigation__responsive-container.is-menu-open)
    .wp-block-site-logo { visibility: hidden; }

  /*
   * What you tap to close the menu is core's own close button, moved up into
   * the bar and drawn as the hamburger — not the open button wearing a second
   * job. Two attempts at making the open button close the menu held up in a
   * desktop browser and not on a phone; this way the tap lands on the control
   * core ships for closing, and the block's own handler does the rest.
   *
   * It is positioned against the panel, whose top edge is the bar's bottom:
   * one bar padding plus the button's own height puts it back on the row.
   */
  .rosie-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    display: grid;
    place-items: center;
    position: absolute;
    /* The extra pixel is the panel's own hairline. */
    top: calc(-1rem - 45px);
    right: var(--wp--custom--gutter);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
  }

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

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::before {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
  }

  /*
   * So there is exactly one hamburger on the row, and it is the live one.
   * Hidden rather than visibility:hidden, because a visibility-hidden element
   * cannot take focus — and closing the menu hands focus back to this button.
   * With that, Escape was dropping a keyboard user at the top of the page.
   */
  .rosie-header:has(.wp-block-navigation__responsive-container.is-menu-open)
    .wp-block-navigation__responsive-container-open { opacity: 0; pointer-events: none; }

  /* Nothing here is a dialog any more, so the dialog's own measure and the
     room core leaves for the close button both go. */
  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    max-width: none;
    margin: 0;
    padding: 0;
    /* Core positions the dialog, which would make it the close button's
       frame of reference instead of the panel. */
    position: static;
  }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    width: 100%;
    padding-top: 0;
  }

  /* A panel doesn't take the page with it — the demo scrolls underneath. */
  html.has-modal-open,
  body.has-modal-open { overflow: visible; }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding-block: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.45rem;
    /* The bar's links are set tight at 1.1; the panel's rows are the body's
       1.65, which is 13px of row height each. */
    line-height: 1.65;
  }
}

/* Order Now sits in the bar on a desktop and in the menu on a phone, never
   both at once — the demo makes the same swap at 980px. */
.rosie-header .wp-block-navigation-item.rosie-nav-order { display: none; }

@media (width <= 980px) {
  /* Core's own .wp-block-buttons > .wp-block-button weighs the same, and is
     printed later, so the selector has to carry one class more. */
  .rosie-header .wp-block-buttons > .wp-block-button.rosie-order { display: none; }

  /* An empty right-hand slot still counts under space-between, which parked
     the hamburger in the middle of the bar instead of at its right edge. */
  .rosie-header .rosie-header__right { display: none; }

  .rosie-header .wp-block-navigation-item.rosie-nav-order {
    display: block;
    margin-top: 1.2rem;
  }

  .rosie-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.rosie-nav-order a {
    border-bottom: 0;
    text-align: center;
    background: var(--wp--preset--color--pink);
    color: var(--wp--preset--color--white);
    border-radius: 999px;
    padding: 0.7em 1.4em;
    font-size: 1.22rem;
    /* A pill, not a row: it keeps the button's tight leading, and the same cap
       trim every other pill on the site gets. */
    line-height: 1.1;
  }

  @supports (text-box: trim-both cap alphabetic) {
    .rosie-header .wp-block-navigation__responsive-container.is-menu-open
      .wp-block-navigation-item.rosie-nav-order a {
      text-box: trim-both cap alphabetic;
      padding-block: 0.9em;
    }
  }
}