/* Hover-, focus- en klikfeedback. De pagina's gebruiken inline styles,
   daarom staan kleur/achtergrond/rand hier met !important. */
.btn-p,.btn-s,.nav-link,.logo,.card,.fab,.field,summary{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}

/* Primaire knop (turquoise) */
.btn-p:hover{background:#5ED6CB!important;transform:translateY(-1px);box-shadow:0 6px 18px rgba(46,196,182,.35)}
.btn-p:active{transform:translateY(0);box-shadow:none}

/* Secundaire knop (omlijnd) */
.btn-s:hover{border-color:#2EC4B6!important;background:rgba(46,196,182,.12)!important;transform:translateY(-1px)}
.btn-s:active{transform:translateY(0)}

/* Navigatie- en footerlinks */
.nav-link:hover{color:#FFFFFF!important;text-decoration:underline!important;text-decoration-color:#2EC4B6!important;text-underline-offset:6px;text-decoration-thickness:2px}

/* Logo */
.logo:hover{color:#7FE0D6!important}

/* Klikbare kaarten (kennisbank e.d.) */
.card:hover{transform:translateY(-3px);border-color:#2EC4B6!important;box-shadow:0 12px 28px rgba(15,42,47,.10)}
.card:active{transform:translateY(-1px)}

/* Zwevende WhatsApp-knop */
.fab:hover{transform:scale(1.08);background:#5ED6CB!important}

/* FAQ-vragen */
summary:hover{color:#0B7F7A}

/* Formuliervelden */
.field:hover{border-color:#3F7A84!important}
.field:focus{border-color:#2EC4B6!important;box-shadow:0 0 0 3px rgba(46,196,182,.25);outline:none}

@media (prefers-reduced-motion: reduce){
  .btn-p,.btn-s,.card,.fab{transition:none}
  .btn-p:hover,.btn-s:hover,.card:hover,.fab:hover{transform:none}
}

/* Sticky header */
.site-header{position:sticky;top:0;z-index:40;box-shadow:0 6px 20px rgba(0,0,0,.18)}
[id]{scroll-margin-top:96px}

/* Header-indeling: links rechts uitgelijnd, knop erachter */
.nav-links{margin-left:auto}
.site-header nav{column-gap:28px!important}
.nav-toggle{display:none}

/* Mobiel en tablet: compacte balk met hamburgermenu */
@media (max-width: 1100px){
  [id]{scroll-margin-top:80px}
  .site-header nav{padding-block:12px!important;row-gap:0!important;column-gap:10px!important}
  .site-header .logo{font-size:20px!important;margin-right:auto}
  .site-header .nav-cta{padding:8px 14px!important;min-height:40px!important;font-size:15px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
    background:none;border:0;border-radius:6px;color:#FFFFFF;cursor:pointer}
  .nav-toggle:hover{background:rgba(255,255,255,.08)}
  .nav-toggle .bar{transition:transform .2s ease,opacity .2s ease;transform-origin:center}
  .site-header.is-open .nav-toggle .b1{transform:translateY(6px) rotate(45deg)}
  .site-header.is-open .nav-toggle .b2{opacity:0}
  .site-header.is-open .nav-toggle .b3{transform:translateY(-6px) rotate(-45deg)}
  .has-toggle .nav-links{display:none!important;order:3;flex:0 0 100%;flex-direction:column;align-items:stretch!important;gap:0!important;
    margin:12px 0 0;padding:4px 0 8px;border-top:1px solid #24505A;font-size:17px!important}
  .site-header.is-open .nav-links{display:flex!important}
  .has-toggle .nav-links .nav-link{padding:13px 0;border-bottom:1px solid #1C4249}
  .has-toggle .nav-links .nav-link:last-child{border-bottom:0}
  .has-toggle .nav-links .nav-link:hover{text-decoration:none!important;padding-left:6px}
  .has-toggle .nav-cta{order:1}
  .has-toggle .nav-toggle{order:2}
}
@media (prefers-reduced-motion: reduce){.nav-toggle .bar{transition:none}}