/* =========================
   Header base
========================= */

#navbar a,
#navbar a:hover,
#navbar a:active {
    color: unset;
    text-decoration: unset;
    outline: unset;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;

    display: grid;
    grid-template-rows: 100px auto auto;
    grid-template-columns: 4.4rem 1fr 1fr 2fr 1fr 1fr var(--page-spacing);

    background-color: transparent;
    transition:
            background-color 1s,
            grid-template-rows 0.3s;
}

#navbar .on-top {
    z-index: 10;
}

@media only screen and (max-width: 1024px) {
    #navbar {
        grid-template-columns: 20px 1fr 1fr 2fr 1fr 1fr 20px !important;
    }
}


/* =========================
   Logo
========================= */

#navbar .hedera__logo {
    grid-column: 2 / span 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#navbar .hedera__logo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#navbar .hedera__logo .homelogo {
    display: block;
    width: 150px;
    height: auto;
    max-width: none;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    transition:
            width 1.3s cubic-bezier(0.5, 0, 0, 1),
            transform 1.3s cubic-bezier(0.5, 0, 0, 1),
            filter 0.2s ease;
}

#navbar.scrolled .hedera__logo .homelogo,
#navbar.logo-collapsed .hedera__logo .homelogo {
    width: 150px !important;
    transform: translate3d(0, 0, 0);
}


/* =========================
   Header colour states
========================= */
/* Dark page/background: white logo */
#navbar.dark .homelogo {
    filter: brightness(0) invert(1);
}

/* Light page/background: black logo */
#navbar.light .homelogo {
    filter: brightness(0);
}

/* Scrolled navbar is normally white: black logo */
#navbar.scrolled .homelogo {
    filter: brightness(0);
}

/* Non-home dark pages remain black when scrolled: white logo */
#navbar:not(.is-home).dark.scrolled .homelogo {
    filter: brightness(0) invert(1);
}

/* Logo above dark dropdown: white */
#navbar.logo-over-dark-menu .homelogo {
    filter: brightness(0) invert(1) !important;
}

/* Logo above light dropdown: black */
#navbar.logo-over-light-menu .homelogo {
    filter: brightness(0) !important;
}

/* Default scrolled state */
#navbar.scrolled {
    background-color: #fff;
}

/* Non-home dark pages stay black */
#navbar:not(.is-home).dark.scrolled {
    background-color: #000;
}


/* Menu-open navbar background
#navbar.open.menu-on-dark {
    background-color: #000;
}

#navbar.open.menu-on-light {
    background-color: #fff;
}
*/

/* Logo colour when dropdown is behind it */

/* =========================
   Hamburger
========================= */

#navbar .hedera__icons-left {
    grid-column: 6 / span 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#navbar .hedera__icons-left .menu {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
    position: relative;
    z-index: 9999;

    transition: color 0.25s ease;
}

#navbar.dark .hedera__icons-left .menu {
    color: #fff;
}

#navbar.light .hedera__icons-left .menu,
#navbar.is-home.scrolled .hedera__icons-left .menu,
#navbar.scrolled .hedera__icons-left .menu {
    color: #000;
}

#navbar:not(.is-home).dark.scrolled .hedera__icons-left .menu {
    color: #fff;
}

#navbar .menu__icon {
    width: 34px;
    height: 34px;
    overflow: visible;
}

#navbar .menu__line {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;

    transform-origin: center;
    transform-box: fill-box;

    transition:
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease,
            stroke 0.25s ease;
}


/* =========================
   Mobile hamburger animation
========================= */

@media (max-width: 1024px) {
    #navbar.open .menu__line--top {
        transform: translateY(6px) rotate(45deg);
    }

    #navbar.open .menu__line--middle {
        opacity: 0;
    }

    #navbar.open .menu__line--bottom {
        transform: translateY(-6px) rotate(-45deg);
    }

    #navbar.open.menu-on-dark .hedera__icons-left .menu {
        color: #fff !important;
    }

    #navbar.open.menu-on-light .hedera__icons-left .menu {
        color: #000 !important;
    }
}


/* =========================
   Desktop hamburger behaviour
========================= */

@media (min-width: 1025px) {
    #navbar.open .menu__line--top,
    #navbar.open .menu__line--middle,
    #navbar.open .menu__line--bottom {
        transform: none;
        opacity: 1;
    }
}


/* =========================
   Dropdown wrapper
========================= */

#navbar .dropdown__wrapper {
    position: fixed;
    top: 0;
    left: 0;

    display: flex;
    width: 50%;
    height: 100vh;

    background-color: #000;
    transition: transform 0.3s ease-in-out;
}

#navbar .dropdown__wrapper.closed {
    transform: translate3d(-100%, 0, 0);
}

#navbar .dropdown__wrapper.open {
    transform: translate3d(0, 0, 0);
}

@media only screen and (max-width: 1024px) {
    #navbar .dropdown__wrapper {
        width: 100%;
    }
}


/* =========================
   Dropdown content
========================= */

#navbar .menu_dropdown {
    width: 100%;
    padding: 150px 64px 64px 64px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#navbar .menu_dropdown p {
    color: #fff;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.2;
}

#navbar .menu_grid {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
}

#navbar .menu-links-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#navbar a.menu-link {
    font-size: var(--hedera-menu-font-md);
    font-family: 'Gelasio', serif;
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: 0.3s;
}

#navbar a.menu-link:hover {
    color: #d8d8d8;
    border-color: transparent;
}

@media only screen and (max-width: 1024px) {
    #navbar .menu_dropdown {
        padding: 150px 20px;
    }
}


/* =========================
   Dropdown colour states
========================= */

#navbar.menu-on-dark .dropdown__wrapper {
    background-color: #000;
}

#navbar.menu-on-dark .menu_dropdown p,
#navbar.menu-on-dark .menu_dropdown a,
#navbar.menu-on-dark a.menu-link {
    color: #fff !important;
}

#navbar.menu-on-dark a.menu-link {
    border-color: #fff;
}

#navbar.menu-on-dark .desktop-menu-close {
    color: #fff;
}

#navbar.menu-on-light .dropdown__wrapper {
    background-color: #fff;
}

#navbar.menu-on-light .menu_dropdown p,
#navbar.menu-on-light .menu_dropdown a,
#navbar.menu-on-light a.menu-link {
    color: #000 !important;
}

#navbar.menu-on-light a.menu-link {
    border-color: #000;
}

#navbar.menu-on-light .desktop-menu-close {
    color: #000;
}


/* =========================
   Desktop close button
========================= */

#navbar .desktop-menu-close {
    display: none;
}

@media (min-width: 1025px) {
    #navbar .desktop-menu-close {
        position: fixed;
        top: 5%;
        right: 5%;
        z-index: 10000;

        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;

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

        color: #fff;
        opacity: 0;
        pointer-events: none;
        transform: rotate(0deg);

        transition:
                opacity 0.25s ease,
                transform 0.3s ease;
    }

    #navbar.open .desktop-menu-close {
        display: inline-flex;
        opacity: 1;
        pointer-events: auto;
        transform: rotate(90deg);
    }

    #navbar .desktop-menu-close svg {
        width: 32px;
        height: 32px;
        overflow: visible;
    }

    #navbar .desktop-menu-close line {
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }
}

@media (max-width: 1024px) {
    #navbar .desktop-menu-close {
        display: none !important;
    }
}


/* =========================
   Scroll lock
========================= */

html.menu-is-open,
body.menu-is-open {
    overflow: hidden;
}