/* メガメニュー型popover */
/* Mega-menu popover */

.mega-menu {
  --mega-menu-gap: 8px;

  inset: calc(var(--site-header-height) + var(--mega-menu-gap)) 24px auto;
  display: block;
  width: auto;
  height: max-content;
  min-block-size: 0;
  max-block-size: calc(100dvh - var(--site-header-height) - var(--mega-menu-gap) - 24px);
  padding: 24px;
  border-radius: 8px;
  box-shadow:
    0 20px 60px rgb(32 32 32 / 10%),
    inset 0 0 0 1px var(--line);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  opacity: 0;
  translate: 0 -8px;

  @media (width <= 720px) {
    inset-inline: 16px;
    max-block-size: calc(100dvh - var(--site-header-height) - var(--mega-menu-gap) - 16px);
    padding: 16px;
  }

  &::backdrop {
    background: transparent;
  }

  .mega-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    @media (width <= 960px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width <= 568px) {
      grid-template-columns: 1fr;
    }

    section {
      display: grid;
      align-content: start;
      gap: 8px;
      min-width: 0;
      padding: 0 20px 20px 0;

      @media (width <= 568px) {
        padding-inline-end: 0;
      }
    }

    h2 {
      margin: 0 0 4px;
      color: rgb(32 32 32 / 60%);
      font-size: 1rem;
      text-transform: uppercase;
    }

    a {
      display: block;
      min-width: 0;
      padding: 12px;
      border-radius: 8px;
      font-weight: bold;
      transition: background-color 0.2s;

      @media (any-hover: hover) {
        &:hover {
          background: var(--bg);
        }
      }
    }
  }

  &:popover-open {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 -8px;
    }
  }
}