.f-navbar {
  @apply w-full shadow-sm sticky top-0 z-50 bg-[--f-navbar-background] text-[--f-text];
}

.f-navbar-inner {
  @apply max-w-7xl mx-auto flex items-center justify-between py-1 px-4;
}

.f-navbar-links {
  @apply gap-6;
}

.f-navbar-link {
  @apply text-base text-[--f-navbar-link] hover:text-[--f-navbar-link-hover] transition-colors;
}

.f-mobile-toggle {
  @apply text-3xl p-2 text-[--f-text] relative z-[70];
}

.f-mobile-menu {
  @apply fixed right-4 bg-[--f-background] border border-[--f-border-color] p-4 flex flex-col gap-2 opacity-0 scale-95 -translate-y-2 pointer-events-none transition duration-200 divide-y divide-[--f-border-color];
  top: calc(var(--f-navbar-height, 84px) + 0.75rem);
  width: 18rem;
  max-width: calc(100vw - 2rem);
  z-index: 70;
  max-height: calc(100vh - var(--f-navbar-height, 64px) - 2rem);
  overflow-y: auto;
}

.f-mobile-menu.open {
  @apply opacity-100 scale-100 translate-y-0 pointer-events-auto;
}

.f-mobile-link {
  @apply text-base py-2 px-2
         text-[--f-navbar-link]
         hover:text-[--f-navbar-link-hover]
         hover:bg-black/5 dark:hover:bg-white/5
         transition;
}

.f-navbar-logo {
  @apply block;
  height: 60px;   /* testowo: 44px / 40px jak chcesz ciaśniej */
  width: auto;
}

.f-mobile-backdrop {
  @apply fixed inset-0 bg-black/30 opacity-0 pointer-events-none transition-opacity duration-200 z-[60];
}

.f-mobile-backdrop.open {
  @apply opacity-100 pointer-events-auto;
}