// Desktop layout: single row with JS-driven mega-menu dropdowns.
@import 'ds2-top-nav-vars';

.ds2-top-nav {

@media (min-width: $desktopBreakpoint) {
  &--js {
    // Desktop bar uses a centred three-column grid.
    $contentInset: unquote("max(#{$desktopPaddingInline}, calc((100% - #{$desktopMaxWidth}) / 2))");

    // Desktop bar uses a three-column grid; search open pushes links toward the logo.
    display: grid;
    // Equal side columns keep the nav centred instead of skewing toward the search icon.
    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 trigger expands into the search field.
    .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: 250px;
      max-width: none;
      height: 44px;
      margin: 0;
    }

    // Top-level nav sits in its own centred 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 bar height keeps the whole row as the hover target.
        min-height: $desktopBarHeight;
        padding: 0 $desktopLinkPaddingFluid;

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

        // Arrow rotates with the open state.
        > .ds2-top-nav__arrow {
          transform: rotate(90deg);
          transition: transform 0.2s ease;

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

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

    // Desktop has no back buttons; level 2 and 3 sit side by side.
    .ds2-top-nav__back {
      display: none;
    }

    // Level 2 dropdown sits full width beneath the header bar.
    .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: $spacing-3 $contentInset $spacing-7;
      transform: none;
      visibility: visible;
      transition: none;

      // Keep the dropdown edge visible in forced colours.
      @media (forced-colors: active) {
        border-bottom: 1px solid CanvasText;
      }
    }

    // Level 3 panel sits beside 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 enough room for the focus ring to sit outside the row.
      &:focus-visible {
        outline-offset: $focusOutlineOffset;
      }

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

    // Level 2 items with children grow an arrow when open or hovered.
    .ds2-top-nav__list--level-2 > .ds2-top-nav__item > .ds2-top-nav__link {
      padding-right: $spacing-5;

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

      > .ds2-top-nav__arrow {
        flex: 0 1 20px;
        color: $highlightColour;
        transition: flex-grow 0.4s ease;

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

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

  }

  // Desktop open search fills the space left by the hidden nav links.
  &--search-open,
  &--search-closing {
    // Search-open layout: logo plus one shared flex row for the arrow and field.
    grid-template-columns: auto minmax(0, 1fr);

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

    // Desktop keeps the logo visible while nav links are hidden.
    .ds2-top-nav__logo {
      display: inline-flex;
    }

    // Hide nav links from the tab order when the search box expands.
    .ds2-top-nav__nav {
      display: none;
    }

    // Arrow and search box share one flex row so they open leftward together.
    .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;
    }

    // Search field takes the space the links vacate, capped at its max width.
    .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 search doesn't use the mobile cross-fade because the bar is display: contents.
  &--search-opening,
  &--search-closing {
    .ds2-top-nav__logo {
      position: static;
      inset: auto;
      margin-block: 0;
      animation: none;
      pointer-events: auto;
    }
  }

  // Closing state brings the search icon back into place and restores focus there.
  &--search-closing {
    .ds2-top-nav__search-toggle {
      display: inline-flex;
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }
  }

  // Opening state hides the icon while the box expands.
  &--search-opening {
    .ds2-top-nav__search-toggle {
      display: none;
    }
  }
}
}