/* ==========================================================================
   Header navigation: desktop menu, dropdowns and the mobile overlay.

   Split out of blocks.css so it can be kept away from WP Rocket's Remove
   Unused CSS. Most of these rules only apply after a tap (is-menu-open, the
   submenu toggles nav.js adds), and RUCSS keeps only what the first render
   uses, so it stripped different parts on different pages. This file is
   excluded from RUCSS and loads whole; blocks.css is trimmed as normal.

   Loaded after blocks.css. Nothing left in blocks.css targets the header menu,
   so these rules keep their order among themselves and win exactly as before.
   ========================================================================== */

/* Core navigation, dressed as the design's .nav */
.mrs-header .wp-block-navigation {
  --navigation-layout-justification-setting: flex-end;
  font-size: 1.125rem;
}
.mrs-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--ink);
  text-decoration: none;
}
.mrs-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--navy); }

/* --- dropdowns ------------------------------------------------------------
   The approved header nav is flat. Dropdowns are a deliberate departure: with
   29 pages, every major one reachable from the main menu needs them.
   Core supplies the open/close behaviour and the keyboard handling; this is
   only the look, and the two things core gets wrong at this size. */
.mrs-header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: var(--ink); }
.mrs-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover { color: var(--navy); }

/* Core right-aligns submenus when the nav itself is justified right, so each
   panel hung to the left of its own label. Aligned to the left edge of the
   parent item instead, which is where the eye goes after reading it.
   The selector matches core's own five-class rule and adds one, because a
   shorter one loses: core has
   .wp-block-navigation.items-justified-right .wp-block-navigation__container
   .has-child .wp-block-navigation__submenu-container { left:auto; right:0 } */
.mrs-header .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
  left: 0;
  right: auto;
}

.mrs-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--navy);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 10px 28px rgba(20, 22, 58, .10);
  padding-block: .5rem;
  min-width: 15rem;
}

/* Core sets the submenu font from the parent, which is 1.125rem: too large for
   a list of twelve. */
.mrs-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1rem;
  padding: .5rem 1.1rem;
  white-space: nowrap;
}
.mrs-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--stone);
  color: var(--navy);
}

/* The first entry in each dropdown is the parent page itself ("All Products"),
   separated so it does not read as one of the children. */
.mrs-header .wp-block-navigation__submenu-container li:first-child {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: .35rem;
  padding-bottom: .35rem;
}

/* The overlay inherits the desktop right justification, which reads badly as a
   full-screen list: every label ends on the right edge with a ragged left. */
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  align-items: flex-start;
  text-align: left;
}
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  width: 100%;
}
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start;
}

/* In the mobile overlay the submenus are expanded in place rather than
   floating, so the desktop chrome would look like a box inside a box. */
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-block: 0;
  min-width: 0;
}
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li:first-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mrs-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-inline: 0;
  white-space: normal;
  color: var(--ink-mid);
}

/* The "Talk to a specialist" item is marked with a CSS class on the menu item
   itself, so the client can move or rename it without losing the treatment. */
.mrs-header .wp-block-navigation-item.mrs-nav-cta .wp-block-navigation-item__content {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: .65rem 1.15rem;
  border-radius: 2px;
}
.mrs-header .wp-block-navigation-item.mrs-nav-cta .wp-block-navigation-item__content:hover {
  background: var(--navy);
  color: #fff;
}

.mrs-header .wp-block-navigation-item.mrs-nav-cta .wp-block-navigation-item__content { font-size: .875rem; }

/* --- header nav at intermediate widths ------------------------------------ */
/* Five items with dropdown chevrons plus the CTA button do not fit between the
   logo and the right edge below about 1350px: the button wrapped onto a second
   row and sat over the logo. Core switches to the overlay only at 600px, so the
   whole range in between has to be made to fit. */
