:root {
    --burgermenu--width: 16rem;
    --burgermenu--overlay-duration: 0.75s;
    --burgermenu--overlay-enter-duration: 0.525s;
    --burgermenu--overlay-delay: 0.075s;
    --burgermenu--overlay-dismiss-delay: 0.1s;
    --burgermenu--mobile-label-size: 1.3rem;
    --burgermenu--mobile-label-gap: 1.5rem;
    --burgermenu--mobile-icon-size: 1.55rem;
    --burgermenu--mobile-edge-offset: -1rem;
    --burgermenu--mobile-icon-rail-offset: calc(var(--max-width-side-padding) + 0.25rem);
    --burgermenu--mobile-toggle-size: 4rem;
    --burgermenu--mobile-toggle-icon-size: 1.2rem;
    --burgermenu--mobile-button-height: 3.0rem;
}

.header {
    padding-top: 3rem;
    padding-top: calc(3rem + env(safe-area-inset-top, 0px));
    padding-bottom: 2.8rem;
    position: relative;
}

.header--chalk {
    background-color: var(--portal-chalk-background);
    border-color: var(--portal-chalk-background);
}

.header__logo {
    display: block;
}

.header__logoimg {
    height: 2.375rem;
    margin-top: -0.25rem;
    display: block;
}

.header__authtitle {
    padding-top: clamp(2rem, 10rem, 18vh);

    @media (max-width: 45rem) {
        padding-top: 5rem;
        margin-bottom: -1rem;
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
    }
    @media (max-width: 30rem) {
        text-align: left !important;
    }
}

.header__menu {
    position: relative;
}

.button__verticaldivider {
    width: var(--border-width);
    align-self: center;
    height: 2rem;
    background-color: var(--teal-fade-25);
    opacity: 1;
    @media (max-width: 45rem) {
        height: 2.5rem;
    }
}

.header__menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: var(--portal-burgermenu-overlay-color, var(--teal-fade-35));
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transform: translateZ(0);
    transition: opacity var(--burgermenu--overlay-duration) ease;
}

.header--chalk .header__menu-overlay {
    background-color: var(--portal-burgermenu-light-overlay-color, var(--spritz-darken-fade-50));
}

.header__menu.is-overlay-visible .header__menu-overlay {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--burgermenu--overlay-enter-duration) ease var(--burgermenu--overlay-delay);
}

.header__menu.is-closing .header__menu-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--burgermenu--overlay-duration) ease var(--burgermenu--overlay-dismiss-delay);
}

.button.header__menu-toggle {
    position: relative;
    z-index: 102;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-top: -0.80rem;
    margin-bottom: -0.80rem;
    margin-right: -1rem;
}

.header__menu-toggle:focus {
    outline: none;
}

.header__menu-toggle:focus-visible {
    background-color: var(--oak-fade-20);
    outline: none;
}

.header__menuuser {
    max-width: calc(var(--burgermenu--width) - 6.5rem);
    margin-left: 0 !important;

    .button:hover & {
        max-width: calc(var(--burgermenu--width) - 6.46rem);
    }

    @media (max-width: 45rem) {
        display: none;
    }
}

.button.header__menu-toggle[aria-expanded="true"],
.button.header__menu-toggle[aria-expanded="true"]:hover {
    color: var(--portal-burgermenu-toggle-open-color, var(--spritz-darken-3));
}

.header__menu {
    @media (max-width: 45rem) {
        margin-right: var(--burgermenu--mobile-edge-offset);
    }
}

.button.header__menu-toggle {
    @media (max-width: 45rem) {
        margin-left: -1.45rem;
        width: var(--burgermenu--mobile-toggle-size);
        height: var(--burgermenu--mobile-toggle-size);
        min-height: var(--burgermenu--mobile-toggle-size);
        padding: 0;
        margin-top: -1.25rem;
        margin-bottom: -1.25rem;
        margin-right: 0;
        justify-content: center;
        align-items: center;
    }
}

.header__menu-toggle .burgericon {
    @media (max-width: 45rem) {
        width: var(--burgermenu--mobile-toggle-icon-size);
        height: var(--burgermenu--mobile-toggle-icon-size);
    }
}

.burgermenu {
    position: absolute;
    top: calc(100% - 3.1rem);
    right: -2rem;
    z-index: 101;
    width: var(--burgermenu--width);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5rem 1.05rem 1rem 1rem;
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
    box-shadow: 0 1.5rem 2rem var(--ink-fade-10);

    @media (min-height: 30rem) {
        overflow-y: hidden;
    }

    @media (max-width: 45rem) {
        position: fixed;
        inset: 0;
        top: 0;
        right: 0;
        width: 100vw;
        max-width: none;
        max-height: none;
        height: 100dvh;
        padding: calc(7rem + env(safe-area-inset-top, 0px)) 1.5rem 2rem;
        border-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
        border-bottom-width: 0;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 45rem) {
        padding-top: calc(7rem + env(safe-area-inset-top, 0px));
        padding-right: var(--burgermenu--mobile-icon-rail-offset);
        padding-bottom: 2rem;
        padding-left: 1.5rem;
    }
}

.burgermenu .portal-nav__item .button {
    opacity: 1;
}

@keyframes burgermenu-item-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.burgermenu .portal-nav__item .button.is-burgermenu-item-reveal {
    opacity: 1;
}

.burgermenu .portal-nav__group-separator {
    display: block;
    margin-top: 2rem;
    height: 0;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .burgermenu .portal-nav__item .button,
    .burgermenu .portal-nav__item {
        opacity: 1;
    }

    .burgermenu .portal-nav__item .button.is-burgermenu-item-reveal {
        animation: none;
    }
}

.burgermenu .button {
    padding-left: 1rem;
    padding-right: 1rem;
    transition: background-color 0.2s;

    @media (max-width: 45rem) {
        min-height: var(--burgermenu--mobile-button-height);
        padding-left: 0;
        padding-right: 0;
        gap: var(--burgermenu--mobile-label-gap);
    }
}

.burgermenu .button:hover {
    color: var(--portal-burgermenu-text-hover-color, var(--teal-darken-1));

    @media (max-width: 45rem) {
        background-color: transparent;
    }
}

.burgermenu .button__label {
    @media (max-width: 45rem) {
        font-size: var(--burgermenu--mobile-label-size);
        line-height: 1.3;
        height: auto;
        overflow: visible;
        padding-top: 0.1rem;
        padding-bottom: 0.16rem;
    }
}

.burgermenu .button:hover .button__label {
    @media (min-width: 45rem) {
        font-weight: var(--bodytext-hover-fontweight);
        font-variation-settings: "SERF" 0, "wght" var(--bodytext-hover-fontweight);
        letter-spacing: var(--bodytext-hover-letterspacing);
    }
}

.header__menu-toggle:hover .button__label,
.header__menu-toggle[aria-expanded="true"]:hover .button__label {
    font-weight: var(--bodytext-hover-fontweight);
    font-variation-settings: "SERF" 0, "wght" var(--bodytext-hover-fontweight);
    letter-spacing: var(--bodytext-hover-letterspacing);
}

.burgermenu .button > *:first-child {
    margin-left: 0;
}

.burgermenu .button__icon {
    @media (max-width: 45rem) {
        --icon-size: var(--burgermenu--mobile-icon-size);
        margin-left: 0;
        margin-right: 0;
    }
}

.burgermenu .button--frameless .button__icon:last-child {
    @media (max-width: 45rem) {
        margin-left: 0;
    }
}