/* Dropdown "Oplossingen": each category is its own rounded bubble (dark translucent, fine gold outline),
   gold line icon on the left, arrow on the right, subtle gold glow on hover. Loaded after nav.css / hero-v2.css. */
.primary-nav .nav-panel{display:flex;flex-direction:column;gap:8px;min-width:296px;padding:4px 0 0;margin-top:16px;background:none;border:0;box-shadow:none}
.primary-nav .nav-panel a{display:flex;align-items:center;gap:13px;min-height:46px;padding:10px 18px 10px 15px;border-radius:999px;
  background:rgba(17,23,22,.8);border:1px solid rgba(213,169,104,.42);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#efe9dc;font:500 14px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.01em;
  box-shadow:0 12px 28px -16px rgba(0,0,0,.75);
  transition:background .25s,border-color .25s,color .25s,box-shadow .3s,transform .25s}
.primary-nav .nav-panel a .ni{flex:none;width:20px;height:20px;color:var(--copper,#d5a968);opacity:.95;transition:transform .25s}
.primary-nav .nav-panel a .na{flex:none;margin-left:auto;width:14px;height:12px;color:var(--copper,#d5a968);opacity:.7;transition:transform .25s,opacity .25s}
.primary-nav .nav-panel a:hover,.primary-nav .nav-panel a:focus-visible{
  background:rgba(30,38,35,.94);border-color:#d5a968;color:#ecd1a0;
  box-shadow:0 0 0 1px rgba(213,169,104,.22),0 10px 30px -10px rgba(213,169,104,.45),inset 0 0 22px rgba(213,169,104,.08);
  transform:translateX(3px)}
.primary-nav .nav-panel a:hover .na,.primary-nav .nav-panel a:focus-visible .na{opacity:1;transform:translateX(3px)}
.primary-nav .nav-panel a:hover .ni{transform:scale(1.06)}
.primary-nav .nav-panel a:focus-visible{outline:2px solid #d5a968;outline-offset:2px}
.primary-nav .nav-panel a[aria-current="page"]{border-color:#d5a968;color:#ecd1a0;background:rgba(30,38,35,.9)}
/* "Alle oplossingen" (inner pages): a quiet gold-outline bubble below the seven categories */
.primary-nav .nav-panel a.nav-panel-all{justify-content:center;margin-top:2px;padding:10px 18px;border-top:1px solid rgba(213,169,104,.42);border-color:rgba(213,169,104,.42);background:rgba(17,23,22,.55);color:#d5a968;font-weight:600}
.primary-nav .nav-panel a.nav-panel-all:hover{color:#f0d8a9}

/* items glide in one after another when the menu opens (desktop) */
@media(min-width:1001px){
  .primary-nav .nav-panel a{opacity:0;transform:translateY(-6px)}
  .nav-dropdown:hover .nav-panel a,.nav-dropdown:focus-within .nav-panel a{opacity:1;transform:none}
  .nav-dropdown:hover .nav-panel a:hover,.nav-dropdown:focus-within .nav-panel a:hover{transform:translateX(3px)}
  .nav-dropdown:hover .nav-panel a:nth-child(2){transition-delay:.02s}
  .nav-dropdown:hover .nav-panel a:nth-child(3){transition-delay:.04s}
  .nav-dropdown:hover .nav-panel a:nth-child(4){transition-delay:.06s}
  .nav-dropdown:hover .nav-panel a:nth-child(5){transition-delay:.08s}
  .nav-dropdown:hover .nav-panel a:nth-child(6){transition-delay:.1s}
  .nav-dropdown:hover .nav-panel a:nth-child(7){transition-delay:.12s}
  .primary-nav .nav-panel a{transition-property:opacity,transform,background,border-color,color,box-shadow;transition-duration:.28s}
}

/* inside the opened phone menu: full-width bubbles */
@media(max-width:1000px){
  .primary-nav .nav-panel{position:static;min-width:0;width:100%;gap:8px;padding:8px 0 12px;margin:0;opacity:1;visibility:visible;transform:none}
  .primary-nav .nav-panel a{width:100%;min-height:48px;padding:11px 18px 11px 16px;font-size:15px;color:#efe9dc;opacity:1;transform:none;border-bottom:1px solid rgba(213,169,104,.42)}
  .primary-nav .nav-panel a:hover,.primary-nav .nav-panel a:focus-visible{transform:none}
  .primary-nav .nav-panel a.nav-panel-all{padding:11px 18px}
}
@media(prefers-reduced-motion:reduce){.primary-nav .nav-panel a{transition:none!important;transform:none!important;opacity:1!important}}