:root {
    --header-height: calc((var(--space-s) * 2) + (var(--space-xs) * 3) + var(--text-s) + 2.4rem + var(--text-m));
    --header-color: var(--black);
}

body.bricks-is-frontend.admin-bar {
    --header-height: calc(var(--wp-admin--admin-bar--height) + (var(--space-s) * 2) + (var(--space-xs) * 2) + var(--text-s) + 2.4rem + var(--text-m));
}

body.static-header {
    --header-color: var(--primary-ultra-dark);
}

.header nav {
    background-color: var(--header-color) !important;
    padding: var(--space-m) var(--section-padding-x) var(--space-l) !important;
}

.header nav::before {
    background-color: var(--header-color) !important;
}

.header nav ul {
    background-color: inherit !important;
    max-width: calc(1440px - var(--section-padding-x) * 2) !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.header .bricks-mobile-menu-overlay {
    top: var(--header-height) !important;
    background-color: var(--black-trans-60) !important;
}

body.no-scroll .header {
    background-color: var(--header-color);
}

.header nav ul li a {
    color: var(--white);
    font-size: var(--text-l);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    padding: 0 !important;
}

.header nav ul li a:hover {
    opacity: 0.6;
}

/* MEDIA */

@media (max-width: 450px) {
    .header__button {
        display: none;
        visibility: hidden;
        overflow: hidden;
    }

    .header__nav-menu {
        position: static;
    }

    .header__logo {
        margin-left: 0;
    }

    .header__text {
        font-size: calc(var(--text-xs) - 0.2rem);
    }
}