@use "../base/mixins";
@use "../base/variables";

// Hello from the new raptor create v2 - Header 05

/* stylelint-disable */
// Due to the header relying on css variables in root, override the ones the header needs here
// then when it is included in raptor-frontend, hopefully it will override sitewide
// the breakpoint will more than likely need to update for this header
body {
    --header-contact-bar: 32px;
    --header-main-bar: 85px;
    --header-height: var(--header-main-bar);

    &.header-state-active {
        --section-scroll-margin-top: var(--header-height);
    }

    @include mixins.min-width( variables.$header-breakpoint ) {
        --header-height: calc(var(--header-contact-bar) + var(--header-main-bar));
    }
}

header.site-header {
    width: 100%;
    height: var(--header-height);
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: hidden;

    div.site-header__contact,
    div.site-header__main {
        padding: 0 var(--site-padding);
    }

    div.site-header__contact {
        overflow: hidden;
        height: var(--header-contact-bar);
        position: relative;
        background-color: #E2E5FF;

        > * {
            color: var(--c-secondary) !important;
        }
    }

    div.site-header__main {
        height: var(--header-main-bar);
        position: relative;
        background-color: var(--c-secondary);

        .container {
            min-height: 100%;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .custom-logo-link {
        max-height: 50px;

        img {
            width: auto;
            height: 40px;
        }
    }

    nav.nav-primary, nav.nav-secondary {
        display: none;

        > * {
            color: var(--c-white);
        }

        .sub-menu {
            > * {
                color: var(--c-black);
            }
        }
    }

    transition: 400ms cubic-bezier(.23, .96, .59, 1);

    // Sticky states
    &.pre-set-sticky {
        display: none;
        position: fixed;
        top: 0;
        transform: translateY(-100%);
    }

    &.set-sticky {
        display: block;

        &.is-visible {
            transform: translateY(0);
        }
    }

    .desktop-up {
        display: none;
    }

    @include mixins.min-width( variables.$header-breakpoint ) {
        overflow: visible;

        .desktop-up {
            display: block;
        }

        div.site-header__main {
            .container {
                display: grid;
                grid-template-columns: 1fr 140px 1fr;
                gap: var(--site-gutter);
            }

            .nav-primary {
                ul {
                    justify-content: flex-end;
                }
            }

            .site-header__main__menu-actions {
                display: flex;
                align-items: center;
                gap: var(--site-gutter);
            }

            .nav-secondary {
                ul {
                    justify-content: flex-start;
                }
            }

            .custom-logo-link {
                img {
                    margin: auto;
                }
            }
        }

        div.site-header__contact {
            display: flex;

            .container {
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                flex-wrap: nowrap;
            }

            .social-media-links {
                display: flex;
                gap: 8px;

                .social-link {

                    position: relative;
                    overflow: hidden;
                    margin-right: 0;

                    svg {
                        fill: var(--c-black);
                        width: 18px;
                        height: 18px
                    }
                }
            }

            ul.contact-links {
                display: flex;
                justify-content: flex-start;
                gap: 16px;
                padding: 0;
                margin: 0;
            }

            li.contact-link {
                list-style: none;
                margin: 0;
                padding: 0;
                background-position: left center;
                background-repeat: no-repeat;

                a {
                    padding: 8px 0 8px 30px;
                    color: var(--c-black) !important;
                }

                &.contact-link--phone {
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.51667 8.99167C6.71667 11.35 8.65 13.275 11.0083 14.4833L12.8417 12.65C13.0667 12.425 13.4 12.35 13.6917 12.45C14.625 12.7583 15.6333 12.925 16.6667 12.925C17.125 12.925 17.5 13.3 17.5 13.7583V16.6667C17.5 17.125 17.125 17.5 16.6667 17.5C8.84167 17.5 2.5 11.1583 2.5 3.33333C2.5 2.875 2.875 2.5 3.33333 2.5H6.25C6.70833 2.5 7.08333 2.875 7.08333 3.33333C7.08333 4.375 7.25 5.375 7.55833 6.30833C7.65 6.6 7.58333 6.925 7.35 7.15833L5.51667 8.99167Z' fill='black'/%3E%3C/svg%3E%0A");

                    a {
                        color: var(--c-black) !important;
                    }
                }

                &.contact-link--email {
                    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6667 3.33333H3.33341C2.41675 3.33333 1.67508 4.08333 1.67508 4.99999L1.66675 15C1.66675 15.9167 2.41675 16.6667 3.33341 16.6667H16.6667C17.5834 16.6667 18.3334 15.9167 18.3334 15V4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333ZM16.6667 6.66666L10.0001 10.8333L3.33341 6.66666V4.99999L10.0001 9.16666L16.6667 4.99999V6.66666Z' fill='black'/%3E%3C/svg%3E%0A");
                }
            }
        }

        nav.nav-primary, nav.nav-secondary {
            display: block;
        }
    }
}

button#mobile-menu-trigger {
    width: 48px;
    height: 48px;
    padding: 16px 15px;
    display: block;
    position: absolute;
    top: calc(50% - 24px);
    right: 4px;
    border: none;
    background: none;

    > * {
        color: var(--c-white);
        fill: var(--c-white);
    }

    @include mixins.min-width( variables.$header-breakpoint ) {
        display: none;
    }
}

.site-header.pre-set-sticky.set-sticky {
    // triggers when header is hidden
    &.is-visible {
        // triggers when header shows
        background-color: rgba(var(--c-secondary-rgb), .8);
        backdrop-filter: blur(4px) saturate(180%);
        box-shadow:
                0 0 10px rgba(var(--c-d-grey-rgb), .2),
                0 0 30px rgba(var(--c-d-grey-rgb), .15);
    }
}