:root {
    /* color values */
    --praxis-navy: #28325F;
    --praxis-gold: #C9A76A;
    --praxis-limestone-white: #F8F6F1;
    --praxis-slate: #7A8398;
    --praxis-stone: #D9D2C5;
    --praxis-white: #ffffff --praxis-navy-dark: #040719;

    /* font family */
    --font-primary: 'Cormorant Garamond', serif;
    --font-secondary: 'Inter', sans-serif;
}

.header-menu li,
.footer-menu li {
    font-family: var(--font-secondary);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
}

.header-menu ul {
    gap: 10px;

    li {
        margin-left: 0;
        font-size: 14px;

        a {
            padding: 5px 15px;
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
            width: max-content;
            background-color: rgba(0, 0, 0, 0);

            &:hover {
                background-color: var(--praxis-navy);
                color: var(--praxis-gold);
            }
        }

        &.current-menu-item a {
            background-color: var(--praxis-gold);
            color: var(--praxis-limestone-white);
        }
    }

}

.footer-menu ul {
    gap: 25px;

    li {
        margin-left: 0;
        font-size: 12px;
        justify-content: center;

        a {
            color: var(--praxis-slate);
            transition: all 0.3s ease-in-out;
            width: max-content;

            &:hover {
                color: var(--praxis-stone);
            }
        }

        &.current-menu-item a {
            color: var(--praxis-gold);
        }

    }

}

@media screen and (max-width: 478px) {
    .footer-menu ul {
        flex-direction: column;
        gap: 20px;
    }

    .footer-menu .hide-br {
        display: none !important;
    }

}

@media screen and (max-width: 991px) {
    .header-menu ul li a {
        width: 100%;
    }

    .header-menu .hide-br {
        display: none !important;
    }

}

@media screen and (min-width: 992px) {
    .header-menu ul li:last-child {
        a {
            background-color: var(--praxis-navy);
            color: var(--praxis-limestone-white);
            padding: 12px 20px;

            &:hover {
                background-color: var(--praxis-slate);
            }
        }

        &.current-menu-item a {
            background-color: var(--praxis-stone);
            color: var(--praxis-navy);

            &:hover {
                background-color: var(--praxis-slate);
                color: var(--praxis-limestone-white);
            }
        }

    }

}

#brx-header,
#masthead,
#masthead-logo,
#masthead-logo img {
    transition: all 0.3s ease-in-out;
}

#brx-header.scrolling #masthead #masthead-logo img {
    width: 100px;
}

#brx-header.scrolling #masthead {
    @media screen and (min-width: 992px) {
        padding: 10px 0;
    }
    @media screen and (max-width: 991px) {
        padding: 10px 20px;
    }

}