/* Bovenbalk — eigen vaste kleuren, zodat 'ie in de Wrapped én de quiz hetzelfde oogt. */
.topnav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:rgb(26 26 34 / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgb(255 255 255 / .08);font-family:"Nunito",ui-rounded,system-ui,sans-serif}
.topnav a{color:#F3F2F7;text-decoration:none}
.topnav .brandlink{display:flex;align-items:center;flex:none}
.topnav .brandlink img{height:30px;width:auto;display:block}
.topnav .navitems{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.topnav .navitems a{padding:7px 12px;border-radius:999px;font-weight:800;font-size:.9rem;white-space:nowrap;color:#C9C6D6}
.topnav .navitems a:hover{color:#fff;background:rgb(255 255 255 / .08)}
.topnav .navitems a.on{background:#43A852;color:#10160F}
.topnav a:focus-visible{outline:2px solid #E8408F;outline-offset:2px}
@media (max-width:520px){ .topnav .brandlink img{height:24px} .topnav .navitems a[href="/"]{display:none} }

/* desktop: menu-items direct naast het logo, linksboven */
@media (min-width:700px){ .topnav{justify-content:flex-start;gap:28px} }