/* =========================================================
   DESKTOP NAVBAR
========================================================= */

.desktop-nav {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background: var( --white);

    pointer-events: none;
}


/* =========================================================
   DESKTOP NAVBAR BAR
========================================================= */

.desktop-nav .nav-bar {
    width: 100%;

    min-height: var(--navbar-height);

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: var(--navbar-padding);

    position: relative;
    z-index: 10000;

    background: var( --white);

    box-shadow: none;

    pointer-events: auto;
}


/* =========================================================
   DESKTOP LOGO
========================================================= */

.desktop-nav .logo {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    position: relative;
}

.desktop-nav .logo a {
    display: block;

    position: relative;

    line-height: var(--line-height-tight);
}

.desktop-nav .logo-img {
    display: block;

    width: var(--navbar-logo-width);

    max-width: 100%;

    height: auto;

    opacity: 1;
    visibility: visible;
}


/* =========================================================
   DESKTOP MENU
   MENU STAYS ON RIGHT SIDE
========================================================= */

.desktop-nav .menu {
    display: flex;

    align-items: center;

    gap: var(--navbar-menu-gap);

    margin: 0 0 0 auto;

    padding: 0;

    list-style: none;

    flex-shrink: 0;
}

.desktop-nav .menu li {
    position: relative;
}


/* =========================================================
   DESKTOP MENU LINKS
========================================================= */

.desktop-nav .menu li a {
    position: relative;

    display: inline-block;

    padding: var(--navbar-menu-link-padding);

    color: var(--black);

    text-decoration: none;

    font-size: var(--navbar-menu-font-size);

    font-weight: var(--navbar-menu-font-weight);

    white-space: nowrap;

    transition:
        color var(--navbar-hover-transition);
}


/* =========================================================
   DESKTOP MENU UNDERLINE
========================================================= */

.desktop-nav .menu li a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: var(--navbar-underline-width);

    height: var(--navbar-underline-height);

    background: currentColor;

    transition:
        width var(--navbar-transition);
}


/* =========================================================
   DESKTOP MENU HOVER
========================================================= */

.desktop-nav .menu li a:hover {
    color: var(--navbar-hover-color);
}

.desktop-nav .menu li a:hover::after {
    width: 100%;
}


/* =========================================================
   DESKTOP ACTIVE MENU
========================================================= */

.desktop-nav .menu li a[aria-current="page"] {
    color: var(--navbar-hover-color);
}

.desktop-nav .menu li a[aria-current="page"]::after {
    width: 100%;

    background: var(--navbar-hover-color);
}


/* =========================================================
   DESKTOP LANGUAGE SELECTOR
========================================================= */

.language-selector {
    position: relative;

    margin-left: var(--navbar-language-margin-left);

    flex-shrink: 0;
}


/* =========================================================
   DESKTOP LANGUAGE BUTTON
========================================================= */

.language-toggle {
    display: flex;

    align-items: center;

    gap: var(--navbar-language-gap);

    border: 0;

    background: var( --white) !important;

    color: var(--black);

    padding: var(--navbar-language-padding);

    cursor: pointer;

    font-size: var(--navbar-language-font-size);

    transition:
        color var(--navbar-hover-transition);
}


/* =========================================================
   DESKTOP LANGUAGE HOVER
========================================================= */

.language-toggle:hover {
    color: var(--navbar-hover-color);

    background: var( --white) !important;
}


/* =========================================================
   DESKTOP LANGUAGE ARROW
========================================================= */

.language-arrow {
    font-size: var(--navbar-language-arrow-size);

    transition:
        transform var(--navbar-hover-transition);
}

.language-selector.open .language-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP LANGUAGE DROPDOWN
========================================================= */

.language-dropdown {
    position: absolute;

    top: calc(100% + var(--navbar-dropdown-offset));

    right: 0;

    min-width: var(--navbar-dropdown-min-width);

    background: var(--white);

    border-radius: var(--navbar-dropdown-radius);

    padding: var(--navbar-dropdown-padding);

    box-shadow: var(--navbar-dropdown-shadow);

    opacity: 0;

    visibility: hidden;

    transform: translateY(var(--navbar-dropdown-offset));

    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);

    z-index: var(--navbar-dropdown-z-index);
}


/* =========================================================
   DESKTOP LANGUAGE DROPDOWN OPEN
========================================================= */

