/* ==========================================================================
   MKN KOPBLOK — ecosysteembalk + hoofdmenu met uitklapmenu's
   Eén blok, identiek op elke pagina. Gebruikt de bestaande sitevariabelen
   (--ink, --brown, --orange, --amber, --bg, --line, --mut) zodat het nooit
   met de bestaande opmaak botst.
   ========================================================================== */

.mkn-kopblok{position:relative;z-index:60}

/* --- 1. ecosysteembalk (ZWART, nooit blauw) ------------------------------ */
.mkn-eco{background:var(--ink);color:#fff}
.mkn-eco .in{max-width:1120px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;
  justify-content:center;gap:22px;flex-wrap:wrap}
.mkn-eco .lbl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);flex:0 0 auto}
.mkn-eco a{color:rgba(255,255,255,.86);font-size:13px;text-decoration:none;padding:2px 0;
  border-bottom:1px solid rgba(255,255,255,.28);transition:.15s;white-space:nowrap}
.mkn-eco a:hover,.mkn-eco a:focus-visible{color:#fff;border-bottom-color:var(--amber)}

/* --- 2. aankondigingsbalk ------------------------------------------------ */
.mkn-kopblok .anno{background:var(--brown);color:#fff;text-align:center;padding:8px 20px;
  font-size:13px;letter-spacing:.2px}

/* --- 3. hoofdmenu -------------------------------------------------------- */
.mkn-kop{background:var(--bg);border-bottom:1px solid var(--line)}
.mkn-kop .in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;
  gap:18px}
.mkn-kop .merk{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px;
  letter-spacing:-.3px;color:var(--brown);text-decoration:none;flex:0 0 auto}
.mkn-kop .merk img{height:24px;width:auto;display:block}

.mkn-kop nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.mkn-kop .menu{list-style:none;display:flex;align-items:center;gap:20px;margin:0;padding:0}
.mkn-kop .menu>li{position:relative}
.mkn-kop .menu>li>a,
.mkn-kop .menu>li>button{font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;border-bottom:2px solid transparent;
  transition:.15s;white-space:nowrap}
.mkn-kop .menu>li>a:hover,.mkn-kop .menu>li>button:hover,
.mkn-kop .menu>li>a:focus-visible,.mkn-kop .menu>li>button:focus-visible{color:var(--orange);
  border-bottom-color:var(--orange)}
.mkn-kop .menu>li[aria-current="page"]>a{border-bottom-color:var(--orange);color:var(--orange)}
.mkn-kop .pijl{width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s}
.mkn-kop [aria-expanded="true"] .pijl{transform:rotate(-135deg) translate(-2px,-2px)}

