/* ---------------------------------------------------------
   HEADER — logo left, centred wordmark, nav right
   
   Breakpoint: 1240px
   Must match the Nav Menu element's custom mobile breakpoint
   in the Bricks panel. Change both together.
   Note: sits below Bricks' Base (1279) so it behaves as a
   mobile breakpoint. Don't move it above Base.
   
   Requires the --nav-height script in the header Code element.
   --------------------------------------------------------- */
#brx-header {
  border-block-end: 1px solid var(--neutral-light, #e5e5e5);
}
/* ---- Base ---- */

.rm-header-loe__inner {
  display: flex;
  align-items: center;
  position: relative;
  min-block-size: 60px;
  gap: 0;
  padding-inline-end: var(--gutter, 1.5rem);
}

/* Class sits on the <a> wrapper, so the cap goes on the image */
.rm-header-loe__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 0;
}

.rm-header-loe__logo img {
  max-block-size: 46px;
  inline-size: auto;
  block-size: auto;
}

/* Absolutely centred below the breakpoint; overridden above it */
.rm-header-loe__wordmark {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin: auto;
  inline-size: fit-content;
  block-size: fit-content;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 500;
}


/* =========================================================
   BELOW BREAKPOINT — burger + slide-out panel
   ========================================================= */

@media (max-width: 1239px) {

  /* Hide the desktop menu, push the burger to the right edge */
  .rm-header-loe__nav-menu .bricks-nav-menu-wrapper {
    display: none;
  }

  .rm-header-loe__nav-menu {
    margin-inline-start: auto;
  }

  .rm-header-loe__wordmark {
  }

  /* Panel and overlay start below the header */
  .rm-header-loe__nav-menu .bricks-mobile-menu-wrapper,
  .rm-header-loe__nav-menu .bricks-mobile-menu-overlay {
    inset-block-start: var(--nav-height, 80px);
    block-size: calc(100dvh - var(--nav-height, 80px));
    transition-duration: .6s;
  }

  /* Column layout so Sign Up can be pushed down */
  .rm-header-loe__nav-menu .bricks-mobile-menu {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    margin: 0;
  }

  /* Sign Up — bottom of the panel, inset from the edges */
  .rm-header-loe__nav-menu .bricks-mobile-menu > li:nth-child(6) {
    margin-block-start: auto;
    padding: var(--gutter, 1.5rem);
  }

  .rm-header-loe__nav-menu .bricks-mobile-menu > li:nth-child(6) > a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: var(--white, #fff);
  }

  .rm-header-loe__nav-menu .bricks-mobile-menu > li:nth-child(6) > a:hover,
  .rm-header-loe__nav-menu .bricks-mobile-menu > li:nth-child(6) > a:focus-visible {
    background: var(--primary-hover);
    color: var(--white, #fff);
  }
}


/* =========================================================
   ABOVE BREAKPOINT — full centred layout
   ========================================================= */

@media (min-width: 1240px) {

  .rm-header-loe__inner {
    padding-inline-end: 0;
  }

  .rm-header-loe__logo {
    order: 1;
  }

  /* Flatten the nav wrappers so the <li> become flex children */
  .rm-header-loe__nav-menu,
  .rm-header-loe__nav-menu .bricks-nav-menu-wrapper,
  .rm-header-loe__nav-menu .bricks-nav-menu {
    display: contents;
  }

  /* Wordmark returns to the flow and holds the centre itself */
  .rm-header-loe__wordmark {
    position: static;
    order: 3;
    flex: 0 0 360px;
    inline-size auto;
    block-size: auto;
    margin: 0;
    text-align: center;
  }

  /* Ordering — 3 links, wordmark, 2 links, button */
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(-n + 3) { order: 2; }
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(4)      { order: 4; }
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(5)      { order: 5; }
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(6)      { order: 6; }

  /* Equal width, full height, edges touching */
  .rm-header-loe__nav-menu .bricks-nav-menu > li {
    flex: 1 1 0;
    align-self: stretch;
    display: flex;
    margin: 0;
  }

  .rm-header-loe__nav-menu .bricks-nav-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    background: transparent;
    font-size: var(--text-s);
    text-transform: uppercase;
  }

  .rm-header-loe__nav-menu .bricks-nav-menu > li > a:hover,
  .rm-header-loe__nav-menu .bricks-nav-menu > li > a:focus-visible {
    background: var(--primary-ultra-light);
  }

  /* Sign Up */
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(6) > a {
    background: var(--primary);
    color: var(--white, #fff);
  }

  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(6) > a:hover,
  .rm-header-loe__nav-menu .bricks-nav-menu > li:nth-child(6) > a:focus-visible {
    background: var(--primary-hover);
    color: var(--white, #fff);
  }

  /* Mobile controls parked at the end */
  .rm-header-loe__nav-menu .bricks-mobile-menu-toggle,
  .rm-header-loe__nav-menu .bricks-mobile-menu-wrapper,
  .rm-header-loe__nav-menu .bricks-mobile-menu-overlay {
    order: 7;
    flex: 0 0 auto;
  }
}