/* Laag: framework — zie de rangorde in skeleton/templates/page.php. Site-CSS en CMS-opmaak
 * winnen hiervan zonder specificiteits-trucs; binnen de laag telt specificiteit gewoon. */
@layer framework {
/* Gedeelde structuur voor Menubuilder-dropdowns; kleur en typografie blijven site/CMS-tokens. */
.site-nav--menubuilder .site-nav__item--has-dropdown {
  position: relative;
}

.site-nav--menubuilder .site-nav__dropdown {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: 100%;
  min-width: min( min(70rem, 92vw), 70rem );
  padding: 1.5rem;
  background: var(--color-background, #fff);
  color: var(--color-text, inherit);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.35rem);
  transition: opacity .18s ease, transform .18s ease;
}

.site-nav--menubuilder .site-nav__item--has-dropdown:hover > .site-nav__dropdown,
.site-nav--menubuilder .site-nav__item--has-dropdown:focus-within > .site-nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-nav--menubuilder .site-nav__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
}

.site-nav--menubuilder .site-nav__column-list,
.site-nav--menubuilder .site-nav__dropdown-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav--menubuilder .site-nav__column-title,
.site-nav--menubuilder .site-nav__column-subtitle,
.site-nav--menubuilder .site-nav__item-eyebrow,
.site-nav--menubuilder .site-nav__item-title,
.site-nav--menubuilder .site-nav__item-subtitle,
.site-nav--menubuilder .site-nav__cta-title,
.site-nav--menubuilder .site-nav__cta-subtitle {
  display: block;
}

.site-nav--menubuilder .site-nav__column-subtitle,
.site-nav--menubuilder .site-nav__item-eyebrow,
.site-nav--menubuilder .site-nav__item-subtitle,
.site-nav--menubuilder .site-nav__cta-subtitle {
  opacity: .72;
}

.site-nav--menubuilder .site-nav__dropdown-link,
.site-nav--menubuilder .site-nav__cta {
  display: block;
  color: inherit;
  text-decoration: none;
}

.site-nav--menubuilder .site-nav__dropdown-link {
  padding: .45rem 0;
}

.site-nav--menubuilder .site-nav__cta {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .65rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.site-nav--menubuilder .site-nav__cta-image {
  flex: 0 0 4rem;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

@media (max-width: 48rem) {
  .site-nav--menubuilder .site-nav__dropdown {
    position: static;
    min-width: 0;
    padding: .75rem 0 .75rem 1rem;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav--menubuilder .site-nav__columns {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}
}