/* ui_nav — pair file for src/ui_system/nav.jl
 *
 * Top navigation bar: brand · links · admin dropdown · logout. */

nav {
    padding: 0.25rem 0;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.nav-brand img {
    height: 2rem;
    display: block;
}

.nav-title {
    white-space: nowrap;
}

.nav-active {
    cursor: default;
    font-weight: 600;
    color: var(--pico-color);
    text-decoration: underline;
    text-decoration-color: var(--pico-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

nav details.dropdown > summary {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--pico-primary) !important;
    padding: var(--pico-nav-link-spacing-vertical)
             calc(var(--pico-nav-link-spacing-horizontal) + 1rem)
             var(--pico-nav-link-spacing-vertical)
             var(--pico-nav-link-spacing-horizontal);
    margin: 0;
    font-size: inherit;
    transition: color var(--ds-transition-base);
}

nav details.dropdown > summary:hover,
nav details.dropdown > summary:focus-visible,
nav details.dropdown[open] > summary {
    color: var(--pico-primary-hover) !important;
}

nav details.dropdown > summary.nav-active,
nav details.dropdown > summary.nav-active:hover,
nav details.dropdown > summary.nav-active:focus-visible,
nav details.dropdown[open] > summary.nav-active {
    color: var(--pico-color) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--pico-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.nav-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    font-size: var(--ds-font-lg);
    transition: color var(--ds-transition-base),
                border-color var(--ds-transition-base),
                background var(--ds-transition-base);
}

.nav-logout svg {
    flex-shrink: 0;
    transition: transform var(--ds-transition-base);
}

.nav-logout:hover,
.nav-logout:focus-visible {
    background: color-mix(in srgb, var(--pico-del-color) 12%, transparent);
    border-color: var(--pico-del-color);
    color: var(--pico-del-color);
}

.nav-logout:hover svg,
.nav-logout:focus-visible svg {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .nav-logout { padding: 0.3rem 0.5rem; gap: 0; }
    .nav-logout-label { display: none; }
    .nav-title { display: none; }
}

.nav-chevron {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}