/**********************/
/******* header *******/
/**********************/

.header-nav {
    background-color: var(--color-black);

    /*********************/
    /***** nav links *****/
    /*********************/

    & .nav-link {
        padding-left: 0.75rem;
        border-radius: var(--border-radius-inner);
        color: var(--color-white);

        &:hover,
        &:focus,
        &:focus-visible {
            outline: none !important;
            display: block;
            background-color: var(--color-white);
            color: var(--color-black);
        }
    }

    /*********************/
    /***** dropdowns *****/
    /*********************/

    & .dropdown-menu {
        margin-top: 0.75px;
        box-shadow: var(--box-shadow-outer);
        border: none;
    }

    /**********************/
    /*** dropdown items ***/
    /**********************/

    & .dropdown-item {
        padding-left: 0.75rem;
        border-radius: var(--border-radius-inner);

        &:focus-visible {
            outline: none !important;
        }

        &:active {
            background-color: var(--dropdown-highlight);
            color: var(--color-black);
        }
    }

    & a.dropdown-item {
        color: var(--color-black)
    }

    /***************************/
    /***** navbar togglers *****/
    /***************************/

    & .navbar-toggler {
        background-color: var(--color-white);

        &:hover {
            background-color: var(--dropdown-highlight);
        }

        &:focus-visible {
            outline: none !important;
            border-color: var(--dropdown-highlight) !important;
            background-color: var(--dropdown-highlight);
        }
    }

    /*****************/
    /***** brand *****/
    /*****************/

    & .navbar-brand {
        padding-bottom: 0.5rem;
    }

    & .navbar-brand-logo {
        width: 95px;
    }

    & .navbar-brand-title {
        display: inline-block;
        margin-left: 1.5rem;
        vertical-align: middle;
        text-align: center;

        & * {
            margin-bottom: 0;
            color: var(--color-white);
            text-decoration: none;
        }

        & a {

            &>h2 {
                font-size: 1.65rem !important;
            }

            &:hover,
            &:focus,
            &:focus-visible {
                outline: none !important;
                display: inline;
                text-decoration: underline 2px var(--color-white);
            }
        }
    }
}