/* Navbar: one calm, flat bar for every page (the pages used to mix a gradient, a drop shadow and boxy bordered controls).
   Markup and scripts are untouched; this only restyles `header.main-navbar`. */
header.main-navbar {
    --nv-bg: 152 42% 29%;
    --nv-ink: 0 0% 100%;
    background: hsl(var(--nv-bg) / .94) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 1px 0 hsl(0 0% 0% / .06), 0 8px 24px -12px hsl(0 0% 0% / .28) !important;
}
html.dark header.main-navbar { --nv-bg: 152 24% 12%; box-shadow: 0 1px 0 hsl(0 0% 100% / .05), 0 8px 24px -12px hsl(0 0% 0% / .6) !important; }

/* round icon buttons (theme, bell, search, menu) */
header.main-navbar button.rounded-lg:not(#desktop-create-button):not(#desktop-user-button) { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-grid; place-items: center; border-radius: 999px; transition: background .15s; }
header.main-navbar button.rounded-lg:not(#desktop-create-button):not(#desktop-user-button):hover { background: hsl(0 0% 100% / .14); }
header.main-navbar #desktop-user-button { border-radius: 999px; padding: .5rem .875rem; }
header.main-navbar #desktop-user-button:hover { background: hsl(0 0% 100% / .14); }

/* search: a soft pill, no outline until focused */
header.main-navbar .search-box-unfocused { border-radius: 999px !important; border: 0 !important; background-color: hsl(0 0% 100% / .14) !important; padding-left: 2.75rem; transition: background-color .2s, box-shadow .2s; }
header.main-navbar .search-box-unfocused:hover { background-color: hsl(0 0% 100% / .2) !important; }
header.main-navbar .search-box-unfocused:focus { background-color: hsl(0 0% 100%) !important; color: hsl(152 30% 12%) !important; box-shadow: 0 0 0 4px hsl(0 0% 100% / .22); }
header.main-navbar .search-box-unfocused:focus::placeholder { color: hsl(152 12% 40%); }
html.dark header.main-navbar .search-box-unfocused:focus { background-color: hsl(152 20% 18%) !important; color: #fff !important; box-shadow: 0 0 0 4px hsl(152 45% 45% / .35); }
html.dark header.main-navbar .search-box-unfocused:focus::placeholder { color: hsl(0 0% 100% / .55); }

/* the main action: a white pill */
header.main-navbar #desktop-create-button { background: #fff !important; color: hsl(152 45% 24%) !important; border: 0 !important; border-radius: 999px; padding: .5rem 1.125rem; font-weight: 700; box-shadow: 0 2px 10px hsl(0 0% 0% / .18); transition: transform .15s, box-shadow .15s; }
header.main-navbar #desktop-create-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px hsl(0 0% 0% / .25); }
html.dark header.main-navbar #desktop-create-button { background: hsl(152 45% 42%) !important; color: #fff !important; }

/* signed-out: "Entrar" is quiet, "Criar conta" is a soft pill (it was unreadable green-on-green on inner pages) */
header.main-navbar a[href$="/login"] { background: transparent !important; color: #fff !important; font-weight: 600 !important; border-radius: 999px; padding: .5rem 1rem; transition: background .15s !important; }
header.main-navbar a[href$="/login"]:hover { background: hsl(0 0% 100% / .14) !important; }
header.main-navbar a[href$="/register"] { background: hsl(0 0% 100% / .18) !important; color: #fff !important; font-weight: 700 !important; border-radius: 999px; padding: .5rem 1.125rem; transition: background .15s !important; }
header.main-navbar a[href$="/register"]:hover { background: hsl(0 0% 100% / .28) !important; }

/* phone: the + becomes a clear white round button */
header.main-navbar .mobile-default-nav button[onclick^="toggleMobileCreateMenu"] { background: #fff !important; color: hsl(152 45% 24%) !important; }
header.main-navbar .mobile-default-nav button[onclick^="toggleMobileCreateMenu"] svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.5; }
html.dark header.main-navbar .mobile-default-nav button[onclick^="toggleMobileCreateMenu"] { background: hsl(152 45% 42%) !important; color: #fff !important; }
header.main-navbar .mobile-default-nav a[href$="/login"] { padding: .5rem .875rem; font-size: .875rem; }

/* dropdown menus: soft cards */
header.main-navbar #desktop-create-menu, header.main-navbar #desktop-user-menu { border-radius: 1rem; box-shadow: 0 18px 44px -10px hsl(0 0% 0% / .35); }
header.main-navbar #desktop-create-menu a:hover, header.main-navbar #desktop-user-menu a:hover { background: hsl(var(--muted)); }

header.main-navbar :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { header.main-navbar * { transition: none !important; } }
