/*
 * The package's own styling, served by Filament (FilamentAsset::register). Plain CSS on purpose:
 * Filament publishes this file verbatim through `filament:assets`, so an @import or a Tailwind
 * directive would reach the browser unprocessed. A host may restyle by publishing its own copy.
 *
 * Nothing here styles the navigation itself — it renders through Filament's own item components and
 * inherits their look. A host that wants one placement to look different (a footer strip, say)
 * targets the `extra-navigation-<group>` class the view puts on that menu's <ul>.
 */

/*
 * The user-menu trigger holds an avatar and the user's first name side by side. Filament lays the
 * sidebar variant out as a row but leaves the others with nothing, and `fi-user-menu-trigger-text`
 * carries no styling of its own — so without this the name wraps under the avatar. Both containers,
 * because the trigger appears in the topbar on ordinary pages and in `fi-simple-user-menu-ctn` on
 * the simple layout; listed rather than styling `.fi-user-menu-trigger` outright so the sidebar
 * variant keeps the spacing Filament gives it.
 */
.fi-topbar .fi-user-menu-trigger,
.fi-simple-user-menu-ctn .fi-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * The plain menu this renders at any hook that is not the user menu — its own navigation, laid out
 * the same wherever it lands, never borrowing the topbar's or sidebar's classes. Just enough to be
 * a usable inline row of links; a host restyles a given placement through its extra-navigation-<group>
 * class (a footer strip, say) without the package presuming anything about where it sits.
 */
.extra-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.extra-navigation > li {
    display: flex;
}

.extra-navigation a,
.extra-navigation span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.extra-navigation a {
    color: inherit;
    text-decoration: none;
}

.extra-navigation a:hover {
    text-decoration: underline;
}

.extra-navigation :where(svg) {
    width: 1rem;
    height: 1rem;
}

/*
 * The sidebar override's mobile-only duplicate of the user-menu hooks' items (see
 * NavigationItemsRegistry::renderForSidebarFallback()). It exists only to reach a user-menu
 * hook's items from the mobile hamburger drawer when the panel's UserMenuPosition is Topbar -
 * on desktop the topbar already shows them, so this stays hidden there. 1024px matches
 * Filament's own `lg` breakpoint, the one `.fi-topbar-nav-groups` switches on.
 */
.extra-navigation-sidebar-fallback {
    display: block;
}

@media (min-width: 1024px) {
    .extra-navigation-sidebar-fallback {
        display: none;
    }
}