@media (min-width: 782px) and (max-width: 84rem) {
  .mrs-header .wp-block-navigation { font-size: 1rem; }
  .mrs-header .wp-block-navigation.is-layout-flex { gap: .95rem; }
  .mrs-header .wp-block-navigation-item.mrs-nav-cta .wp-block-navigation-item__content {
    font-size: .8rem;
    padding: .6rem .85rem;
    letter-spacing: .07em;
  }
  .mrs-header .brand__tag { display: none; }
}
/* Core switches the navigation to its overlay at 600px. Between there and
   1024px the five items and the CTA do not fit on one row, so the burger takes
   over earlier. Measured with scripts/nav-fit.py rather than guessed. */
@media (max-width: 66rem) {
  .mrs-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .mrs-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* --- the hamburger menu --------------------------------------------------
   Collapsed, not expanded.

   Core opens every submenu when the overlay opens and hides the toggle that
   would close them again, because with the toggle hidden there would be no
   other way to reach those links. That put 31 links and about 1,300px of menu
   behind one tap. Showing the toggle again is what makes collapsing safe.

   Core sets height, opacity, visibility and position on the open submenu but
   never display, so display is free to use here and no !important is needed.
   The toggle is a preceding sibling of the container it controls, and core
   already binds its aria-expanded, so the state is core's to manage. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child .wp-block-navigation__submenu-container {
  display: none;
  padding-left: 1rem;
  padding-right: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child.mrs-sub-open > .wp-block-navigation__submenu-container {
  display: flex;
}

/* The control nav.js adds. A chevron drawn in CSS rather than an icon file, so
   it inherits the menu's colour and needs nothing loaded. */
.mrs-subtoggle {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mrs-subtoggle::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.mrs-sub-open > .mrs-subtoggle::before { transform: rotate(225deg) translate(-2px, -2px); }
.mrs-subtoggle:focus-visible { outline: 2px solid var(--amber-text); outline-offset: -2px; }

/* The container and its lists span the menu. Core lays the overlay out as a
   column and aligns its items to the start, which shrink-wraps the <ul> to its
   widest label, so a width:100% item only filled that shrunk width (about 225px
   of a 353px menu). Stretching the whole chain is what lets an item, and the
   chevron pinned to its right, reach the edge of the screen. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content .wp-block-page-list {
  width: 100%;
  align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item {
  width: 100%;
}

/* Only inside the overlay: on a desktop the submenus open on hover and the
   parent items sit in a row, where a full-width control makes no sense. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child > .mrs-subtoggle {
  display: inline-flex;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item.has-child {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  align-self: stretch;
}

/* So the list still opens underneath its parent rather than beside it. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child.mrs-sub-open > .wp-block-navigation__submenu-container {
  flex-basis: 100%;
  flex-direction: column;
  padding-top: .5rem;
}

/* The row is the tap target for the section itself, so it takes the width the
   toggle is not using rather than only the width of its own text. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child > .wp-block-navigation-item__content {
  flex: 1 1 auto;
}

/* Each link inside an open dropdown is a full-width row, not a text-width one,
   so the whole line is a tap target rather than just the words. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
}

/* The menu icon. Core draws three 14-unit bars in a 24px box, so the lines look
   short whatever the box size. Its own icon is hidden and three full-width bars
   are drawn instead: a square control with lines that span nearly its whole
   width. The middle bar is the element, the outer two are its shadows.

   Scoped to the width where the burger actually shows (<=66rem). Setting
   display:flex without the query forced the open button visible on desktop,
   where core otherwise hides it. */
@media (max-width: 66rem) {
  .mrs-header .wp-block-navigation__responsive-container-open svg { display: none; }
  .mrs-header .wp-block-navigation__responsive-container-open {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mrs-header .wp-block-navigation__responsive-container-open::before {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    background: currentColor;
    box-shadow: 0 -9px 0 currentColor, 0 9px 0 currentColor;
  }
}
/* The close (X) keeps core's own icon, enlarged to sit at the same weight. */
.wp-block-navigation__responsive-container-close svg {
  width: 30px;
  height: 30px;
}