/**
 * GaveGlade mobile header — move overlay hamburger to the RIGHT
 * next to search / account / cart. Desktop (≥782px) unchanged.
 *
 * DOM order remains: logo | nav (open button) | icons.
 * On ≤781px we flex-order to: logo | icons | open-button,
 * collapse the middle column to the button width, and hide the
 * empty 68% gap so the right cluster packs together.
 */

@media (max-width: 781px) {
  /* Keep one header row */
  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 0 !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* 1) Logo — left */
  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile > .wp-block-column:nth-child(1) {
    order: 1 !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 2) Icons (search / account / cart) — pushed right, before burger */
  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile > .wp-block-column:nth-child(3) {
    order: 2 !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    max-width: none !important;
    width: auto !important;
    margin-left: auto !important; /* absorb leftover space; cluster sits right */
  }

  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile > .wp-block-column:nth-child(3) > .wp-block-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* 3) Nav column — shrink to open-button only, after icons */
  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile > .wp-block-column:nth-child(2) {
    order: 3 !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0.15rem !important; /* small air between cart and burger */
  }

  header.site-header .wp-block-group.is-style-default > .wp-block-columns.alignwide.is-not-stacked-on-mobile > .wp-block-column:nth-child(2) .wp-block-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Open button visibly in the right icon cluster */
  header.site-header .wp-block-group.is-style-default .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Closed overlay must not reserve header space (theme already hides it <782) */
  header.site-header .wp-block-group.is-style-default .wp-block-navigation__responsive-container:not(.is-menu-open) {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Let the open overlay content stretch its list; keep theme toggle layout unchanged. */
@media (max-width: 781px) {
  header.site-header .wp-block-group.is-style-default .wp-block-navigation.is-style-kutchara-tablet-justify-center .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    align-items: stretch !important;
  }
  header.site-header .wp-block-group.is-style-default .wp-block-navigation.is-style-kutchara-tablet-justify-center .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    align-self: stretch !important;
  }
}