/*
 * Nieuwe kopbalk (stijl uit de homepage-test :8150, 11 nov 2026).
 * Alleen desktop (>900px); het mobiele menu blijft zoals het is.
 * Site-eigen bestand, laadt na reskin en a11y (site-assets.php, prioriteit 52).
 */
@media (min-width: 901px) {
  .nav-wrapper { top: 14px; width: min(1260px, 100% - 24px); max-width: none; }
  .nav-wrapper nav {
    height: 66px; padding: 0 10px 0 22px; gap: 8px; border-radius: 20px;
    background: rgba(8, 9, 20, .45);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: none;
    transition: background .5s, box-shadow .5s;
  }
  .nav-wrapper nav.glass {
    background: rgba(8, 9, 20, .82);
    border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7);
  }
  /* salesfision.css forceert met !important een transparante balk in rust; de
     nieuwe stijl is altijd glas, steviger zodra je scrolt. */
  body .nav-wrapper nav,
  body.sf-hide-chrome .nav-wrapper nav {
    background: rgba(8, 9, 20, .45) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important; backdrop-filter: blur(22px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
    padding: 0 10px 0 22px !important; border-radius: 20px !important;
  }
  body .nav-wrapper nav.glass,
  body.sf-hide-chrome .nav-wrapper nav.glass {
    background: rgba(8, 9, 20, .82) !important;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7) !important;
  }
  .nav-wrapper .nav-logo img { height: 22px; width: auto; }

  .nav-wrapper .nav-links { gap: 2px; }
  .nav-wrapper .nav-links > a,
  .nav-wrapper .nav-links > .nav-dropdown > .nav-dropdown-btn {
    display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px;
    font: 500 14px/1 Poppins, sans-serif; color: #A9AEC4;
    transition: color .3s, background .3s;
  }
  /* Alleen-mobiel-items blijven op desktop verborgen */
  .nav-wrapper .nav-links > a.sf-nav-calc-link,
  .nav-wrapper .nav-links > a.sf-nav-contact-link,
  .nav-wrapper .lang-switcher > .lang-btn--mobile,
  .nav-wrapper .nav-links > .nav-dropdown.lang-switcher > .lang-btn--mobile { display: none; }
  .nav-wrapper .nav-links > a:hover,
  .nav-wrapper .nav-links > a.active,
  .nav-wrapper .nav-links > .nav-dropdown:hover > .nav-dropdown-btn,
  .nav-wrapper .nav-links > .nav-dropdown.open > .nav-dropdown-btn {
    color: #fff; background: rgba(255, 255, 255, .06);
  }
  .nav-wrapper .nav-caret { display: inline-block; font-size: 10px; opacity: .8; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
  .nav-wrapper .nav-dropdown:hover .nav-caret,
  .nav-wrapper .nav-dropdown.open .nav-caret { transform: rotate(180deg); }

  /* NEW-label bij Platform, zoals op de testpagina */
  .nav-wrapper .nav-mega--platform > .nav-dropdown-btn::after {
    content: "NEW"; order: 2; padding: 3px 7px; border-radius: 999px; background: #C8202A;
    font: 700 9px/1 Poppins, sans-serif; letter-spacing: .06em; color: #fff;
    box-shadow: 0 0 14px rgba(232, 54, 66, .7); animation: sfNavNew 2.4s ease-in-out infinite;
  }
  .nav-wrapper .nav-mega--platform > .nav-dropdown-btn .nav-caret { order: 3; }
  /* Op vensters <=760px hoog maakt salesfision.css van ::after een hover-brug
     (absoluut vlak); dan verdween NEW en zag je een rood streepje. NEW wint nu. */
  body .nav-wrapper .nav-mega--platform > button.nav-dropdown-btn::after {
    content: "NEW"; position: static; left: auto; right: auto; top: auto; height: auto;
  }
  @keyframes sfNavNew { 50% { box-shadow: 0 0 22px rgba(232, 54, 66, 1); } }

  /* Uitklapmenu's */
  .nav-wrapper .dropdown-menu {
    background: #0C0E1C; border: 1px solid rgba(255, 255, 255, .13); border-radius: 22px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
  }

  /* Business Scan-knop */
  .nav-wrapper .nav-links a.sf-nav-scan-btn {
    position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; margin-left: 6px;
    border-radius: 12px; font: 600 14px/1 Poppins, sans-serif; color: #fff; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, #f04a55, #C8202A);
    box-shadow: 0 12px 34px -10px rgba(232, 54, 66, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  }
  .nav-wrapper .nav-links a.sf-nav-scan-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  }
  .nav-wrapper .nav-links a.sf-nav-scan-btn:hover {
    color: #fff; background: linear-gradient(180deg, #f04a55, #C8202A);
    box-shadow: 0 20px 50px -10px rgba(232, 54, 66, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  .nav-wrapper .nav-links a.sf-nav-scan-btn:hover::after { transform: translateX(130%); }

  /* Taalknop */
  .nav-wrapper .lang-switcher > .lang-btn--desktop {
    height: 42px; padding: 0 12px; border-radius: 12px; font: 500 14px/1 Poppins, sans-serif; color: #A9AEC4;
  }
  .nav-wrapper .lang-switcher:hover > .lang-btn--desktop,
  .nav-wrapper .lang-switcher.open > .lang-btn--desktop { color: #fff; background: rgba(255, 255, 255, .06); }
}