DS2 top nav: Click only on desktop

// Mobile first: the base is the mobile and tablet layout, then the JS-only states
// under &--js, then one desktop media query at the bottom.
// State and behaviour are in ds2-top-nav.module.js. Aiming at WCAG 2.2 AA.
.ds2-top-nav {
  // replace with DS2 colour names when added
  $bgColour: #000;
  $fgColour: #fff;
  $highlightColour: #D9FF2E;
  $searchBorderColour: #999;

  // must match desktopMediaQuery in ds2-top-nav.module.js
  // in rem so it follows the reader's text size: 80rem is 1280px at the usual 16px text,
  // or 1600px if they've set 20px, because bigger text needs a wider screen before the row fits.
  // With a px breakpoint, bigger text made the desktop nav overflow between 1280 and about 1500px.
  // (in a media query rem goes by the browser's own setting, not by font-size on html)
  $desktopBreakpoint: 80rem;

  // spacing uses the global $spacing-* scale (see /docs/spacing) wherever a value lands on it.
  // what's still in px is either a size rather than spacing, a Figma measurement that isn't on the
  // scale (5px, 15px, 36px, 50px), or spacing that feeds Sass arithmetic alongside a px size:
  // $barHeight and $searchRowOthers add padding to the crest and the icon buttons, and Sass can't
  // add rem to px. Converting those means moving the sums into calc()
  //
  // **To confirm against a clean Figma export:** $linkPaddingInline (36px) is 4px off $spacing-6
  // and was left alone because it sets the text inset on every row and the child rows line up
  // against it. $rowHeight, $searchHeight and the icon sizes are near scale steps too, but they're
  // sizes rather than spacing, so they stay px whatever the number
  //
  // mobile values come from the Figma file, which uses a 390px wide frame
  // values marked (image) were measured from the mobile reference image scaled to 390px, refine them from cleaner exports

  // top row, its height comes from the padding and the logo rather than being fixed
  $barPaddingTop: 32px;
  $barPaddingBottom: 24px;
  $barPaddingInline: 24px;
  $logoPadding: 24px;
  $crestWidth: 43.49px;
  $crestHeight: 42.74px;
  // only used to size the open menu below the top row
  $barHeight: $barPaddingTop + $logoPadding * 2 + $crestHeight + $barPaddingBottom;

  // icon buttons, the menu button is wider so the burger sits 12px in from its edge like the Figma button group
  $iconButtonSize: 40px;
  $menuButtonSize: 48px;
  // the icon paths have space round them, these sizes give the Figma glyph sizes (search about 15px, close about 15px)
  $searchIconSize: 20px;
  $closeIconSize: 26px;
  $burgerWidth: 24px;
  $burgerHeight: 12px;

  // search box in the open menu, flexible width
  $searchHeight: 60px;
  $searchGapInline: 12px;
  $searchRadius: 4px;
  $searchSubmitInset: $spacing-2;
  // was 5px, snapped to the scale: a 1px difference measured off a scaled screenshot
  $searchInputPaddingStart: $spacing-1;
  $searchInputPaddingEnd: $spacing-3;

  // menu list: 60px rows with 4px between them, 50px below the top row
  // text in rem so it follows the browser's font size as well as page zoom (WCAG 1.4.4)
  // line height has no unit so it grows with the text
  $linkFontSize: 1rem;
  $linkLineHeight: 1.5;
  $rowHeight: 60px;
  $rowGap: $spacing-1;
  $linkPaddingInline: 36px; // (image)
  // was 50px, and Figma said "about 50", so the 2px to the nearest step is inside that
  $listPaddingTop: $spacing-7;
  $listPaddingBottom: $spacing-6;

  // drill-down panels (image), children line up with the level 1 text as the parent row they were indented under isn't built
  $panelPaddingTop: $spacing-5;
  $childRowHeight: 56px;
  $backHeight: 60px;
  $backPaddingInline: $spacing-5;
  $slideDuration: 0.3s;

  // tablet (481-1279) uses the mobile layout, these stop the search box and menu rows stretching across wide screens
  // both are wider than anything reached on mobile, so they need no breakpoint
  $searchMaxWidth: 480px;
  $listMaxWidth: 480px;

  // when the menu opens the search box slides out leftwards from where the search icon was, like the old component
  // it animates max-width, as a flexible width can't be transitioned; the end value is the box's real width,
  // the screen minus everything else in the open top row, so the slide takes the full time at every screen size
  $searchSlideDuration: 0.4s;
  // what shares the row with the open box: the bar's padding, the close arrow, the box's own margins and the burger.
  // the logo is hidden while the box is open, so it isn't counted
  $searchRowOthers: $barPaddingInline * 2 + $iconButtonSize + $searchGapInline * 2 + $menuButtonSize;
  // the open box's cap. It only binds from 690px up (530 + $searchRowOthers); below that the row
  // is the limit, so a phone is unaffected by this number and there's no tablet media query.
  // 305px was the value from the old design, but it only ever bound from 465px up, which is tablet
  $searchMaxWidthOpen: 530px;
  $searchSlideEndWidth: unquote("min(#{$searchMaxWidthOpen}, calc(100vw - #{$searchRowOthers}))");

  // arrow drawn with borders so it stays visible in forced colours, 13 x 11 in Figma
  $arrowWidth: 13px;
  // was 15px measured from the image, so 1px off the scale is inside the measurement error
  $arrowGap: $spacing-4;
  $arrowStroke: 2px;
  $arrowHeadSize: 8px;

  // desktop (1280 and up), values from the old ds2-top-nav desktop SCSS and screenshots
  $desktopBarHeight: 80px;
  $desktopMaxWidth: 1400px;
  $desktopPaddingInline: $spacing-4;
  $desktopLogoHeight: 34px;
  $desktopLinkPaddingInline: $spacing-4;
  // narrows towards 1280 (16px at 1440, 12px at 1280) so the nav still fits beside the open
  // search box when a user applies their own text spacing (WCAG 1.4.12), or when labels are longer
  $desktopLinkPaddingFluid: unquote("clamp(10px, calc(2.5vw - 20px), #{$desktopLinkPaddingInline})");
  // between the logo, nav and search; also the smallest gap left between the logo and the nav when search is open
  $desktopColumnGap: $spacing-4;
  $desktopRowHeight: 52px;
  $desktopPanelPaddingTop: $spacing-3;
  $desktopPanelPaddingBottom: $spacing-7;
  $desktopLevel2Width: 33%;
  $desktopLevel2ArrowWidth: 20px;
  $desktopArrowToLevel3Gap: $spacing-5;
  $desktopSearchWidth: 250px;
  // the open box fills the space the links leave, up to this
  $desktopSearchMaxWidth: 800px;
  $desktopSearchHeight: 44px;
  $arrowGrowDuration: 0.4s;
  $arrowTurnDuration: 0.2s;

  $focusOutlineWidth: 2px;
  $focusOutlineOffset: 2px;
  $menuZIndex: 100;
  $seamOverlap: 1px;
  $noJsIndent: 24px;

  position: relative;
  font-family: uolInter, Arial, Helvetica, sans-serif;
  background: $bgColour;
  color: $fgColour;

  // the site doesn't set border-box globally, so full width rows would be their padding wider than the screen
  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  // one focus style for the whole header, keyboard focus only (WCAG 2.4.7)
  // the ring is the highlight colour, about 18:1 against the black bar (WCAG 1.4.11 wants 3:1)
  // the search input is left out: its ring goes round the whole search box, see &__search
  // :where keeps the specificity low, so full width rows can move the ring inside themselves
  :where(a, button):focus-visible {
    outline: $focusOutlineWidth solid $highlightColour;
    outline-offset: $focusOutlineOffset;
  }

  // top row

  &__bar {
    display: flex;
    align-items: center;
    // the controls that fade out while the search box opens are positioned against this
    position: relative;
    // the logo is the tallest thing in the row, so the bar would shrink whenever it's hidden
    // (opening the search box). This holds the height the logo would have given it.
    // $barHeight, not the logo's own height, because box-sizing is border-box here so this
    // has to include the bar's padding
    min-height: $barHeight;
    padding: $barPaddingTop $barPaddingInline $barPaddingBottom;
  }

  &__logo {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    padding: $logoPadding;
    color: inherit;
    fill: currentColor;
  }

  &__logo-crest {
    width: $crestWidth;
    height: $crestHeight;
  }

  // wordmark only has room on desktop, the crest alone is used below that
  &__logo-wordmark {
    display: none;
    height: $crestHeight;

    @media (min-width: $desktopBreakpoint) {
      display: block;
    }
  }

  // shared reset for the icon buttons
  &__search-toggle,
  &__search-close,
  &__menu-toggle,
  &__search-submit {
    align-items: center;
    justify-content: center;
    flex: none;
    width: $iconButtonSize;
    height: $iconButtonSize;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;

    // hover colour for mouse users only, so it doesn't stick after a tap on a touch screen
    @media (hover: hover) {
      &:hover {
        color: $highlightColour;
      }
    }
  }

  &__menu-toggle {
    width: $menuButtonSize;
    height: $menuButtonSize;
  }

  // only shown once the JS is running, see &--js below
  &__search-toggle,
  &__menu-toggle {
    display: none;
  }

  // shown only while the search box is open, see &--search-open below
  // it's the one visible way to close the box, which matters on a touch screen where there's no Escape
  &__search-close {
    display: none;

    .ds2-top-nav__back-arrow {
      // the arrow is the whole button here, rather than sitting after a label
      margin: 0;
    }
  }

  &__search-icon {
    width: $searchIconSize;
    height: $searchIconSize;
    fill: currentColor;
  }

  &__menu-icon {
    fill: currentColor;

    &--burger {
      width: $burgerWidth;
      height: $burgerHeight;
    }

    &--close {
      display: none;
      width: $closeIconSize;
      height: $closeIconSize;
    }
  }

  // icon follows the button state rather than a class, so it can't disagree with what is announced
  &__menu-toggle[aria-expanded="true"] {
    .ds2-top-nav__menu-icon--burger {
      display: none;
    }

    .ds2-top-nav__menu-icon--close {
      display: block;
    }
  }

  // the arrow and the box are one unit on desktop, so they slide together. Everywhere else this
  // wrapper gets out of the way and they behave as direct children of the bar
  &__search-group {
    display: contents;
  }

  // search box, shown in the open menu (or always when there is no JS)

  &__search {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    max-width: $searchMaxWidth;
    height: $searchHeight;
    margin-inline: $searchGapInline;
    border: 1px solid $searchBorderColour;
    border-radius: $searchRadius;

    // the input's focus ring goes round the whole box instead of inside it.
    // :has() is the newest thing this component uses: Firefox only got it in December 2023.
    // if it ever isn't supported the ring goes round the input instead, which is only cosmetic
    &:has(.ds2-top-nav__search-input:focus-visible) {
      outline: $focusOutlineWidth solid $highlightColour;
      outline-offset: $focusOutlineOffset;
    }
  }

  &__search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 $searchInputPaddingEnd 0 $searchInputPaddingStart;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    // 16px or more stops iOS zooming in when the input is focused, 1rem is 16px unless the user has chosen larger
    font-size: $linkFontSize;

    &::placeholder {
      color: inherit;
      opacity: 1;
    }

    &:focus {
      outline: none;
    }
  }

  // submit comes after the input in the source so it's announced in the usual order, but sits on the left as in the design
  &__search-submit {
    display: inline-flex;
    order: -1;
    margin-left: $searchSubmitInset;
  }

  // menu

  &__list {
    display: flex;
    flex-direction: column;
    gap: $rowGap;
    max-width: $listMaxWidth;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__list--level-1 {
    padding-block: $listPaddingTop $listPaddingBottom;
  }

  &__link {
    display: flex;
    align-items: center;
    width: 100%;
    // min-height, not height, so rows grow rather than clip if the text needs more room
    // and they're well over the 24px minimum tap target (WCAG 2.5.8)
    min-height: $rowHeight;
    padding: 0 $linkPaddingInline;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: $linkFontSize;
    line-height: $linkLineHeight;
    text-align: left;
    text-decoration: none;
    cursor: pointer;

    // rows are full width, so the focus ring sits inside them rather than being cut off
    // at the screen edge, where part of it would be invisible (WCAG 2.4.7)
    &:focus-visible {
      outline-offset: -$focusOutlineWidth * 2;
    }

    @media (hover: hover) {
      &:hover {
        color: $highlightColour;
      }
    }
  }

  // rows inside panels are a little shorter than level 1 rows
  &__panel &__link {
    min-height: $childRowHeight;
  }

  &__list--level-2,
  &__list--level-3 {
    padding-bottom: $listPaddingBottom;
  }

  // back buttons need the JS, they're shown in &--js below
  &__back {
    display: none;
    align-items: center;
    height: $backHeight;
    padding: 0 $backPaddingInline;
    border: 0;
    background: none;
    color: $highlightColour;
    cursor: pointer;

    // sits against the screen edge, so the focus ring goes inside it
    &:focus-visible {
      outline-offset: -$focusOutlineWidth * 2;
    }
  }

  // arrows are drawn with borders in currentColor, not backgrounds: Windows high contrast
  // removes backgrounds but keeps borders, which is what left the old component with a
  // stray chevron and no line (supports WCAG 1.4.11)
  &__arrow,
  &__back-arrow {
    position: relative;
    flex: none;
    width: $arrowWidth;
    border-top: $arrowStroke solid currentColor;

    // head is a square with two borders turned 45deg, its corner lands on the end of the line
    &::after {
      content: '';
      position: absolute;
      top: -($arrowStroke / 2) - ($arrowHeadSize / 2);
      right: $arrowStroke / 2;
      width: $arrowHeadSize;
      height: $arrowHeadSize;
      border-top: $arrowStroke solid currentColor;
      border-right: $arrowStroke solid currentColor;
      transform: rotate(45deg);
    }
  }

  &__arrow {
    margin-left: $arrowGap;
  }

  // same arrow, pointing left
  &__back-arrow {
    transform: scaleX(-1);
  }

  // without JS every level is shown as one long list: the arrows would suggest a drill-down that can't happen,
  // so they're hidden, and child lists are indented so the structure is still clear
  &:not(.ds2-top-nav--js) {
    .ds2-top-nav__arrow {
      display: none;
    }

    .ds2-top-nav__list--level-2,
    .ds2-top-nav__list--level-3 {
      padding-left: $noJsIndent;
    }
  }

  // with JS the menu starts closed: search and nav are hidden behind the icon buttons
  // without JS they stay visible so the links and search still work
  &--js {
    .ds2-top-nav__search-toggle,
    .ds2-top-nav__menu-toggle {
      display: inline-flex;
    }

    .ds2-top-nav__search,
    .ds2-top-nav__nav {
      display: none;
    }

    // menu covers the page below the top row, at least to the bottom of the screen
    // it starts 1px up, over the top row's empty bottom padding, so no line of the page shows through where the two meet
    // on scaled displays (125%, 150%), padding makes up the 1px so the content doesn't move
    .ds2-top-nav__nav {
      position: absolute;
      top: calc(100% - #{$seamOverlap});
      left: 0;
      right: 0;
      z-index: $menuZIndex;
      min-height: calc(100vh - #{$barHeight - $seamOverlap});
      min-height: calc(100dvh - #{$barHeight - $seamOverlap});
      padding-top: $seamOverlap;
      background: $bgColour;
      // clip rather than hidden, so off-screen panels can't cause sideways scrolling
      // and the page can still scroll down to reach a long menu, including at 400% zoom (WCAG 1.4.10).
      // Safari only supports clip from 16. Falling back to visible would let the closed panels
      // off to the right cause sideways scrolling
      overflow-x: clip;
    }

    .ds2-top-nav__back {
      display: inline-flex;
    }

    // drill-down: each panel slides in from the right over the list it belongs to
    // level 2 panels are positioned against the nav, level 3 panels against their level 2 panel
    .ds2-top-nav__panel {
      position: absolute;
      // arrows are positioned too, without this the arrows of later items in the list paint on top of the panel
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      // closed panels are cut to the menu's height so their content doesn't make the page scroll further
      height: 100%;
      overflow: hidden;
      padding-top: $panelPaddingTop;
      background: $bgColour;
      transform: translateX(100%);
      // hidden once it has slid out, so nothing in it can be focused or read out
      // (visibility, not just moving it off screen, which would leave it reachable) (WCAG 2.4.11, 4.1.2)
      visibility: hidden;
      transition: transform $slideDuration ease, visibility 0s linear $slideDuration;
    }

    .ds2-top-nav__panel--open {
      height: auto;
      min-height: 100%;
      overflow: visible;
      transform: none;
      visibility: visible;
      transition: transform $slideDuration ease;
    }

    // panels appear without sliding for anyone who has asked for less motion
    // (WCAG 2.3.3 is AAA, but this costs nothing and helps with vestibular disorders)
    @media (prefers-reduced-motion: reduce) {
      .ds2-top-nav__panel,
      .ds2-top-nav__panel--open {
        transition: none;
      }
    }
  }

  // open menu, mobile and tablet
  // the open box spans the bar: the close arrow sits where the logo was, the burger stays at the right
  &--menu-open {
    .ds2-top-nav__nav {
      display: block;
    }
  }

  // the search box belongs to the search icon, not the menu: the burger opens the menu with the icon still showing
  // --search-closing holds this layout for the length of the animation on the way out, because a
  // closed box is display: none and so has nothing to animate from. The JS takes the class off at the end
  &--search-open,
  &--search-closing {

    // the arrow belongs to the box: it sits against its left edge and moves with it as it grows,
    // rather than floating alone at the edge of the bar. This auto margin and the box's one
    // split the free space, so the pair is centred and the burger keeps the right-hand end
    .ds2-top-nav__search-close {
      display: inline-flex;
      margin-left: auto;
    }


    .ds2-top-nav__search {
      display: flex;
      max-width: $searchSlideEndWidth;
      // the gap to the arrow stays fixed, the space to the burger is free, so the arrow and box
      // stay together and the pair grows outwards from the middle
      margin-inline: $searchGapInline auto;
      // the input and icon stay inside the box while it's narrow
      overflow: hidden;
    }
  }

  // settled open: the logo and the icon are gone for good
  // display: none, not visibility, so they leave the tab order with it
  &--search-open {
    .ds2-top-nav__logo,
    .ds2-top-nav__search-toggle {
      display: none;
    }

    .ds2-top-nav__search {
      animation: ds2-top-nav-search-grow $searchSlideDuration ease;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }

  // while the box is opening or closing, the logo and the search icon cross-fade with the arrow.
  // position: absolute with no offsets leaves them exactly where they sit but takes them out of the
  // flow, so the box has its room straight away and nothing jumps as they go.
  // these rules come after &--search-open so they win where both classes are on the header
  &--search-opening,
  &--search-closing {
    .ds2-top-nav__logo,
    .ds2-top-nav__search-toggle {
      display: inline-flex;
      // each one needs its own offsets: an absolutely positioned child of a flex container is put
      // at the container's start corner, not where it would have sat, so without these the search
      // icon jumps across the bar and lands on top of the logo.
      // the block offsets plus auto margins centre them the way align-items did
      position: absolute;
      top: $barPaddingTop;
      bottom: $barPaddingBottom;
      margin-block: auto;
      // they're on their way out or not properly back yet, so they take no clicks
      pointer-events: none;
    }

    .ds2-top-nav__logo {
      left: $barPaddingInline;
    }

    // its right edge lands where the burger's left edge is, which is where it sits in the flow
    .ds2-top-nav__search-toggle {
      right: $barPaddingInline + $menuButtonSize;
    }
  }

  &--search-opening {
    .ds2-top-nav__logo,
    .ds2-top-nav__search-toggle {
      animation: ds2-top-nav-fade-out $searchSlideDuration ease forwards;
    }

    .ds2-top-nav__search-close {
      animation: ds2-top-nav-fade-in $searchSlideDuration ease;
    }
  }

  // the same animation backwards. Nothing in here is interactive: focus has already gone back to
  // the icon and the box is on its way out, so a click or a tab must not land in it
  &--search-closing {
    .ds2-top-nav__logo,
    .ds2-top-nav__search-toggle {
      animation: ds2-top-nav-fade-in $searchSlideDuration ease;
    }

    .ds2-top-nav__search-close {
      pointer-events: none;
      animation: ds2-top-nav-fade-out $searchSlideDuration ease forwards;
    }

    .ds2-top-nav__search {
      pointer-events: none;
      // its own keyframe rather than the grow one reversed: same name means the browser treats it
      // as the animation that has already finished and never restarts it.
      // forwards holds the end state until the JS takes the class off, so it can't flash back to full width
      animation: ds2-top-nav-search-shrink $searchSlideDuration ease forwards;
    }
  }

  // desktop, 1280 and up: one row with the logo, nav and search, and a mega-menu dropdown
  // only with JS, as without it the dropdowns couldn't open, so the plain stacked lists are kept instead
  @media (min-width: $desktopBreakpoint) {
    &--js {
      // content lines up to a centred column up to 1400px wide, the background stays full width
      $contentInset: unquote("max(#{$desktopPaddingInline}, calc((100% - #{$desktopMaxWidth}) / 2))");

      // the top row's children join this grid (the bar uses display: contents)
      // the nav is right-aligned against the search column, which is only as wide as the icon or the open search box,
      // so opening search pushes the links along towards the logo
      display: grid;
      // equal side columns, so the links are centred on the page rather than in whatever space is
      // left between the logo and the search. The logo is much wider than the search icon, so
      // centring them in the leftover space would sit them noticeably right of centre
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      column-gap: $desktopColumnGap;
      align-items: center;
      min-height: $desktopBarHeight;
      padding-inline: $contentInset;

      .ds2-top-nav__bar {
        display: contents;
      }

      .ds2-top-nav__logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        padding: 0;
      }

      .ds2-top-nav__logo-crest {
        width: $desktopLogoHeight;
        height: $desktopLogoHeight;
      }

      .ds2-top-nav__logo-wordmark {
        height: $desktopLogoHeight;
      }

      .ds2-top-nav__menu-toggle {
        display: none;
      }

      // search: an icon at the right that expands into the search box
      .ds2-top-nav__search-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }

      .ds2-top-nav__search {
        display: none;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: $desktopSearchWidth;
        max-width: none;
        height: $desktopSearchHeight;
        margin: 0;
      }

      // nav: level 1 in a row, centred in its own column
      .ds2-top-nav__nav {
        display: block;
        position: static;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        min-height: 0;
        padding: 0;
        background: none;
        overflow: visible;
      }

      .ds2-top-nav__list--level-1 {
        flex-direction: row;
        gap: 0;
        max-width: none;
        padding: 0;

        > .ds2-top-nav__item > .ds2-top-nav__link {
          width: auto;
          // full height of the bar so the whole bar is the hover area, and the dropdown starts right below it
          min-height: $desktopBarHeight;
          padding: 0 $desktopLinkPaddingFluid;

          &[aria-expanded="true"] {
            color: $highlightColour;
          }

          // points down when closed and up when open
          > .ds2-top-nav__arrow {
            transform: rotate(90deg);
            transition: transform $arrowTurnDuration ease;

            @media (prefers-reduced-motion: reduce) {
              transition: none;
            }
          }

          &[aria-expanded="true"] > .ds2-top-nav__arrow {
            transform: rotate(-90deg);
          }
        }
      }

      // no back buttons on desktop, level 2 and 3 show side by side
      .ds2-top-nav__back {
        display: none;
      }

      // level 2: a full width dropdown below the bar, positioned against the header
      .ds2-top-nav__panel--level-2 {
        display: none;
        position: absolute;
        z-index: $menuZIndex;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: $desktopPanelPaddingTop $contentInset $desktopPanelPaddingBottom;
        transform: none;
        visibility: visible;
        transition: none;

        // in forced colours the black background becomes the page colour, so the dropdown
        // would merge into the page below it. This border gives it a visible edge (supports WCAG 1.4.11)
        @media (forced-colors: active) {
          border-bottom: 1px solid CanvasText;
        }
      }

      // level 3: beside the level 2 column, positioned against the level 2 list
      .ds2-top-nav__panel--level-3 {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 0;
        background: none;
        transform: none;
        visibility: visible;
        transition: none;
      }

      .ds2-top-nav__panel--open {
        display: block;
      }

      .ds2-top-nav__list--level-2 {
        position: relative;
        gap: 0;
        width: $desktopLevel2Width;
        max-width: none;
        padding: 0;
      }

      .ds2-top-nav__list--level-3 {
        gap: 0;
        max-width: none;
        padding: 0;
      }

      .ds2-top-nav__panel .ds2-top-nav__link {
        min-height: $desktopRowHeight;
        padding: 0;

        // the dropdown has room round it, so the focus ring can go outside the row like everywhere else
        &:focus-visible {
          outline-offset: $focusOutlineOffset;
        }

        &[aria-expanded="true"] {
          color: $highlightColour;
        }
      }

      // level 2 items with children: a highlight coloured arrow whose line grows across to the level 3 column when open,
      // and on hover too unless hover has been turned off, when it would point at a panel that isn't going to open
      .ds2-top-nav__list--level-2 > .ds2-top-nav__item > .ds2-top-nav__link {
        padding-right: $desktopArrowToLevel3Gap;

        .ds2-top-nav__link-text {
          flex: none;
        }

        > .ds2-top-nav__arrow {
          flex: 0 1 $desktopLevel2ArrowWidth;
          color: $highlightColour;
          transition: flex-grow $arrowGrowDuration ease;

          @media (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }

        &[aria-expanded="true"] > .ds2-top-nav__arrow {
          flex-grow: 1;
        }

      }

      // the growth on hover follows the same attribute the JS reads, and has to sit out here so
      // the :not() lands on the header itself. Nested inside the rule above it would compile to a
      // descendant selector, and since --js is on that same element it could never match.
      // with hover off the arrow grows only for an open panel, never towards empty space
      &:not([data-desktop-hover="false"]) {
        @media (hover: hover) {
          .ds2-top-nav__list--level-2 > .ds2-top-nav__item > .ds2-top-nav__link:hover > .ds2-top-nav__arrow {
            flex-grow: 1;
          }
        }
      }

    }

    // desktop: the open box fills the space the nav links leave, so it grows by max-width
    // display is set again here because the rule hiding it above sits later in the file than the shared search-open rule
    &--search-open,
    &--search-closing {
      // logo | everything else, replacing logo | nav | search. The arrow and the box share that
      // second column as one flex row, so they move together.
      // this rule sits after &--js, which sets the three columns, and both classes are on the
      // same element
      grid-template-columns: auto minmax(0, 1fr);

      .ds2-top-nav__search-toggle {
        display: none;
      }

      // the logo stays on desktop: there's room for it, and it's the nav links that make way
      .ds2-top-nav__logo {
        display: inline-flex;
      }

      // the links give up their column to the box
      // display: none, not visibility, so they leave the tab order rather than being invisible and still reachable
      .ds2-top-nav__nav {
        display: none;
      }

      // the arrow and the box share one flex row, spanning the slack column and the box's own,
      // and it's packed to the right. That's what makes the box open leftwards out of the icon
      // and the arrow travel with its left edge instead of waiting at a fixed column boundary
      .ds2-top-nav__search-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: $desktopColumnGap;
        grid-column: 2;
        grid-row: 1;
      }

      .ds2-top-nav__search-close {
        // it's a flex item here, not a grid one
        grid-column: auto;
        justify-self: auto;
      }

      // takes the room the links left, up to its cap, and no further
      .ds2-top-nav__search {
        display: flex;
        flex: 1;
        width: auto;
        max-width: $desktopSearchMaxWidth;
        justify-self: auto;
        margin-inline: 0;
      }
    }

    &--search-open .ds2-top-nav__search {
      animation: ds2-top-nav-desktop-search-grow $searchSlideDuration ease;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }

    &--search-closing .ds2-top-nav__search {
      animation: ds2-top-nav-desktop-search-shrink $searchSlideDuration ease forwards;
    }

    // desktop takes no part in the cross-fade: the offsets above are measured from the mobile bar,
    // and here the bar is display: contents so there is nothing to position against
    &--search-opening,
    &--search-closing {
      .ds2-top-nav__logo {
        position: static;
        inset: auto;
        margin-block: 0;
        animation: none;
        pointer-events: auto;
      }
    }

    // on the way out the icon comes back straight away, in the same cell as the shrinking box and
    // against the same right edge, so the box appears to collapse into it.
    // it has to be focusable by then: closing returns focus here, and a display: none element
    // can't take focus, which left focus on the body
    &--search-closing {
      .ds2-top-nav__search-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
      }
    }

    // opening is the other way round: it goes as the box arrives
    &--search-opening {
      .ds2-top-nav__search-toggle {
        display: none;
      }
    }
  }

  // search box slides, see $searchSlideDuration
  // the build's CSS minifier renames keyframes (e.g. to "j"), so search the compiled CSS for the animation rule, not these names
  // separate names on purpose: an animation with the same name on the same element isn't restarted
  @keyframes ds2-top-nav-fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes ds2-top-nav-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  // the way back out. It can't be the grow keyframe reversed: an animation with the same name
  // on the same element isn't restarted, so nothing would happen
  @keyframes ds2-top-nav-search-shrink {
    from {
      max-width: $searchSlideEndWidth;
      opacity: 1;
    }

    67% {
      opacity: 1;
    }

    to {
      max-width: $iconButtonSize;
      opacity: 0;
    }
  }

  // grows outwards from the middle of the bar, because the box is centred by its auto margins.
  // the fade is over the first third, so it doesn't start life as a bare sliver of border
  @keyframes ds2-top-nav-search-grow {
    from {
      max-width: $iconButtonSize;
      opacity: 0;
    }

    33% {
      opacity: 1;
    }

    to {
      max-width: $searchSlideEndWidth;
      opacity: 1;
    }
  }

  // desktop: the box has a fixed width, so its width can be animated directly
  // the open desktop box has no fixed width to animate to, so it grows by max-width like the mobile one
  @keyframes ds2-top-nav-desktop-search-grow {
    from {
      max-width: $iconButtonSize;
    }

    to {
      max-width: $desktopSearchMaxWidth;
    }
  }

  @keyframes ds2-top-nav-desktop-search-shrink {
    from {
      max-width: $desktopSearchMaxWidth;
    }

    to {
      max-width: $iconButtonSize;
    }
  }

  // text for screen readers only: it names the icon buttons and says where each back button goes
  // display: none would hide it from them too, so it stays in the page (WCAG 1.1.1, 2.4.6)
  // kept inside the component so it has no global dependency
  &__visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}