/**
 * mega-menu.css
 */

/**
 * Component: Mega Menu Widths
 * Desktop only, tablet and mobile panels are as wide as the viewport.
 * A panel is as wide as the columns it holds, on the grid of the full width panel: six columns across the header container.
 * Every size therefore shares one column width and one column offset from the left edge of the panel.
 * The 100% in --mega-col resolves against the containing block of the panel, which is header > .container.
 */
@media (min-width: 1025px) {
  body > header {
    .menu-item.has-mega {
      --mega-cols: 4;
      --mega-col: calc((100% - 2 * var(--mega-pad) - 5 * var(--mega-col-gap)) / 6);
    }

    .menu-item.mega-width-small {
      --mega-cols: 3;
    }

    .menu-item.mega-width-large {
      --mega-cols: 5;
    }

    .menu-item.mega-width-container {
      --mega-cols: 6;
    }

    .mega-container {
      width: calc(2 * var(--mega-pad) + var(--mega-cols) * var(--mega-col) + (var(--mega-cols) - 1) * var(--mega-col-gap));
      max-width: 100%;
    }
  }
}

/* Component: Mega Menu Columns */
body > header {
  .mega-column {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 16px;
    min-width: 0;

    &.size-wide {
      flex-grow: 2;
    }

    &.is-highlighted {
      background: var(--color-white-dark);
    }

    h3 {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      color: var(--color-black);
      font-size: var(--font-size-small);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;

      a {
        color: inherit;
        text-decoration: none;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }
  }

  /* Component: Mega Menu Items */
  .mega-items,
  .mega-subitems {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mega-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    & > a {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 4px;
      min-width: 0;
      color: var(--color-black);
      font-size: var(--font-size-medium);
      font-weight: 400;
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    .mega-item-description {
      order: 1;
      flex-basis: 100%;
      color: var(--color-grey);
      font-size: var(--font-size-small);
      font-weight: 400;
    }
  }

  .mega-subitems {
    flex-basis: 100%;
    gap: 4px;
    margin-top: 4px;
    padding-left: 12px;
  }

  .mega-drill,
  .mega-back {
    display: none;
  }
}

/* Component: Mega Menu Display */
body > header {
  .menu nav ul#menu-primary .menu-item:is(.mega-display-highlighted, .mega-display-simple-highlight) > a,
  .mega-column:is(.mega-display-highlighted, .mega-display-simple-highlight) > h3,
  .mega-item:is(.mega-display-highlighted, .mega-display-simple-highlight) > a {
    color: var(--color-primary);
  }

  .menu-item.mega-display-highlighted > a::before,
  .mega-column.mega-display-highlighted > h3::before,
  .mega-item.mega-display-highlighted > a::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../../images/icons/icon-star-open-48x48.png') no-repeat center / contain;
    -webkit-mask: url('../../images/icons/icon-star-open-48x48.png') no-repeat center / contain;
    position: relative;
    top: -1px;
  }

  .menu-item.mega-display-highlighted > a::before {
    margin-right: 6px;
  }

  .mega-column.mega-display-chevron > h3::after,
  .mega-item.mega-display-chevron > a::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
    -webkit-mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
    position: relative;
    top: 1px;
  }
}

/* Desktop + Tablet: Mega Menu Spacing */
@media (min-width: 768px) {
  body > header {
    .mega-container > .mega-inner {
      gap: var(--mega-col-gap);
      padding: var(--mega-pad);
    }
    
    .mega-items {
      margin-block: -5px;
    }

    .mega-items > .mega-item > a {
      padding-block: 5px;
    }
  }
}

/* Mobile: Mega Menu Layers */
@media (max-width: 767px) {
  body > header {
    .menu-item.has-mega:not(.is-open):hover .mega-container {
      opacity: 0;
      transform: translateX(100%);
      visibility: hidden;
      pointer-events: none;
    }

    .menu-item.has-mega .mega-container {
      height: calc(100dvh - var(--header-offset-mobile));
      transform: translateX(100%);
    }

    .mega-container > .mega-inner {
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .mega-column {
      flex: none;
      gap: 0;
      padding: 0;

      h3 {
        position: relative;
        min-height: 52px;
        padding: 0 16px;
        border-bottom: 1px solid var(--color-grey-light);

        a::after {
          content: '';
          position: absolute;
          inset: 0;
        }
      }
    }

    .mega-items {
      gap: 0;
    }

    .mega-inner > .mega-column:last-child {
      padding-bottom: 40px;
    }

    .mega-item {
      flex-wrap: nowrap;
      min-height: 52px;
      border-bottom: 1px solid var(--color-grey-light);

      & > a {
        align-self: stretch;
        align-content: center;
        padding: 0 16px;
      }
    }

    .mega-items > .mega-item > a {
      padding-left: 32px;
    }

    .mega-column.mega-display-chevron > h3::after {
      display: none;
    }

    .mega-item.mega-display-chevron > a {
      justify-content: space-between;
    }

    .mega-drill {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: flex-end;
      align-self: stretch;
      width: 56px;
      padding: 0 16px 0 0;
      border: none;
      background: transparent;
      color: var(--color-black);
      cursor: pointer;

      &::after {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: currentColor;
        mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
        -webkit-mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
        position: relative;
        top: 1px;
      }
    }

    .mega-subitems {
      position: absolute;
      inset: 0;
      z-index: 1;
      gap: 0;
      margin: 0;
      padding: 0;
      background: var(--color-white);
      overflow-y: auto;
      overscroll-behavior: contain;
      transform: translateX(100%);
      visibility: hidden;
      transition: transform 0.2s ease-out, visibility 0s linear 0.2s;

      .mega-item > a {
        font-weight: 500;
      }
    }

    .mega-subitems > .mega-item:last-child {
      margin-bottom: 40px;
    }

    .mega-item.is-drilled > .mega-subitems {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
    }

    .mega-column h3,
    .mega-item,
    .mega-back {
      box-sizing: border-box;
    }

    .mega-back {
      display: flex;
      position: sticky;
      top: 0;
      z-index: 1;
      margin: 0;
      min-height: 52px;
      padding: 0 16px;
      border-bottom: 1px solid var(--color-grey-light);
      background: var(--color-white);
    }

    .mega-inner > .mega-back {
      flex: none;
    }

    .mega-back-button {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 0;
      border: none;
      background: transparent;
      color: var(--color-black);
      font: inherit;
      font-size: var(--font-size-small);
      font-weight: 600;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
    }
  }

  body:has(#wpadminbar) > header .mega-container {
    height: calc(100dvh - var(--header-offset-mobile) - var(--wpadminbar-height-mobile));
  }

  body:has(.menu-container.is-open) {
    overflow: hidden;
  }
}