/* data-gb-global (ongescoped) */

/* ---------- header-schil: sticky + schaduw ---------- */
header.wp-block-template-part:has(.oc-header),.oc-header-sticky{position:sticky;top:0;z-index:90}
.oc-header{position:relative;box-shadow:0 1px 0 #EFF2F6,0 2px 14px rgba(31,35,66,.05)}
/* ---------- navigatie: rustige hover/focus ---------- */
.oc-header .wp-block-navigation a{padding:8px 6px;border-radius:8px;transition:color .12s}
.oc-header .wp-block-navigation a:hover{color:#0476BD}
.oc-header .wp-block-navigation a:focus-visible{outline:2px solid #0476BD;outline-offset:2px}
/* ---------- zoekbalk (blok zoek; de blok-wrapper is het flex-item van de headerrij) ---------- */
.oc-header > .gb-tpl-ocict-header{flex:1 1 260px;max-width:520px}
.oc-hdr-search{position:relative}
.oc-hdr-search form{display:flex;align-items:center;background:#fff;border:1px solid #C9E2F3;border-radius:999px;padding:3px 3px 3px 16px;box-shadow:0 1px 3px rgba(31,35,66,.06);transition:border-color .12s,box-shadow .12s}
.oc-hdr-search form:focus-within{border-color:#0476BD;box-shadow:0 0 0 3px rgba(4,118,189,.12)}
.oc-hdr-search svg{flex:0 0 auto;color:#525C74}
.oc-hdr-search input{flex:1;border:0;outline:0;background:none;padding:8px 10px;font-size:15px;font-family:inherit;color:#1F2342;min-width:0}
.oc-hdr-search button{border:0;cursor:pointer;background:#0476BD;color:#fff;font-weight:600;font-size:14px;font-family:inherit;padding:8px 20px;border-radius:999px;transition:background .15s}
.oc-hdr-search button:hover{background:#035C94}
/* ---------- mini-cart: badge in huisstijl ---------- */
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge{background:#0476BD;color:#fff;border:2px solid #fff}
/* ---------- mobiel: logo links, hamburger + cart rechts, zoek eronder volle breedte ---------- */
@media (max-width:1023px){
  .oc-header{row-gap:2px;column-gap:14px;padding-left:16px!important;padding-right:16px!important}
  .oc-header .wp-block-site-logo{order:1;margin-right:auto}
  .oc-header .wp-block-site-logo img{max-width:104px;height:auto}
  .oc-header .wp-block-woocommerce-mini-cart{order:2}
  .oc-header .wp-block-navigation{order:3}
  .oc-header > .gb-tpl-ocict-header{order:4;flex-basis:100%;max-width:none;margin:8px 0 2px}
}
/* De core-navigatie schakelt pas onder 600px naar de hamburger; de headerindeling hierboven is
   tot 1023px mobiel. Daarom tussen 600 en 1023px ook de hamburger (het megapaneel past daar niet). */
@media (min-width:600px) and (max-width:1023px){
  .oc-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .oc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
/* ---------- mobiel menu: paneel onder de header ---------- */
.wp-block-navigation__responsive-container.is-menu-open{
  background:rgba(19,22,43,.45);padding:0;align-items:flex-start;justify-content:flex-end;
  backdrop-filter:saturate(120%) blur(2px)}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  width:min(420px,92vw);margin:calc(var(--oc-header-h,88px) + 8px) 12px 0 auto;background:#fff;
  border-radius:18px;box-shadow:0 24px 60px rgba(4,60,100,.28);padding:14px 10px 12px;max-height:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:block}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{display:block;gap:0}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{border:0;display:block;width:100%}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>.wp-block-navigation-submenu__toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 16px!important;font-family:Poppins,system-ui,sans-serif;font-size:16.5px;font-weight:600;
  color:#1F2342;border-radius:12px;text-decoration:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:focus-visible{background:#EFF6FB;color:#035C94}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:focus{outline:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a:focus-visible{outline:2px solid #0476BD;outline-offset:-2px}
.wp-block-navigation__responsive-container.is-menu-open .has-child>.wp-block-navigation-submenu__toggle{background:#F4F6F9}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  position:static!important;border:0;box-shadow:none;background:none;padding:2px 0 8px 0;
  margin:0 0 4px 16px;border-left:2px solid #E1F0F9;min-width:0;width:auto;opacity:1;visibility:visible}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item>a{
  font-size:15.5px;font-weight:500;color:#454F66;padding:11px 16px!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item>a:hover{background:#EFF6FB;color:#0476BD}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item+.wp-block-navigation-item{border-top:1px solid #EFF2F6}
.wp-block-navigation__responsive-container.is-menu-open .has-child+.wp-block-navigation-item{border-top:0}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{position:relative}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute;top:10px;right:10px;margin:0;padding:8px;color:#1F2342;background:#F4F6F9;border-radius:10px;z-index:5}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{padding-top:40px}
.wp-block-navigation__responsive-container-open svg,.wp-block-navigation__responsive-container-close svg{width:26px;height:26px}
/* derde niveau (kolommen van het megamenu) in het mobiele paneel: kolomkop als tussenkop */
.wp-block-navigation__responsive-container.is-menu-open li.tm-kolom>a{font-size:13px!important;letter-spacing:.08em;text-transform:uppercase;color:#5A6478!important}
.wp-block-navigation__responsive-container.is-menu-open li.tm-kolom>.wp-block-navigation-submenu__toggle{display:none!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description{display:none}
@media (max-width:520px){
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
    width:auto;margin:calc(var(--oc-header-h,88px) + 6px) 8px 0 8px}
  .wp-block-navigation__responsive-container-close{right:18px}
}

/* ---------- megamenu (desktop, native core-navigatie) ----------
   li.tm-mega = het item met het brede paneel (Cursussen); zijn submenu wordt een paneel onder
   de hele header met kolommen. li.tm-kolom = een kolom (tweede niveau); zijn submenu (derde niveau)
   staat altijd open in de kolom. li.tm-lijst = compacte kolom zonder omschrijvingen.
   li.tm-cta = link over de volle breedte onderaan. li.tm-smal = smal paneel (Leervormen).
   Let op: core zet de extra klasse op de li EN op de submenu-ul, vandaar steeds li.… > ul. */
@media (min-width:1024px){
  /* het paneel moet de headerrij als bevattend blok hebben: alle gepositioneerde core-lagen
     ertussen (nav, responsive container, responsive dialog, het item zelf) op static */
  .oc-header .wp-block-navigation,
  .oc-header .wp-block-navigation__responsive-container:not(.is-menu-open),
  .oc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
  .oc-header .wp-block-navigation li.tm-mega{position:static}
  .oc-header .wp-block-navigation li.tm-mega>ul.wp-block-navigation__submenu-container{
    left:50%!important;top:100%!important;transform:translateX(-50%);
    width:min(1060px,96vw)!important;display:grid!important;grid-template-columns:1.15fr .85fr 1.15fr;gap:8px 40px;
    padding:30px 34px 24px!important;background:#fff;border:0!important;border-radius:20px;
    box-shadow:0 24px 60px rgba(31,35,66,.18);text-align:left}
  /* brug over de headerpadding, zodat het paneel open blijft als de muis erheen gaat */
  .oc-header .wp-block-navigation li.tm-mega>ul.wp-block-navigation__submenu-container::before{
    content:"";position:absolute;left:0;right:0;top:-26px;height:26px}
  .oc-header .wp-block-navigation li.tm-smal>ul.wp-block-navigation__submenu-container{
    width:380px!important;padding:22px 26px 18px!important;background:#fff;border:0!important;border-radius:20px;
    box-shadow:0 24px 60px rgba(31,35,66,.18);text-align:left}
  /* kolommen (tweede niveau) */
  .oc-header .wp-block-navigation li.tm-kolom{display:block;align-self:start}
  .oc-header .wp-block-navigation li.tm-kolom>a{display:block;padding:0!important;margin:0 0 14px;
    font-family:"Poppins",system-ui,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:#5A6478}
  .oc-header .wp-block-navigation li.tm-kolom>a:hover{color:#0476BD}
  .oc-header .wp-block-navigation li.tm-kolom>.wp-block-navigation-submenu__toggle{display:none}
  /* visibility:inherit (niet visible): bij een gesloten paneel blijven deze links dan ook
     onzichtbaar voor Tab, anders opent core het paneel via focus op een onzichtbare link */
  .oc-header .wp-block-navigation li.tm-kolom>ul.wp-block-navigation__submenu-container{
    position:static!important;visibility:inherit!important;opacity:1!important;height:auto!important;
    width:auto!important;min-width:0!important;overflow:visible!important;display:flex!important;
    flex-direction:column;padding:0!important;border:0!important;box-shadow:none!important;background:none!important}
  .oc-header .wp-block-navigation li.tm-kolom>ul.wp-block-navigation__submenu-container::before{display:none}
  /* items met icoon (in het megapaneel en het smalle paneel) */
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"]{display:block}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"]>a{
    display:grid!important;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;
    padding:10px 12px!important;margin:0 -12px;border-radius:12px;text-decoration:none}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"]>a::before{
    content:"";grid-row:1 / span 2;width:34px;height:34px;border-radius:9px;
    background:rgba(4,118,189,.09) var(--tm-ico) center/18px 18px no-repeat}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"]>a:hover{background:rgba(4,118,189,.06)}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"] .wp-block-navigation-item__label{
    font-family:"Poppins",system-ui,Arial,sans-serif;font-size:15px;font-weight:600;color:#1F2342;line-height:1.3;align-self:center}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) li[class*="tm-ico-"]>a:hover .wp-block-navigation-item__label{color:#0476BD}
  .oc-header .wp-block-navigation :is(li.tm-mega,li.tm-smal) .wp-block-navigation-item__description{
    display:block;grid-column:2;font-size:13px;font-weight:400;color:#5A6478;line-height:1.45;margin-top:2px}
  /* compacte lijstkolom (Vakgebieden) */
  .oc-header .wp-block-navigation li.tm-lijst li[class*="tm-ico-"]>a{align-items:center;padding:7px 12px!important;border-radius:8px}
  .oc-header .wp-block-navigation li.tm-lijst li[class*="tm-ico-"] .wp-block-navigation-item__label{font-family:inherit;font-size:14.5px;font-weight:500}
  /* link over de volle breedte onderaan */
  .oc-header .wp-block-navigation li.tm-cta{grid-column:1 / -1;display:block;margin-top:16px;padding-top:16px;border-top:1px solid rgba(31,35,66,.08)}
  .oc-header .wp-block-navigation li.tm-cta>a{display:inline-flex!important;align-items:center;gap:8px;padding:0!important;
    font-family:"Poppins",system-ui,Arial,sans-serif;font-size:15px;font-weight:600;color:#0476BD}
  .oc-header .wp-block-navigation li.tm-cta>a::after{content:"";width:16px;height:16px;background:var(--tm-pijl) center/16px 16px no-repeat;transition:transform .2s}
  .oc-header .wp-block-navigation li.tm-cta>a:hover::after{transform:translateX(4px)}
}
.oc-header .wp-block-navigation li.tm-ico-klas{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H4z'/%3E%3Cpath d='M9 21h6M12 16v5'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-el{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='13' rx='2'/%3E%3Cpath d='M10 9l4 2.5L10 14z'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-exam{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l2 2 4-4'/%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-maat{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16' cy='10' r='2.4'/%3E%3Cpath d='M4 20c0-3 2.2-5 5-5s5 2 5 5M13.5 15.4c2.6.2 4.5 2 4.5 4.6'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-ai{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-ms{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7'/%3E%3Crect x='13' y='4' width='7' height='7'/%3E%3Crect x='4' y='13' width='7' height='7'/%3E%3Crect x='13' y='13' width='7' height='7'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-partner{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5L7.5 21l4.5-2.5L16.5 21 15 13.5'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-main{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='7' rx='1.5'/%3E%3Crect x='4' y='14' width='16' height='7' rx='1.5'/%3E%3Cpath d='M8 6.5h.01M8 17.5h.01'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-dev{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6l-5 6 5 6M16 6l5 6-5 6'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-cloud{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 01-.5-8.97A6 6 0 0118 8.5 4 4 0 0117.5 18z'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-sec{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 7.7-8 9-4.8-1.3-8-4.5-8-9V6z'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-net{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='2.5'/%3E%3Ccircle cx='19' cy='5' r='2.5'/%3E%3Ccircle cx='19' cy='19' r='2.5'/%3E%3Cpath d='M7.3 10.8L16.7 6.2M7.3 13.2l9.4 4.6'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-ico-proj{--tm-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='4' height='16'/%3E%3Crect x='10' y='9' width='4' height='11'/%3E%3Crect x='16' y='6' width='4' height='14'/%3E%3C/svg%3E");}
.oc-header .wp-block-navigation li.tm-cta{--tm-pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230476BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}

/* ---------- USP-balk onder de header (blok usp) ---------- */
.oc-usp-strip{background:#EFF6FB;border-bottom:1px solid #D8DEE6}
.oc-usp-strip .inner{max-width:1400px;margin:0 auto;padding:8px 28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:#1F2342}
.oc-usp-strip .u{display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.oc-usp-strip .u svg{color:#2E9E5B;flex:none}
.oc-usp-strip .u b,.oc-usp-strip .u strong{font-weight:600}
.oc-usp-strip .service{margin-left:auto;display:flex;gap:20px}
.oc-usp-strip .service a{color:#035C94;text-decoration:none;font-weight:600}
.oc-usp-strip .service a:hover{text-decoration:underline}
@media (max-width:1023px){.oc-usp-strip .service{display:none}.oc-usp-strip .inner{gap:16px;padding:7px 16px;justify-content:center}}
@media (max-width:560px){.oc-usp-strip .u:nth-child(n+3){display:none}}

/* ---------- zoeksuggesties (verhuisd uit de footer-template) ---------- */
/* .hero-search en .wrap hebben allebei z-index:1 en .wrap staat later in de HTML,
   waardoor de hero-tekst over het suggestielijstje heen tekende. Klasse verdubbeld
   voor hogere specificiteit. */
.tan-band .hero-search.hero-search{z-index:40;}
.sb-anchor{position:relative;}
.sb-suggest{position:absolute; top:calc(100% + 10px); left:0; right:0;
  background:#fff; border-radius:16px; box-shadow:var(--shadow-md, 0 16px 40px rgba(31,35,66,.13));
  padding:8px; text-align:left; z-index:30; max-height:340px; overflow-y:auto;}
.sb-suggest[hidden]{display:none;}
.sb-suggest a{display:block; padding:10px 14px; border-radius:10px;
  font-family:var(--font-head, "Poppins", system-ui, Arial, sans-serif);
  font-weight:600; font-size:15px; line-height:1.35;
  color:var(--navy, #1F2342); text-decoration:none;}
.sb-suggest a{display:flex;align-items:center;gap:12px;}
.sb-suggest .sb-mid{flex:1;min-width:0;}
.sb-suggest .sb-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-suggest .sb-m{display:block;font-size:12.5px;color:var(--muted,#5A6478);margin-top:1px;}
.sb-suggest .sb-p{flex:none;font-weight:600;font-size:13.5px;color:var(--navy,#1F2342);white-space:nowrap;}
.sb-suggest a:hover,
.sb-suggest a.sb-active{background:rgba(4,118,189,.08); color:var(--violet, #0476BD);}
.sb-suggest .sb-empty{display:block; padding:10px 14px; font-size:14px;
  color:var(--muted, #5A6478);}
.sb-suggest a.sb-more{font-style:italic; font-weight:500; font-size:14px;
  color:var(--violet, #0476BD); border-top:1px solid rgba(31,35,66,.08);
  border-radius:0 0 10px 10px; margin-top:4px; padding-top:12px;}
.sb-suggest a.sb-more:hover,
.sb-suggest a.sb-more.sb-active{background:rgba(4,118,189,.08);}