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

#navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}


/* Main navigation container */

.navigation_bar {
    display: flex;
    width: 100%;
    min-height: 64px;
    padding: 0 25px;
    box-sizing: border-box;

    background-color: #f2f2f2;
    border-bottom: 4px solid #002554;

    align-items: center;
    justify-content: space-between;

    /* Needed for the mobile dropdown */
    position: relative;
}


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

.navigation_bar .logo {
    font-family: "JetBrains Mono", monospace;
    font-size: 24px;
    font-weight: 600;

    color: #002554;
    text-decoration: none;

    padding: 5px 8px;
}


.navigation_bar .logo:hover {
    background-color: transparent;
    color: #01a2e0;
    text-decoration: none;
}

/* =========================================================
   LOGO SUB CLASS
   ========================================================= */
   
.navigation_bar .logo .logo-subclass {
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
    font-weight: normal;
    color: #002554;
}


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

.navigation_bar ul.navigation {
    display: flex;

    list-style-type: none;
    margin: 0;
    padding: 0;
}


.navigation_bar ul.navigation li {
    margin: 0;
    padding: 0;
}


.navigation_bar ul.navigation li a {
    display: flex;
    align-items: center;

    height: 64px;
    padding: 0 22px;

    box-sizing: border-box;

    color: #002554;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    border-bottom: 3px solid transparent;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.navigation_bar ul.navigation li a:hover {
    background-color: transparent;
    color: #01a2e0;

    text-decoration: none;

    border-bottom-color: #01a2e0;
}


.navigation_bar ul.navigation li a.active {
    background-color: transparent;
    color: #002554;

    text-decoration: none;

    border-bottom-color: #01a2e0;
}


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

.dropdown_button {
    display: none;
}



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

@media screen and (max-width: 767px) {

    /* Main navigation container */

    .navigation_bar {
        min-height: 58px;
        padding: 0 15px;

        border-bottom: 4px solid #002554;

        flex-direction: column;
        align-items: stretch;

        position: relative;
    }


    /* =====================================================
       TOP ROW
       ===================================================== */

    .menu_button_mobile_only {
        display: flex;
        width: 100%;
        min-height: 58px;

        align-items: center;
        justify-content: space-between;
    }


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

    .navigation_bar .logo {
        font-size: 24px;
        padding: 5px 0;
    }


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

    .dropdown_button {
        display: block;

        padding: 7px 12px;

        background-color: transparent;
        color: #002554;

        border: 1px solid #002554;
        border-radius: 5px;

        font-size: 16px;
        font-weight: 600;

        cursor: pointer;

        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }


    .dropdown_button:hover,
    .dropdown_button:focus {
        background-color: #002554;
        color: white;

        text-decoration: none;
    }


    /* =====================================================
       HIDE DESKTOP NAVIGATION
       ===================================================== */

    .navigation_bar ul.navigation {
        display: none !important;
    }


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

    .navigation_bar ul.navigation.dropdown_content.show {
        display: block !important;
        position: absolute;

        top: 58px;
        left: 0;

        width: 100%;

        margin: 0;
        padding: 0;

        background-color: #f2f2f2;

        border-bottom: 1px solid #002554;

        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);

        z-index: 1001;
    }


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

    .navigation_bar .dropdown_content li {
        width: 100%;
        border-bottom: 1px solid #d6d6d6;
    }


    .navigation_bar .dropdown_content li:last-child {
        border-bottom: none;
    }


    .navigation_bar .dropdown_content li a {
        display: block;

        width: 100%;
        height: auto;

        padding: 15px 20px;

        box-sizing: border-box;

        color: #002554;
        background-color: #f2f2f2;

        font-size: 16px;
        font-weight: 600;

        text-align: left;

        border-bottom: 3px solid transparent;

        text-decoration: none;
    }


    .navigation_bar .dropdown_content li a:hover {
        background-color: #f2f2f2;
        color: #01a2e0;

        border-bottom-color: #01a2e0;

        text-decoration: none;
    }


    .navigation_bar .dropdown_content li a.active {
        background-color: #f2f2f2;
        color: #002554;

        border-bottom-color: #01a2e0;

        text-decoration: none;
    }

}