.language-selector.open .language-dropdown {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   DESKTOP LANGUAGE OPTIONS
========================================================= */

.language-option {
    position: relative;

    display: block;

    padding: 9px 15px;

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

    text-decoration: none;

    font-size: var(--font-size-sm);

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}


/* =========================================================
   DESKTOP LANGUAGE OPTION HOVER
========================================================= */

.language-option:hover {
    background: var(--navbar-dropdown-hover-bg);

    color: var(--navbar-dropdown-hover-text);
}


/* =========================================================
   DESKTOP ACTIVE LANGUAGE
========================================================= */

.language-option.active {
    background: var(--navbar-dropdown-active-bg);

    color: var(--navbar-dropdown-active-text);

    font-weight: var(--font-weight-semibold);
}


/* =========================================================
   DESKTOP 1400px
========================================================= */

@media (max-width: 1400px) {

    .desktop-nav .nav-bar {
        padding-left: var(--navbar-1400-padding-x);

        padding-right: var(--navbar-1400-padding-x);
    }


    .desktop-nav .menu {
        gap: var(--navbar-1400-menu-gap);
    }


    .desktop-nav .menu li a {
        font-size: var(--navbar-1400-menu-font-size);
    }


    .language-selector {
        margin-left: var(--navbar-1400-language-margin-left);
    }

}


/* =========================================================
   DESKTOP 1200px
========================================================= */

@media (max-width: 1200px) {

    .desktop-nav .nav-bar {
        padding-left: var(--navbar-1200-padding-x);

        padding-right: var(--navbar-1200-padding-x);
    }


    .desktop-nav .menu {
        gap: var(--navbar-1200-menu-gap);
    }


    .desktop-nav .menu li a {
        font-size: var(--navbar-1200-menu-font-size);
    }


    .language-selector {
        margin-left: var(--navbar-1200-language-margin-left);
    }


    .language-toggle {
        font-size: var(--navbar-1200-language-font-size);
    }

}


/* =========================================================
   DESKTOP 1000px
========================================================= */

@media (max-width: 1000px) {

    .desktop-nav .nav-bar {
        padding-left: var(--navbar-1000-padding-x);

        padding-right: var(--navbar-1000-padding-x);
    }


    .desktop-nav .menu {
        gap: var(--navbar-1000-menu-gap);
    }


    .desktop-nav .menu li a {
        font-size: var(--navbar-1000-menu-font-size);
    }


    .language-selector {
        margin-left: var(--navbar-1000-language-margin-left);
    }


    .language-toggle {
        font-size: var(--navbar-1000-language-font-size);
    }

}


/* =========================================================
   DESKTOP 900px
========================================================= */

@media (max-width: 900px) {

    .desktop-nav .menu {
        gap: var(--navbar-900-menu-gap);
    }


    .desktop-nav .menu li a {
        font-size: var(--navbar-900-menu-font-size);
    }


    .language-toggle {
        font-size: var(--navbar-900-language-font-size);
    }

}


/* =========================================================
   MOBILE NAVBAR
========================================================= */

.mobile-nav {
    display: none;
}


/* =========================================================
   MOBILE 768px
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       HIDE DESKTOP NAVBAR
    ====================================================== */

    .desktop-nav {
        display: none;
    }


    /* =====================================================
       SHOW MOBILE NAVBAR
    ====================================================== */

    .mobile-nav {
        display: block;

        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        z-index: 9999;

        background: var( --white);
    }


    /* =====================================================
       MOBILE NAVBAR BAR
    ====================================================== */

    .mobile-nav .nav-bar {
        width: 100%;

        min-height: var(--mobile-navbar-height);

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: var(--mobile-navbar-padding);

        position: relative;

        z-index: 10001;

        box-sizing: border-box;

        background: var( --white);
    }


    /* =====================================================
       MOBILE LOGO
    ====================================================== */

    .mobile-nav .logo {
        flex-shrink: 0;

        display: flex;

        align-items: center;

        position: relative;
    }


    .mobile-nav .logo a {
        display: block;

        position: relative;

        line-height: var(--line-height-tight);
    }


    .mobile-nav .logo-img {
        display: block;

        width: var(--navbar-logo-width);

        max-width: 100%;

        height: auto;

        opacity: 1;

        visibility: visible;
    }


    /* =====================================================
       MOBILE MENU BUTTON
    ====================================================== */

    .menu-toggle,
    .close-menu {
        border: 0;

        background: var( --white);

        color: var(--black);

        font-size: var(--mobile-menu-button-size);

        cursor: pointer;

        padding: var(--mobile-menu-button-padding);

        line-height: var(--line-height-tight);

        z-index: 10003;

        transition:
            color var(--navbar-hover-transition),
            transform var(--navbar-hover-transition);
    }


    /* =====================================================
       MOBILE BUTTON HOVER
    ====================================================== */

    .menu-toggle:hover,
    .close-menu:hover {
        color: var(--navbar-hover-color);
    }


    .menu-toggle:active,
    .close-menu:active {
        transform: scale(0.9);
    }


    /* =====================================================
       CLOSE BUTTON
    ====================================================== */

    .close-menu {
        display: none;
    }


    /* =====================================================
       MOBILE SIDEBAR
    ====================================================== */

    .mobile-nav .menu {
        position: fixed;

        top: 0;

        right: -100%;

        width: var(--mobile-menu-width);

        max-width: var(--mobile-menu-max-width);

        height: 100vh;

        margin: 0;

        padding: var(--mobile-menu-padding);

        list-style: none;

        background: var(--black);

        overflow-y: auto;

        box-sizing: border-box;

        z-index: 10000;

        transition:
            right var(--mobile-menu-transition);
    }


    /* =====================================================
       SIDEBAR OPEN
    ====================================================== */

    .mobile-nav .menu.show-menu {
        right: 0;
    }


    /* =====================================================
       MOBILE MENU ITEMS
    ====================================================== */

    .mobile-nav .menu > li {
        position: relative;

        margin: 0;

        padding: 0;

        background: var(--black);
    }


    /* =====================================================
       MOBILE MENU LINKS
       WHITE TEXT
    ====================================================== */

    .mobile-nav .menu > li > a {
        position: relative;

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        box-sizing: border-box;

        padding: var(--mobile-menu-link-padding);

        color: var( --white);

        background: var(--black);

        text-decoration: none;

        font-size: var(--mobile-menu-link-font-size);

        font-weight: var(--mobile-menu-link-font-weight);

        transition:
            color var(--transition-normal),
            padding-left var(--transition-normal);
    }


    /* =====================================================
       MOBILE LINK UNDERLINE
       GOLD
    ====================================================== */

    .mobile-nav .menu > li > a::before {
        content: "";

        position: absolute;

        left: 0;

        bottom: var(--mobile-menu-underline-bottom);

        width: var(--navbar-underline-width);

        height: var(--mobile-menu-underline-height);

        background: var(--navbar-hover-color);

        transition:
            width var(--transition-normal);
    }


    /* =====================================================
       MOBILE LINK HOVER
       GOLD
    ====================================================== */

    .mobile-nav .menu > li > a:hover,
    .mobile-nav .menu > li > a:focus,
    .mobile-nav .menu > li > a:active {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);
    }


    .mobile-nav .menu > li > a:hover::before,
    .mobile-nav .menu > li > a:focus::before,
    .mobile-nav .menu > li > a:active::before {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );
    }


    /* =====================================================
       MOBILE ACTIVE LINK
       GOLD
    ====================================================== */

    .mobile-nav .menu > li > a[aria-current="page"] {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);
    }


    .mobile-nav .menu > li > a[aria-current="page"]::before {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );

        background: var(--navbar-hover-color);
    }


    /* =====================================================
       MOBILE LANGUAGE SECTION
       BLACK BACKGROUND
    ====================================================== */

    .mobile-language-item {
        margin-top: var(--mobile-language-margin-top);

        border-top: var(--mobile-language-border);

        padding-top: var(--mobile-language-padding-top) !important;

        background: var(--black);
    }


    /* =====================================================
       MOBILE LANGUAGE BUTTON
       WHITE TEXT
    ====================================================== */

    .mobile-language-toggle {
        position: relative;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border: 0;

        background: var(--black);

        color: var( --white);

        padding: var(--mobile-menu-link-padding);

        font-size: var(--mobile-menu-link-font-size);

        font-weight: var(--mobile-menu-link-font-weight);

        cursor: pointer;

        box-sizing: border-box;

        transition:
            color var(--transition-normal),
            padding-left var(--transition-normal);
    }


    /* =====================================================
       LANGUAGE LEFT CONTENT
    ====================================================== */

    .mobile-language-toggle > span {
        display: flex;

        align-items: center;

        gap: var(--mobile-language-gap);
    }


    /* =====================================================
       LANGUAGE ICON
    ====================================================== */

    .mobile-language-toggle i {
        color: inherit;
    }


    /* =====================================================
       LANGUAGE ARROW
    ====================================================== */

    .mobile-language-arrow {
        font-size: var(--navbar-language-arrow-size);

        color: inherit;

        transition:
            transform var(--transition-fast);
    }


    .mobile-language-item.open .mobile-language-arrow {
        transform: rotate(180deg);
    }


    /* =====================================================
       LANGUAGE BUTTON UNDERLINE
       GOLD
    ====================================================== */

    .mobile-language-toggle::before {
        content: "";

        position: absolute;

        left: 0;

        bottom: var(--mobile-menu-underline-bottom);

        width: var(--navbar-underline-width);

        height: var(--mobile-menu-underline-height);

        background: var(--navbar-hover-color);

        transition:
            width var(--transition-normal);
    }


    /* =====================================================
       LANGUAGE HOVER
       GOLD
    ====================================================== */

    .mobile-language-toggle:hover,
    .mobile-language-toggle:focus,
    .mobile-language-toggle:active {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);
    }


    .mobile-language-toggle:hover::before,
    .mobile-language-toggle:focus::before,
    .mobile-language-toggle:active::before {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );
    }


    /* =====================================================
       LANGUAGE OPEN
       GOLD
    ====================================================== */

    .mobile-language-item.open .mobile-language-toggle {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);
    }


    .mobile-language-item.open .mobile-language-toggle::before {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );

        background: var(--navbar-hover-color);
    }


    /* =====================================================
       MOBILE LANGUAGE DROPDOWN
    ====================================================== */

    .mobile-language-dropdown {
        display: none;

        padding: var(--mobile-language-dropdown-padding);

        background: var(--black);
    }


    .mobile-language-item.open .mobile-language-dropdown {
        display: block;
    }


    /* =====================================================
       MOBILE LANGUAGE OPTIONS
       WHITE TEXT
    ====================================================== */

    .mobile-language-option {
        position: relative;

        display: block;

        padding: var(--mobile-language-option-padding);

        color: var( --white);

        background: var(--black);

        text-decoration: none;

        font-size: var(--mobile-language-option-font-size);

        transition:
            color var(--transition-fast),
            padding-left var(--transition-fast);
    }


    /* =====================================================
       LANGUAGE OPTION UNDERLINE
       GOLD
    ====================================================== */

    .mobile-language-option::after {
        content: "";

        position: absolute;

        left: var(--space-2);

        bottom: var(--space-1);

        width: var(--navbar-underline-width);

        height: var(--mobile-menu-underline-height);

        background: var(--navbar-hover-color);

        transition:
            width var(--transition-normal);
    }


    /* =====================================================
       LANGUAGE OPTION HOVER
       GOLD
    ====================================================== */

    .mobile-language-option:hover,
    .mobile-language-option:focus,
    .mobile-language-option:active {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);
    }


    .mobile-language-option:hover::after,
    .mobile-language-option:focus::after,
    .mobile-language-option:active::after {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );
    }


    /* =====================================================
       ACTIVE LANGUAGE
       GOLD
    ====================================================== */

    .mobile-language-option.active {
        color: var(--navbar-hover-color);

        background: var(--black);

        padding-left: var(--mobile-menu-link-hover-padding-left);

        font-weight: var(--font-weight-semibold);
    }


    .mobile-language-option.active::after {
        width: calc(
            100% - var(--mobile-menu-link-hover-padding-left)
        );

        background: var(--navbar-hover-color);
    }

}


