/* Het megamenu. Op desktop valt het over de volle breedte onder de
   balk; op een telefoon staat het gewoon in de uitgeklapte lijst. */

@layer components {
  .site-nav__item {
    position: relative;
  }

  .site-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.925rem;
    font-weight: 500;
    cursor: pointer;
  }

  .site-nav__trigger:hover {
    color: var(--color-accent);
  }

  .site-nav__chevron {
    width: 0.36rem;
    height: 0.36rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--motion);
  }

  .site-nav__trigger[aria-expanded='true'] {
    color: var(--color-accent);
  }

  /* Sta je op een pagina uit het paneel, dan kleurt de sectiekop mee. */
  .site-nav__item:has(a[aria-current='page']) > .site-nav__trigger {
    color: var(--color-accent);
  }

  .site-nav__trigger[aria-expanded='true'] .site-nav__chevron {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .megamenu {
    padding-block: var(--space-l);
    background: #ffffff;
  }

  .megamenu__inner {
    display: grid;
    gap: var(--space-l);
  }

  /* Kolomkoppen in het menu zijn labels, geen koppen: een <h2> in een
     menu dat op elke pagina staat, verrommelt de kopstructuur van elke
     pagina eronder. */
  .megamenu__label,
  .megamenu__feature .megamenu__title {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .megamenu__label {
    margin: 0;
  }

  .megamenu__col ul {
    display: grid;
    gap: var(--space-3xs);
    margin-block-start: var(--space-xs);
    padding: 0;
    list-style: none;
  }

  .megamenu__col a {
    display: grid;
    gap: 0.1rem;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-s);
    text-decoration: none;
    transition: background var(--motion);
  }

  .megamenu__col a:hover,
  .megamenu__col a:focus-visible {
    background: var(--color-surface);
  }

  .megamenu__col a:hover strong,
  .megamenu__col a:focus-visible strong {
    color: var(--color-accent);
  }

  .megamenu__col strong {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
  }

  .megamenu__col span {
    color: var(--color-muted);
    font-size: var(--step--1);
    line-height: 1.4;
  }

  .megamenu__feature {
    display: grid;
    gap: var(--space-2xs);
    align-content: start;
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--gradient-light);
  }

  .megamenu__feature .megamenu__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-ink);
  }

  .megamenu__feature p {
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .megamenu__feature .mock__pill {
    justify-self: start;
  }

  .megamenu__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--color-ink);
  }

  @media (min-width: 60rem) {
    .megamenu {
      position: absolute;
      inset-inline: 0;
      top: 100%;
      z-index: 30;
      border-block-end: 1px solid var(--color-line);
      box-shadow: 0 24px 48px -24px rgb(16 17 22 / 0.25);
    }

    /* Het paneel hangt onder de hele balk, niet onder het menu-item,
       dus de positionering hoort bij de header. */
    .site-nav__item {
      position: static;
    }

    .megamenu__inner {
      grid-template-columns: 1fr 1fr 1.1fr;
    }

    .megamenu__col + .megamenu__col {
      border-inline-start: 1px solid var(--color-line);
      padding-inline-start: var(--space-l);
    }

    /* Het paneel valt uit de balk: korte reis, zachte landing.
       De rusttoestand is de zichtbare; beweging zegt alleen waar
       het vandaan kwam. */
    @media (prefers-reduced-motion: no-preference) {
      .megamenu {
        transition: opacity var(--motion-entrance), translate var(--motion-entrance),
                    display var(--motion-entrance) allow-discrete;
      }

      .megamenu[hidden] {
        opacity: 0;
        translate: 0 -0.6rem;
      }

      @starting-style {
        .megamenu:not([hidden]) {
          opacity: 0;
          translate: 0 -0.6rem;
        }
      }
    }

    /* Onder het open paneel dimt de pagina: het menu leest als een
       laag boven de inhoud, niet als een sectie ertussen. */
    body:has(.megamenu:not([hidden]))::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 10;
      background: color-mix(in oklch, var(--color-ink) 30%, transparent);
      transition: opacity var(--motion-entrance);
    }

    @starting-style {
      body:has(.megamenu:not([hidden]))::before {
        opacity: 0;
      }
    }
  }

  @media (max-width: 60rem) {
    .site-nav__trigger {
      width: 100%;
      justify-content: space-between;
      padding-block: 0.8rem;
      font-size: var(--step-0);
    }

    .megamenu {
      padding-block: 0 var(--space-s);
      background: transparent;
    }

    .megamenu__inner {
      width: 100%;
      padding-inline: 0;
    }

    .megamenu__col a {
      padding-inline: 0;
    }
  }
}