.c-site-header {
    padding: 0;
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    z-index: theme('zIndex.header');

    &.c-page-frame {
        top: 1.5em;
        right: 1em;
        left: 1em;

        .c-site-header__logo {
            margin-top: -1em;
        }

        //stylelint-disable
        &.c-site-header--filled {
            .c-site-header__logo {
                margin-top: 0;
            }
        }
        //stylelint-enable
    }

    &.c-site-header--filled {
        top: 0;
        right: 0;
        left: 0;
        padding: 0;

        @screen sm {
            padding-bottom: 1rem;
        }
    }

    @screen sm {
        padding-bottom: 1rem;
    }
}

.c-site-header__logo-image--colored {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
}

.c-site-header--filled,
.c-site-header--inverted {
    background-color: theme('colors.white');

    .c-main-navigation__hamburger {
        color: theme('colors.primary.500');
    }

    .c-main-menu__link {
        color: theme('colors.white');

        @screen lg {
            color: theme('colors.primary.500');
        }
    }

    .c-site-header__logo-image--white {
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        opacity: 0;
    }

    .c-site-header__logo-image--colored {
        position: relative;
        width: auto;
        height: auto;
        clip: initial;
        white-space: unset;
        opacity: 1;
        transition: opacity $transition-time;
        max-height: 6rem;
    }

    .c-search-toggle {
        color: theme('colors.primary.500');
    }

    .c-live-menu__item-link {
        color: theme('colors.primary.500');
    }
}

.c-site-header--filled {
    .c-meta-menu {
        display: none;
    }
}

.c-site-header__container {
    @apply px-4 mx-auto max-w-6xl;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.c-site-header__logo {
    position: relative;
    display: block;
    max-height: 6rem;
    max-width: 11rem;
    z-index: 1;
}

.c-site-header__logo-image {
    max-width: 100%;
}

.c-site-header__navigation {
    display: flex;
    margin-top: auto;
    margin-right: -.75rem;
}

.c-site-header__menu-trigger {
    color: theme('colors.gray.900');
    font-size: theme('textSizes.lg');
    text-decoration: none;
    margin: 0 theme('margin.1') 0 theme('margin.2');
    padding: theme('padding.4') theme('padding.2') theme('padding.4') theme('padding.8');
    display: block;
    transition: all $transition-time ease-in-out;
    position: relative;

    &:hover,
    &:focus,
    &[aria-expanded=true],
    &.is-active {
        text-decoration: none;
    }

    &.is-active,
    &[aria-expanded=true] {
        &::before {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M14.319 12.728L1.591 0 0 1.591l12.728 12.728 1.591-1.591z' fill='%239e0b25'/%3E%3Cpath fill='%239e0b25' d='M6.41 6.035h1.5v2.25h-1.5z'/%3E%3Cpath fill='none' stroke='%239e0b25' stroke-width='1.5' d='M6.41 6.785h.75v.75h-.75z'/%3E%3Cpath d='M12.728 0L0 12.728l1.591 1.591L14.319 1.591 12.728 0z' fill='%239e0b25'/%3E%3C/svg%3E");
        }
    }

    &::before {
        content: '';
        display: block;
        height: theme('height.6');
        width: theme('width.6');
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 15' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath fill='%239e0b25' d='M0 0h17.948v2.25H0zM0 6h18v2.25H0z'/%3E%3Cpath fill='none' stroke='%239e0b25' stroke-width='1.5' d='M.75 6.75h16.5v.75H.75z'/%3E%3Cpath fill='%239e0b25' d='M0 12h17.948v2.25H0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: theme('height.6') theme('width.6');
        margin: 0 auto .25rem;

        @screen lg {
            position: absolute;
            left: 0;
        }
    }

    @screen lg {
        display: none;
        align-items: center;
    }
}

.c-site-header__links {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;

    @screen lg {
        display: flex;
    }
}
