/**
 * HCWP Child / Frontend / Navigation.css
 ---------------------------- */

/* -- Tokens ---------- */
body:has(.branding .nav-bar) {
    --_nav-bar-transition-duration: .5s;
    --_nav-bar-transition-tf: var(--hc-transition-tf-out);
    --_nav-bar-transition-delay: 0s;
    --_nav-bar-transition: var(--_nav-bar-transition-duration) var(--_nav-bar-transition-tf) var(--_nav-bar-transition-delay);

    --_nav-bar-content-height: 70px;

    --_nav-bar-bg-opacity: 1;
    --_nav-bar-bg-transition-duration: var(--_nav-bar-transition-duration);
    --_nav-bar-bg-transition-tf: var(--_nav-bar-transition-tf);
    --_nav-bar-bg-transition-delay: var(--_nav-bar-transition-delay);
    --_nav-bar-bg-transition: var(--_nav-bar-bg-transition-duration) var(--_nav-bar-bg-transition-tf) var(--_nav-bar-bg-transition-delay);

    --_nav-bar-menu-item-opacity: 1;
    --_nav-bar-menu-item-pointer-events: auto;
    --_nav-bar-menu-item-transform-Y: 0;
    --_nav-bar-menu-item-transition-duration: var(--_nav-bar-transition-duration);
    --_nav-bar-menu-item-transition-tf: var(--_nav-bar-transition-tf);
    --_nav-bar-menu-item-transition-delay: var(--_nav-bar-transition-delay);

    --_nav-bar-nav-menu-top: 0;
    --_nav-bar-nav-menu-right: 0;
    --_nav-bar-nav-menu-bottom: 0;
    --_nav-bar-nav-menu-left: 0;
    --_nav-bar-nav-menu-inset: var(--_nav-bar-nav-menu-top) var(--_nav-bar-nav-menu-right) var(--_nav-bar-nav-menu-bottom) var(--_nav-bar-nav-menu-left);

    --_nav-bar-submenu-foldout-position: absolute;
    --_nav-bar-submenu-menu-item-depth-0-link-padding-inline-mobile: 10vw;

    --_nav-bar-nav-menu-pointer-events: auto;

    .menu-item .block {
        --_block-bg: var(--hc-surface-0);
    }

    @media (width > 1200px) {
        --_nav-bar-bg-opacity: 0;

        &:has(button[aria-expanded="true"]) .nav-bar-bg {
            --_nav-bar-transition-delay: 0.1s;
            --_nav-bar-bg-opacity: 1;
        }

        &.is-scrolled {
            --_nav-bar-bg-opacity: 1;
        }
    }

    @media (width <= 1200px) {
        --_nav-bar-transition-tf: cubic-bezier(1, .02, 0.18, 1);
        --_nav-bar-transition-duration: .6s;
        --_nav-bar-transition-delay: .4s;
        --_nav-bar-submenu-foldout-position: relative;

        --_nav-bar-bg-transition-delay: var(--_nav-bar-transition-delay);
        --_nav-bar-bg-transition-tf: cubic-bezier(1, .02, 0.18, 1);

        --_nav-bar-menu-item-opacity: 0;
        --_nav-bar-menu-item-pointer-events: none;
        --_nav-bar-menu-item-transform-Y: 2rem;
        --_nav-bar-menu-item-transition-tf: cubic-bezier(1, .02, 0.18, 1);

        --_nav-bar-nav-menu-pointer-events: none;
        &.main-nav-open {
            --_nav-bar-nav-menu-pointer-events: auto;
        }

        &.admin-bar {
            --_nav-bar-nav-menu-top: var(--wp-admin--admin-bar--height);
        }

        .hc-wrap-grid {
            --_grid-col-min-width: 480px;
        }

        .menu-item {
            &:nth-child(8) { --_nav-bar-menu-item-transition-delay: .0s; }
            &:nth-child(7) { --_nav-bar-menu-item-transition-delay: .05s; }
            &:nth-child(6) { --_nav-bar-menu-item-transition-delay: .1s; }
            &:nth-child(5) { --_nav-bar-menu-item-transition-delay: .15s; }
            &:nth-child(4) { --_nav-bar-menu-item-transition-delay: .20s; }
            &:nth-child(3) { --_nav-bar-menu-item-transition-delay: .25s; }
            &:nth-child(2) { --_nav-bar-menu-item-transition-delay: .30s; }
            &:nth-child(1) { --_nav-bar-menu-item-transition-delay: .35s; }
        }

        &.main-nav-open {
            --_nav-bar-transition-delay: 0s;
            --_nav-bar-bg-transition-delay: 0s;

            .menu-item {
                --_nav-bar-menu-item-transition-tf: cubic-bezier(0, .54, .18, 1);
                --_nav-bar-menu-item-opacity: 1;
                --_nav-bar-menu-item-pointer-events: auto;
                --_nav-bar-menu-item-transform-Y: 0;

                &:nth-child(1) { --_nav-bar-menu-item-transition-delay: .6s; }
                &:nth-child(2) { --_nav-bar-menu-item-transition-delay: .65s; }
                &:nth-child(3) { --_nav-bar-menu-item-transition-delay: .7s; }
                &:nth-child(4) { --_nav-bar-menu-item-transition-delay: .75s; }
                &:nth-child(5) { --_nav-bar-menu-item-transition-delay: .8s; }
                &:nth-child(6) { --_nav-bar-menu-item-transition-delay: .85s; }
                &:nth-child(7) { --_nav-bar-menu-item-transition-delay: .9s; }
                &:nth-child(8) { --_nav-bar-menu-item-transition-delay: .95s; }
            }
        }
    }

    @media (width <= 992px) {
        --_nav-bar-submenu-menu-item-depth-0-link-padding-inline-mobile: var(--hc-gutter);
    }

    @media (width <= 560px) {
        --_nav-bar-submenu-menu-item-depth-0-link-padding-inline-mobile: 0;
    }
}

