/* Navigatiebalk van kamelo.eu in de stijl van granola.ai (9 nov 2026). Los van gr.css zodat de homepage hem ook laadt zonder de rest. */
/* ---------- Navigatiebalk (9 nov, Lucas: "miss beter ook zo de navbar"): logo met naam links, de onderwerpen in het midden,
   rechts een lichte knop met een rand en een zachte gevulde knop. Op elke pagina, ook de homepage (9 nov, "ombouwen"). ---------- */
.brand-word { font: 600 21px/1 var(--font-head); letter-spacing: -.035em; color: var(--ink); }
@media (min-width: 641px) {
  .nav-in { gap: 10px; }
  .nav-links { flex: 1; justify-content: center; margin-left: 0; gap: 6px; font-size: 15px; }
  .nav-links .nav-top { display: inline-flex; padding: 8px 14px; border-radius: 999px; transition: background .25s; }
  .nav-links .nav-top:hover { opacity: 1; background: var(--soft); }
  .nav .nav-cta { margin-left: 0; }
}
.nav .nav-ghost { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-weight: 500; background: transparent; transition: background .25s, border-color .25s; }
.nav .nav-ghost:hover { text-decoration: none; background: var(--soft); border-color: transparent; }
.nav .nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: var(--soft); color: var(--ink); transition: background .25s, transform .3s var(--spring); }
.nav .nav-cta:hover { background: var(--line); color: var(--ink); opacity: 1; }
.nav-apple { width: 16px; height: 16px; fill: currentColor; margin-top: -2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .nav-cta { background: #2c2c2e; color: #f5f5f7; }
  :root:not([data-theme="light"]) .nav .nav-cta:hover { background: #3a3a3c; }
  :root:not([data-theme="light"]) .nav .nav-ghost { border-color: #3a3a3c; }
}
@media (max-width: 900px) { .nav .nav-ghost { display: none; } }
@media (max-width: 640px) { .brand-word { font-size: 19px; } }

/* Het ene uitklapmenu (Melo) als klein kaartje onder het woord, zoals bij Granola, in plaats van een paneel over de hele breedte */
@media (min-width: 641px) {
  .nav-item.has-mega { position: relative; }
  .nav-item.has-mega > .mega { left: 50%; right: auto; top: calc(100% - 8px); width: 280px; transform: translate(-50%, -6px); border-radius: 18px;
    background: var(--gr-card, var(--bg)); border: 1px solid var(--gr-edge, var(--line)); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .3); }
  .nav-item.has-mega:hover > .mega, .nav-item.has-mega:focus-within > .mega { transform: translate(-50%, 0); }
  .nav-item.has-mega > .mega .mega-in { display: block; padding: 10px; max-width: none; }
  .nav-item.has-mega > .mega .mega-k { display: none; }
  .nav-links .nav-item.has-mega .mega-big { width: auto; padding: 10px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
  .nav-links .nav-item.has-mega .mega-big:hover { background: var(--soft); opacity: 1; }
}