/**
 * Pill-styling voor Main navigation wanneer het in de header staat.
 * Target = .menu--as-pills (toegevoegd in Twig).
 */

/* 1) Horizontale layout met wrap */
.menu--as-pills .menu,
.menu--as-pills .menu--main {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: center;
}

/* 2) Links als afgeronde "buttons" (pills) */
.menu--as-pills .menu__link,
.solo-small {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 12px 18px;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent), #000 15%);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
  background-color: #a16822;
}

/* Hover & focus */
.menu--as-pills .menu__link:hover { background: #f8f6f2; }
.menu--as-pills .menu__link:focus-visible {
  outline: 3px solid rgba(29, 60, 106, .35); /* UGent-blauwachtige focusring */
  outline-offset: 2px;
}

/* 3) Actieve knop donker invullen (current + parents in trail) */
.menu--as-pills .menu__link.is-active,
.menu--as-pills .menu__item--active-trail > .menu__link {
  background: var(--accent);  /* donkere knopkleur – pas aan naar jouw palette */
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.15), 0 2px 8px rgba(0,0,0,.12);
}

/* 4) Compacter op small screens */
@media (max-width: 520px) {
  .menu--as-pills .menu__link {
    height: 2rem;
    padding: 0 .75rem;
    font-weight: 600;
  }
}