/* Shared menu button for the main header and EPC. */
.ydk-menu-toggle {
    --ydk-menu-toggle-size: 46px;
    position: relative;
    width: var(--ydk-menu-toggle-size);
    height: var(--ydk-menu-toggle-size);
    min-width: var(--ydk-menu-toggle-size);
    min-height: var(--ydk-menu-toggle-size);
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 24, 39, .09) !important;
    border-radius: 15px;
    color: #24262b;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 244, 247, .96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .96),
        0 1px 2px rgba(17, 24, 39, .08),
        0 8px 22px rgba(17, 24, 39, .10);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    isolation: isolate;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .18s cubic-bezier(.2, .8, .2, 1);
}

.ydk-menu-toggle::before {
    position: absolute;
    inset: 1px 2px auto;
    z-index: -1;
    height: 45%;
    border-radius: 13px 13px 9px 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), transparent);
    content: "";
    pointer-events: none;
}

.ydk-menu-toggle__glyph {
    position: relative;
    display: block;
    width: 21px;
    height: 16px;
}

.ydk-menu-toggle__glyph > span {
    position: absolute;
    right: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 .5px 0 rgba(255, 255, 255, .4);
    transform-origin: center;
    transition:
        top .22s cubic-bezier(.2, .8, .2, 1),
        width .22s ease,
        opacity .16s ease,
        transform .22s cubic-bezier(.2, .8, .2, 1);
}

.ydk-menu-toggle__glyph > span:nth-child(1) {
    top: 0;
}

.ydk-menu-toggle__glyph > span:nth-child(2) {
    top: 7px;
    width: 15px;
}

.ydk-menu-toggle__glyph > span:nth-child(3) {
    top: 14px;
    width: 18px;
}

.ydk-menu-toggle[aria-expanded="true"] {
    border-color: rgba(129, 25, 43, .56) !important;
    color: #fff;
    background: linear-gradient(180deg, #c9354a 0%, #a91f31 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 2px 4px rgba(91, 15, 28, .18),
        0 9px 24px rgba(169, 31, 49, .28);
}

.ydk-menu-toggle[aria-expanded="true"]::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent);
}

.ydk-menu-toggle[aria-expanded="true"] .ydk-menu-toggle__glyph > span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.ydk-menu-toggle[aria-expanded="true"] .ydk-menu-toggle__glyph > span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.35);
}

.ydk-menu-toggle[aria-expanded="true"] .ydk-menu-toggle__glyph > span:nth-child(3) {
    top: 7px;
    width: 100%;
    transform: rotate(-45deg);
}

.ydk-menu-toggle:focus {
    outline: 0;
}

.ydk-menu-toggle:focus-visible {
    outline: 3px solid rgba(201, 45, 64, .22);
    outline-offset: 3px;
}

.ydk-menu-toggle:active {
    box-shadow:
        inset 0 1px 2px rgba(17, 24, 39, .10),
        0 2px 7px rgba(17, 24, 39, .10);
    transform: scale(.96);
}

@media (hover: hover) {
    .ydk-menu-toggle:hover {
        border-color: rgba(201, 45, 64, .18) !important;
        color: #b12236;
        background: linear-gradient(180deg, #fff 0%, #fff5f6 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .98),
            0 2px 4px rgba(17, 24, 39, .08),
            0 11px 26px rgba(66, 20, 28, .13);
        transform: translateY(-1px);
    }

    .ydk-menu-toggle[aria-expanded="true"]:hover {
        color: #fff;
        background: linear-gradient(180deg, #d03b50 0%, #ad2134 100%);
    }
}

@media (max-width: 420px) {
    .ydk-menu-toggle {
        --ydk-menu-toggle-size: 44px;
        border-radius: 14px;
    }
}

@media (max-width: 1024px) {
    body.epc-mobile-menu-open {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ydk-menu-toggle,
    .ydk-menu-toggle__glyph > span {
        transition: none !important;
    }
}
