/* ============================================================
   nav.css — Global navigation layout primitives
   Covers: navbar structure, nav-link base styles, nav-pills.
   Component-specific styles (TopMenu desktop/mobile, ChatBot)
   live in TopMenu.razor.css.
   ============================================================ */

/* ── Navbar layout ── */
.navbar-container {
    display: flex;
    height: 40px;
    align-items: center;
    gap: 12px;
}

.navbar-brand {
    display: flex;
    width: 363px;
    height: 48px;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.navbar-end {
    display: flex;
    width: 285.7px;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.navbar-brand-mobile {
    padding: 0;
}

@media (max-width: 936px) {
    .navbar {
        padding: 0;
    }

    .navbar-brand {
        width: auto;
    }
}

/* ── Nav items ── */
.nav-item {
    display: flex;
    height: 42px;
    padding: 0 16px;
    align-items: center;
    gap: 6px;
}

/* ── Nav links — base ── */
.nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--slate-50);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-radius: 8px;
}

    .nav-link:focus,
    .nav-link:hover {
        color: var(--slate-50);
    }

    .nav-link.dropdown-item {
        justify-content: left;
        color: black;
    }

        .nav-link.dropdown-item:active,
        .nav-link.dropdown-item:hover,
        .nav-link.dropdown-item:focus {
            background-color: var(--slate-300);
        }

    .nav-link.active,
    .navbar-nav .show > .nav-link {
        background-color: #405270;
        color: var(--slate-50);
    }

        .nav-link.active:hover,
        .navbar-nav .show > .nav-link:hover {
            background: var(--slate-500);
        }

/* ── Nav pills ── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    border: 1px solid var(--blue-500);
    background: var(--blue-600);
}

.nav-pills .nav-link,
.nav-pills .show > .nav-link {
    border: 1px solid var(--slate-500);
    color: var(--slate-500);
}

.nav-pills .nav-item {
    padding: 0 7px;
}

/* ── Toggler icon ── */
.navbar-toggler-icon {
    color: var(--slate-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F8FAFC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 20h16M4 12h16M4 4h16'/%3E%3C/svg%3E");
}

/* ── Mobile menu: hidden state (SSR + WASM) ── */
.mobile-menu--hidden {
    display: none;
}

.mobile-submenu--hidden {
    display: none;
}

/* Toggle button icons: hamburger shown by default, X shown when open */
.mobile-toggler .mobile-icon-close { display: none; }
.mobile-toggler .mobile-icon-open  { display: block; }

/* When the parent nav bar has data-mobile-open, swap icons */
[data-mobile-open] .mobile-toggler .mobile-icon-close { display: block; }
[data-mobile-open] .mobile-toggler .mobile-icon-open  { display: none; }

/* Chevron rotation for open sections (JS-driven via data-section-open attribute) */
[data-section-open] .mobile-chevron { transform: rotate(90deg); }