.nav-new
{
    --nav-header-surface-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    display: flex;
    width: auto;
    margin-top: var(--space-6);
    margin-left: 40px;
    margin-right: 40px;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    z-index: 1030;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-6);
}

/* <= 768px (SM) */
@media (max-width: 768px)
{
    .nav-new
    {
        margin-left: var(--space-5);
        margin-right: var(--space-5);
        margin-bottom: 56px;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new
    {
        margin-top: var(--space-6);
        margin-bottom: 40px;
        margin-left: var(--space-4);
        margin-right: var(--space-4);
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        gap: var(--space-4);
    }
}

/* Keep the primary sign-up action visible on narrow phones. */
@media (max-width: 470px)
{
    .nav-new .links a.nav-guest-login
    {
        display: none;
    }
}


.nav-new .nav-container
{
    display: inline-flex;
    border-radius: 64px;
    height: 64px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.nav-new .nav-round-btn > a
{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
}

.nav-new .nav-round-btn > a img,
.nav-new .nav-round-btn > a svg
{
    color: var(--text-primary);
    transition: transform 0.2s ease-in-out;
}

.nav-new .nav-round-btn > a:hover img,
.nav-new .nav-round-btn > a:hover svg
{
    transform: scale(1.2);
}

/* Notifications menu */
.nav-new .notifications-menu .dropdown-menu {
    width: 412px;
}


.nav-new .notifications-menu .dropdown-menu .notification,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification
 {
    font-size: 16px;
    font-weight: 400;
    min-height: 48px;
    height: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: 12px;
    margin-bottom: var(--space-3);
}

.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification
{
    font-size: 18px;
    padding: var(--space-3) var(--space-7);
}

.nav-new .logo
{
    display: inline-block;
    justify-content: flex-start;
}

.nav-new .links
{
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 56px;
}

.nav-new .links > a:not(.btn),
.nav-new .links > .dropdown > a
{
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

.nav-new .links > a:not(.btn):hover,
.nav-new .links > .dropdown > a:hover
{
    transform: scale(1.14);
}

/* <= 460px */
@media (max-width: 460px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 20px !important;
    }
}

/* <= 576px (XS) */
@media (max-width: 576px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
        /* Prevent horizontal scroll */
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
        border: none;
    }

    /* Keep the page in place without turning body into a fixed containing block.
       A fixed body conflicts with the sticky glass header on mobile Safari. */
    body.nav-menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* >= 576 (SM) and <= 768 (MD) */
@media (min-width: 576px) and (max-width: 768px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        margin: 0 !important;
        top: 0px;
        left: 0px;
        width: 100% !important;
    }
}

/* <= 992px (MD) */
@media (max-width: 992px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        position: fixed;
        top: 0px;
        right: 0px;
        margin: 0;
        margin-left: 50%;
        border-radius: 0 !important;
        width: 55%;
        height: 100%;
        z-index: 10000;
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-3);
        padding-top: 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a
    {
        font-size: 22px;
        margin-left: var(--space-5) !important;
        margin-right: var(--space-5) !important;
        padding: var(--space-3) var(--space-6);
        height: auto;
        width: calc(100% - 32px) !important;
        box-sizing: border-box;
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li a:hover
    {
        background-color: var(--color-black-alpha-12);
    }

    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile li.close-btn
    {
        align-self: flex-end;
    }

    .nav-new .dropdown-submenu .submenu-menu
    {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .nav-new .dropdown-submenu.active>.submenu-menu
    {
        display: block;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu
    {
        display: block;
        position: relative;
        width: 100%;
    }

    .nav-new .dropdown-menu-mobile .dropdown-submenu>a.submenu-toggle
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
        padding: var(--space-4) var(--space-6);
        box-sizing: border-box;
    }

    /* Additional styles for text and icon alignment inside <a> */
    .nav-new .dropdown-menu-mobile li a,
    .nav-new .dropdown-menu-mobile li a span
    {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    /* Selector for text between icons */
    .nav-new .dropdown-menu-mobile li .submenu-toggle span:nth-child(2)
    {
        /* Pushes chevron to the right */
        margin-right: auto;
        /* Margin from the left icon */
        margin-left: var(--space-5);
    }

    .nav-new .dropdown-submenu .submenu-menu li a
    {
        font-size: 22px;
        padding: 10px var(--space-6) 10px 80px;
        margin-top: var(--space-2);
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        text-decoration: none;
        display: flex;
        align-items: center;
        /* Gap between icon and text */
        gap: var(--space-5);
    }

    /* Margin for text to prevent overlapping with parent icons */
    .nav-new .dropdown-menu-mobile .dropdown-submenu .submenu-menu li a span
    {
        /* Reset if previously set, control through gap */
        margin-left: 0;
    }

    /* Initial state - closed */
    .nav-new .dropdown-menu-mobile .submenu-toggle .chevron
    {
        transition: transform 0.3s ease;
        transform: rotate(0deg);
        width: 24px;
        height: 24px;
    }

    .nav-new .dropdown-submenu.active>.submenu-toggle .chevron
    {
        /* Rotate when opened */
        transform: rotate(180deg);
    }

    /* Styles for THIRD level of mobile menu nesting */
    .dropdown-menu-mobile>li.dropdown-submenu>ul.submenu-menu>li.dropdown-submenu>ul.submenu-menu>li>a
    {
        margin-left: var(--space-6) !important;
    }

    /* Align mobile menu close button */
    .nav-new ul li.close-btn a
    {
        width: 75px !important;
    }
}

/* <= 1200px (XL) */
@media (max-width: 1200px)
{
    .nav-new .links
    {
        gap: 28px;
    }
}

/* Styles for desktop version of nested menus (from 992px and above) */
@media (min-width: 992px)
{

    /* Set relative positioning for submenu container */
    .nav-new .dropdown .dropdown-submenu
    {
        position: relative;
    }

    /* Submenu is hidden by default and positioned absolutely to the right of the parent item */
    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop
    {
        display: none;
        position: absolute;
        top: -8px;
        left: 100%;
        margin-left: 20px;
        /* <--- ADDED */
        backdrop-filter: blur(16px);
        /* <--- ADDED */
        -webkit-backdrop-filter: blur(16px);
        /* <--- ADDED */
        border-radius: 24px;
        padding: var(--space-3) var(--space-5);
        z-index: 1001;
        width: max-content;
        min-width: 0;
        box-sizing: border-box;
    }

    /* When in open state (when active class is added) submenu is displayed */
    .nav-new .dropdown .dropdown-submenu.active .submenu-menu.desktop
    {
        display: block;
    }

    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop a
    {
        width: 100%;
        height: 48px;
        padding: 0 var(--space-3);
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        border-radius: 64px;
        margin: 0px 0px var(--space-2) 0px;
    }
}

.nav-new .dropdown
{
    position: relative;
    display: inline-block;
}

.nav-new .dropdown-menu
{
    display: none;
    position: absolute;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: var(--space-5);
    width: auto;
    top: 100%;
    right: -32px;
    margin-top: var(--space-4);
    z-index: 10000;
}

.nav-new .admin-menu > .dropdown-menu
{
    width: max-content;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-5);
    isolation: isolate;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-new .admin-menu > .dropdown-menu::before
{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.nav-new .admin-menu .dropdown-submenu .submenu-menu.desktop
{
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
}

.nav-new .admin-menu > .dropdown-menu > li
{
    width: 100%;
}

.nav-new .admin-menu > .dropdown-menu > li > a
{
    box-sizing: border-box;
    white-space: nowrap;
    align-items: center;
}

.nav-new .admin-menu > .dropdown-menu > .dropdown-submenu > .submenu-toggle
{
    display: grid;
    grid-template-columns: 32px minmax(max-content, 1fr) 32px;
    column-gap: var(--space-5);
}

.nav-new .admin-menu > .dropdown-menu > .dropdown-submenu > .submenu-toggle > span:nth-child(2)
{
    margin-right: 0 !important;
}

.nav-new .admin-menu > .dropdown-menu > li:not(.dropdown-submenu) > a,
.nav-new .admin-menu .submenu-menu.desktop > li > a
{
    display: grid !important;
    grid-template-columns: 32px max-content;
    column-gap: var(--space-5);
    align-items: center;
}

.nav-new ul.submenu-menu.desktop
{
    margin-top: 0;
}

.nav-new .dropdown-menu li
{
    display: flex;
    align-items: center;
    /* Vertically centers */
    margin-bottom: var(--space-2);
    /* spacing between items */
}

.nav-new .dropdown-menu li:last-child
{
    margin-bottom: 0;
    /* removes extra margin from the last item */
}

.nav-new .dropdown-menu .notification{
    cursor: default;
}

.nav-new .dropdown-menu > li > a,
.nav-new .dropdown-menu .dropdown-submenu > ul > li > a,
.nav-new .dropdown-menu .notification
{
    width: 100%;
    height: 48px;
    padding: 0 var(--space-3);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 160%;
    border-radius: 64px;
    background-color: transparent;
    transition: transform 250ms ease-out, background-color 250ms ease-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Simple header dropdowns contain one-line labels only. Keep their line box
   from pulling the glyphs towards the top of the 48px interactive row. */
.nav-new .nav-header-dropdown-menu > li
{
    min-height: 48px;
    align-items: stretch;
}

.nav-new .nav-header-dropdown-menu > li > a
{
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
}

.nav-new .dropdown-menu .dropdown-submenu > ul > li > a:hover,
.nav-new .dropdown-menu > li > a:hover,
.nav-new .dropdown-menu .dropdown-submenu > ul > li > a:focus-visible,
.nav-new .dropdown-menu > li > a:focus-visible
{
    transform: translateY(-2px);
}

/* Keep first-level admin rows on the same lift interaction as every other
   header dropdown item; scaling made wider labels jump noticeably. */
.nav-new .admin-menu > .dropdown-menu > li > a:hover
{
    transform: translateY(-2px);
}

/* Nested admin rows are rendered in a separate submenu surface. Give them an
   explicit interaction state so it cannot be lost to the broader dropdown
   colour cascade. */
.nav-new .admin-menu .submenu-menu.desktop > li > a:hover,
.nav-new .admin-menu .submenu-menu.desktop > li > a:focus-visible
{
    background-color: var(--color-black-alpha-12);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce)
{
    .nav-new .dropdown-menu > li > a,
    .nav-new .dropdown-menu .dropdown-submenu > ul > li > a
    {
        transition-property: background-color;
    }

    .nav-new .dropdown-menu .dropdown-submenu > ul > li > a:hover,
    .nav-new .dropdown-menu > li > a:hover,
    .nav-new .dropdown-menu .dropdown-submenu > ul > li > a:focus-visible,
    .nav-new .dropdown-menu > li > a:focus-visible,
    .nav-new .admin-menu .submenu-menu.desktop > li > a:hover,
    .nav-new .admin-menu .submenu-menu.desktop > li > a:focus-visible
    {
        transform: none;
    }
}

.nav-new .dropdown-menu .notification a,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a /* mobile menu */
{
    display: inline;
    color: var(--link-color, var(--color-text-link));
    padding: 0;
    font-size: inherit;
    line-height: 160%;
    text-decoration: none;
    vertical-align: baseline;
}

.nav-new .dropdown-menu .notification a:hover,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a:hover /* mobile menu */
{
    color: var(--link-hover-color, var(--color-text-link-hover));
    background: none;
}

.nav-new .dropdown-menu .notification .time
{
    font-size: 14px;
    color: var(--color-neutral-500);
}

/* mobile menu */
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification .time
{
    font-size: 16px;
}

.nav-new .dropdown.active .dropdown-menu
{
    display: block;
}

.nav-new .dropdown a.dropdown-tgl
{
    display: inline-flex;
    align-items: center;
    /* Vertical alignment */
    gap: 5px;
    /* Gap between text and icon */
    color: var(--accent-color);
}

.nav-new ul li > a
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-5);
}


.nav-new .nav-container a.badge
{
    display: inline-block;
    font-weight: 500;
    border-radius: 32px;
    padding: 6px 11px;
}

.nav-new .nav-container div.links div.dropdown ul.dropdown-menu-mobile li a.badge {
    width: auto;
}

/* Hide "Admin" label because there is no space for it */
@media (max-width: 1056px) {
    .nav-menu-span-admin {
        display: none !important;
    }
}

/* ============================================
   Light Theme Colors (merged from navMenuLight.css)
============================================ */
.nav-new .nav-container
{
    position: relative;
    isolation: isolate;
    background-color: rgba(255, 255, 255, 0.34);
    border: 0;
    box-shadow: var(--nav-header-surface-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.bg-gray .nav-new .nav-container
{
    background-color: rgba(255, 255, 255, 0.34);
}

/* Keep the header glass on a decoration layer. Besides avoiding a fixed-menu
   containing block in Safari, this lets nested dropdowns blur the page behind
   themselves instead of being trapped by the header's backdrop root. */
.nav-new .nav-container::before
{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}

/* Round icon nav btns 1st level (profile, search) */
.nav-new .nav-round-btn > a
{
    background-color: var(--secondary-button-bg);
    border: 1px solid transparent;
    color: var(--text-primary);
    box-shadow: var(--nav-header-surface-shadow);
    transition: transform 0.15s ease-in-out,
                background-color 0.15s ease-in-out,
                border-color 0.15s ease-in-out,
                box-shadow 0.15s ease-in-out;
}

.nav-new .nav-round-btn > a:hover
{
    background-color: var(--secondary-button-bg-hover);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: var(--secondary-button-shadow-hover);
}

.nav-new .nav-round-btn > a:focus-visible
{
    background-color: var(--secondary-button-bg);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: var(--secondary-button-shadow-hover),
                0 0 0 var(--raised-button-focus-width) var(--raised-button-focus-ring);
}

.nav-new .nav-round-btn > a:active
{
    background-color: var(--secondary-button-bg-active);
    border-color: transparent;
    box-shadow: var(--secondary-button-shadow-active);
    transform: scale(0.95);
}

/* Light theme: header round buttons (notifications, theme, profile) match the
   header fill (grey) with dark icons, instead of the old black circles.
   To revert to the old black buttons, comment out the two rules below — the
   --accent-color fill above takes over again. */
/* TEMP reverted to black buttons — uncomment to restore the grey header-fill look.
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a
{
    background-color: #F6F6F6;
}
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a img,
:root:not([data-theme="dark"]) .nav-new .nav-round-btn > a svg
{
    color: #1b1b1b;
}
*/

.nav-new .links a,
.nav-new .links .dropdown>a
{
    color: var(--accent-color);
}

/* <= 992px (MD) */
@media (max-width: 992px)
{
    .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile
    {
        background-color: rgba(245, 245, 245, 0.45);
    }

    .nav-new .dropdown-submenu .submenu-menu li a
    {
        color: var(--accent-color);
    }
}

/* Styles for desktop version of nested menus (from 992px and above) */
@media (min-width: 992px)
{
    /* Submenu is hidden by default and positioned absolutely to the right of the parent item */
    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop
    {
        background-color: rgba(240, 240, 240, 0.98);
        border: 1px solid white;
        color: var(--accent-color);
    }

    .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop a
    {
        color: var(--accent-color);
    }
}

.nav-new .dropdown-menu
{
    background-color: rgba(240, 240, 240, 0.3);
    border: 1px solid white;
    color: var(--accent-color);
}

.nav-new .dropdown-menu a,
.nav-new .dropdown-menu .notification
{
    color: var(--accent-color);
}

.nav-new .nav-container a.badge
{
    background-color: rgba(217, 0, 0, 0.1);
    color: #8B2929;
}

.nav-new .nav-round-btn.dropdown ul li:hover,
.nav-new .nav-container .dropdown ul li:hover
{
    background-color: transparent;
}

.nav-new .dropdown-menu .notification a,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a
{
    color: var(--link-color, var(--color-text-link));
    background: none;
}

.nav-new .dropdown-menu .notification a:hover,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification p > a:hover
{
    color: var(--link-hover-color, var(--color-text-link-hover));
    background: none;
}

.nav-new .dropdown-menu .notification .time,
.nav-new ul.dropdown-menu-mobile ul.submenu-menu > li.notification .time
{
    color: var(--color-neutral-825);
}

.nav-new .dropdown-menu a:hover
{
    background-color: var(--color-black-alpha-12);
}

.nav-new .dropdown-menu .notification:hover
{
    background-color: var(--color-black-alpha-12) !important;
}