/* Styles scoped to the transparent media header. */
.header2 .xmenu-toggler {
    width: 2rem;
    height: 2rem;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent;
}

.header2 .xmenu-toggler span {
    background-color: var(--color-primary, #405652);
    left: 0.375rem;
}

.header2 .xmenu-toggler span:nth-child(1) {
    top: 0.5rem;
    width: 1.25rem;
}

.header2 .xmenu-toggler span:nth-child(2) {
    top: 0.9375rem;
    width: 1.25rem;
}

.header2 .xmenu-toggler span:nth-child(3) {
    top: 1.375rem;
    width: 1.25rem;
}

.header2 .xmenu-toggler.open span:nth-child(1),
.header2 .xmenu-toggler.open span:nth-child(3) {
    top: 0.9375rem;
    width: 1.25rem;
}

@media (min-width: 1199px) {
    .header2 .header-nav {
        position: absolute;
        top: 50%;
        left: 50%;
        flex: none;
        transform: translate(-50%, -50%);
    }
}

.header2 .header2-nav-link:hover,
.header2 .header2-nav-link.is-active {
    color: var(--heritage, var(--color-citrusyellow));
}

.header2-glass {
    background-color: rgb(255 255 255 / 72%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.header2-language-wrap {
    gap: 0.5rem;
}

.header-language {
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 999px;
    background-color: #e8eeeb;
    border-color: #d9e2dd;
}

.header-language .header2-control {
    border: 0;
    background-color: transparent;
}

.header-language .header2-control .header-language-flag {
    opacity: 0.55;
    filter: saturate(0.6);
    transition: opacity 200ms ease, filter 200ms ease;
}

.header-language .header2-control:hover .header-language-flag {
    opacity: 1;
    filter: none;
}

.header2-control {
    display: inline-flex;
    width: 2rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--primary-rgb) / 10%);
    border-radius: 999px;
    background-color: rgb(255 255 255 / 45%);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.header2-control:hover {
    background-color: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

.header-language .header2-control.is-active {
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(40 60 50 / 18%), 0 0 0 1px rgb(40 60 50 / 6%);
}

.header-language .header2-control.is-active .header-language-flag {
    opacity: 1;
    filter: none;
}

.header2-control:focus-visible {
    outline: 2px solid var(--color-primary, #405652);
    outline-offset: 2px;
}

.header-language-flag {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 2px;
}

.header2-login {
    height: 2.125rem;
    width: 2.5rem;
    font-size: 0.75rem;
}

.header2.is-fixed {
    border: 1px solid rgb(255 255 255 / 65%);
    border-top: 0;
    box-shadow: 0 8px 24px rgb(var(--primary-rgb) / 12%);
}

@media (max-width: 1198px) {
    .header2 .header2-book-button,
    .header2 .header2-login {
        display: none;
    }

    .header2,
    .header2.is-fixed {
        border-radius: 0 0 1.5rem 1.5rem;
        overflow: visible;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header2 .header2-surface {
        border-radius: 0 0 1.5rem 1.5rem;
        background-color: rgb(255 255 255 / 72%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }

    .header2-language-wrap {
        width: auto;
        margin-left: auto;
    }

    .page-wraper {
        padding-bottom: calc(4.85rem + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        position: fixed;
        right: calc(0.75rem + env(safe-area-inset-right));
        bottom: calc(0.5rem + env(safe-area-inset-bottom));
        left: calc(0.75rem + env(safe-area-inset-left));
        z-index: 9998;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0.3rem 0.35rem;
        border: 1px solid rgb(var(--primary-rgb) / 12%);
        border-radius: 1.25rem;
        background: rgb(255 255 255 / 72%);
        box-shadow: 0 -8px 24px rgb(var(--primary-rgb) / 10%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
    }

    .mobile-bottom-nav__item {
        display: flex;
        width: calc(100% - 0.75rem);
        max-width: 5.25rem;
        min-width: 0;
        min-height: 3.15rem;
        align-items: center;
        justify-content: center;
        justify-self: center;
        flex-direction: column;
        gap: 0.2rem;
        border-radius: 0.75rem;
        color: var(--text-body);
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        transition: color 200ms ease, background-color 200ms ease;
    }

    .mobile-bottom-nav__item i {
        font-size: 1.25rem;
    }

    .mobile-bottom-nav__item.is-active {
        background-color: rgb(var(--primary-rgb) / 8%);
        color: var(--primary);
        font-weight: 800;
    }

    button.scroltop {
        bottom: calc(5.2rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 1199px) {
    .mobile-bottom-nav {
        display: none;
    }
}