/* ============================================
   NavMenu Styles (NavMenu.razor + NavMenuItem.razor)
   ============================================
   All CSS for the navigation system lives here as one global file.
   Two co-designed layers:
     1. #NavMenu — the wrapper, hamburger toggle, and scrollable panel
        (NavMenu.razor)
     2. .sc-ui-nav — nav items, links, dropdowns, and submenu content
        (NavMenuItem.razor — applied to the <nav> wrapper any host adds)
   The two layers share responsive breakpoints (@media min-width 641px)
   that flip mobile→desktop together — keeping them in one file avoids
   duplicating the breakpoint logic across two isolated stylesheets and
   preserves a single, ordered cascade for hover/active/focus states. */

/* ============================================
   Nav Menu Container & Hamburger Toggle
   ============================================
   Styles for the NavMenu wrapper, mobile hamburger toggle, and the
   scrollable nav panel. Scoped under #NavMenu to keep class names
   (e.g. .navbar-toggler, .nav-scrollable) self-contained. */

#NavMenu {
    background-color: transparent;
    display: flex;
    align-items: center;
}

    /* Mobile: hamburger toggle — the icon is rendered via a ::before
   pseudo-element using CSS mask-image. The mask shape (three lines)
   comes from a static SVG; the visible color comes from
   background-color which uses var(--neutral-foreground-rest) — a
   Fluent design token that adapts to light/dark mode automatically. */
    #NavMenu .navbar-toggler {
        appearance: none;
        cursor: pointer;
        width: 3.5rem;
        height: 2.5rem;
        flex-shrink: 0;
        border: 2px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.18));
        background-color: transparent;
        position: relative;
    }

        /* Hamburger icon — mask reveals background-color through the
   three-line SVG shape. Color adapts automatically via Fluent design tokens. */
        #NavMenu .navbar-toggler::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--neutral-foreground-rest, #333);
            -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.75rem;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.75rem;
        }

        #NavMenu .navbar-toggler:checked {
            background-color: transparent !important;
        }

    /* Mobile: nav panel drops below the toolbar-bar */
    #NavMenu .nav-scrollable {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0 0.5rem;
        background-color: var(--neutral-layer-1, #fff);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

        /* Mobile: stack nav items vertically in the hamburger panel */
        #NavMenu .nav-scrollable nav {
            display: flex;
            flex-wrap: wrap;
            background-color: transparent;
            flex-direction: column;
        }

    #NavMenu .navbar-toggler:checked ~ .nav-scrollable {
        display: block;
    }

/* ----- Desktop: NavMenu Overrides ----- */
@media (min-width: 641px) {
    #NavMenu .navbar-toggler {
        display: none;
    }

    #NavMenu .nav-scrollable {
        display: block;
        position: static;
        height: auto;
        overflow-y: visible;
        margin: 0;
        padding: 0;
        border-radius: 4px;
        background-color: transparent;
        box-shadow: none;
    }

        #NavMenu .nav-scrollable nav {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            border-radius: 4px;
        }
}

/* ============================================
   Nav Menu Item Rendering
   ============================================
   Styles for NavMenuItem rendering, scoped under .sc-ui-nav on the <nav> wrapper.
   Any host that renders NavMenuItems adds class="sc-ui-nav" to its <nav> element.
   This avoids collisions with Bootstrap's .nav-item / .nav-link base classes. */

/* ----- Nav Item Base ----- */
.sc-ui-nav .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    list-style: none;
}

    .sc-ui-nav .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

/* Custom spacing class — replaces Bootstrap px-3 (1rem !important).
   Mobile: vertical stack gets a small left indent.
   Desktop override below switches to zero (link padding is sufficient). */
.sc-ui-nav-item-spacing {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ----- Nav Link ----- */
.sc-ui-nav .nav-link {
    color: var(--neutral-foreground-rest, #333);
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.sc-ui-nav a.active {
    background-color: transparent !important;
    color: var(--neutral-foreground-rest, #000);
}

.sc-ui-nav .nav-link:hover {
    background-color: transparent !important;
    color: var(--neutral-foreground-rest, #000);
}

.sc-ui-nav .nav-link-icon {
    padding-right: 1rem;
    font-size: large;
}

/* ----- Dropdown Nav Items ----- */
.sc-ui-nav .nav-dropdown {
    position: relative;
}

.sc-ui-nav .nav-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--neutral-foreground-rest, #333);
    font-size: 0.875rem;
    font-weight: 500;
    height: 3rem;
    line-height: 3rem;
    background: none;
    border: none;
    text-decoration: none;
}

    .sc-ui-nav .nav-dropdown-toggle:hover {
        color: var(--neutral-foreground-rest, #000);
    }

.sc-ui-nav .nav-dropdown-arrow {
    font-size: 1em;
    line-height: 1;
}

/* Mobile default: dropdown panel inlines below the toggle */
.sc-ui-nav .nav-dropdown-panel {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
}

.sc-ui-nav .nav-dropdown:hover > .nav-dropdown-panel,
.sc-ui-nav .nav-dropdown:focus-within > .nav-dropdown-panel {
    display: flex;
}

.sc-ui-nav .nav-dropdown-item {
    text-decoration: none;
    color: var(--neutral-foreground-rest, #333);
    border-radius: 4px;
}

    .sc-ui-nav .nav-dropdown-item:hover {
        background-color: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
    }

/* ----- Nav Menu: Dropdown Sub-Item Content -----
   Bold label (.sc-ui-nav-submenu-label) and
   optional non-bold description (.sc-ui-nav-submenu-description). */
.sc-ui-nav-submenu-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
}

.sc-ui-nav-submenu-label {
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.3;
}

.sc-ui-nav-submenu-description {
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.75;
    line-height: 1.3;
}

/* ----- Desktop: Nav Item Overrides ----- */
@media (min-width: 641px) {
    .sc-ui-nav .nav-item {
        padding: 0;
    }

        .sc-ui-nav .nav-item:first-of-type {
            padding-top: 0;
        }

        .sc-ui-nav .nav-item:last-of-type {
            padding-bottom: 0;
        }

    /* Zero out wrapper padding on desktop — the link's own
       padding provides the hit-target and visual spacing. */
    .sc-ui-nav-item-spacing {
        padding-left: 0;
        padding-right: 0;
    }

    .sc-ui-nav .nav-link {
        height: auto;
        line-height: normal;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }

    .sc-ui-nav .nav-dropdown-toggle {
        height: auto;
        line-height: normal;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }

    /* Desktop: dropdown panel floats below the toggle */
    .sc-ui-nav .nav-dropdown-panel {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        padding: 8px 0;
        background: var(--neutral-layer-1, #fff);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        z-index: 200;
    }
}