/* ============================================================
   NAV.CSS — Gedeelde navigatie-stijl (header, dropdown, mobiel menu)
   Clean and Spotless — exact op basis van index.html
   ============================================================ */

.cas-mobile-menu a:first-child:hover {
    color: #30BFE0 !important;
}


.cas-mobile-dropdown .cas-dropdown-menu li a {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 14px !important;
    padding: 10px 0 10px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
    background: transparent !important;
    text-align: left !important;
    border-radius: 0 !important;
    display: block;
    margin-top: 0 !important;}




/* -- HEADER -- */
#cas-header{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  z-index:500 !important;
  background:#0d1c2e !important;
  border-bottom:1px solid rgba(48,191,224,.18) !important;
  height:64px !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  padding:0 48px !important;
}
.cas-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.cas-logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#30BFE0,#4CC43B);display:flex;align-items:center;justify-content:center;font-size:16px}
.cas-logo-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:#fff}

/* -- DESKTOP NAV LINKS -- */

.cas-nav-links a:hover,.cas-nav-links a.active-link{color:#30BFE0}
.cas-nav-links{display:flex !important;gap:28px;align-items:center;list-style:none}
.cas-nav-links a{

    color: rgba(255,255,255,.72);
    font-size: 14px;
    font-weight: 500;
    transition: color .18s;
}
  font-size:14px !important;
  font-weight:500 !important;
  transition:color .18s;
}
.cas-dropdown-menu li a:hover {
    background: #f4f9ff;
    color: #0377CC;
}
.cas-nav-cta{
  background:linear-gradient(135deg,#30BFE0,#0377CC) !important;
  color:#fff !important;
  padding:8px 20px !important;
  border-radius:8px !important;
  font-weight:600 !important;
  white-space:nowrap;
}

/* -- DESKTOP DROPDOWN (Diensten) -- */
.cas-nav-dropdown{
  position:relative;
  padding-bottom:18px;
  margin-bottom:-18px;
}
.cas-nav-drop-trigger{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  cursor:pointer !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:normal;
  color:rgba(255,255,255,.72) !important;
  background:transparent !important;
  border:none !important;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:color .18s;
}
.cas-nav-drop-trigger:hover,
.cas-nav-dropdown.js-open .cas-nav-drop-trigger{
  color:#30BFE0 !important;
}
.cas-drop-arrow{
  font-size:10px !important;
  font-weight:700;
  line-height:1;
  transition:transform .2s;
  display:inline-block;
}
.cas-nav-dropdown.js-open .cas-drop-arrow{
  transform:rotate(180deg);
}
.cas-dropdown-menu{
  display:none;
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border-radius:12px;
  box-shadow:0 12px 40px rgba(3,119,204,.18),0 0 0 1px rgba(3,119,204,.08);
  min-width:240px;padding:8px 0;
  list-style:none;z-index:600;
}
.cas-dropdown-menu::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;
  border-left:1px solid rgba(3,119,204,.08);border-top:1px solid rgba(3,119,204,.08);
}
.cas-dropdown-menu li a{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;font-size:13.5px;color:#1a2e45;font-weight:500;
  transition:background .15s,color .15s;white-space:nowrap;
}
.cas-dropdown-menu li a span{font-size:16px;flex-shrink:0}
.cas-dropdown-menu li a:hover{background:#f4f9ff;color:#0377CC}
.cas-dropdown-menu .cas-drop-divider{height:1px;background:#eef2f7;margin:6px 0}
.cas-nav-dropdown.js-open .cas-dropdown-menu{display:block}

/* -- HAMBURGER BUTTON -- */
.cas-hamburger{
  display:none !important;
  flex-direction:column;gap:5px;cursor:pointer;
  padding:6px;background:none !important;border:none !important;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cas-hamburger span{
  width:24px;height:2px;background:#fff;border-radius:2px;
  transition:.3s;pointer-events:none;
}
.cas-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cas-hamburger.open span:nth-child(2){opacity:0}
.cas-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* -- MOBILE MENU -- */
.cas-mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;
  background:#0d1c2e;border-bottom:1px solid rgba(48,191,224,.18);
  padding:16px 24px;z-index:9998;flex-direction:column;
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.cas-mobile-menu.open{display:flex !important}
.cas-mobile-menu a{
  color:rgba(255,255,255,.8) !important;
  font-size:15px !important;
  font-weight:500 !important;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:block;
  transition:color .18s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cas-mobile-menu a:hover{
  color:#30BFE0 !important;
}
.cas-mobile-menu a:last-child{
  border-bottom:none;margin-top:8px;
  background:linear-gradient(135deg,#30BFE0,#0377CC) !important;

  text-align:center;border-radius:8px;padding:12px;
}

/* -- MOBILE DROPDOWN (Diensten in hamburger) -- */
.cas-mobile-dropdown{padding-bottom:0;margin-bottom:0}
.cas-mobile-drop-row{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
}
.cas-mobile-drop-link{
  flex:1 !important;
  border-bottom:none !important;
  padding-bottom:0 !important;
  cursor:pointer;
  color:rgba(255,255,255,.8) !important;
  font-size:15px !important;
  font-weight:500 !important;
  background:transparent !important;
  transition:color .18s;
}
.cas-mobile-drop-row:hover .cas-mobile-drop-link,
.cas-mobile-drop-row:active .cas-mobile-drop-link{
  color:#30BFE0 !important;
}
.cas-mobile-drop-toggle{
  appearance:none;-webkit-appearance:none;
  background:rgba(255,255,255,.08) !important;
  border:none !important;
  border-radius:8px;
  padding:10px 14px;
  cursor:pointer;
  color:#fff !important;
  display:flex;align-items:center;justify-content:center;
  outline:none;
}
.cas-mobile-drop-toggle:hover{
  background:rgba(255,255,255,.15) !important;
}
.cas-mobile-drop-toggle .cas-drop-arrow{font-size:18px !important}
.cas-mobile-dropdown .cas-dropdown-menu{
  display:none;position:static;transform:none;box-shadow:none;border:none;
  background:transparent;padding:0;margin:0 0 8px;list-style:none;
}
.cas-mobile-dropdown .cas-dropdown-menu::before{display:none}
.cas-mobile-dropdown.js-open .cas-dropdown-menu{display:block}


/* -- RESPONSIVE -- */
@media(max-width:900px){
  #cas-header{padding:0 20px !important}
  .cas-nav-links{display:none !important}
  .cas-hamburger{display:flex !important}
}