// @file
// Styles for the Mega Menu.
@use '00-config' as *;

// Adjust the selector and colors as needed for your site.
// If the mega menu is not the top element on the page,
// the element(s) above it need a background color and
// z-index in order to cover the mega menu.
.l-header {
  background: gesso-color('background', 'site');
  position: relative;
  z-index: 2;
}

.c-mega-menu {
  align-items: center;
  background: gesso-color('background', 'site');
  display: flex;
  margin-block: 0 rem(gesso-spacing(2.5));
  margin-inline: 0;
  position: relative;
  width: 100%;
  z-index: 1;

  &::after {
    background-color: gesso-color(background, site);
    content: '';
    display: block;
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;
    width: 100%;
    z-index: gesso-z-index(drawer);
  }

  > .c-mega-menu__item {
    border-block-end: 1px solid gesso-grayscale(white);
    list-style-type: none;
    padding-block: 1.25rem;
    padding-inline: 0.8125rem 1.8125rem;

    > .c-mega-menu__link {
      @include link(gesso-color(text, link), gesso-color(text, link-hover));
      border-block-end: rem(2px) solid transparent;
      border-radius: rem(1px);
      display: block;
      font-size: rem(gesso-font-size(5));
      font-weight: gesso-font-weight(regular);
      padding-block: rem(4.8px);
      padding-inline: 0;
      position: relative;
      text-align: start;
      transition: all 0.4s ease;
      width: auto;
      z-index: gesso-z-index(drawer) + 1;
    }

    button.c-mega-menu__link {
      @include text-button;
      font-size: rem(gesso-font-size(5));
    }
  }

  > .c-mega-menu__item:last-child > a {
    font-weight: gesso-font-weight(bold);
  }
}

.c-mega-menu__item {
  margin-block-end: 0;
}

.c-mega-menu__section {
  background-color: gesso-color(ui, generic, background-dark);
  color: gesso-color(text, on-dark);
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-block: 0;
  overflow-wrap: normal;
  padding: rem(gesso-spacing(7));
  position: absolute;
  transform: translate3d(0, 0, 0);
  transition: transform gesso-duration(long) gesso-easing(ease-in-out);
  width: 100%;
  z-index: 0;

  a,
  button {
    &:focus {
      @include focus(gesso-color(text, on-dark));
    }
  }

  &[hidden] {
    display: block;
    transform: translate3d(0, -100%, 0);
    z-index: -1;
  }
}

.menu__section-title {
  display: none;
}

.c-mega-menu__section-inner {
  @include layout-constrain();
  align-items: flex-start;
  display: grid;
  gap: rem(gesso-spacing(10));
  grid-template-columns: rem(250px) 1fr 1fr;
  margin-block-start: rem(gesso-spacing(2));
  padding-inline: rem(gesso-site-margins(desktop));
}

.c-mega-menu__section-close {
  @include text-button;
  color: gesso-color(text, on-dark);
  height: rem(50px);
  inset-block-start: rem(10px);
  inset-inline-end: rem(10px);
  position: absolute;
  text-align: center;
  transition: opacity gesso-duration(short) gesso-easing(ease-in);
  width: rem(50px);

  .c-mega-menu__close-icon {
    height: rem(22px);
    width: rem(32px);
  }

  &:hover {
    opacity: 0.85;
  }
}

.c-mega-menu__section-title {
  color: gesso-color(text, on-dark);
  display: block;
  font-size: rem(gesso-font-size(13));
}

.c-mega-menu__icon {
  transition: margin 0.2s;
}

.c-mega-menu__subnav {
  @include list-clean;
}

.c-mega-menu__subnav .c-mega-menu__item:not(.has-subnav) {
  margin-block-start: rem(gesso-spacing(1));
}

.c-mega-menu__subnav .c-mega-menu__item.has-subnav {
  margin-block-start: 0;
}

// stylelint-disable selector-max-compound-selectors
.c-mega-menu__subnav .c-mega-menu__subnav {
  margin-block-start: gesso-spacing(1);
}

.c-mega-menu__subnav .c-mega-menu__subnav .c-mega-menu__item {
  margin-block-end: gesso-spacing(1);
}

.c-mega-menu__subnav .c-mega-menu__link {
  border-block-end: 0;
  color: inherit;
  font-size: rem(gesso-font-size(5));
  font-weight: gesso-font-weight(bold);
  position: static;
  text-decoration: none;
}

.c-mega-menu__subnav a.c-mega-menu__link {
  > span {
    white-space: nowrap;

    &::after {
      display: inline-block;
      margin-inline: rem(gesso-spacing(1)) rem(gesso-spacing(0.5));
      position: relative;
      transition: margin 0.2s;
      vertical-align: middle;
      white-space: nowrap;
    }
  }

  // Safari 14 doesn't recognize :focus-visible, so
  // combining with the above selector causes the entire
  // styles, including :hover, to be ignored.
  &:hover {
    opacity: 0.85;

    > span::after {
      margin-inline: rem(gesso-spacing(1.5)) 0;
    }
  }

  &:focus-visible {
    opacity: 0.85;

    > span::after {
      margin-inline: rem(gesso-spacing(1.5)) 0;
    }
  }
}

.c-mega-menu__subnav .c-mega-menu__subnav .c-mega-menu__link {
  color: gesso-brand(blue, light-1);
  font-size: rem(gesso-font-size(2));
  font-weight: gesso-font-weight(semibold);
  line-height: gesso-line-height(short);
  text-transform: none;

  &:hover {
    color: gesso-grayscale(white);
    opacity: 1;
  }

  &:focus-visible {
    color: gesso-grayscale(white);
    opacity: 1;
  }
}

.c-mega-menu__subnav .c-mega-menu__subnav a.c-mega-menu__link {
  > span::after {
    content: '';
    display: none;
  }
}
// stylelint-enable selector-max-compound-selectors

@include breakpoint-max(gesso-breakpoint(mobile-menu)) {
  .c-mega-menu__section {
    background-color: rgba(gesso-color(ui, generic, background-lighter), 0.98);
  }

  .c-mega-menu__section-title,
  .c-mega-menu__section-close {
    display: none;
  }
}

@include breakpoint(gesso-breakpoint(desktop-lg)) {
  .c-mega-menu {
    .c-mega-menu__section {
      padding: rem(gesso-spacing(10)) rem(gesso-spacing(12));
    }

    .c-mega-menu__section-inner {
      gap: rem(100px);
    }

    .c-mega-menu__section .menu__subnav {
      gap: rem(gesso-spacing(4));
    }
  }
}