/* =========================================================
   SMALL MOBILE 576px
========================================================= */

@media (max-width: 576px) {

    .mobile-nav .nav-bar {
        min-height: var(--mobile-576-height);

        padding: var(--mobile-576-padding);
    }


    .mobile-nav .logo-img {
        width: var(--mobile-576-logo-width);
    }


    .menu-toggle,
    .close-menu {
        font-size: var(--mobile-576-menu-button-size);
    }


    .mobile-nav .menu {
        width: var(--mobile-576-menu-width);

        padding-left: var(--mobile-576-menu-horizontal-padding);

        padding-right: var(--mobile-576-menu-horizontal-padding);
    }


    .mobile-nav .menu > li > a {
        font-size: var(--mobile-576-link-font-size);

        padding-top: var(--mobile-576-link-padding-y);

        padding-bottom: var(--mobile-576-link-padding-y);
    }


    .mobile-language-toggle {
        font-size: var(--mobile-576-link-font-size);
    }

}


/* =========================================================
   VERY SMALL MOBILE 400px
========================================================= */

@media (max-width: 400px) {

    .mobile-nav .nav-bar {
        min-height: var(--mobile-400-height);

        padding: var(--mobile-400-padding);
    }


    .mobile-nav .logo-img {
        width: var(--mobile-400-logo-width);
    }


    .menu-toggle,
    .close-menu {
        font-size: var(--mobile-400-menu-button-size);
    }


    .mobile-nav .menu {
        width: var(--mobile-400-menu-width);

        padding-left: var(--mobile-400-menu-horizontal-padding);

        padding-right: var(--mobile-400-menu-horizontal-padding);
    }


    .mobile-nav .menu > li > a {
        font-size: var(--mobile-400-link-font-size);
    }


    .mobile-language-toggle {
        font-size: var(--mobile-400-link-font-size);
    }

}