/* -- Styles ---------- */


/* -- Menus
---------------------------- */
.menu,
.submenu {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
        margin: 0;
    }
}


/* -- Branding and Main navigation
---------------------------- */
.brand {
    .logo-text {
        transition: .3s var(--hc-transition-tf-out);
        opacity: 1;
    }
}

.branding .nav-bar {
    position: fixed;
    isolation: isolate;
    z-index: 10;
    top: var(--hc-gutter);
    right: 0;
    bottom: auto;
    left: 0;
    transition: var(--_nav-bar-transition-duration) var(--_nav-bar-transition-tf) var(--_nav-bar-transition-delay);

    .nav-bar-content {
        z-index: 2;
        /*position: relative;*/
        display: grid;
        grid-template-columns: 1fr 64px 1fr;
        padding-inline: var(--hc-spacer-3);
        height: var(--_nav-bar-content-height);
        align-items: center;
        gap: var(--hc-gutter);

        @media (width > 1200px) {
            display: flex;
        }

        .nav-brand,
        .nav-cta,
        .hamburger-holder {
            z-index: 2;
            position: relative;
        }

        .nav-brand {
            justify-self: start;
            display: flex;
            gap: 0;
            align-items: center;
            justify-content: start;
        }

        .nav-menu {
            z-index: 1;
            inset: var(--_nav-bar-nav-menu-inset);

            .menu {
                display: flex;

                .menu-item {
                    opacity: var(--_nav-bar-menu-item-opacity);
                    pointer-events: var(--_nav-bar-menu-item-pointer-events);
                    transition: var(--_nav-bar-menu-item-transition-duration) var(--_nav-bar-menu-item-transition-tf) var(--_nav-bar-menu-item-transition-delay);
                }

                .menu-item:has(.submenu-title-holder) + .menu-item .submenu-title-holder {
                    margin-top: var(--hc-spacer-3);
                }

                .title-only + .title-only {
                    margin-top: var(--hc-gutter);
                }

                .submenu-title-holder {
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    margin-bottom: var(--hc-spacer-3);
                }

                .submenu-title {
                    color: var(--hc-color-text-heading);
                    font-weight: bold;
                    font-size: var(--hc-font-h3-size);
                }

                .submenu-description {
                    color: var(--hc-color-text-bright);
                    font-weight: bold;
                    font-size: var(--hc-font-size-small);
                }

                .menu-item {
                    &:not(.current-menu-item) a,
                    button:not([aria-expanded="true"]) {
                        color: var(--hc-color-text-main);
                    }

                    .chevron {
                        height: 1em;
                        width: 1em;
                        margin-left: auto;
                        transition: var(--_nav-bar-transition);
                    }

                    &:has(button[aria-expanded="true"]) {
                        .chevron {
                            transform: rotate(180deg);
                        }
                    }
                }
            }

            /* Grid submenus */
            .submenu.hc-grid {
                .menu-item {
                    display: flex;

                    .block {
                        &.block-link-row .block-content {
                            --_block-content-align: start;
                        }

                        .link-title {
                            font-size: var(--hc-font-h4-size);
                            font-weight: var(--hc-font-headings-weight);
                            color: var(--hc-color-text-heading);
                        }

                        .link-description {
                            font-size: var(--hc-font-size-small);
                            color: var(--hc-color-text-main);
                        }
                    }
                }
            }

            /* Grid submenus */
            .submenu.d-flex {
                .menu-item {
                    display: flex;
                    flex-grow: 1;

                    & > a {
                        flex-grow: 1;
                    }
                }
            }
        }

        .hamburger-holder {
            display: none;
        }

        .nav-cta {
            justify-self: end;
            margin-left: auto;
            display: flex;
            align-items: center;

            .main-cta {
                align-self: stretch;
            }
        }
    }

    .nav-bar-bg {
        pointer-events: none;
        z-index: 1;
        position: absolute;
        inset-inline-end: 0;
        bottom: 0;
        inset-inline-start: var(--_nav-bg-left);
        height: var(--_nav-bg-height);
        width: var(--_nav-bg-width);
        border-radius: var(--hc-block-radius-large);
        transition: var(--_nav-bar-bg-transition-duration) var(--_nav-bar-bg-transition-tf) var(--_nav-bar-bg-transition-delay);
        opacity: var(--_nav-bar-bg-opacity);

        @media (min-width: 1201px) {
            top: 0;
        }
    }

    /* -- Submenu functionality (general) ---------- */

    /* State: Flared out */
    .menu-item:has([aria-expanded="true"]) {
        .submenu-foldout-depth-0 {
            grid-template-rows: 1fr;

            * {
                pointer-events: auto;
            }

            & > * {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }

    /* State: Default (folded) */
    .submenu-foldout-depth-0 {
        overflow: hidden;
        display: grid;
        grid-template-rows: 0fr;
        position: var(--_nav-bar-submenu-foldout-position);
        left: 0;
        width: 100%;
        transition: var(--_nav-bar-transition-duration) var(--_nav-bar-transition-tf) var(--_nav-bar-transition-delay);

        * {
            pointer-events: none;
        }

        & > * {
            overflow: hidden;
            opacity: 0;
            transform: translateY(2rem);
            transition: var(--_nav-bar-transition-duration) var(--_nav-bar-transition-tf) var(--_nav-bar-transition-delay);
        }

        & > .submenu,
        & > .hc-wrap-grid > .submenu {
            padding-block: var(--hc-spacer-5);
        }
    }


    /* -- Responsive functionality ---------- */
    @media (width <= 1360px) {
        .brand .logo-text {
            width: 0;
            opacity: 0;
        }
    }

    @media (width <= 1200px) {
        top: auto;
        bottom: var(--hc-gutter);

        .brand .logo-text {
            width: auto;
            opacity: 1;
        }

        .nav-bar-content {
            justify-content: space-between;
            align-items: center;

            &::before {
                content: "";
                display: block;
                position: absolute;
                inset-inline: calc(var(--hc-gutter) * -1);
                border-top: 1px solid var(--hc-border-color);
                top: -1rem;
                transform: scale(0);
                transition: var(--_nav-bar-transition);
            }

            .hamburger-holder {
                margin-inline: auto;
                display: block;

                .hamburger {
                    position: absolute;
                    transform: translate(-50%, -50%);
                }
            }

            .nav-menu {
                position: fixed;
                top: var(--_nav-bar-nav-menu-top);
                right: var(--_nav-bar-nav-menu-right);
                bottom: calc(var(--_nav-bar-content-height) + var(--hc-gutter) + 1rem);
                left: var(--_nav-bar-nav-menu-left);
                margin-left: 0;
                overflow-y: auto;
                pointer-events: var(--_nav-bar-nav-menu-pointer-events);

                .menu {
                    flex-flow: column;
                    gap: var(--hc-gutter);
                    margin-top: 15vh;

                    .menu-item {
                        display: flex;
                        flex-flow: column;
                        transform: translateY(var(--_nav-bar-menu-item-transform-Y));

                        &.menu-item-depth-0 > a,
                        &.menu-item-depth-0 > button {
                            flex-grow: 1;
                            margin-inline: var(--_container-padding-inline);
                            width: auto;
                        }

                        &.menu-item-depth-0 > .submenu-foldout-depth-0 {
                            flex-grow: 1;
                            width: auto;
                        }

                        &.menu-item-depth-0 > a,
                        &.menu-item-depth-0 > button {
                            font-size: var(--hc-font-h2-size-display);
                            /*padding-inline: var(--_nav-bar-submenu-menu-item-depth-0-link-padding-inline-mobile);*/
                            padding-inline: var(--_container-padding-inline);
                            text-align: left;
                            justify-content: left;

                            background-color: transparent !important;
                            border-color: transparent !important;
                            box-shadow: none !important;
                        }

                        .submenu-foldout-depth-1 {
                            .submenu {
                                flex-wrap: balance;
                            }
                        }
                    }
                }
            }

            .nav-cta {
                margin-left: 0;
            }
        }

        .submenu-foldout-depth-0 {
            display: grid;
            grid-template-rows: 0fr;
            left: 0;
            width: 100%;

            &.container {
                & > * {
                    grid-column: breakout;
                }
            }

            & > * {
                overflow: hidden;
                opacity: 0;
                transform: translateY(2rem);
            }
        }

        .menu-item .submenu-foldout-depth-0 {
            & > .submenu,
            & > .hc-wrap-grid > .submenu {
                padding-block: 0;
            }
        }

        .menu-item:has([aria-expanded="true"]) .submenu-foldout-depth-0 {
            & > .submenu,
            & > .hc-wrap-grid > .submenu {
                padding-block: var(--hc-spacer-5);
            }
        }

        .nav-bar-bg {
            position: fixed;
            left: calc(var(--_breakout-size) + (var(--_container-padding-inline) * 2));
            bottom: var(--hc-gutter);
        }

        &.nav-bg-flared {
            .nav-bar-bg {
                height: calc(100vh + (var(--hc-border-width) * 2));
                width: calc(100vw + (var(--hc-border-width) * 2));
                left: calc(var(--hc-border-width) * -1);
                bottom: calc(var(--hc-border-width) * -1);
                border-radius: 0;
            }
        }
    }

    @media (width <= 992px) {
        .nav-bar-content {
            grid-column: full-width;

            .submenu-title-holder {
                flex-flow: column;
            }

            .nav-cta {
                :not(.main-cta) {
                    display: none;
                }
            }
        }

        .nav-bar-bg {
            left: var(--_container-padding-inline);
        }
    }

    @media (width <= 576px) {
        .brand .logo-text {
            width: 0;
            opacity: 0;
        }
    }
}

/* -- Admin bar margin-top fix ---------- */
.admin-bar .branding .nav-bar {
    @media (width > 1200px) {
        top: calc(var(--wp-admin--admin-bar--height) + var(--hc-gutter));
    }
}

/* -- Nav menu divider ::before ---------- */
body.main-nav-open {
    @media (width <= 1200px) {
        .nav-bar-content {
            &::before {
                transform: scale(1) !important;
            }
        }
    }
}