/* Nieuwe header en menu (nov 2026). Overschrijft de header-regels uit style.css. */
:root {
  --vf-blauw: #3a9ad9;
  --vf-blauw-donker: #1f6fa6;
  --vf-navy: #10283a;
  --vf-tekst: #22303c;
  --vf-licht: #eef7fd;
  --vf-header-h: 88px;
}

/* ---------- Bovenbalk ---------- */
.vf-topbar { background: #f3f8fc; color: #3b4a57; font-size: 13.5px; border-bottom: 1px solid #e3ecf3; }
.vf-topbar__inner { width: var(--width); margin: 0 auto; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vf-topbar__right { display: flex; gap: 1.5rem; }
.vf-topbar__item { font-size: 13.5px; line-height: 1; display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; white-space: nowrap; }
a.vf-topbar__item:hover, a.vf-topbar__item:focus-visible { color: var(--vf-blauw-donker); text-decoration: underline; text-underline-offset: 3px; }
.vf-topbar svg { width: 15px; height: 15px; fill: var(--vf-blauw); flex: none; }
@media (max-width: 1024px) { .vf-topbar { display: none; } }

/* ---------- Header ---------- */
.mh_header.vf-header { position: sticky; top: 0; height: var(--vf-header-h); background: #fff; z-index: 1000; border-bottom: 1px solid #e7eef4; transition: box-shadow .25s ease, border-color .25s ease; }
.mh_header.vf-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 40, 58, .10); border-bottom-color: transparent; }
.vf-header .mh_wrapper { height: var(--vf-header-h); gap: 1rem; }

.vf-header .vf-logo a { display: flex; align-items: center; height: auto; }
.mh_header.vf-header .logo a { height: auto; }
.mh_header.vf-header .logo a img { width: auto; height: 72px; object-fit: contain; display: block; }

/* ---------- Hoofdmenu desktop ---------- */
.vf-header .nav .hoofd-menu { gap: .15rem; }
.vf-header .nav .hoofd-menu > li { position: relative; color: var(--vf-tekst); }
.vf-header .nav .hoofd-menu > li > a { position: relative; display: flex; align-items: center; gap: .45rem; height: 100%; padding: 0 .8rem; font-size: .97rem; font-weight: 500; color: var(--vf-tekst); transition: color .2s ease; }
.vf-header .nav .hoofd-menu > li > a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 24px; height: 2px; border-radius: 2px; background: var(--vf-blauw); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.vf-header .nav .hoofd-menu > li:hover > a,
.vf-header .nav .hoofd-menu > li > a:focus-visible,
.vf-header .nav .hoofd-menu > li.current-menu-item > a,
.vf-header .nav .hoofd-menu > li.current-menu-ancestor > a,
.vf-header .nav .hoofd-menu > li.current-menu-parent > a,
.vf-header .nav.home .hoofd-menu > li:first-child > a { color: var(--vf-blauw); }
.vf-header .nav .hoofd-menu > li:hover > a::after,
.vf-header .nav .hoofd-menu > li > a:focus-visible::after,
.vf-header .nav .hoofd-menu > li.current-menu-item > a::after,
.vf-header .nav .hoofd-menu > li.current-menu-ancestor > a::after,
.vf-header .nav .hoofd-menu > li.current-menu-parent > a::after,
.vf-header .nav.home .hoofd-menu > li:first-child > a::after { transform: scaleX(1); }
.vf-header .current_page_item { color: inherit !important; }

/* Pijltje bij "Lessen" */
.vf-header .nav .menu-item-has-children > a::before { content: ""; order: 2; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.vf-header .nav .menu-item-has-children:hover > a::before,
.vf-header .nav .menu-item-has-children:focus-within > a::before { transform: translateY(1px) rotate(225deg); }

/* Uitklapmenu */
.vf-header .nav .hoofd-menu li .sub-menu { display: flex; left: 50%; top: calc(100% - 10px); min-width: 250px; padding: .5rem; gap: 2px; background: #fff; border: 1px solid #e3edf5; border-top: 3px solid var(--vf-blauw); border-radius: 0 0 12px 12px; box-shadow: 0 18px 40px rgba(16, 40, 58, .14); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.vf-header .nav .hoofd-menu li:hover .sub-menu,
.vf-header .nav .hoofd-menu li:focus-within .sub-menu { display: flex; opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vf-header .nav .sub-menu li { height: auto; display: block; color: var(--vf-tekst); }
.vf-header .nav .sub-menu a { display: block; padding: .7rem .9rem; border-radius: 8px; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.vf-header .nav .sub-menu a:hover, .vf-header .nav .sub-menu a:focus-visible, .vf-header .nav .sub-menu .current-menu-item > a { background: var(--vf-licht); color: var(--vf-blauw); }

/* Contact als knop (laatste menu-item) */
.vf-header .nav .hoofd-menu > li:last-child { margin-left: .6rem; }
.vf-header .nav .hoofd-menu > li:last-child > a { height: auto; padding: .7rem 1.25rem; border-radius: 999px; background: var(--vf-blauw); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(58, 154, 217, .35); transition: background-color .2s ease, transform .2s ease; }
.vf-header .nav .hoofd-menu > li:last-child > a::after { display: none; }
.vf-header .nav .hoofd-menu > li:last-child:hover > a,
.vf-header .nav .hoofd-menu > li:last-child > a:focus-visible,
.vf-header .nav .hoofd-menu > li:last-child.current-menu-item > a { background: var(--vf-blauw-donker); color: #fff; transform: translateY(-1px); }

.vf-header a:focus-visible, .vf-burger:focus-visible, .vf-mobielmenu a:focus-visible { outline: 3px solid var(--vf-blauw); outline-offset: 2px; border-radius: 6px; }

/* ---------- Hamburger ---------- */
@media (max-width: 1024px) {
  .vf-header .nav { display: none; }
  .vf-header .burger { display: block; }
}
@media (min-width: 1025px) { .vf-header .burger { display: none; } }
.vf-burger { width: 46px; height: 46px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: var(--vf-licht) !important; border-radius: 10px; }
.vf-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--vf-blauw-donker); transition: transform .25s ease, opacity .2s ease; }
.vf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.vf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobiel menu ---------- */
.vw_mobileNav.vf-mobielmenu { top: var(--vf-header-h); height: auto; bottom: 0; overflow-y: auto; border-bottom: 0; padding: .5rem 0 2rem; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; box-shadow: inset 0 8px 16px -12px rgba(16, 40, 58, .25); }
.vw_mobileNav.vf-mobielmenu.open { height: auto; opacity: 1; visibility: visible; transform: none; border-bottom: 0; }
.vf-mobielmenu > .hoofd-menu { width: var(--width); margin: 0 auto; }
.vf-mobielmenu .menu-item a { padding: 1rem .25rem; font-size: 1.15rem; font-weight: 600; color: var(--vf-tekst); border-bottom: 1px solid #edf1f5; background: transparent; }
.vf-mobielmenu .menu-item a:hover { background: transparent; color: var(--vf-blauw); }
.vf-mobielmenu .menu-item.current-menu-item > a { background: transparent; color: var(--vf-blauw); }
.vf-mobielmenu .menu-item-has-children > a { color: #7a8794; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 0; padding-bottom: .25rem; pointer-events: none; }
.vf-mobielmenu .sub-menu { margin: 0 0 .5rem; padding: 0 0 .5rem; border-bottom: 1px solid #edf1f5; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.vf-mobielmenu .sub-menu a { padding: .85rem .9rem !important; font-size: 1rem; border: 0; border-radius: 10px; background: var(--vf-licht); }
.vf-mobielmenu .sub-menu .current-menu-item > a { background: var(--vf-blauw); color: #fff; }
.vf-mobielmenu__cta { width: var(--width); margin: 1.5rem auto 0; display: grid; gap: .75rem; }
.vf-mobielmenu__cta p { text-align: center; color: #7a8794; font-size: .9rem; }
.vf-knop { display: block; text-align: center; padding: 1rem; border-radius: 12px; background: var(--vf-blauw); color: #fff !important; font-weight: 700; text-decoration: none; }
.vf-knop--licht { background: #fff; color: var(--vf-blauw-donker) !important; border: 2px solid var(--vf-blauw); }
html.vf-menu-open, html.vf-menu-open body { overflow: hidden; }

@media (max-width: 1024px) {
  :root { --vf-header-h: 74px; }
  .mh_header.vf-header .logo a img { height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-header *, .vf-mobielmenu, .vf-burger span { transition: none !important; }
}

.vf-mobielmenu .hoofd-menu > li:first-child.vf-thuis > a { color: var(--vf-blauw); }