/* --- 4. uitklapmenu ------------------------------------------------------ */
.mkn-kop .sub{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);min-width:268px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(122,52,23,.14);
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s}
.mkn-kop li.open>.sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.mkn-kop .sub li+li{border-top:1px solid var(--line)}
.mkn-kop .sub a{display:block;padding:11px 13px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-radius:9px;transition:.13s}
.mkn-kop .sub a:hover,.mkn-kop .sub a:focus-visible{background:var(--chip,#F5ECE0);color:var(--brown)}
.mkn-kop .sub a[target="_blank"]::after{content:"↗";margin-left:7px;opacity:.45;font-size:11px}

/* --- 5. taalkiezer ------------------------------------------------------- */
.mkn-kop .talen{position:relative;flex:0 0 auto}
.mkn-kop .talen>button{font:inherit;font-size:13px;font-weight:600;color:var(--mut);
  background:none;border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.mkn-kop .talen>button:hover{border-color:var(--orange);color:var(--orange)}
.mkn-kop .talen .sub{left:auto;right:0;transform:translateY(6px);min-width:150px}
.mkn-kop .talen li.open>.sub,.mkn-kop .talen.open .sub{transform:translateY(4px)}

/* --- 6. hamburger (verschijnt op smalle schermen) ------------------------ */
.mkn-kop .burger{display:none;margin-left:auto;width:38px;height:34px;padding:7px 6px;
  background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.mkn-kop .burger span{display:block;height:2px;background:var(--brown);border-radius:2px;
  transition:.2s}
.mkn-kop .burger span+span{margin-top:5px}
.mkn-kop .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mkn-kop .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mkn-kop .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .mkn-eco .in{gap:14px;padding:8px 14px}
  .mkn-eco a{font-size:12px}
  .mkn-kop .burger{display:block}
  .mkn-kop nav{display:none;order:3;width:100%;margin:0;flex-direction:column;
    align-items:stretch;gap:0;padding-top:8px}
  .mkn-kop nav.open{display:flex}
  .mkn-kop .in{flex-wrap:wrap}
  .mkn-kop .menu{flex-direction:column;align-items:stretch;gap:0}
  .mkn-kop .menu>li>a,.mkn-kop .menu>li>button{width:100%;justify-content:space-between;
    padding:13px 2px;border-bottom:1px solid var(--line)}
  .mkn-kop .sub{position:static;transform:none;opacity:1;visibility:visible;display:none;
    border:0;box-shadow:none;background:transparent;min-width:0;padding:2px 0 8px 12px}
  .mkn-kop li.open>.sub{display:block;transform:none}
  .mkn-kop .sub li+li{border-top:0}
  .mkn-kop .sub a{padding:9px 8px}
  .mkn-kop .talen{margin-top:10px}
  .mkn-kop .talen>button{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .mkn-kop .sub,.mkn-kop .pijl,.mkn-kop .burger span{transition:none}
}

/* --- terugkeerbalk: verschijnt wanneer je van een zustersite komt -------- */
.mkn-terug{background:var(--amber);color:#231a12}
.mkn-terug .in{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap}
.mkn-terug .terug{font-size:13.5px;font-weight:800;color:#231a12;text-decoration:none;
  border-bottom:2px solid rgba(35,26,18,.35);padding-bottom:1px}
.mkn-terug .terug:hover{border-bottom-color:#231a12}
.mkn-terug .hier{font-size:12.5px;opacity:.75}
.mkn-terug .sluit{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;
  cursor:pointer;color:#231a12;opacity:.6;padding:0 4px}
.mkn-terug .sluit:hover{opacity:1}
@media(max-width:640px){.mkn-terug .hier{display:none}}

/* --- ecosysteembalk: eigen doelgroepen, apart gezet ---------------------- */
.mkn-eco .apart{display:inline-flex;align-items:center;gap:18px;margin-left:8px;padding-left:22px;
  position:relative}
.mkn-eco .apart::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:rgba(255,255,255,.28)}
.mkn-eco a.uit{color:var(--amber);border-bottom-color:rgba(224,145,42,.45);font-weight:600}
.mkn-eco a.uit:hover,.mkn-eco a.uit:focus-visible{color:#fff;border-bottom-color:var(--amber)}
@media(max-width:980px){
  .mkn-eco .apart{margin-left:0;padding-left:0;gap:14px}
  .mkn-eco .apart::before{display:none}
}

/* --- sociale kanalen in de ecosysteembalk -------------------------------- */
.mkn-eco .sociaal{display:inline-flex;align-items:center;gap:10px;margin-left:14px;
  padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
.mkn-eco .sociaal a{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;
  opacity:.72;transition:opacity .15s}
.mkn-eco .sociaal a:hover{opacity:1}
.mkn-eco .sociaal svg{width:15px;height:15px;fill:#fff}
@media(max-width:860px){.mkn-eco .sociaal{border-left:0;padding-left:0;margin-left:8px}}

/* --- actiebalk (dezelfde balk als de aankondiging) ------------------------ */
.mkn-kopblok .anno.actie{background:var(--orange);font-weight:700}
.mkn-kopblok .anno .anno-k{color:#fff;text-decoration:underline;text-underline-offset:3px;
  font-weight:800;margin-left:6px;white-space:nowrap}
.mkn-kopblok .anno .anno-k:hover{text-decoration:none}

/* Taalkeuze in de ecosysteembalk (26-08-2026).
   De vertalingen waren voordien alleen via hreflang vindbaar; een bezoeker kon
   niet wisselen. De huidige taal staat in de amberkleur, de andere drie gedempt. */
.mkn-eco .talen{display:inline-flex;gap:9px;align-items:center;margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.22)}
.mkn-eco .talen a{font-size:11px;letter-spacing:.07em;font-weight:600;opacity:.68;border-bottom:0}
.mkn-eco .talen a:hover,.mkn-eco .talen a:focus-visible{opacity:1;color:#fff;border-bottom:0}
.mkn-eco .talen a.nu{opacity:1;color:var(--amber)}
@media (max-width:640px){.mkn-eco .talen{margin-left:6px;padding-left:6px;gap:7px}}