/* Het hoofdmenu: "Oplossingen" klapt uit tot een paneel met de
   oplossingen; op mobiel wordt het hele menu één paneel onder de balk.
   Gedeeld door de homepage, de oplossingen en de blog. De balk zelf
   (sticky, logo, pil) staat in de stijl van elke pagina. */

.menu { position: relative; }
.menu-knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.25;
  color: var(--muted);
}
.menu-knop:hover, .menu.open .menu-knop, .menu-knop.actief { color: var(--ink); }
.menu-knop svg { width: 14px; height: 14px; flex: none; }
.menu.open .menu-knop svg { transform: rotate(180deg); }

.menu-paneel {
  position: absolute; top: calc(100% + 20px); left: -22px; z-index: 60;
  width: min(980px, calc(100vw - 64px));
  background: var(--bg);
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(11, 5, 29, 0.05), 0 18px 48px rgba(11, 5, 29, 0.12);
  padding: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.menu.open .menu-paneel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Een onzichtbare brug, zodat de muis de opening tussen knop en paneel
   kan oversteken zonder dat het menu dichtklapt. */
.menu-paneel::before { content: ''; position: absolute; left: 0; right: 0; top: -21px; height: 21px; }

.menu-kop { display: none; }
.menu-lijst { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.balk-links .menu-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: var(--r-knop);
  color: var(--ink); text-decoration: none;
}
.balk-links .menu-item:hover, .balk-links .menu-item[aria-current] { background: var(--tint); }
.menu-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-knop);
  background: var(--canvas); color: var(--brand-ink);
  display: grid; place-items: center;
}
.menu-ico svg { width: 20px; height: 20px; }
.menu-item strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.menu-kort { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.balk-links .menu-alles {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 16px 14px 6px;
  border-top: 1px solid var(--lijn-zacht);
  font-size: 14px; font-weight: 500; color: var(--brand-ink);
}
.balk-links .menu-alles:hover { color: var(--ink); }
.menu-alles svg { width: 14px; height: 14px; }

/* Op een breed scherm staat het menu in het midden van de balk, met de
   items als pillen: inkt in plaats van grijs, een tint bij aanwijzen. */
@media (min-width: 901px) {
  .balk .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; }
  .balk .logo-link { justify-self: start; }
  .balk .pil { justify-self: end; margin-left: 0; }
  /* Het paneel hangt aan het hele menu, dus het staat midden onder de
     balk en valt op geen enkele breedte buiten beeld. */
  .balk .balk-links { gap: 2px; align-items: center; position: relative; }
  .menu { position: static; }
  .balk .balk-links > a, .menu-knop {
    padding: 8px 14px; border-radius: var(--r-pill);
    color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.25;
    white-space: nowrap;
  }
  .balk .balk-links > a:hover, .menu-knop:hover, .menu.open .menu-knop,
  .balk .balk-links > a[aria-current], .menu-knop.actief { background: var(--tint-2); color: var(--ink); }
  .menu-paneel { left: 50%; top: calc(100% + 12px); transform: translate(-50%, -4px); }
  .menu.open .menu-paneel { transform: translate(-50%, 0); }
  .menu-paneel::before { top: -13px; height: 13px; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .menu-paneel, .menu.open .menu-paneel { transform: translate(-50%, 0); }
}

/* De menuknop voor mobiel: twee streepjes die een kruis worden. */
.menu-mobiel {
  display: none; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: var(--r-knop);
  background: var(--tint-2); color: var(--ink); cursor: pointer;
  place-items: center;
}
.menu-mobiel span { grid-area: 1 / 1; display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.menu-mobiel span:first-child { transform: translateY(-3px); }
.menu-mobiel span:last-child { transform: translateY(3px); }
.menu-open .menu-mobiel span:first-child { transform: rotate(45deg); }
.menu-open .menu-mobiel span:last-child { transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .menu-knop svg, .menu-mobiel span { transition: transform 0.2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-paneel, .menu.open .menu-paneel { transition: none; transform: none; }
}

@media (max-width: 900px) {
  .balk .wrap { gap: 10px; }
  .menu-mobiel { display: inline-grid; }
  /* Het mobiele menu vult het scherm onder de balk. De balk is de
     referentie (door zijn achtergrondfilter), dus het paneel hangt eronder
     en is zo hoog als wat er van het scherm over is; menu.js meet de
     onderrand van de balk. Openen: schuift en vervaagt in. */
  .balk .balk-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--menu-top, 68px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg);
    border-top: 1px solid var(--lijn-zacht);
    padding: 4px clamp(20px, 4vw, 40px) 32px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .balk.menu-open .balk-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .balk .balk-links > a {
    padding: 16px 0; border-top: 1px solid var(--lijn-zacht);
    font-size: 18px; color: var(--ink);
  }
  /* De regels komen kort na elkaar binnen. */
  .balk.menu-open .balk-links > * { animation: menu-in 0.32s ease both; }
  .balk.menu-open .balk-links > :nth-child(2) { animation-delay: 0.04s; }
  .balk.menu-open .balk-links > :nth-child(3) { animation-delay: 0.08s; }
  .balk.menu-open .balk-links > :nth-child(4) { animation-delay: 0.12s; }
  .balk.menu-open .balk-links > :nth-child(5) { animation-delay: 0.16s; }

  /* Oplossingen klapt in en uit; standaard dicht. */
  .menu-knop {
    display: flex; width: 100%; justify-content: space-between;
    padding: 16px 0; font-size: 18px; color: var(--ink);
  }
  .menu-knop svg { width: 18px; height: 18px; }
  .menu-paneel, .menu.open .menu-paneel {
    position: static; width: auto; padding: 0;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: none;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }
  .menu.open .menu-paneel { grid-template-rows: 1fr; }
  .menu-paneel > .menu-binnen { overflow: hidden; min-height: 0; }
  .menu-paneel::before { display: none; }
  .menu-kop { display: none; }
  .menu-lijst { grid-template-columns: 1fr; }
  .balk-links .menu-item { align-items: center; padding: 8px 10px; margin-inline: -10px; }
  .menu.open .menu-lijst li { animation: menu-in 0.3s ease both; }
  .menu.open .menu-lijst li:nth-child(2) { animation-delay: 0.03s; }
  .menu.open .menu-lijst li:nth-child(3) { animation-delay: 0.06s; }
  .menu.open .menu-lijst li:nth-child(4) { animation-delay: 0.09s; }
  .menu.open .menu-lijst li:nth-child(5) { animation-delay: 0.12s; }
  .menu.open .menu-lijst li:nth-child(6) { animation-delay: 0.15s; }
  .menu.open .menu-lijst li:nth-child(7) { animation-delay: 0.18s; }
  .menu.open .menu-lijst li:nth-child(8) { animation-delay: 0.21s; }
  .menu.open .menu-lijst li:nth-child(n+9) { animation-delay: 0.24s; }
  .menu-kort { display: none; }
  .balk-links .menu-alles { border-top: 0; margin-top: 0; padding: 10px 0 14px; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .balk .balk-links, .balk.menu-open .balk-links, .menu-paneel { transition: none; transform: none; }
  .balk.menu-open .balk-links > *, .menu.open .menu-lijst li { animation: none; }
}

/* De smalle balk boven het menu: wie we zijn en het mailadres. Hij scrolt
   mee weg; alleen de balk met het menu blijft staan. */
.subbalk { background: var(--brand-ink); color: rgba(255, 255, 255, 0.82); font-size: 13px; line-height: 1.45; }
.subbalk .wrap { display: flex; align-items: center; gap: 20px; padding-top: 8px; padding-bottom: 8px; }
.subbalk__tekst { margin-right: auto; }
.subbalk a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.subbalk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.subbalk a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.subbalk svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 900px) {
  .subbalk__tekst { display: none; }
  .subbalk .wrap { justify-content: center; }
}