/* ==========================================================
   GDS NAVBAR
   Version : 0.4
   ========================================================== */

/* ==========================================================
   SHELL
   ========================================================== */

.navbar {

    width: 100%;

    background:
        var(
            --navbar-background,
            var(--color-surface)
        );

    color:
        var(
            --navbar-text,
            var(--color-text)
        );

    box-shadow:
        var(
            --navbar-shadow,
            none
        );
    padding-bottom: 1 rem;
}

/* ==========================================================
   LAYOUT
   ========================================================== */

.navbar > .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-xl);

    min-height: 5rem;

}

/* ==========================================================
   BRAND
   ========================================================== */

.navbar-brand {

    flex-shrink: 0;

}

.navbar-brand a {

    display: inline-flex;

    align-items: center;

    gap: 0.85rem;

    text-decoration: none;

    color:
        var(
            --navbar-text,
            inherit
        );

}

.navbar-brand img {

    display: block;

    height: 3rem;

    width: auto;

    transition:
        transform .25s ease;

}

.navbar-brand:hover img{

    transform:scale(1.05);

}

.navbar-brand span{

    font-size:1.65rem;

    font-weight:800;

    letter-spacing:-0.04em;

    line-height:1;

    white-space:nowrap;

    color:
        var(
            --navbar-brand,
            var(--navbar-text)
        );

    transition:
        color .25s ease;

}

.navbar-brand:hover span{

    color:
        var(
            --navbar-link-hover,
            var(--color-primary)
        );

}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.navbar-navigation {

    display: flex;

    justify-content: center;

    flex: 1;

    margin-inline: var(--space-2xl);

}

/* ==========================================================
   MENU
   ========================================================== */

.navbar-menu {

    display:flex;

    align-items:center;

    gap:.35rem;

    margin:0;

    padding:0;

    list-style:none;

}

.navbar-menu li{

    margin:0;

    padding:0;

}

/* remove separators */

.navbar-menu li + li::before{

    display:none;

}

.navbar-menu a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.65rem 1rem;

    border-radius:999px;

    text-decoration:none;

    white-space:nowrap;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.01em;

    color:
        var(
            --navbar-link,
            inherit
        );

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease;

}

.navbar-menu a:hover{

    background:
        var(
            --navbar-hover-background,
            rgba(31,37,101,.08)
        );

    color:
        var(
            --navbar-link-hover,
            var(--color-primary)
        );

    transform:translateY(-1px);

}

.navbar-menu a.is-active{

    background:
        var(
            --navbar-active-background,
            var(--color-primary)
        );

    color:
        var(
            --navbar-active-text,
            #fff
        );

}

/* ==========================================================
   ACTIONS
   ========================================================== */

.navbar-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:var(--space-m);

    flex-shrink:0;

}

/* ==========================================================
   TOGGLE
   ========================================================== */

.navbar-toggle {

    display:none;

    align-items:center;

    justify-content:center;

    width:2.8rem;

    height:2.8rem;

    border:none;

    border-radius:var(--radius-m);

    background:transparent;

    color:
        var(
            --navbar-text,
            var(--color-text)
        );

    font-size:1.4rem;

    cursor:pointer;

    transition:

        background .25s ease,

        color .25s ease;

}

.navbar-toggle:hover{

    background:
        var(
            --navbar-hover-background,
            rgba(31,37,101,.08)
        );

}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.navbar a:focus-visible,

.navbar-toggle:focus-visible{

    outline:2px solid
        var(
            --color-primary
        );

    outline-offset:4px;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:768px){

    .navbar > .container{

        flex-wrap:wrap;

        gap:var(--space-m);

    }

    .navbar-navigation{

        display:none;

        width:100%;

        order:100;

        margin-inline:0;

        flex:0 0 100%;

        background:
            var(
                --navbar-background,
                var(--color-surface)
            );

    }

    .navbar-navigation.is-expanded{

        display:block;

    }

    .navbar-menu{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--space-xs);

        width:100%;

        padding-block:var(--space-s);

    }

    .navbar-menu a{

        width:100%;

        justify-content:flex-start;

        padding:.8rem 1rem;

    }

    .navbar-actions{

        display:none;

    }

    .navbar-toggle{

        display:flex;

        margin-left:auto;

    }

    .navbar .dropdown-menu{
        position:static;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        padding-left:1rem;
    }

    .navbar.has-dropdown.is-open > .dropdown-menu{
        display:flex;
    }

    .has-dropdown.is-open .dropdown-arrow{
        transform:rotate(180deg);
    }

}

/* ==========================================================
   DROPDOWN
   ========================================================== */

.navbar-menu > li{
    position:relative;
}

.has-dropdown > a{
    gap:.4rem;
}

.dropdown-arrow{
    font-size:.75rem;
    transition:transform .25s ease;
}

.navbar .dropdown-menu{

    position:absolute;

    top: 100%; /* Changed from calc(100% + .5rem) */
    margin-top: 0.5rem;

    left:0;

    min-width:220px;

    padding:.5rem;

    margin:0;

    list-style:none;

    background:var(--color-surface);

    border-radius:var(--radius-m);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    display:flex;

    flex-direction:column;

    gap:.15rem;

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:
        opacity .2s,
        transform .2s,
        visibility .2s;

    z-index:1000;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.dropdown-menu a{

    display:block;

    padding:.75rem 1rem;

    border-radius:var(--radius-s);

    white-space:nowrap;
}

.navbar.has-dropdown:hover > .dropdown-menu,
.navbar .has-dropdown:focus-within > .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.has-dropdown:hover .dropdown-arrow,
.has-dropdown:focus-within .dropdown-arrow{

    transform:rotate(180deg);
}
.navbar .has-dropdown.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.has-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg);
}

.navbar .has-dropdown.is-force-closed > .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}